diff --git a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx
index 28c28b1c63..0bd61a052a 100644
--- a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx
+++ b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx
@@ -41,8 +41,10 @@ const createStory = (blocks: readonly UiKit.LayoutBlock[]) => {
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Role>Admin</Message.Role>
           <Message.Role>User</Message.Role>
           <Message.Role>Owner</Message.Role>
diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx
index a1b4946f03..17b1275086 100644
--- a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx
+++ b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx
@@ -38,8 +38,10 @@ export default {
           </Message.LeftContainer>
           <Message.Container>
             <Message.Header>
-              <Message.Name>Haylie George</Message.Name>
-              <Message.Username>@haylie.george</Message.Username>
+              <Message.NameContainer>
+                <Message.Name>Haylie George</Message.Name>{' '}
+                <Message.Username>@haylie.george</Message.Username>
+              </Message.NameContainer>
               <Message.Role>Admin</Message.Role>
               <Message.Role>User</Message.Role>
               <Message.Role>Owner</Message.Role>
diff --git a/packages/fuselage/src/components/Message/MessageNameContainer.tsx b/packages/fuselage/src/components/Message/MessageNameContainer.tsx
new file mode 100644
index 0000000000..92252d7a72
--- /dev/null
+++ b/packages/fuselage/src/components/Message/MessageNameContainer.tsx
@@ -0,0 +1,11 @@
+import type { AllHTMLAttributes } from 'react';
+import React from 'react';
+
+type MessageNameContainerProps = AllHTMLAttributes<HTMLSpanElement>;
+
+export const MessageNameContainer = (props: MessageNameContainerProps) => (
+  <span
+    className='rcx-box rcx-box--full rcx-message-header__name-container'
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.stories.tsx b/packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.stories.tsx
index e8a5835e3e..823c74ad9d 100644
--- a/packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.stories.tsx
+++ b/packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.stories.tsx
@@ -38,8 +38,10 @@ export const Default = () => (
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Role>Admin</Message.Role>
           <Message.Role>User</Message.Role>
           <Message.Role>Owner</Message.Role>
diff --git a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.stories.tsx b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.stories.tsx
index c792ce11f8..2a401389f8 100644
--- a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.stories.tsx
+++ b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.stories.tsx
@@ -8,7 +8,12 @@ import {
   MessageSystemName,
   MessageSystemTimestamp,
 } from '.';
-import { MessageDivider, MessageSystemBlock } from '..';
+import {
+  MessageDivider,
+  MessageNameContainer,
+  MessageSystemBlock,
+  MessageUsername,
+} from '..';
 import { Avatar, Box } from '../..';
 
 export default {
@@ -41,7 +46,9 @@ export const Default = () => (
       </MessageSystemLeftContainer>
       <MessageSystemContainer>
         <MessageSystemBlock>
-          <MessageSystemName>Haylie George</MessageSystemName>
+          <MessageNameContainer>
+            <MessageSystemName>Haylie George</MessageSystemName>
+          </MessageNameContainer>
           <MessageSystemBody>
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
             nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
@@ -74,7 +81,9 @@ export const Default = () => (
       </MessageSystemLeftContainer>
       <MessageSystemContainer>
         <MessageSystemBlock>
-          <MessageSystemName>Haylie George</MessageSystemName>
+          <MessageNameContainer>
+            <MessageSystemName>Haylie George</MessageSystemName>
+          </MessageNameContainer>
           <MessageSystemBody>
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
             nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
@@ -106,7 +115,9 @@ export const Default = () => (
       </MessageSystemLeftContainer>
       <MessageSystemContainer>
         <MessageSystemBlock>
-          <MessageSystemName>Haylie George</MessageSystemName>
+          <MessageNameContainer>
+            <MessageSystemName>Haylie George</MessageSystemName>
+          </MessageNameContainer>
           <MessageSystemBody>
             Reprehenderit ut aliquip ex ea commodo consequat a duis aute irure
             dolor in in voluptate velit esse cillum dolore eu fugiat nulla
@@ -118,6 +129,41 @@ export const Default = () => (
         </MessageSystemBlock>
       </MessageSystemContainer>
     </MessageSystem>
+    <MessageSystem>
+      <MessageSystemLeftContainer>
+        <Avatar
+          url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
+                4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
+                IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
+                AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
+                MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
+                xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
+                jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
+                eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
+                6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
+                SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
+                UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
+          size='x18'
+        />
+      </MessageSystemLeftContainer>
+      <MessageSystemContainer>
+        <MessageSystemBlock>
+          <MessageNameContainer>
+            <MessageSystemName>Haylie George</MessageSystemName>{' '}
+            <MessageUsername>@haylie.george</MessageUsername>
+          </MessageNameContainer>
+          <MessageSystemBody>
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+            nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+            veniam...
+          </MessageSystemBody>
+          <MessageSystemTimestamp>12:00 PM</MessageSystemTimestamp>
+        </MessageSystemBlock>
+      </MessageSystemContainer>
+    </MessageSystem>
     <MessageSystem isSelected>
       <MessageSystemLeftContainer>
         <Avatar
@@ -137,7 +183,9 @@ export const Default = () => (
       </MessageSystemLeftContainer>
       <MessageSystemContainer>
         <MessageSystemBlock>
-          <MessageSystemName>Haylie George</MessageSystemName>
+          <MessageNameContainer>
+            <MessageSystemName>Haylie George</MessageSystemName>
+          </MessageNameContainer>
           <MessageSystemBody>
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
             nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
diff --git a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss
index 19c678b82a..c378e717b8 100644
--- a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss
+++ b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss
@@ -35,23 +35,31 @@ $message-system-background-color-selected: functions.theme(
   }
 
   &__body {
-    @include typography.use-font-scale(c1);
+    @include typography.use-font-scale(p2);
     @include typography.use-with-truncated-text();
-    margin-inline: lengths.margin(4);
+    margin-inline: lengths.margin(2);
 
     color: colors.font(annotation);
   }
 
   &__name {
-    @include typography.use-font-scale(c2);
+    @include typography.use-font-scale(p2b);
     @include typography.use-with-truncated-text();
     flex-shrink: 0;
 
-    margin-inline: lengths.margin(4);
-
     color: colors.font(default);
   }
 
+  &__time {
+    @include typography.use-with-truncated-text();
+    @include typography.use-font-scale(p2);
+    flex-shrink: 0;
+
+    margin-inline: lengths.margin(2);
+
+    color: colors.font(annotation);
+  }
+
   &__block {
     display: flex;
     flex-direction: row;
diff --git a/packages/fuselage/src/components/Message/MessageSystem/MessageSystemTimestamp.tsx b/packages/fuselage/src/components/Message/MessageSystem/MessageSystemTimestamp.tsx
new file mode 100644
index 0000000000..563e63d09d
--- /dev/null
+++ b/packages/fuselage/src/components/Message/MessageSystem/MessageSystemTimestamp.tsx
@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type MessageSystemTimestampProps = { children: ReactNode; title?: string };
+
+export const MessageSystemTimestamp = (props: MessageSystemTimestampProps) => (
+  <span className='rcx-box rcx-box--full rcx-message-system__time' {...props} />
+);
diff --git a/packages/fuselage/src/components/Message/MessageSystem/index.tsx b/packages/fuselage/src/components/Message/MessageSystem/index.tsx
index e8e55c8a3e..a93766c297 100644
--- a/packages/fuselage/src/components/Message/MessageSystem/index.tsx
+++ b/packages/fuselage/src/components/Message/MessageSystem/index.tsx
@@ -1,10 +1,9 @@
 import { MessageLeftContainer } from '../MessageLeftContainer';
-import { MessageTimestamp } from '../MessageTimestamp';
 
 export * from './MessageSystem';
 export * from './MessageSystemBlock';
 export * from './MessageSystemBody';
 export * from './MessageSystemContainer';
 export * from './MessageSystemName';
+export * from './MessageSystemTimestamp';
 export const MessageSystemLeftContainer = MessageLeftContainer;
-export const MessageSystemTimestamp = MessageTimestamp;
diff --git a/packages/fuselage/src/components/Message/Messages.stories.tsx b/packages/fuselage/src/components/Message/Messages.stories.tsx
index 8c9fbc1366..42a0083967 100644
--- a/packages/fuselage/src/components/Message/Messages.stories.tsx
+++ b/packages/fuselage/src/components/Message/Messages.stories.tsx
@@ -30,8 +30,10 @@ export const Default: ComponentStory<typeof Message> = () => (
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Roles>
             <Message.Role>Admin</Message.Role>
             <Message.Role>User</Message.Role>
@@ -74,8 +76,10 @@ export const WithSequential = () => (
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Roles>
             <Message.Role>Admin</Message.Role>
             <Message.Role>User</Message.Role>
@@ -187,8 +191,10 @@ export const MessageWithThread = () => (
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Roles>
             <Message.Role>Admin</Message.Role>
             <Message.Role>User</Message.Role>
@@ -322,8 +328,10 @@ export const MessageSelected = () => {
         </Message.LeftContainer>
         <Message.Container>
           <Message.Header>
-            <Message.Name>Haylie George</Message.Name>
-            <Message.Username>@haylie.george</Message.Username>
+            <Message.NameContainer>
+              <Message.Name>Haylie George</Message.Name>{' '}
+              <Message.Username>@haylie.george</Message.Username>
+            </Message.NameContainer>
             <Message.Roles>
               <Message.Role>Admin</Message.Role>
               <Message.Role>User</Message.Role>
@@ -360,8 +368,10 @@ export const MessageEditing = () => (
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Roles>
             <Message.Role>Admin</Message.Role>
             <Message.Role>User</Message.Role>
@@ -442,8 +452,10 @@ export const MessageUnorderedList = () => (
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Roles>
             <Message.Role>Admin</Message.Role>
             <Message.Role>User</Message.Role>
@@ -486,8 +498,10 @@ export const MessageOrderedList = () => (
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Roles>
             <Message.Role>Admin</Message.Role>
             <Message.Role>User</Message.Role>
@@ -530,8 +544,10 @@ export const MessageHighlighted = () => (
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Roles>
             <Message.Role>Admin</Message.Role>
             <Message.Role>User</Message.Role>
@@ -612,8 +628,10 @@ export const MessagePending = () => (
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Roles>
             <Message.Role>Admin</Message.Role>
             <Message.Role>User</Message.Role>
@@ -687,8 +705,10 @@ export const MessageWithMetrics: ComponentStory<typeof Message> = () => (
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Roles>
             <Message.Role>Admin</Message.Role>
             <Message.Role>User</Message.Role>
@@ -738,8 +758,10 @@ export const LotsOfReactions: ComponentStory<typeof Message> = () => (
       </Message.LeftContainer>
       <Message.Container>
         <Message.Header>
-          <Message.Name>Haylie George</Message.Name>
-          <Message.Username>@haylie.george</Message.Username>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
           <Message.Roles>
             <Message.Role>Admin</Message.Role>
             <Message.Role>User</Message.Role>
diff --git a/packages/fuselage/src/components/Message/Messages.styles.scss b/packages/fuselage/src/components/Message/Messages.styles.scss
index f6f9ce8875..2d7bd6d722 100644
--- a/packages/fuselage/src/components/Message/Messages.styles.scss
+++ b/packages/fuselage/src/components/Message/Messages.styles.scss
@@ -133,8 +133,13 @@ $message-background-color-highlight: functions.theme(
       color: colors.font(annotation);
     }
 
-    &__name {
+    &__name-container {
       @extend %rcx-margins-header;
+
+      display: inline;
+    }
+
+    &__name {
       @include typography.use-font-scale(h5);
       @include typography.use-with-truncated-text();
       flex-shrink: 1;
@@ -143,8 +148,7 @@ $message-background-color-highlight: functions.theme(
     }
 
     &__username {
-      @extend %rcx-margins-header;
-      @include typography.use-font-scale(p2m);
+      @include typography.use-font-scale(p2);
       @include typography.use-with-truncated-text();
       flex-shrink: 1;
 
@@ -236,17 +240,6 @@ $message-background-color-highlight: functions.theme(
     }
   }
 
-  &-paragraph {
-    margin: 0;
-    padding: 0;
-
-    &:empty::before {
-      display: inline-block;
-
-      content: '';
-    }
-  }
-
   &__emoji {
     display: inline-block;
 
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.stories.tsx b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.stories.tsx
index 8254e4423c..44680b85c1 100644
--- a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.stories.tsx
+++ b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.stories.tsx
@@ -86,3 +86,34 @@ export const WithEmoji = () => (
     </ThreadMessage>
   </Box>
 );
+
+export const WithSystemMessage = () => (
+  <Box>
+    <ThreadMessage>
+      <ThreadMessage.Row>
+        <ThreadMessage.LeftContainer>
+          <ThreadMessage.Icon />
+        </ThreadMessage.LeftContainer>
+        <ThreadMessage.Container>
+          <ThreadMessage.Origin system>system message</ThreadMessage.Origin>
+          <ThreadMessage.Unfollow />
+        </ThreadMessage.Container>
+      </ThreadMessage.Row>
+      <ThreadMessage.Row>
+        <ThreadMessage.LeftContainer>
+          <Avatar url={avatarUrl} size='x16' />
+        </ThreadMessage.LeftContainer>
+        <ThreadMessage.Container>
+          <ThreadMessage.Message>
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+            nisi ut aliquip ex ea commodo consequat a duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+            veniam...
+          </ThreadMessage.Message>
+        </ThreadMessage.Container>
+      </ThreadMessage.Row>
+    </ThreadMessage>
+  </Box>
+);
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.styles.scss b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.styles.scss
index 3a9e571567..427903acac 100644
--- a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.styles.scss
+++ b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessage.styles.scss
@@ -48,6 +48,14 @@
     cursor: pointer;
 
     color: colors.primary(500);
+
+    &--system {
+      color: colors.font(annotation);
+
+      &::first-letter {
+        text-transform: uppercase;
+      }
+    }
   }
 
   &__icon {
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.spec.tsx b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.spec.tsx
new file mode 100644
index 0000000000..25ac151346
--- /dev/null
+++ b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.spec.tsx
@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { ThreadMessageOrigin } from './ThreadMessageOrigin';
+
+describe('ThreadMessageOrigin', () => {
+  it('renders without crashing', () => {
+    render(<ThreadMessageOrigin />);
+  });
+
+  it('should render system variation', () => {
+    render(<ThreadMessageOrigin system>system</ThreadMessageOrigin>);
+
+    expect(screen.getByText('system')).toHaveClass(
+      'rcx-message-thread__origin--system'
+    );
+  });
+});
diff --git a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.tsx b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.tsx
index 63f81dac31..ca0d0f7753 100644
--- a/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.tsx
+++ b/packages/fuselage/src/components/Message/ThreadMessage/ThreadMessageOrigin.tsx
@@ -3,11 +3,21 @@ import React from 'react';
 
 type ThreadMessageOriginProps = {
   children?: ReactNode;
+  system?: boolean;
 };
 
-export const ThreadMessageOrigin = (props: ThreadMessageOriginProps) => (
+export const ThreadMessageOrigin = ({
+  children,
+  system,
+}: ThreadMessageOriginProps) => (
   <div
-    className='rcx-box rcx-box--full rcx-message-thread__origin'
-    {...props}
-  />
+    className={[
+      'rcx-box rcx-box--full rcx-message-thread__origin',
+      system && 'rcx-box rcx-box--full rcx-message-thread__origin--system',
+    ]
+      .filter(Boolean)
+      .join(' ')}
+  >
+    {children}
+  </div>
 );
diff --git a/packages/fuselage/src/components/Message/index.tsx b/packages/fuselage/src/components/Message/index.tsx
index aad2bb7adb..977df2f049 100644
--- a/packages/fuselage/src/components/Message/index.tsx
+++ b/packages/fuselage/src/components/Message/index.tsx
@@ -8,6 +8,7 @@ import { MessageHeader } from './MessageHeader';
 import { MessageLeftContainer } from './MessageLeftContainer';
 import MessageMetrics from './MessageMetrics';
 import { MessageName } from './MessageName';
+import { MessageNameContainer } from './MessageNameContainer';
 import { MessageRole } from './MessageRole';
 import { MessageRoles } from './MessageRoles';
 import { MessageTimestamp } from './MessageTimestamp';
@@ -27,6 +28,7 @@ export * from './MessageBody';
 export * from './MessageContainer';
 export * from './MessageContainerFixed';
 export * from './MessageHeader';
+export * from './MessageNameContainer';
 export * from './MessageLeftContainer';
 export * from './MessageName';
 export * from './MessageRole';
@@ -45,6 +47,7 @@ export default Object.assign(Message, {
   Body: MessageBody,
   Block: MessageBlock,
   Timestamp: MessageTimestamp,
+  NameContainer: MessageNameContainer,
   Name: MessageName,
   Username: MessageUsername,
   Roles: MessageRoles,
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
index 86f87a288f..dbc29920ec 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
@@ -24,8 +24,10 @@ const MessageSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
     </Message.LeftContainer>
     <Message.Container>
       <Message.Header>
-        <Message.Name>Haylie George</Message.Name>
-        <Message.Username>@haylie.george</Message.Username>
+        <Message.NameContainer>
+          <Message.Name>Haylie George</Message.Name>{' '}
+          <Message.Username>@haylie.george</Message.Username>
+        </Message.NameContainer>
         <Message.Role>Admin</Message.Role>
         <Message.Role>User</Message.Role>
         <Message.Role>Owner</Message.Role>
diff --git a/turbo.json b/turbo.json
index 26ec495384..b8e8f6f9a3 100644
--- a/turbo.json
+++ b/turbo.json
@@ -13,7 +13,7 @@
       "outputs": []
     },
     "build-storybook": {
-      "dependsOn": ["build"],
+      "dependsOn": ["^build"],
       "outputs": ["storybook-static/**"]
     },
     "lint-staged": {