diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx
index bd1d4ade8..2024eaf2f 100644
--- a/packages/pl-fe/src/components/status-content.tsx
+++ b/packages/pl-fe/src/components/status-content.tsx
@@ -182,7 +182,12 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
             theme='muted'
             size='xs'
             onClick={toggleExpanded}
-            icon={expanded ? require('@tabler/icons/outline/chevron-up.svg') : require('@tabler/icons/outline/chevron-down.svg')}
+            icon={require('@tabler/icons/outline/chevron-down.svg')}
+            iconClassName={clsx(
+              'transition-transform', {
+                'rotate-180': expanded,
+              },
+            )}
           >
             {expanded
               ? <FormattedMessage id='status.spoiler.collapse' defaultMessage='Collapse' />
@@ -193,112 +198,114 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
     );
   }
 
-  if (expandable && !expanded) return <>{output}</>;
+  const hasPoll = !!status.poll_id;
 
-  let quote;
+  if (!expandable || expanded) {
+    let quote;
 
-  if (withMedia && status.quote_id) {
-    if ((status.quote_visible ?? true) === false) {
-      quote = (
-        <div className='quoted-status-tombstone'>
-          <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
-        </div>
-      );
+    if (withMedia && status.quote_id) {
+      if ((status.quote_visible ?? true) === false) {
+        quote = (
+          <div className='quoted-status-tombstone'>
+            <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
+          </div>
+        );
+      } else {
+        quote = <QuotedStatus statusId={status.quote_id} />;
+      }
+    }
+
+    const media = withMedia && ((quote || status.card || status.media_attachments.length > 0)) && (
+      <Stack space={4} key='media'>
+        {(status.media_attachments.length > 0 || (status.card && !quote)) && (
+          <div className='relative'>
+            <SensitiveContentOverlay status={status} />
+            <StatusMedia status={status} />
+          </div>
+        )}
+
+        {quote}
+      </Stack>
+    );
+
+    if (onClick) {
+      if (status.content) {
+        output.push(
+          <Markup
+            ref={node}
+            tabIndex={0}
+            key='content'
+            className={className}
+            direction={direction}
+            lang={status.language || undefined}
+            size={textSize}
+          >
+            {parsedContent}
+          </Markup>,
+        );
+      }
+
+      if (collapsed) {
+        output.push(<ReadMoreButton onClick={onClick} key='read-more' quote={isQuote} poll={hasPoll} />);
+      }
+
+      if (status.poll_id) {
+        output.push(<Poll id={status.poll_id} key='poll' status={status} language={statusMeta.currentLanguage} />);
+      }
+
+      if (translatable) {
+        output.push(<TranslateButton status={status} key='translate' />);
+      }
+
+      if (media) {
+        output.push(media);
+      }
+
+      if (hashtags.length) {
+        output.push(<HashtagsBar key='hashtags' hashtags={hashtags} />);
+      }
     } else {
-      quote = <QuotedStatus statusId={status.quote_id} />;
+      if (status.content) {
+        output.push(
+          <Markup
+            ref={node}
+            tabIndex={0}
+            key='content'
+            className={className}
+            direction={direction}
+            lang={status.language || undefined}
+            size={textSize}
+          >
+            {parsedContent}
+          </Markup>,
+        );
+      }
+
+      if (collapsed) {
+        output.push(<ReadMoreButton onClick={() => {}} key='read-more' quote={isQuote} preview={preview} />);
+      }
+
+      if (status.poll_id) {
+        output.push(<Poll id={status.poll_id} key='poll' status={status} language={statusMeta.currentLanguage} />);
+      }
+
+      if (translatable) {
+        output.push(<TranslateButton status={status} />);
+      }
+
+      if (media) {
+        output.push(media);
+      }
+
+      if (hashtags.length) {
+        output.push(<HashtagsBar key='hashtags' hashtags={hashtags} />);
+      }
     }
   }
 
-  const media = withMedia && ((quote || status.card || status.media_attachments.length > 0)) && (
-    <Stack space={4} key='media'>
-      {(status.media_attachments.length > 0 || (status.card && !quote)) && (
-        <div className='relative'>
-          <SensitiveContentOverlay status={status} />
-          <StatusMedia status={status} />
-        </div>
-      )}
-
-      {quote}
-    </Stack>
-  );
-
   if (onClick) {
-    if (status.content) {
-      output.push(
-        <Markup
-          ref={node}
-          tabIndex={0}
-          key='content'
-          className={className}
-          direction={direction}
-          lang={status.language || undefined}
-          size={textSize}
-        >
-          {parsedContent}
-        </Markup>,
-      );
-    }
-
-    const hasPoll = !!status.poll_id;
-
-    if (collapsed) {
-      output.push(<ReadMoreButton onClick={onClick} key='read-more' quote={isQuote} poll={hasPoll} />);
-    }
-
-    if (status.poll_id) {
-      output.push(<Poll id={status.poll_id} key='poll' status={status} language={statusMeta.currentLanguage} />);
-    }
-
-    if (translatable) {
-      output.push(<TranslateButton status={status} key='translate' />);
-    }
-
-    if (media) {
-      output.push(media);
-    }
-
-    if (hashtags.length) {
-      output.push(<HashtagsBar key='hashtags' hashtags={hashtags} />);
-    }
-
     return <Stack space={4} className={clsx({ 'bg-gray-100 dark:bg-primary-800 rounded-md p-4': hasPoll })}>{output}</Stack>;
   } else {
-    if (status.content) {
-      output.push(
-        <Markup
-          ref={node}
-          tabIndex={0}
-          key='content'
-          className={className}
-          direction={direction}
-          lang={status.language || undefined}
-          size={textSize}
-        >
-          {parsedContent}
-        </Markup>,
-      );
-    }
-
-    if (collapsed) {
-      output.push(<ReadMoreButton onClick={() => {}} key='read-more' quote={isQuote} preview={preview} />);
-    }
-
-    if (status.poll_id) {
-      output.push(<Poll id={status.poll_id} key='poll' status={status} language={statusMeta.currentLanguage} />);
-    }
-
-    if (translatable) {
-      output.push(<TranslateButton status={status} />);
-    }
-
-    if (media) {
-      output.push(media);
-    }
-
-    if (hashtags.length) {
-      output.push(<HashtagsBar key='hashtags' hashtags={hashtags} />);
-    }
-
     return <>{output}</>;
   }
 });
diff --git a/packages/pl-fe/src/components/ui/accordion.tsx b/packages/pl-fe/src/components/ui/accordion.tsx
index 069b96cbf..230434d00 100644
--- a/packages/pl-fe/src/components/ui/accordion.tsx
+++ b/packages/pl-fe/src/components/ui/accordion.tsx
@@ -72,8 +72,10 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
             </button>
           )}
           <Icon
-            src={expanded ? require('@tabler/icons/outline/chevron-up.svg') : require('@tabler/icons/outline/chevron-down.svg')}
-            className='size-5 text-gray-700 dark:text-gray-600'
+            src={require('@tabler/icons/outline/chevron-down.svg')}
+            className={clsx('size-5 text-gray-700 transition-transform dark:text-gray-600', {
+              'rotate-180': expanded,
+            })}
           />
         </HStack>
       </button>
diff --git a/packages/pl-fe/src/components/ui/button/index.tsx b/packages/pl-fe/src/components/ui/button/index.tsx
index e26c139e4..501b3a4f9 100644
--- a/packages/pl-fe/src/components/ui/button/index.tsx
+++ b/packages/pl-fe/src/components/ui/button/index.tsx
@@ -16,6 +16,8 @@ interface IButton extends Pick<
   block?: boolean;
   /** URL to an SVG icon to render inside the button. */
   icon?: string;
+  /** Class name to apply to the icon element inside the button. */
+  iconClassName?: string;
   /** URL to an SVG icon to render inside the button next to the text. */
   secondaryIcon?: string;
   /** A predefined button size. */
@@ -36,6 +38,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>(({
   children,
   disabled = false,
   icon,
+  iconClassName,
   secondaryIcon,
   onClick,
   size = 'md',
@@ -72,7 +75,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>(({
       type={type}
       data-testid='button'
     >
-      {icon ? <Icon src={icon} className='size-4' /> : null}
+      {icon ? <Icon src={icon} className={clsx('size-4', iconClassName)} /> : null}
 
       {body && (
         <span>{body}</span>
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx
index 6404596b4..01608aca6 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { HTMLAttributes } from 'react';
 
 import HStack from 'pl-fe/components/ui/hstack';
@@ -68,8 +69,10 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
 
         <IconButton
           onClick={onToggle}
-          src={isOpen ? require('@tabler/icons/outline/chevron-down.svg') : require('@tabler/icons/outline/chevron-up.svg')}
-          iconClassName='h-5 w-5 text-gray-600'
+          src={require('@tabler/icons/outline/chevron-up.svg')}
+          iconClassName={clsx('size-5 text-gray-600 transition-transform', {
+            'rotate-180': isOpen,
+          })}
         />
       </HStack>
     </HStack>