diff --git a/src/ui/MessageContent/MessageBody/index.tsx b/src/ui/MessageContent/MessageBody/index.tsx
index 3c67ffdd9..6f436e4df 100644
--- a/src/ui/MessageContent/MessageBody/index.tsx
+++ b/src/ui/MessageContent/MessageBody/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import '../index.scss';
 import {
   CoreMessageType,
@@ -41,7 +41,7 @@ export interface MessageBodyProps {
   isByMe: boolean;
 }
 
-export default function MessageBody(props: MessageBodyProps): ReactElement {
+export const MessageBody = (props: MessageBodyProps) => {
   const {
     message,
     channel,
@@ -151,4 +151,6 @@ export default function MessageBody(props: MessageBodyProps): ReactElement {
         isReactionEnabled={isReactionEnabledInChannel}
       />
     ));
-}
+};
+
+export default MessageBody;
diff --git a/src/ui/MessageContent/MessageHeader/index.tsx b/src/ui/MessageContent/MessageHeader/index.tsx
index 3b2925ac5..6882fea27 100644
--- a/src/ui/MessageContent/MessageHeader/index.tsx
+++ b/src/ui/MessageContent/MessageHeader/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import '../index.scss';
 import Label, { LabelColors, LabelTypography } from '../../Label';
 import { CoreMessageType, getSenderName, SendableMessageType } from '../../../utils';
@@ -10,7 +10,7 @@ export interface MessageHeaderProps {
   message: CoreMessageType;
 }
 
-export default function MessageHeader(props: MessageHeaderProps): ReactElement {
+export const MessageHeader = (props: MessageHeaderProps) => {
   const {
     channel,
     message,
@@ -34,4 +34,6 @@ export default function MessageHeader(props: MessageHeaderProps): ReactElement {
       }
     </Label>
   );
-}
+};
+
+export default MessageHeader;
diff --git a/src/ui/MessageContent/MessageProfile/index.tsx b/src/ui/MessageContent/MessageProfile/index.tsx
index ba75dd595..bbfb7eaed 100644
--- a/src/ui/MessageContent/MessageProfile/index.tsx
+++ b/src/ui/MessageContent/MessageProfile/index.tsx
@@ -18,9 +18,7 @@ export interface MessageProfileProps extends MessageContentProps {
   bottom?: string
 }
 
-export default function MessageProfile(
-  props: MessageProfileProps,
-): ReactElement | null {
+export const MessageProfile = (props: MessageProfileProps) => {
   const {
     message,
     channel,
@@ -85,4 +83,6 @@ export default function MessageProfile(
       )}
     />
   );
-}
+};
+
+export default MessageProfile;
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index d6563d5bf..366f8d591 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -49,6 +49,10 @@ import { MobileBottomSheetProps } from '../MobileMenu/types';
 import useElementObserver from '../../hooks/useElementObserver';
 import { EMOJI_MENU_ROOT_ID, getObservingId, MENU_OBSERVING_CLASS_NAME, MENU_ROOT_ID } from '../ContextMenu';
 
+export { MessageBody } from './MessageBody';
+export { MessageHeader } from './MessageHeader';
+export { MessageProfile } from './MessageProfile';
+
 export interface MessageContentProps {
   className?: string | Array<string>;
   userId: string;
@@ -88,7 +92,7 @@ export interface MessageContentProps {
   renderMobileMenuOnLongPress?: (props: MobileBottomSheetProps) => React.ReactElement;
 }
 
-export default function MessageContent(props: MessageContentProps): ReactElement {
+export function MessageContent(props: MessageContentProps): ReactElement {
   const {
     // Internal props
     className,
@@ -674,3 +678,5 @@ export default function MessageContent(props: MessageContentProps): ReactElement
     </div>
   );
 }
+
+export default MessageContent;