diff --git a/packages/pl-fe/src/components/status-hover-card.tsx b/packages/pl-fe/src/components/status-hover-card.tsx
index deb9dca83..e0c6824d7 100644
--- a/packages/pl-fe/src/components/status-hover-card.tsx
+++ b/packages/pl-fe/src/components/status-hover-card.tsx
@@ -6,7 +6,6 @@ import { useHistory } from 'react-router-dom';
 
 import { fetchStatus } from 'pl-fe/actions/statuses';
 import { showStatusHoverCard } from 'pl-fe/components/hover-status-wrapper';
-import Card, { CardBody } from 'pl-fe/components/ui/card';
 import StatusContainer from 'pl-fe/containers/status-container';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
@@ -80,17 +79,6 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
 
   if (!statusId) return null;
 
-  const renderStatus = (statusId: string) => (
-    // @ts-ignore
-    <StatusContainer
-      key={statusId}
-      id={statusId}
-      hoverable={false}
-      hideActionBar
-      muted
-    />
-  );
-
   return (
     <div
       className={clsx({
@@ -108,11 +96,14 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
-      <Card variant='rounded' className='relative isolate overflow-hidden black:rounded-xl black:border black:border-gray-800'>
-        <CardBody>
-          {renderStatus(statusId)}
-        </CardBody>
-      </Card>
+      <StatusContainer
+        className='isolate black:rounded-xl black:border black:border-gray-800'
+        key={statusId}
+        id={statusId}
+        hoverable={false}
+        hideActionBar
+        muted
+      />
     </div>
   );
 };
diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx
index 163ce7915..b33f788d9 100644
--- a/packages/pl-fe/src/components/status.tsx
+++ b/packages/pl-fe/src/components/status.tsx
@@ -52,6 +52,7 @@ interface IStatus {
   showGroup?: boolean;
   accountAction?: React.ReactElement;
   fromBookmarks?: boolean;
+  className?: string;
 }
 
 const Status: React.FC<IStatus> = (props) => {
@@ -71,6 +72,7 @@ const Status: React.FC<IStatus> = (props) => {
     variant = 'rounded',
     showGroup = true,
     fromBookmarks = false,
+    className,
   } = props;
 
   const intl = useIntl();
@@ -358,7 +360,7 @@ const Status: React.FC<IStatus> = (props) => {
       >
         <Card
           variant={variant}
-          className={clsx('status__wrapper space-y-4', `status-${actualStatus.visibility}`, {
+          className={clsx('status__wrapper space-y-4', className, `status-${actualStatus.visibility}`, {
             'py-6 sm:p-5': variant === 'rounded',
             'status-reply': !!status.in_reply_to_id,
             muted,