diff --git a/src/core/client/stream/tabs/comments/components/Comment/Comment.css b/src/core/client/stream/tabs/comments/components/Comment/Comment.css
index 515dfe5d1..642206f36 100644
--- a/src/core/client/stream/tabs/comments/components/Comment/Comment.css
+++ b/src/core/client/stream/tabs/comments/components/Comment/Comment.css
@@ -4,7 +4,7 @@
   background-color: var(--palette-primary-lightest);
   padding: var(--spacing-unit);
 }
-.topBar {
+.subBar {
   margin-bottom: calc(0.5 * var(--spacing-unit));
 }
 .footer:not(:empty) {
diff --git a/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
index 6ebb427b9..ad463b581 100644
--- a/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
+++ b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
@@ -7,6 +7,7 @@ import { Flex, HorizontalGutter } from "talk-ui/components";
 
 import * as styles from "./Comment.css";
 import EditedMarker from "./EditedMarker";
+import InReplyTo from "./InReplyTo";
 import TopBarLeft from "./TopBarLeft";
 import Username from "./Username";
 
@@ -20,6 +21,7 @@ export interface CommentProps {
   footer?: React.ReactNode;
   showEditedMarker?: boolean;
   highlight?: boolean;
+  parentAuthorName?: string | null;
 }
 
 const Comment: StatelessComponent<CommentProps> = props => {
@@ -28,12 +30,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       role="article"
       className={cn(styles.root, { [styles.highlight]: props.highlight })}
     >
-      <Flex
-        className={styles.topBar}
-        direction="row"
-        justifyContent="space-between"
-        id={props.id}
-      >
+      <Flex direction="row" justifyContent="space-between" id={props.id}>
         <TopBarLeft>
           {props.username && <Username>{props.username}</Username>}
           <Flex direction="row" alignItems="baseline" itemGutter>
@@ -43,6 +40,12 @@ const Comment: StatelessComponent<CommentProps> = props => {
         </TopBarLeft>
         {props.topBarRight && <div>{props.topBarRight}</div>}
       </Flex>
+      {props.parentAuthorName && (
+        <div className={styles.subBar}>
+          <InReplyTo username={props.parentAuthorName} />
+        </div>
+      )}
+
       <HorizontalGutter>
         <HTMLContent>{props.body || ""}</HTMLContent>
         {props.footer}
diff --git a/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.css b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.css
new file mode 100644
index 000000000..3f5a70f00
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.css
@@ -0,0 +1,9 @@
+.icon {
+  color: var(--palette-grey-light);
+}
+.inReplyTo {
+  color: var(--palette-grey-light);
+}
+.username {
+  color: var(--palette-grey-dark);
+}
diff --git a/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.spec.tsx b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.spec.tsx
new file mode 100644
index 000000000..71391cf1d
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.spec.tsx
@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import InReplyTo from "./InReplyTo";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof InReplyTo> = {
+    username: "Username",
+  };
+  const wrapper = shallow(<InReplyTo {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.tsx b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.tsx
new file mode 100644
index 000000000..39fc839f1
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/Comment/InReplyTo.tsx
@@ -0,0 +1,34 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+
+import { Flex, Icon, Typography } from "talk-ui/components";
+import styles from "./InReplyTo.css";
+
+interface Props {
+  username: string;
+}
+
+const InReplyTo: StatelessComponent<Props> = ({ username }) => {
+  const Username = () => (
+    <Typography variant="heading5" container="span" className={styles.username}>
+      {username}
+    </Typography>
+  );
+
+  return (
+    <Flex alignItems="center">
+      <Icon className={styles.icon}>reply</Icon>{" "}
+      <Localized id="comments-inReplyTo" username={<Username />}>
+        <Typography
+          variant="timestamp"
+          container="span"
+          className={styles.inReplyTo}
+        >
+          {"In reply to <username><username>"}
+        </Typography>
+      </Localized>
+    </Flex>
+  );
+};
+
+export default InReplyTo;
diff --git a/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap
index f1eceef62..d4ab9ae64 100644
--- a/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -6,7 +6,6 @@ exports[`renders username and body 1`] = `
   role="article"
 >
   <withPropsOnChange(Flex)
-    className="Comment-topBar"
     direction="row"
     id="comment-id"
     justifyContent="space-between"
diff --git a/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/InReplyTo.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/InReplyTo.spec.tsx.snap
new file mode 100644
index 000000000..cc2304cb4
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/InReplyTo.spec.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Flex)
+  alignItems="center"
+>
+  <withPropsOnChange(Icon)
+    className="InReplyTo-icon"
+  >
+    reply
+  </withPropsOnChange(Icon)>
+   
+  <Localized
+    id="comments-inReplyTo"
+    username={<Username />}
+  >
+    <withPropsOnChange(Typography)
+      className="InReplyTo-inReplyTo"
+      container="span"
+      variant="timestamp"
+    >
+      In reply to &lt;username&gt;&lt;username&gt;
+    </withPropsOnChange(Typography)>
+  </Localized>
+</withPropsOnChange(Flex)>
+`;
diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx
index 44a71647d..c225bd148 100644
--- a/src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx
+++ b/src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx
@@ -22,6 +22,7 @@ it("renders username and body", () => {
         id: "author-id",
         username: "Marvin",
       },
+      parent: null,
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
       editing: {
@@ -59,6 +60,7 @@ it("renders body only", () => {
         id: "author-id",
         username: null,
       },
+      parent: null,
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
       editing: {
@@ -94,6 +96,7 @@ it("hide reply button", () => {
         id: "author-id",
         username: "Marvin",
       },
+      parent: null,
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
       editing: {
@@ -138,6 +141,7 @@ it("shows conversation link", () => {
         id: "author-id",
         username: "Marvin",
       },
+      parent: null,
       body: "Woof",
       createdAt: "1995-12-17T03:24:00.000Z",
       editing: {
@@ -157,3 +161,45 @@ it("shows conversation link", () => {
   const wrapper = shallow(<CommentContainerN {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
+
+it("renders in reply to", () => {
+  const props: PropTypesOf<typeof CommentContainerN> = {
+    me: null,
+    asset: {
+      url: "http://localhost/asset",
+    },
+    comment: {
+      id: "comment-id",
+      author: {
+        id: "author-id",
+        username: "Marvin",
+      },
+      parent: {
+        author: {
+          username: "ParentAuthor",
+        },
+      },
+      body: "Woof",
+      createdAt: "1995-12-17T03:24:00.000Z",
+      editing: {
+        edited: false,
+        editableUntil: "1995-12-17T03:24:30.000Z",
+      },
+      pending: false,
+    },
+    settings: {
+      reaction: {
+        icon: "thumb_up_alt",
+        label: "Respect",
+      },
+    },
+    indentLevel: 1,
+    showAuthPopup: noop as any,
+    setCommentID: noop as any,
+    localReply: false,
+    disableReplies: false,
+  };
+
+  const wrapper = shallow(<CommentContainerN {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
index daebede42..8d0de18b6 100644
--- a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
@@ -165,6 +165,11 @@ export class CommentContainer extends Component<InnerProps, State> {
           blur={comment.pending || false}
           showEditedMarker={comment.editing.edited}
           highlight={highlight}
+          parentAuthorName={
+            comment.parent &&
+            comment.parent.author &&
+            comment.parent.author.username
+          }
           topBarRight={
             (editable && (
               <Localized id="comments-commentContainer-editButton">
@@ -251,6 +256,11 @@ const enhanced = withSetCommentIDMutation(
             id
             username
           }
+          parent {
+            author {
+              username
+            }
+          }
           body
           createdAt
           editing {
diff --git a/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
index f637160c9..6921cae4b 100644
--- a/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -31,6 +31,7 @@ exports[`hide reply button 1`] = `
                   "edited": false,
                 },
                 "id": "comment-id",
+                "parent": null,
                 "pending": false,
               }
             }
@@ -49,6 +50,7 @@ exports[`hide reply button 1`] = `
     }
     id="comment-comment-id"
     indentLevel={1}
+    parentAuthorName={null}
     showEditedMarker={false}
     username="Marvin"
   />
@@ -91,6 +93,7 @@ exports[`renders body only 1`] = `
                   "edited": false,
                 },
                 "id": "comment-id",
+                "parent": null,
                 "pending": false,
               }
             }
@@ -109,12 +112,79 @@ exports[`renders body only 1`] = `
     }
     id="comment-comment-id"
     indentLevel={1}
+    parentAuthorName={null}
     showEditedMarker={false}
     username={null}
   />
 </withPropsOnChange(HorizontalGutter)>
 `;
 
+exports[`renders in reply to 1`] = `
+<withPropsOnChange(HorizontalGutter)>
+  <IndentedComment
+    blur={false}
+    body="Woof"
+    createdAt="1995-12-17T03:24:00.000Z"
+    footer={
+      <React.Fragment>
+        <ButtonsBar>
+          <ReplyButton
+            active={false}
+            id="comments-commentContainer-replyButton-comment-id"
+            onClick={[Function]}
+          />
+          <Relay(PermalinkButtonContainerProps)
+            asset={
+              Object {
+                "url": "http://localhost/asset",
+              }
+            }
+            commentID="comment-id"
+          />
+          <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+            comment={
+              Object {
+                "author": Object {
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "parent": Object {
+                  "author": Object {
+                    "username": "ParentAuthor",
+                  },
+                },
+                "pending": false,
+              }
+            }
+            me={null}
+            settings={
+              Object {
+                "reaction": Object {
+                  "icon": "thumb_up_alt",
+                  "label": "Respect",
+                },
+              }
+            }
+          />
+        </ButtonsBar>
+      </React.Fragment>
+    }
+    id="comment-comment-id"
+    indentLevel={1}
+    parentAuthorName="ParentAuthor"
+    showEditedMarker={false}
+    username="Marvin"
+  />
+</withPropsOnChange(HorizontalGutter)>
+`;
+
 exports[`renders username and body 1`] = `
 <withPropsOnChange(HorizontalGutter)>
   <IndentedComment
@@ -151,6 +221,7 @@ exports[`renders username and body 1`] = `
                   "edited": false,
                 },
                 "id": "comment-id",
+                "parent": null,
                 "pending": false,
               }
             }
@@ -169,6 +240,7 @@ exports[`renders username and body 1`] = `
     }
     id="comment-comment-id"
     indentLevel={1}
+    parentAuthorName={null}
     showEditedMarker={false}
     username="Marvin"
   />
@@ -211,6 +283,7 @@ exports[`shows conversation link 1`] = `
                   "edited": false,
                 },
                 "id": "comment-id",
+                "parent": null,
                 "pending": false,
               }
             }
@@ -235,6 +308,7 @@ exports[`shows conversation link 1`] = `
     }
     id="comment-comment-id"
     indentLevel={1}
+    parentAuthorName={null}
     showEditedMarker={false}
     username="Marvin"
   />
diff --git a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
index 6df0b04e7..7a62d4e30 100644
--- a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
@@ -256,7 +256,7 @@ exports[`cancel edit: edit canceled 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -398,7 +398,7 @@ exports[`cancel edit: edit canceled 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -934,7 +934,7 @@ exports[`edit a comment: edit form 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -1470,7 +1470,7 @@ exports[`edit a comment: optimistic response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -1841,7 +1841,7 @@ exports[`edit a comment: render stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -1983,7 +1983,7 @@ exports[`edit a comment: render stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -2354,7 +2354,7 @@ exports[`edit a comment: server response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -2505,7 +2505,7 @@ exports[`edit a comment: server response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -2876,7 +2876,7 @@ exports[`shows expiry message: edit form closed 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -3018,7 +3018,7 @@ exports[`shows expiry message: edit form closed 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -3531,7 +3531,7 @@ exports[`shows expiry message: edit time expired 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
diff --git a/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
index 0f8c5a39f..7c9ab0f3a 100644
--- a/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
@@ -195,7 +195,7 @@ exports[`loads more comments 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -321,7 +321,7 @@ exports[`loads more comments 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -447,7 +447,7 @@ exports[`loads more comments 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-2"
                   >
                     <div
@@ -757,7 +757,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -883,7 +883,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
index 1936bbcf5..b8e21121c 100644
--- a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
@@ -144,7 +144,7 @@ exports[`renders permalink view 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-1"
                       >
                         <div
@@ -287,7 +287,7 @@ exports[`renders permalink view 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-2"
                       >
                         <div
@@ -428,7 +428,7 @@ exports[`renders permalink view 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-with-replies"
                       >
                         <div
@@ -564,7 +564,7 @@ exports[`renders permalink view 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-3"
                       >
                         <div
@@ -690,7 +690,7 @@ exports[`renders permalink view 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-4"
                       >
                         <div
@@ -1002,7 +1002,7 @@ exports[`show all comments 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-with-replies"
                   >
                     <div
@@ -1132,7 +1132,7 @@ exports[`show all comments 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-3"
                       >
                         <div
@@ -1258,7 +1258,7 @@ exports[`show all comments 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-4"
                       >
                         <div
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index db6f1af4a..b1a83ba02 100644
--- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -305,7 +305,7 @@ exports[`show all comments 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
index 65c735914..fcd6cb2a1 100644
--- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
@@ -234,7 +234,7 @@ exports[`renders permalink view 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-0"
                       >
                         <div
@@ -498,7 +498,7 @@ exports[`views pervious comments 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-1"
                       >
                         <div
@@ -641,7 +641,7 @@ exports[`views pervious comments 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-2"
                       >
                         <div
@@ -782,7 +782,7 @@ exports[`views pervious comments 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-0"
                       >
                         <div
diff --git a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
index 837cfc031..1473b25ab 100644
--- a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
@@ -250,7 +250,7 @@ exports[`post a comment: optimistic response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-uuid-0"
                   >
                     <div
@@ -392,7 +392,7 @@ exports[`post a comment: optimistic response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -518,7 +518,7 @@ exports[`post a comment: optimistic response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -889,7 +889,7 @@ exports[`post a comment: server response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-x"
                   >
                     <div
@@ -1015,7 +1015,7 @@ exports[`post a comment: server response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -1141,7 +1141,7 @@ exports[`post a comment: server response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -1512,7 +1512,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -1638,7 +1638,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
diff --git a/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
index 0e9887f99..62db67d06 100644
--- a/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
@@ -256,7 +256,7 @@ exports[`post a reply: open reply form 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-with-deepest-replies"
                   >
                     <div
@@ -386,7 +386,7 @@ exports[`post a reply: open reply form 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-with-deepest-replies-1"
                       >
                         <div
@@ -516,7 +516,7 @@ exports[`post a reply: open reply form 1`] = `
                           role="article"
                         >
                           <div
-                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                             id="comment-comment-with-deepest-replies-2"
                           >
                             <div
@@ -646,7 +646,7 @@ exports[`post a reply: open reply form 1`] = `
                               role="article"
                             >
                               <div
-                                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                 id="comment-comment-with-deepest-replies-3"
                               >
                                 <div
@@ -776,7 +776,7 @@ exports[`post a reply: open reply form 1`] = `
                                   role="article"
                                 >
                                   <div
-                                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                     id="comment-comment-with-deepest-replies-4"
                                   >
                                     <div
@@ -906,7 +906,7 @@ exports[`post a reply: open reply form 1`] = `
                                       role="article"
                                     >
                                       <div
-                                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                         id="comment-comment-with-deepest-replies-5"
                                       >
                                         <div
@@ -1430,7 +1430,7 @@ exports[`post a reply: optimistic response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-with-deepest-replies"
                   >
                     <div
@@ -1560,7 +1560,7 @@ exports[`post a reply: optimistic response 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-with-deepest-replies-1"
                       >
                         <div
@@ -1690,7 +1690,7 @@ exports[`post a reply: optimistic response 1`] = `
                           role="article"
                         >
                           <div
-                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                             id="comment-comment-with-deepest-replies-2"
                           >
                             <div
@@ -1820,7 +1820,7 @@ exports[`post a reply: optimistic response 1`] = `
                               role="article"
                             >
                               <div
-                                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                 id="comment-comment-with-deepest-replies-3"
                               >
                                 <div
@@ -1950,7 +1950,7 @@ exports[`post a reply: optimistic response 1`] = `
                                   role="article"
                                 >
                                   <div
-                                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                     id="comment-comment-with-deepest-replies-4"
                                   >
                                     <div
@@ -2080,7 +2080,7 @@ exports[`post a reply: optimistic response 1`] = `
                                       role="article"
                                     >
                                       <div
-                                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                         id="comment-comment-with-deepest-replies-5"
                                       >
                                         <div
@@ -2347,7 +2347,7 @@ exports[`post a reply: optimistic response 1`] = `
                                           role="article"
                                         >
                                           <div
-                                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                             id="comment-uuid-0"
                                           >
                                             <div
@@ -2730,7 +2730,7 @@ exports[`post a reply: server response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-with-deepest-replies"
                   >
                     <div
@@ -2860,7 +2860,7 @@ exports[`post a reply: server response 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-with-deepest-replies-1"
                       >
                         <div
@@ -2990,7 +2990,7 @@ exports[`post a reply: server response 1`] = `
                           role="article"
                         >
                           <div
-                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                             id="comment-comment-with-deepest-replies-2"
                           >
                             <div
@@ -3120,7 +3120,7 @@ exports[`post a reply: server response 1`] = `
                               role="article"
                             >
                               <div
-                                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                 id="comment-comment-with-deepest-replies-3"
                               >
                                 <div
@@ -3250,7 +3250,7 @@ exports[`post a reply: server response 1`] = `
                                   role="article"
                                 >
                                   <div
-                                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                     id="comment-comment-with-deepest-replies-4"
                                   >
                                     <div
@@ -3380,7 +3380,7 @@ exports[`post a reply: server response 1`] = `
                                       role="article"
                                     >
                                       <div
-                                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                         id="comment-comment-with-deepest-replies-5"
                                       >
                                         <div
@@ -3526,7 +3526,7 @@ exports[`post a reply: server response 1`] = `
                                           role="article"
                                         >
                                           <div
-                                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                             id="comment-comment-x"
                                           >
                                             <div
@@ -3893,7 +3893,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-with-deepest-replies"
                   >
                     <div
@@ -4023,7 +4023,7 @@ exports[`renders comment stream 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-with-deepest-replies-1"
                       >
                         <div
@@ -4153,7 +4153,7 @@ exports[`renders comment stream 1`] = `
                           role="article"
                         >
                           <div
-                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                             id="comment-comment-with-deepest-replies-2"
                           >
                             <div
@@ -4283,7 +4283,7 @@ exports[`renders comment stream 1`] = `
                               role="article"
                             >
                               <div
-                                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                 id="comment-comment-with-deepest-replies-3"
                               >
                                 <div
@@ -4413,7 +4413,7 @@ exports[`renders comment stream 1`] = `
                                   role="article"
                                 >
                                   <div
-                                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                     id="comment-comment-with-deepest-replies-4"
                                   >
                                     <div
@@ -4543,7 +4543,7 @@ exports[`renders comment stream 1`] = `
                                       role="article"
                                     >
                                       <div
-                                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                         id="comment-comment-with-deepest-replies-5"
                                       >
                                         <div
diff --git a/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
index aca646ff7..0e3da2d17 100644
--- a/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
@@ -256,7 +256,7 @@ exports[`post a reply: open reply form 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -509,7 +509,7 @@ exports[`post a reply: open reply form 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -880,7 +880,7 @@ exports[`post a reply: optimistic response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -1131,7 +1131,7 @@ exports[`post a reply: optimistic response 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-uuid-0"
                       >
                         <div
@@ -1275,7 +1275,7 @@ exports[`post a reply: optimistic response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -1646,7 +1646,7 @@ exports[`post a reply: server response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -1776,7 +1776,7 @@ exports[`post a reply: server response 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-x"
                       >
                         <div
@@ -1904,7 +1904,7 @@ exports[`post a reply: server response 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
@@ -2275,7 +2275,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -2401,7 +2401,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
diff --git a/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
index effdd6d71..4d217e57b 100644
--- a/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -321,7 +321,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-with-deep-replies"
                   >
                     <div
@@ -451,7 +451,7 @@ exports[`renders comment stream 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-with-replies"
                       >
                         <div
@@ -581,7 +581,7 @@ exports[`renders comment stream 1`] = `
                           role="article"
                         >
                           <div
-                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                             id="comment-comment-3"
                           >
                             <div
@@ -707,7 +707,7 @@ exports[`renders comment stream 1`] = `
                           role="article"
                         >
                           <div
-                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                             id="comment-comment-4"
                           >
                             <div
@@ -835,7 +835,7 @@ exports[`renders comment stream 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-5"
                       >
                         <div
diff --git a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
index 74e241f02..b4d957e06 100644
--- a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -321,7 +321,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-1"
                   >
                     <div
diff --git a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
index 5742ec7ea..e4438231d 100644
--- a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -325,7 +325,7 @@ exports[`renders comment stream 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-1"
                       >
                         <div
@@ -661,7 +661,7 @@ exports[`show all replies 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-0"
                   >
                     <div
@@ -791,7 +791,7 @@ exports[`show all replies 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-1"
                       >
                         <div
@@ -917,7 +917,7 @@ exports[`show all replies 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-2"
                       >
                         <div
diff --git a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
index 9dc9cfb62..e1c2bcef1 100644
--- a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
@@ -195,7 +195,7 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-with-deepest-replies"
                   >
                     <div
@@ -325,7 +325,7 @@ exports[`renders comment stream 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         id="comment-comment-with-deepest-replies-1"
                       >
                         <div
@@ -455,7 +455,7 @@ exports[`renders comment stream 1`] = `
                           role="article"
                         >
                           <div
-                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                             id="comment-comment-with-deepest-replies-2"
                           >
                             <div
@@ -585,7 +585,7 @@ exports[`renders comment stream 1`] = `
                               role="article"
                             >
                               <div
-                                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                 id="comment-comment-with-deepest-replies-3"
                               >
                                 <div
@@ -715,7 +715,7 @@ exports[`renders comment stream 1`] = `
                                   role="article"
                                 >
                                   <div
-                                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                     id="comment-comment-with-deepest-replies-4"
                                   >
                                     <div
@@ -845,7 +845,7 @@ exports[`renders comment stream 1`] = `
                                       role="article"
                                     >
                                       <div
-                                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                         id="comment-comment-with-deepest-replies-5"
                                       >
                                         <div
@@ -1106,7 +1106,7 @@ exports[`shows conversation 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     id="comment-comment-with-deepest-replies-5"
                   >
                     <div
diff --git a/src/core/client/ui/components/Typography/Typography.css b/src/core/client/ui/components/Typography/Typography.css
index be3e0954e..7408e015b 100644
--- a/src/core/client/ui/components/Typography/Typography.css
+++ b/src/core/client/ui/components/Typography/Typography.css
@@ -19,6 +19,10 @@
   composes: heading4 from "talk-ui/shared/typography.css";
 }
 
+.heading5 {
+  composes: heading5 from "talk-ui/shared/typography.css";
+}
+
 .bodyCopy {
   composes: bodyCopy from "talk-ui/shared/typography.css";
 }
diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx
index b8f6d2396..8464f8441 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/Typography/Typography.tsx
@@ -12,6 +12,7 @@ type Variant =
   | "heading2"
   | "heading3"
   | "heading4"
+  | "heading5"
   | "bodyCopy"
   | "bodyCopyBold"
   | "inputLabel"
@@ -142,6 +143,7 @@ Typography.defaultProps = {
     heading2: "h1",
     heading3: "h1",
     heading4: "h1",
+    heading5: "h1",
     bodyCopy: "p",
     bodyCopyBold: "p",
     timestamp: "span",
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index f324a8a2b..77b44280a 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -91,6 +91,14 @@
   letter-spacing: calc(0.2em / 16);
   color: var(--palette-text-primary);
 }
+.heading5 {
+  font-size: calc(14rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-serif);
+  line-height: calc(16em / 16);
+  letter-spacing: calc(0.2em / 16);
+  color: var(--palette-text-primary);
+}
 
 .bodyCopy {
   font-size: calc(16rem / var(--rem-base));
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 89929f3f2..2ad6524f9 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -84,6 +84,7 @@ comments-conversationThread-showHiddenComments =
 
 comments-permalinkView-currentViewing = You are currently viewing a
 comments-permalinkView-singleConversation = SINGLE CONVERSATION
+comments-inReplyTo = In reply to <username></username>
 
 ## Profile Tab
 profile-historyComment-viewConversation = View Conversation