diff --git a/app/soapbox/components/media_gallery.tsx b/app/soapbox/components/media_gallery.tsx
index 4f672865b..f899d7ba4 100644
--- a/app/soapbox/components/media_gallery.tsx
+++ b/app/soapbox/components/media_gallery.tsx
@@ -1,6 +1,5 @@
 import classNames from 'clsx';
 import React, { useState, useRef, useEffect } from 'react';
-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import Blurhash from 'soapbox/components/blurhash';
 import Icon from 'soapbox/components/icon';
@@ -13,8 +12,6 @@ import { truncateFilename } from 'soapbox/utils/media';
 import { isIOS } from '../is_mobile';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
 
-import { Button, Text } from './ui';
-
 import type { Property } from 'csstype';
 import type { List as ImmutableList } from 'immutable';
 
@@ -39,10 +36,6 @@ interface SizeData {
   width: number,
 }
 
-const messages = defineMessages({
-  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Hide' },
-});
-
 const withinLimits = (aspectRatio: number) => {
   return aspectRatio >= minimumAspectRatio && aspectRatio <= maximumAspectRatio;
 };
@@ -276,35 +269,16 @@ interface IMediaGallery {
 const MediaGallery: React.FC<IMediaGallery> = (props) => {
   const {
     media,
-    sensitive = false,
     defaultWidth = 0,
-    onToggleVisibility,
     onOpenMedia,
     cacheWidth,
     compact,
     height,
   } = props;
-
-  const intl = useIntl();
-
-  const settings = useSettings();
-  const displayMedia = settings.get('displayMedia') as string | undefined;
-
-  const [visible, setVisible] = useState<boolean>(props.visible !== undefined ? props.visible : (displayMedia !== 'hide_all' && !sensitive || displayMedia === 'show_all'));
   const [width, setWidth] = useState<number>(defaultWidth);
 
   const node = useRef<HTMLDivElement>(null);
 
-  const handleOpen: React.MouseEventHandler = (e) => {
-    e.stopPropagation();
-
-    if (onToggleVisibility) {
-      onToggleVisibility();
-    } else {
-      setVisible(!visible);
-    }
-  };
-
   const handleClick = (index: number) => {
     onOpenMedia(media, index);
   };
@@ -545,20 +519,13 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
       index={i}
       size={sizeData.size}
       displayWidth={sizeData.width}
-      visible={visible}
+      visible={!!props.visible}
       dimensions={sizeData.itemsDimensions[i]}
       last={i === ATTACHMENT_LIMIT - 1}
       total={media.size}
     />
   ));
 
-  let warning;
-
-  if (sensitive) {
-    warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
-  } else {
-    warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
-  }
 
   useEffect(() => {
     if (node.current) {
@@ -572,60 +539,8 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
     }
   }, [node.current]);
 
-  useEffect(() => {
-    setVisible(!!props.visible);
-  }, [props.visible]);
-
   return (
     <div className={classNames('media-gallery', { 'media-gallery--compact': compact })} style={sizeData.style} ref={node}>
-      <div
-        className={classNames({
-          'absolute z-40': true,
-          'inset-0': !visible && !compact,
-          'left-1 top-1': visible || compact,
-        })}
-      >
-        {sensitive && (
-          (visible || compact) ? (
-            <Button
-              text={intl.formatMessage(messages.toggle_visible)}
-              icon={visible ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
-              onClick={handleOpen}
-              theme='transparent'
-              size='sm'
-            />
-          ) : (
-            <div
-              onClick={(e) => e.stopPropagation()}
-              className={
-                classNames({
-                  'bg-gray-800/75 cursor-default backdrop-blur-sm rounded-lg w-full h-full border-0 flex items-center justify-center': true,
-                })
-              }
-            >
-              <div className='text-center w-3/4 mx-auto space-y-4'>
-                <div className='space-y-1'>
-                  <Text theme='white' weight='semibold'>{warning}</Text>
-                  <Text size='sm'>
-                    <FormattedMessage id='status.sensitive_warning.subtitle' defaultMessage='This content may not be suitable for all audiences.' />
-                  </Text>
-                </div>
-
-                <Button
-                  type='button'
-                  theme='outline'
-                  size='sm'
-                  icon={require('@tabler/icons/eye.svg')}
-                  onClick={handleOpen}
-                >
-                  <FormattedMessage id='status.sensitive_warning.action' defaultMessage='Show content' />
-                </Button>
-              </div>
-            </div>
-          )
-        )}
-      </div>
-
       {children}
     </div>
   );
diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index 0052a9564..4445e67b5 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@@ -30,7 +30,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
   muted = false,
   onClick,
   showMedia = true,
-  onToggleVisibility = () => {},
+  onToggleVisibility = () => { },
 }) => {
   const dispatch = useAppDispatch();
   const [mediaWrapperWidth, setMediaWrapperWidth] = useState<number | undefined>(undefined);
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 27b1731bd..499460cc3 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -19,7 +19,7 @@ import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
 import StatusContent from './status_content';
 import ModerationOverlay from './statuses/moderation-overlay';
-import { Card, HStack, Text } from './ui';
+import { Card, HStack, Stack, Text } from './ui';
 
 import type { Map as ImmutableMap } from 'immutable';
 import type {
@@ -80,7 +80,7 @@ const Status: React.FC<IStatus> = (props) => {
   const didShowCard = useRef(false);
   const node = useRef<HTMLDivElement>(null);
 
-  const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
+  const [showMedia, setShowMedia] = useState<boolean>(status.visibility === 'self' ? false : defaultMediaVisibility(status, displayMedia));
 
   const actualStatus = getActualStatus(status);
 
@@ -90,7 +90,7 @@ const Status: React.FC<IStatus> = (props) => {
   }, []);
 
   useEffect(() => {
-    setShowMedia(defaultMediaVisibility(status, displayMedia));
+    setShowMedia(status.visibility === 'self' ? false : defaultMediaVisibility(status, displayMedia));
   }, [status.id]);
 
   const handleToggleMediaVisibility = (): void => {
@@ -301,6 +301,7 @@ const Status: React.FC<IStatus> = (props) => {
   const accountAction = props.accountAction || reblogElement;
 
   const inReview = status.visibility === 'self';
+  const isSensitive = status.sensitive;
 
   return (
     <HotKeys handlers={handlers} data-testid='status'>
@@ -351,43 +352,52 @@ const Status: React.FC<IStatus> = (props) => {
             />
           </div>
 
-          <div
-            className={classNames('status__content-wrapper relative', {
-              'min-h-[220px]': inReview,
-            })}
-          >
-            {inReview ? (
-              <ModerationOverlay />
-            ) : null}
+          <div className='status__content-wrapper'>
+            <Stack
+              justifyContent='end'
+              className={
+                classNames('relative', {
+                  'min-h-[220px]': inReview || isSensitive,
+                })
+              }
+            >
+              {(inReview || isSensitive) ? (
+                <ModerationOverlay
+                  status={status}
+                  visible={showMedia}
+                  onToggleVisibility={handleToggleMediaVisibility}
+                />
+              ) : null}
 
-            {!group && actualStatus.group && (
-              <div className='status__meta'>
-                Posted in <NavLink to={`/groups/${actualStatus.getIn(['group', 'id'])}`}>{String(actualStatus.getIn(['group', 'title']))}</NavLink>
-              </div>
-            )}
+              {!group && actualStatus.group && (
+                <div className='status__meta'>
+                  Posted in <NavLink to={`/groups/${actualStatus.getIn(['group', 'id'])}`}>{String(actualStatus.getIn(['group', 'title']))}</NavLink>
+                </div>
+              )}
 
-            <StatusReplyMentions
-              status={actualStatus}
-              hoverable={hoverable}
-            />
+              <StatusReplyMentions
+                status={actualStatus}
+                hoverable={hoverable}
+              />
 
-            <StatusContent
-              status={actualStatus}
-              onClick={handleClick}
-              expanded={!status.hidden}
-              onExpandedToggle={handleExpandedToggle}
-              collapsable
-            />
+              <StatusContent
+                status={actualStatus}
+                onClick={handleClick}
+                expanded={!status.hidden}
+                onExpandedToggle={handleExpandedToggle}
+                collapsable
+              />
 
-            <StatusMedia
-              status={actualStatus}
-              muted={muted}
-              onClick={handleClick}
-              showMedia={showMedia}
-              onToggleVisibility={handleToggleMediaVisibility}
-            />
+              <StatusMedia
+                status={actualStatus}
+                muted={muted}
+                onClick={handleClick}
+                showMedia={showMedia}
+                onToggleVisibility={handleToggleMediaVisibility}
+              />
 
-            {quote}
+              {quote}
+            </Stack>
 
             {!hideActionBar && (
               <div className='pt-4'>
diff --git a/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx b/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx
index a94923c55..e8a0dc5ef 100644
--- a/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx
+++ b/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx
@@ -1,19 +1,111 @@
+import { Map as ImmutableMap } from 'immutable';
 import React from 'react';
 
-import { fireEvent, render, screen } from '../../../jest/test-helpers';
+import { normalizeStatus } from 'soapbox/normalizers';
+import { ReducerStatus } from 'soapbox/reducers/statuses';
+
+import { fireEvent, render, rootState, screen } from '../../../jest/test-helpers';
 import ModerationOverlay from '../moderation-overlay';
 
 describe('<ModerationOverlay />', () => {
-  it('defaults to enabled', () => {
-    render(<ModerationOverlay />);
-    expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Content Under Review');
+  let status: ReducerStatus;
+
+  describe('when the Status is marked as sensitive', () => {
+    beforeEach(() => {
+      status = normalizeStatus({ sensitive: true }) as ReducerStatus;
+    });
+
+    it('displays the "Sensitive content" warning', () => {
+      render(<ModerationOverlay status={status} />);
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Sensitive content');
+    });
+
+    it('can be toggled', () => {
+      render(<ModerationOverlay status={status} />);
+
+      fireEvent.click(screen.getByTestId('button'));
+      expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Sensitive content');
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Hide');
+
+      fireEvent.click(screen.getByTestId('button'));
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Sensitive content');
+      expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Hide');
+    });
   });
 
-  it('can be toggled', () => {
-    render(<ModerationOverlay />);
+  describe('when the Status is marked as in review', () => {
+    beforeEach(() => {
+      status = normalizeStatus({ visibility: 'self', sensitive: false }) as ReducerStatus;
+    });
 
-    fireEvent.click(screen.getByTestId('button'));
-    expect(screen.getByTestId('moderation-overlay')).not.toHaveTextContent('Content Under Review');
-    expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Hide');
+    it('displays the "Under review" warning', () => {
+      render(<ModerationOverlay status={status} />);
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
+    });
+
+    it('can be toggled', () => {
+      render(<ModerationOverlay status={status} />);
+
+      fireEvent.click(screen.getByTestId('button'));
+      expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Content Under Review');
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Hide');
+
+      fireEvent.click(screen.getByTestId('button'));
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
+      expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Hide');
+    });
+  });
+
+  describe('when the Status is marked as in review and sensitive', () => {
+    beforeEach(() => {
+      status = normalizeStatus({ visibility: 'self', sensitive: true }) as ReducerStatus;
+    });
+
+    it('displays the "Under review" warning', () => {
+      render(<ModerationOverlay status={status} />);
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
+    });
+
+    it('can be toggled', () => {
+      render(<ModerationOverlay status={status} />);
+
+      fireEvent.click(screen.getByTestId('button'));
+      expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Content Under Review');
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Hide');
+
+      fireEvent.click(screen.getByTestId('button'));
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
+      expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Hide');
+    });
+  });
+
+  describe('when the Status is marked as sensitive and displayMedia set to "show_all"', () => {
+    let store: any;
+
+    beforeEach(() => {
+      status = normalizeStatus({ sensitive: true }) as ReducerStatus;
+      store = rootState
+        .set('settings', ImmutableMap({
+          displayMedia: 'show_all',
+        }));
+    });
+
+    it('displays the "Under review" warning', () => {
+      render(<ModerationOverlay status={status} />, undefined, store);
+      expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Sensitive content');
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Hide');
+    });
+
+    it('can be toggled', () => {
+      render(<ModerationOverlay status={status} />, undefined, store);
+
+      fireEvent.click(screen.getByTestId('button'));
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Sensitive content');
+      expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Hide');
+
+      fireEvent.click(screen.getByTestId('button'));
+      expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Sensitive content');
+      expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Hide');
+    });
   });
 });
diff --git a/app/soapbox/components/statuses/moderation-overlay.tsx b/app/soapbox/components/statuses/moderation-overlay.tsx
index 6d572eb3a..b85414c2e 100644
--- a/app/soapbox/components/statuses/moderation-overlay.tsx
+++ b/app/soapbox/components/statuses/moderation-overlay.tsx
@@ -1,78 +1,118 @@
 import classNames from 'clsx';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useSoapboxConfig } from 'soapbox/hooks';
+import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
 
 import { Button, HStack, Text } from '../ui';
 
+import type { Status as StatusEntity } from 'soapbox/types/entities';
+
 const messages = defineMessages({
-  hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide' },
-  title: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' },
-  subtitle: { id: 'moderation_overlay.subtitle', defaultMessage: 'This Post has been sent to Moderation for review and is only visible to you. If you believe this is an error please contact Support.' },
+  hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide content' },
+  sensitiveTitle: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
+  underReviewTitle: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' },
+  underReviewSubtitle: { id: 'moderation_overlay.subtitle', defaultMessage: 'This Post has been sent to Moderation for review and is only visible to you. If you believe this is an error please contact Support.' },
+  sensitiveSubtitle: { id: 'status.sensitive_warning.subtitle', defaultMessage: 'This content may not be suitable for all audiences.' },
   contact: { id: 'moderation_overlay.contact', defaultMessage: 'Contact' },
   show: { id: 'moderation_overlay.show', defaultMessage: 'Show Content' },
 });
 
-const ModerationOverlay = () => {
+interface IModerationOverlay {
+  status: StatusEntity
+  onToggleVisibility?(): void
+  visible?: boolean
+}
+
+const ModerationOverlay = (props: IModerationOverlay) => {
+  const { onToggleVisibility, status } = props;
+  const isUnderReview = status.visibility === 'self';
+  const isSensitive = status.sensitive;
+
+  const settings = useSettings();
+  const displayMedia = settings.get('displayMedia') as string | undefined;
+
+  // under review ovverides displaymedia
+
   const intl = useIntl();
 
   const { links } = useSoapboxConfig();
 
-  const [visible, setVisible] = useState<boolean>(false);
+  const [visible, setVisible] = useState<boolean>(
+    isUnderReview === true ? false : null
+      || (
+        props.visible !== undefined
+          ? props.visible
+          : (displayMedia !== 'hide_all' && !isSensitive || displayMedia === 'show_all')
+      ),
+  );
 
   const toggleVisibility = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
 
-    setVisible((prevValue) => !prevValue);
+    if (onToggleVisibility) {
+      onToggleVisibility();
+    } else {
+      setVisible((prevValue) => !prevValue);
+    }
   };
 
+  useEffect(() => {
+    if (typeof props.visible !== 'undefined') {
+      setVisible(!!props.visible);
+    }
+  }, [props.visible]);
+
   return (
     <div
       className={classNames('absolute z-40', {
         'cursor-default backdrop-blur-lg rounded-lg w-full h-full border-0 flex justify-center items-center': !visible,
         'bg-gray-800/75 inset-0': !visible,
-        'top-1 left-1': visible,
+        'bottom-1 right-1': visible,
       })}
-      data-testid='moderation-overlay'
+      data-testid='sensitive-overlay'
     >
       {visible ? (
         <Button
           text={intl.formatMessage(messages.hide)}
           icon={require('@tabler/icons/eye-off.svg')}
           onClick={toggleVisibility}
-          theme='transparent'
+          theme='primary'
           size='sm'
         />
       ) : (
         <div className='text-center w-3/4 mx-auto space-y-4'>
           <div className='space-y-1'>
             <Text theme='white' weight='semibold'>
-              {intl.formatMessage(messages.title)}
+              {intl.formatMessage(isUnderReview ? messages.underReviewTitle : messages.sensitiveTitle)}
             </Text>
 
             <Text theme='white' size='sm' weight='medium'>
-              {intl.formatMessage(messages.subtitle)}
+              {intl.formatMessage(isUnderReview ? messages.underReviewSubtitle : messages.sensitiveSubtitle)}
             </Text>
           </div>
 
           <HStack alignItems='center' justifyContent='center' space={2}>
-            {links.get('support') && (
-              <a
-                href={links.get('support')}
-                target='_blank'
-                onClick={(event) => event.stopPropagation()}
-              >
-                <Button
-                  type='button'
-                  theme='outline'
-                  size='sm'
-                  icon={require('@tabler/icons/headset.svg')}
-                >
-                  {intl.formatMessage(messages.contact)}
-                </Button>
-              </a>
-            )}
+            {isUnderReview ? (
+              <>
+                {links.get('support') && (
+                  <a
+                    href={links.get('support')}
+                    target='_blank'
+                    onClick={(event) => event.stopPropagation()}
+                  >
+                    <Button
+                      type='button'
+                      theme='outline'
+                      size='sm'
+                      icon={require('@tabler/icons/headset.svg')}
+                    >
+                      {intl.formatMessage(messages.contact)}
+                    </Button>
+                  </a>
+                )}
+              </>
+            ) : null}
 
             <Button
               type='button'
diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index b161d4949..660f46e36 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -15,6 +15,7 @@ const spaces = {
 
 const justifyContentOptions = {
   center: 'justify-center',
+  end: 'justify-end',
 };
 
 const alignItemsOptions = {
@@ -27,7 +28,7 @@ interface IStack extends React.HTMLAttributes<HTMLDivElement> {
   /** Horizontal alignment of children. */
   alignItems?: 'center'
   /** Vertical alignment of children. */
-  justifyContent?: 'center'
+  justifyContent?: keyof typeof justifyContentOptions
   /** Extra class names on the <div> element. */
   className?: string
   /** Whether to let the flexbox grow. */
diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx
index a7db21f2c..b3811de9b 100644
--- a/app/soapbox/features/status/components/detailed-status.tsx
+++ b/app/soapbox/features/status/components/detailed-status.tsx
@@ -1,3 +1,4 @@
+import classNames from 'clsx';
 import React, { useRef } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
 
@@ -5,7 +6,8 @@ import Icon from 'soapbox/components/icon';
 import StatusMedia from 'soapbox/components/status-media';
 import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
 import StatusContent from 'soapbox/components/status_content';
-import { HStack, Text } from 'soapbox/components/ui';
+import ModerationOverlay from 'soapbox/components/statuses/moderation-overlay';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
 import { getActualStatus } from 'soapbox/utils/status';
@@ -48,6 +50,9 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
   const { account } = actualStatus;
   if (!account || typeof account !== 'object') return null;
 
+  const inReview = actualStatus.visibility === 'self';
+  const isSensitive = actualStatus.sensitive;
+
   let statusTypeIcon = null;
 
   let quote;
@@ -85,19 +90,36 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
 
         <StatusReplyMentions status={actualStatus} />
 
-        <StatusContent
-          status={actualStatus}
-          expanded={!actualStatus.hidden}
-          onExpandedToggle={handleExpandedToggle}
-        />
+        <Stack
+          justifyContent='end'
+          className={
+            classNames('relative', {
+              'min-h-[220px]': inReview || isSensitive,
+            })
+          }
+        >
+          {(inReview || isSensitive) ? (
+            <ModerationOverlay
+              status={status}
+              visible={showMedia}
+              onToggleVisibility={onToggleMediaVisibility}
+            />
+          ) : null}
 
-        <StatusMedia
-          status={actualStatus}
-          showMedia={showMedia}
-          onToggleVisibility={onToggleMediaVisibility}
-        />
+          <StatusContent
+            status={actualStatus}
+            expanded={!actualStatus.hidden}
+            onExpandedToggle={handleExpandedToggle}
+          />
 
-        {quote}
+          <StatusMedia
+            status={actualStatus}
+            showMedia={showMedia}
+            onToggleVisibility={onToggleMediaVisibility}
+          />
+
+          {quote}
+        </Stack>
 
         <HStack justifyContent='between' alignItems='center' className='py-2' wrap>
           <StatusInteractionBar status={actualStatus} />
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 2ba338bcc..afd6897ea 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -156,7 +156,7 @@ const Thread: React.FC<IThread> = (props) => {
     };
   });
 
-  const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
+  const [showMedia, setShowMedia] = useState<boolean>(status?.visibility === 'self' ? false : defaultMediaVisibility(status, displayMedia));
   const [isLoaded, setIsLoaded] = useState<boolean>(!!status);
   const [next, setNext] = useState<string>();
 
@@ -165,7 +165,7 @@ const Thread: React.FC<IThread> = (props) => {
   const scroller = useRef<VirtuosoHandle>(null);
 
   /** Fetch the status (and context) from the API. */
-  const fetchData = async() => {
+  const fetchData = async () => {
     const { params } = props;
     const { statusId } = params;
     const { next } = await dispatch(fetchStatusWithContext(statusId));
@@ -393,7 +393,7 @@ const Thread: React.FC<IThread> = (props) => {
 
   // Reset media visibility if status changes.
   useEffect(() => {
-    setShowMedia(defaultMediaVisibility(status, displayMedia));
+    setShowMedia(status?.visibility === 'self' ? false : defaultMediaVisibility(status, displayMedia));
   }, [status?.id]);
 
   // Scroll focused status into view when thread updates.
@@ -414,7 +414,7 @@ const Thread: React.FC<IThread> = (props) => {
     if (next && status) {
       dispatch(fetchNext(status.id, next)).then(({ next }) => {
         setNext(next);
-      }).catch(() => {});
+      }).catch(() => { });
     }
   }, 300, { leading: true }), [next, status]);
 
@@ -471,7 +471,11 @@ const Thread: React.FC<IThread> = (props) => {
           aria-label={textForScreenReader(intl, status)}
         >
           {inReview ? (
-            <ModerationOverlay />
+            <ModerationOverlay
+              status={status}
+              visible={showMedia}
+              onToggleVisibility={handleToggleMediaVisibility}
+            />
           ) : null}
 
           <DetailedStatus