diff --git a/app/javascript/mastodon/api_types/media_attachments.ts b/app/javascript/mastodon/api_types/media_attachments.ts
index 8cb798f7604..7385125487e 100644
--- a/app/javascript/mastodon/api_types/media_attachments.ts
+++ b/app/javascript/mastodon/api_types/media_attachments.ts
@@ -31,7 +31,7 @@ export interface ApiImageAttachmentJSON extends BaseApiMediaAttachmentJSON {
 export interface ApiAudioAttachmentJSON extends BaseApiMediaAttachmentJSON {
   type: 'audio';
   meta: {
-    colors: ApiColorsAttachmentMetaJSON;
+    colors?: ApiColorsAttachmentMetaJSON;
     original: ApiVideoAttachmentMetaJSON;
     small: ApiImageAttachmentMetaJSON;
   };
@@ -40,7 +40,7 @@ export interface ApiAudioAttachmentJSON extends BaseApiMediaAttachmentJSON {
 export interface ApiVideoAttachmentJSON extends BaseApiMediaAttachmentJSON {
   type: 'video';
   meta: {
-    colors: ApiColorsAttachmentMetaJSON;
+    colors?: ApiColorsAttachmentMetaJSON;
     original: ApiVideoAttachmentMetaJSON;
     small: ApiImageAttachmentMetaJSON;
     focus?: ApiFocusAttachmentMetaJSON;
diff --git a/app/javascript/mastodon/components/avatar.tsx b/app/javascript/mastodon/components/avatar.tsx
index eeea446d0c6..f33b091bcd9 100644
--- a/app/javascript/mastodon/components/avatar.tsx
+++ b/app/javascript/mastodon/components/avatar.tsx
@@ -15,7 +15,7 @@ interface Props {
     'id' | 'acct' | 'avatar' | 'avatar_static'
   >;
   alt?: string;
-  size?: number;
+  size?: number | null;
   style?: React.CSSProperties;
   inline?: boolean;
   animate?: boolean;
@@ -41,11 +41,14 @@ export const Avatar: React.FC<Props> = ({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
 
-  const style = {
-    ...styleFromParent,
-    width: `${size}px`,
-    height: `${size}px`,
-  };
+  const style =
+    size !== null
+      ? {
+          ...styleFromParent,
+          width: `${size}px`,
+          height: `${size}px`,
+        }
+      : styleFromParent;
 
   const src = hovering || animate ? account?.avatar : account?.avatar_static;
 
diff --git a/app/javascript/mastodon/components/emoji/html.tsx b/app/javascript/mastodon/components/emoji/html.tsx
index 1f392548de0..4d2de6dd15c 100644
--- a/app/javascript/mastodon/components/emoji/html.tsx
+++ b/app/javascript/mastodon/components/emoji/html.tsx
@@ -31,7 +31,7 @@ export const EmojiHTML = <
   onElement,
   onAttribute,
   extraArgs,
-  ref,
+  children,
   ...props
 }: PolymorphicProps<EmojiHTMLProps<Arg>, As>) => {
   const contents = useMemo(
@@ -47,8 +47,10 @@ export const EmojiHTML = <
 
   return (
     <CustomEmojiProvider emojis={extraEmojis}>
-      <AnimateEmojiProvider {...props} ref={ref}>
+      <AnimateEmojiProvider {...props}>
         {contents}
+
+        {children}
       </AnimateEmojiProvider>
     </CustomEmojiProvider>
   );
diff --git a/app/javascript/mastodon/components/status/action_bar.tsx b/app/javascript/mastodon/components/status/action_bar.tsx
index d92a3775f67..42654e03a7b 100644
--- a/app/javascript/mastodon/components/status/action_bar.tsx
+++ b/app/javascript/mastodon/components/status/action_bar.tsx
@@ -3,6 +3,8 @@ import { useCallback, useMemo } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import classNames from 'classnames';
+
 import {
   ArrowsClockwiseIcon,
   BookmarkSimpleIcon,
@@ -202,7 +204,7 @@ export const StatusActionBar: React.FC<StatusActionBarProps> = ({
     isQuotingMe && contextType === 'notifications';
 
   return (
-    <div className={classes.actions}>
+    <div className={classNames(classes.actions, classes.buttonAlign)}>
       <Button
         size='sm'
         variant='ghost'
diff --git a/app/javascript/mastodon/components/status/attachments.tsx b/app/javascript/mastodon/components/status/attachments.tsx
index ddb82759bc3..bde46e53641 100644
--- a/app/javascript/mastodon/components/status/attachments.tsx
+++ b/app/javascript/mastodon/components/status/attachments.tsx
@@ -212,9 +212,9 @@ const MediaAttachments: React.FC<{
           alt={description}
           lang={language}
           poster={attachment.preview_url || defaultPosterUrl}
-          backgroundColor={colors.background}
-          foregroundColor={colors.foreground}
-          accentColor={colors.accent}
+          backgroundColor={colors?.background}
+          foregroundColor={colors?.foreground}
+          accentColor={colors?.accent}
           duration={original.duration}
           deployPictureInPicture={handleDeployPictureInPicture}
           sensitive={sensitive}
diff --git a/app/javascript/mastodon/components/status/content.stories.tsx b/app/javascript/mastodon/components/status/content.stories.tsx
index 93dc5fcc3a2..1789861d6ce 100644
--- a/app/javascript/mastodon/components/status/content.stories.tsx
+++ b/app/javascript/mastodon/components/status/content.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 import type { StatusTranslation } from '@/mastodon/models/status';
-import { statusFactoryImmutable } from '@/testing/factories';
+import { statusFactoryState } from '@/testing/factories';
 
 import { StatusContent } from './content';
 
@@ -20,10 +20,22 @@ const onTranslateFn = fn().mockName('onTranslate');
 const meta = {
   title: 'Components/Status/StatusContent',
   render(args) {
+    const status = statusFactoryState();
+    if (args.translatedTo) {
+      status.translation = {
+        contentHtml: `${args.text}<p><em>(in ${args.translatedTo})</em></p>`,
+        provider: 'Test Translation API',
+        spoiler_text: '',
+        spoilerHtml: '',
+        language: args.translatedTo,
+        detected_source_language: 'en',
+      } satisfies StatusTranslation;
+    }
+
     return (
       <div style={{ width: 'min(600px, 80vw)' }}>
         <StatusContent
-          statusId='1'
+          status={status}
           collapsible={args.collapsible}
           onClick={args.clickable ? onClickFn : undefined}
           onTranslate={args.translatable ? onTranslateFn : undefined}
@@ -56,24 +68,6 @@ const meta = {
         },
       },
     },
-    stateFn(args: StatusContentProps) {
-      let status = statusFactoryImmutable();
-      if (args.translatedTo) {
-        status = status.set('translation', {
-          contentHtml: `${args.text}<p><em>(in ${args.translatedTo})</em></p>`,
-          provider: 'Test Translation API',
-          spoiler_text: '',
-          spoilerHtml: '',
-          language: args.translatedTo,
-          detected_source_language: 'en',
-        } satisfies StatusTranslation);
-      }
-      return {
-        statuses: {
-          '1': status,
-        },
-      };
-    },
   },
 } satisfies Meta<StatusContentProps>;
 
diff --git a/app/javascript/mastodon/components/status/content.tsx b/app/javascript/mastodon/components/status/content.tsx
index c395b0b7633..b43b4909d5d 100644
--- a/app/javascript/mastodon/components/status/content.tsx
+++ b/app/javascript/mastodon/components/status/content.tsx
@@ -1,173 +1,138 @@
 import type React from 'react';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import classnames from 'classnames';
+import classNames from 'classnames';
+
+import { CaretRightIcon } from '@phosphor-icons/react';
 
-import { toggleStatusCollapse } from '@/mastodon/actions/statuses';
-import { useStatus } from '@/mastodon/hooks/useStatus';
 import { useIdentity } from '@/mastodon/identity_context';
 import { languages as preloadedLanguages } from '@/mastodon/initial_state';
-import type { StatusTranslation } from '@/mastodon/models/status';
-import { useAppDispatch, useAppSelector } from '@/mastodon/store';
-import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+import type {
+  ExpandedStatusShape,
+  StatusShape,
+  StatusTranslation,
+} from '@/mastodon/models/status';
+import { useAppSelector } from '@/mastodon/store';
 
+import { Button } from '../button/redesign';
 import { EmojiHTML } from '../emoji/html';
-import { Icon } from '../icon';
-import { Poll } from '../poll';
 
 import { useHandlersForStatus } from './hooks';
+import classes from './styles.module.scss';
 
 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
 
-export const StatusContent: React.FC<{
-  statusId: string;
-  statusContent?: string;
-  onClick?: React.MouseEventHandler;
-  onTranslate?: React.MouseEventHandler<HTMLButtonElement>;
-  collapsible?: boolean;
-}> = ({ statusId, statusContent, onClick, onTranslate, collapsible }) => {
-  const status = useStatus(statusId);
+export const StatusContent: React.FC<
+  {
+    status: StatusShape | ExpandedStatusShape;
+    statusContent?: string;
+    onTranslate?: () => void;
+    onReadMore?: () => void;
+    collapsible?: boolean;
+  } & React.ComponentPropsWithRef<'div'>
+> = ({
+  status,
+  statusContent,
+  onTranslate,
+  onReadMore,
+  collapsible,
+  children,
+  className,
+  ...props
+}) => {
   const { signedIn } = useIdentity();
   const targetLanguages = useAppSelector(
-    (state) =>
-      state.server.translationLanguages.item?.[status?.language ?? 'und'],
+    (state) => state.server.translationLanguages.item?.[status.language],
   );
   const intl = useIntl();
 
   // Determines if a long post should show the read more button.
-  const dispatch = useAppDispatch();
-  const handleCollapse = useCallback(
+  const [collapsed, setCollapsed] = useState(false);
+  const onRef = useCallback(
     (node: HTMLDivElement | null) => {
-      if (!node || status?.collapsed !== null || !collapsible) {
+      if (!node || collapsed) {
         return;
       }
 
-      const text = node.querySelector(':scope > .status__content__text');
-
-      const collapsed =
+      setCollapsed(
         (node.clientHeight > MAX_HEIGHT ||
-          (text !== null && text.scrollWidth > text.clientWidth)) &&
-        !status.spoiler_text;
-
-      dispatch(toggleStatusCollapse(status.id, collapsed));
+          node.scrollWidth > node.clientWidth) &&
+          !status.spoiler_text,
+      );
     },
-    [collapsible, status, dispatch],
-  );
-
-  // Trigger the click event if clicking outside a link, button, or label inside a status.
-  const handleClick: React.MouseEventHandler<HTMLDivElement> = useCallback(
-    (event) => {
-      const { target } = event;
-      if (
-        !onClick ||
-        !(target instanceof Element) ||
-        target.closest(':is(a, button, label)')
-      ) {
-        return;
-      }
-      onClick(event);
-    },
-    [onClick],
+    [collapsed, status.spoiler_text],
   );
 
   const htmlHandlers = useHandlersForStatus(status);
 
-  if (!status) {
-    return null;
-  }
-
   const language = status.translation?.language ?? status.language;
 
-  const renderReadMore = !!onClick && status.collapsed;
-  const readMoreButton = renderReadMore && (
-    <button
-      className='status__content__read-more-button'
-      type='button'
-      onClick={onClick}
-      key='read-more'
-    >
-      <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-      <Icon id='angle-right' icon={ChevronRightIcon} />
-    </button>
-  );
-
-  const renderTranslate =
-    !!onTranslate &&
+  const isCollapsed = !!onReadMore && collapsible && collapsed;
+  const renderTranslate = !!(
+    onTranslate &&
+    !isCollapsed &&
     signedIn &&
     ['public', 'unlisted'].includes(status.visibility) &&
-    status.search_index &&
-    status.search_index.trim().length > 0 &&
-    targetLanguages?.includes(intl.locale.replace(/[_-].*/, ''));
-  const translateButton = renderTranslate && (
-    <TranslateButton onClick={onTranslate} translation={status.translation} />
+    status.search_index?.trim().length &&
+    targetLanguages?.includes(intl.locale.replace(/[_-].*/, ''))
   );
 
-  const poll = !!status.poll && (
-    <Poll
-      pollId={status.poll}
-      statusUrl={status.uri}
-      accountId={status.account}
-      lang={language}
-    />
-  );
-
-  const content = (
+  return (
     <EmojiHTML
-      className='status__content__text status__content__text--visible translate'
+      {...props}
+      className={classNames(
+        className,
+        classes.content,
+        isCollapsed && classes.collapsed,
+      )}
+      ref={onRef}
       lang={language}
       htmlString={
         statusContent ?? status.translation?.contentHtml ?? status.contentHtml
       }
       extraEmojis={status.emojis}
       {...htmlHandlers}
-    />
+    >
+      {children}
+
+      {renderTranslate && (
+        <TranslateButton
+          translation={status.translation}
+          onTranslate={onTranslate}
+        />
+      )}
+
+      {isCollapsed && (
+        <Button
+          size='sm'
+          variant='ghost'
+          onClick={onReadMore}
+          trailingIcon={CaretRightIcon}
+          className={classNames(classes.contentReadMore, classes.buttonAlign)}
+        >
+          <FormattedMessage id='status.read_more' defaultMessage='Read more' />
+        </Button>
+      )}
+    </EmojiHTML>
   );
-
-  const classNames = classnames('status__content', {
-    'status__content--with-action': onClick,
-    'status__content--collapsed': renderReadMore,
-  });
-
-  if (!onClick) {
-    return (
-      <div className={classNames} ref={handleCollapse}>
-        {content}
-        {poll}
-        {translateButton}
-      </div>
-    );
-  }
-
-  /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-  return (
-    <>
-      <div className={classNames} ref={handleCollapse} onClick={handleClick}>
-        {content}
-        {poll}
-        {translateButton}
-      </div>
-
-      {readMoreButton}
-    </>
-  );
-  /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
 };
 
 const TranslateButton: React.FC<{
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  onTranslate: React.MouseEventHandler<HTMLButtonElement>;
   translation?: StatusTranslation;
-}> = ({ translation, onClick }) => {
+}> = ({ translation, onTranslate }) => {
   if (!translation) {
     return (
-      <button
-        type='button'
-        className='status__content__translate-button'
-        onClick={onClick}
+      <Button
+        size='sm'
+        variant='ghost'
+        onClick={onTranslate}
+        className={classes.buttonAlign}
       >
         <FormattedMessage id='status.translate' defaultMessage='Translate' />
-      </button>
+      </Button>
     );
   }
 
@@ -181,12 +146,12 @@ const TranslateButton: React.FC<{
 
   return (
     <div className='translate-button'>
-      <button type='button' className='link-button' onClick={onClick}>
+      <Button size='sm' variant='ghost' onClick={onTranslate}>
         <FormattedMessage
           id='status.show_original'
           defaultMessage='Show original'
         />
-      </button>
+      </Button>
 
       <div className='translate-button__meta'>
         <FormattedMessage
diff --git a/app/javascript/mastodon/components/status/hooks.ts b/app/javascript/mastodon/components/status/hooks.ts
index 2270e144d49..0deb3103030 100644
--- a/app/javascript/mastodon/components/status/hooks.ts
+++ b/app/javascript/mastodon/components/status/hooks.ts
@@ -131,18 +131,6 @@ export function useStatusHandlers({
     [onOpenCallback],
   );
 
-  const onHeaderClick: React.MouseEventHandler = useCallback(
-    (event) => {
-      // Only handle clicks on the empty space above the content
-      if (event.target !== event.currentTarget && event.detail >= 1) {
-        return;
-      }
-
-      onOpenClick(event);
-    },
-    [onOpenClick],
-  );
-
   const acct = status?.account.acct;
   const onOpenProfile = useCallback(() => {
     if (acct) {
@@ -190,7 +178,6 @@ export function useStatusHandlers({
       onOpenClick,
       onExpandedToggle,
       onFilterToggle,
-      onHeaderClick,
       onMention,
       onOpen: () => {
         onOpenCallback();
@@ -208,7 +195,6 @@ export function useStatusHandlers({
       handlerFactory,
       onExpandedToggle,
       onFilterToggle,
-      onHeaderClick,
       onMention,
       onOpenCallback,
       onOpenClick,
diff --git a/app/javascript/mastodon/components/status/redesign/header.tsx b/app/javascript/mastodon/components/status/redesign/header.tsx
index da7f0021766..02b451eaa87 100644
--- a/app/javascript/mastodon/components/status/redesign/header.tsx
+++ b/app/javascript/mastodon/components/status/redesign/header.tsx
@@ -18,14 +18,12 @@ interface StatusRedesignHeaderProps {
   status: Pick<AccountStatusShape, 'id' | 'account' | 'created_at'>;
   children?: React.ReactNode;
   className?: string;
-  avatarSize?: number;
 }
 
 export const StatusRedesignHeader: React.FC<StatusRedesignHeaderProps> = ({
   status,
   children,
   className,
-  avatarSize = 40,
 }) => {
   const account = status.account;
   const handle = useAccountHandle(account);
@@ -44,11 +42,16 @@ export const StatusRedesignHeader: React.FC<StatusRedesignHeaderProps> = ({
 
   return (
     <header className={classNames(className, classes.header)}>
-      <Link {...accountLinkProps} role='presentation' tabIndex={-1}>
-        <Avatar account={account} size={avatarSize} />
+      <Link
+        {...accountLinkProps}
+        role='presentation'
+        tabIndex={-1}
+        className={classes.headerAvatar}
+      >
+        <Avatar account={account} size={null} />
       </Link>
 
-      <div className={classes.headerNameWrapper}>
+      <div>
         <p className={classes.headerName}>
           <Link
             {...accountLinkProps}
diff --git a/app/javascript/mastodon/components/status/redesign/styles.module.scss b/app/javascript/mastodon/components/status/redesign/styles.module.scss
index 9e644e5079d..24dcbea2aa5 100644
--- a/app/javascript/mastodon/components/status/redesign/styles.module.scss
+++ b/app/javascript/mastodon/components/status/redesign/styles.module.scss
@@ -3,9 +3,10 @@
 // Header
 
 .header {
-  display: flex;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: 1fr;
   align-items: center;
-  gap: var(--space-xs);
   color: var(--color-text-secondary);
 
   a {
@@ -23,8 +24,14 @@
   }
 }
 
-.headerNameWrapper {
-  flex-grow: 1;
+.headerAvatar {
+  padding-inline-end: var(--col-gap);
+
+  > span {
+    display: block;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+  }
 }
 
 .headerName {
diff --git a/app/javascript/mastodon/components/status/status.stories.tsx b/app/javascript/mastodon/components/status/status.stories.tsx
index ce30f9e42b8..77083b34ca8 100644
--- a/app/javascript/mastodon/components/status/status.stories.tsx
+++ b/app/javascript/mastodon/components/status/status.stories.tsx
@@ -21,6 +21,7 @@ import type { StatusContextType } from './types';
 interface StatusStoryProps extends AttachmentArgs {
   // Contents
   text: string;
+  tags: string;
   visibility: StatusVisibility;
   isReblog?: boolean;
   isReply?: boolean;
@@ -169,6 +170,7 @@ const meta = {
     isPoll: categoryContents,
     isQuote: categoryContents,
     text: categoryContents,
+    tags: categoryContents,
     attachment1: {
       ...categoryContents,
       ...attachmentArgTypes.attachment1,
@@ -232,6 +234,7 @@ const meta = {
   },
   args: {
     text: 'This is a status',
+    tags: '',
     visibility: 'public',
     isReblog: false,
     isReply: false,
@@ -283,7 +286,8 @@ const meta = {
       },
     },
     stateFn({
-      text,
+      text: textBase,
+      tags: tagsStr,
       contentWarning,
       visibility,
       attachment1,
@@ -301,6 +305,28 @@ const meta = {
     }: StatusStoryProps) {
       const account = accountFactoryImmutable();
 
+      const tags = tagsStr
+        .split(',')
+        .map((tagStr) => {
+          const tag = tagStr.trim().replace(/^#/, '');
+          if (!tag) {
+            return null;
+          }
+          return {
+            name: tag,
+            url: `https://example.com/tags/${tag}`,
+          };
+        })
+        .filter((tag) => !!tag);
+
+      let text = textBase.trim();
+      if (tags.length > 0) {
+        const tagText = tags
+          .map((tag) => `<a href="${tag.url}" rel="tag">#${tag.name}</a>`)
+          .join(' ');
+        text += `\n${tagText}`;
+      }
+
       const status = statusFactoryImmutable({
         text,
         spoiler_text: contentWarning,
@@ -310,6 +336,7 @@ const meta = {
           attachment2,
           attachment3,
         ),
+        tags,
         reblogged: hasReblogged,
         favourited: hasFavourited,
         bookmarked: hasBookmarked,
diff --git a/app/javascript/mastodon/components/status/status.tsx b/app/javascript/mastodon/components/status/status.tsx
index 9a8ee6f116d..014375f8369 100644
--- a/app/javascript/mastodon/components/status/status.tsx
+++ b/app/javascript/mastodon/components/status/status.tsx
@@ -12,6 +12,7 @@ import { ContentWarning } from '../content_warning';
 import { FilterWarning } from '../filter_warning';
 import { computeHashtagBarForStatus, HashtagBar } from '../hashtag_bar';
 import { Hotkeys } from '../hotkeys';
+import { Poll } from '../poll';
 
 import { StatusActionBar } from './action_bar';
 import { StatusAttachments } from './attachments';
@@ -53,8 +54,6 @@ const selectStatusReblog = createAppSelector(
 export const StatusRedesign: React.FC<StatusRedesignProps> = ({
   id,
   muted,
-  rootId,
-  unread,
   skipPrepend,
   unfocusable,
   contextType,
@@ -64,7 +63,6 @@ export const StatusRedesign: React.FC<StatusRedesignProps> = ({
   showActions = true,
   scrollKey,
   children,
-  avatarSize = 40,
   withCounters,
   withDismiss,
   onOpen,
@@ -86,7 +84,7 @@ export const StatusRedesign: React.FC<StatusRedesignProps> = ({
     reblogAcct: parent?.account.acct,
     isQuote: isQuotedPost,
   });
-  const { statusContent, hashtagsInBar } = useMemo(
+  const { statusContent, hashtagsInBar = [] } = useMemo(
     (): Partial<ReturnType<typeof computeHashtagBarForStatus>> =>
       status ? computeHashtagBarForStatus(status) : {},
     [status],
@@ -95,10 +93,8 @@ export const StatusRedesign: React.FC<StatusRedesignProps> = ({
   // Handlers
   const {
     showDespiteFilter,
-    onHeaderClick,
     onExpandedToggle,
     onFilterToggle,
-    onOpenClick,
     onTranslate,
     ...handlers
   } = useStatusHandlers({ status, contextType, onOpen });
@@ -125,10 +121,7 @@ export const StatusRedesign: React.FC<StatusRedesignProps> = ({
 
   if (hidden) {
     return (
-      <StatusHotkeys
-        {...hotkeysProps}
-        className={classNames('status__wrapper', { focusable: !muted })}
-      >
+      <StatusHotkeys {...hotkeysProps}>
         <span>{status.account.display_name || status.account.username}</span>
         {status.spoiler_text && <span>{status.spoiler_text}</span>}
         {expanded && <span>{status.content}</span>}
@@ -139,17 +132,7 @@ export const StatusRedesign: React.FC<StatusRedesignProps> = ({
   return (
     <StatusHotkeys
       {...hotkeysProps}
-      className={classNames(
-        classes.root,
-        'status__wrapper',
-        `status__wrapper-${status.visibility}`,
-        {
-          'status__wrapper-reply': !!status.in_reply_to_id,
-          'status__wrapper--in-thread': !!rootId,
-          unread,
-          focusable: !muted,
-        },
-      )}
+      className={classNames(classes.root)}
       data-featured={featured ? 'true' : null}
       aria-label={screenReaderText}
       data-nosnippet={status.account.noindex || undefined}
@@ -162,7 +145,7 @@ export const StatusRedesign: React.FC<StatusRedesignProps> = ({
         />
       )}
 
-      <StatusRedesignHeader status={status} avatarSize={avatarSize}>
+      <StatusRedesignHeader status={status} className={classes.header}>
         {headerContents}
       </StatusRedesignHeader>
 
@@ -183,37 +166,43 @@ export const StatusRedesign: React.FC<StatusRedesignProps> = ({
       )}
 
       {expanded && (
-        <>
-          <StatusContent
-            statusId={status.id}
-            statusContent={statusContent}
-            onClick={onOpenClick}
-            onTranslate={onTranslate}
-            collapsible
-          />
-
-          <StatusAttachments statusId={status.id} contextType={contextType} />
-
-          {hashtagsInBar && (
-            <HashtagBar
-              hashtags={hashtagsInBar}
+        <StatusContent
+          status={status}
+          statusContent={statusContent}
+          onReadMore={handlers.onOpen}
+          onTranslate={onTranslate}
+          collapsible
+        >
+          {!!status.poll && (
+            <Poll
+              pollId={status.poll}
+              statusUrl={status.uri}
               accountId={status.account.id}
+              lang={status.translation?.language ?? status.language}
             />
           )}
 
+          <StatusAttachments statusId={status.id} contextType={contextType} />
+
           {children}
-        </>
+        </StatusContent>
       )}
 
-      {showActions && !isQuotedPost && (
-        <StatusActionBar
-          scrollKey={scrollKey}
-          statusId={status.id}
-          contextType={contextType}
-          withDismiss={withDismiss}
-          withCounters={withCounters}
-        />
-      )}
+      <footer className={classes.footer}>
+        {expanded && hashtagsInBar.length > 0 && (
+          <HashtagBar hashtags={hashtagsInBar} accountId={status.account.id} />
+        )}
+
+        {showActions && !isQuotedPost && (
+          <StatusActionBar
+            scrollKey={scrollKey}
+            statusId={status.id}
+            contextType={contextType}
+            withDismiss={withDismiss}
+            withCounters={withCounters}
+          />
+        )}
+      </footer>
     </StatusHotkeys>
   );
 };
diff --git a/app/javascript/mastodon/components/status/styles.module.scss b/app/javascript/mastodon/components/status/styles.module.scss
index 4403dab98ee..7bb405182e9 100644
--- a/app/javascript/mastodon/components/status/styles.module.scss
+++ b/app/javascript/mastodon/components/status/styles.module.scss
@@ -1,12 +1,67 @@
+@use '@/styles/mastodon/mixins';
+
 .root {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
+  --col-gap: var(--space-xs);
+  --avatar-size: 40px;
+
+  display: grid;
+  grid-template-columns: calc(var(--avatar-size) + var(--col-gap)) auto;
+  grid-template-rows:
+    minmax(calc(var(--avatar-size) + var(--col-gap)), auto)
+    1fr auto;
+  row-gap: var(--space-xs);
+}
+
+.header {
+  grid-column: span 2;
+}
+
+.content,
+.footer {
+  grid-column: 2;
+}
+
+.content {
+  @include mixins.type-body;
+
+  p:not(:last-child) {
+    margin-block-end: 1em;
+  }
+
+  a {
+    color: var(--color-text-brand);
+  }
+
+  &.collapsed {
+    position: relative;
+    max-height: 15lh;
+    overflow-y: clip;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset-inline: 0;
+      inset-block-end: 0;
+      height: calc(var(--space-4xl) * 2);
+      background: linear-gradient(
+        to bottom,
+        transparent,
+        var(--color-bg-blend)
+      );
+      pointer-events: none;
+    }
+  }
+}
+
+.contentReadMore {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  z-index: 1;
 }
 
 .actions {
   display: flex;
-  margin-inline-start: calc(-1 * var(--space-sm));
 
   button:not(:hover, :active) {
     opacity: 0.7;
@@ -16,3 +71,7 @@
 .actionsButtonGap {
   margin-inline-end: auto;
 }
+
+.buttonAlign {
+  margin-inline-start: calc(-1 * var(--space-sm));
+}