diff --git a/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
similarity index 56%
rename from src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
rename to src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
index c5fdd9806..eddab7d96 100644
--- a/src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -2,19 +2,16 @@
 
 exports[`renders username and body 1`] = `
 <div
-  className="Comment-root"
   role="article"
 >
-  <div
-    className="Comment-topBar"
-  >
+  <TopBar>
     <Username>
       Marvin
     </Username>
-    <withPropsOnChange(RelativeTime)
-      date="1995-12-17T06:24:00.000Z"
-    />
-  </div>
+    <Timestamp>
+      1995-12-17T06:24:00.000Z
+    </Timestamp>
+  </TopBar>
   <withPropsOnChange(Typography)>
     Woof
   </withPropsOnChange(Typography)>
@@ -23,19 +20,16 @@ exports[`renders username and body 1`] = `
 
 exports[`renders with gutterBottom 1`] = `
 <div
-  className="Comment-root Comment-gutterBottom"
   role="article"
 >
-  <div
-    className="Comment-topBar"
-  >
+  <TopBar>
     <Username>
       Marvin
     </Username>
-    <withPropsOnChange(RelativeTime)
-      date="1995-12-17T06:24:00.000Z"
-    />
-  </div>
+    <Timestamp>
+      1995-12-17T06:24:00.000Z
+    </Timestamp>
+  </TopBar>
   <withPropsOnChange(Typography)>
     Woof
   </withPropsOnChange(Typography)>
diff --git a/src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
similarity index 60%
rename from src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap
rename to src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
index 27d624f2f..0521c3357 100644
--- a/src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<span
-  className="Username-root"
->
-  Marvin
-</span>
+<MatchMedia
+  minWidth="xs"
+/>
 `;
diff --git a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
index 36fb0c110..e48482470 100644
--- a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
@@ -2,8 +2,10 @@
 
 exports[`renders correctly 1`] = `
 <Indent>
-  <div
+  <Flex
+    direction="column"
     id="talk-comments-replyList-log--comment-id"
+    itemGutter={true}
     role="log"
   >
     <Relay(CommentContainer)
@@ -12,7 +14,6 @@ exports[`renders correctly 1`] = `
           "id": "comment-1",
         }
       }
-      gutterBottom={true}
       key="comment-1"
     />
     <Relay(CommentContainer)
@@ -21,17 +22,18 @@ exports[`renders correctly 1`] = `
           "id": "comment-2",
         }
       }
-      gutterBottom={true}
       key="comment-2"
     />
-  </div>
+  </Flex>
 </Indent>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
 <Indent>
-  <div
+  <Flex
+    direction="column"
     id="talk-comments-replyList-log--comment-id"
+    itemGutter={true}
     role="log"
   >
     <Relay(CommentContainer)
@@ -40,7 +42,6 @@ exports[`when there is more renders a load more button 1`] = `
           "id": "comment-1",
         }
       }
-      gutterBottom={true}
       key="comment-1"
     />
     <Relay(CommentContainer)
@@ -49,7 +50,6 @@ exports[`when there is more renders a load more button 1`] = `
           "id": "comment-2",
         }
       }
-      gutterBottom={true}
       key="comment-2"
     />
     <Localized
@@ -67,6 +67,6 @@ exports[`when there is more renders a load more button 1`] = `
         Show All Replies
       </withPropsOnChange(Button)>
     </Localized>
-  </div>
+  </Flex>
 </Indent>
 `;
diff --git a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
index c529ea1ad..a8210fd99 100644
--- a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
@@ -10,12 +10,16 @@ exports[`renders correctly 1`] = `
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
-  <div
+  <Flex
     aria-live="polite"
+    direction="column"
     id="talk-comments-stream-log"
+    itemGutter={true}
     role="log"
   >
-    <div
+    <Flex
+      direction="column"
+      itemGutter={true}
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -24,7 +28,6 @@ exports[`renders correctly 1`] = `
             "id": "comment-1",
           }
         }
-        gutterBottom={true}
       />
       <Relay(ReplyListContainer)
         comment={
@@ -33,8 +36,10 @@ exports[`renders correctly 1`] = `
           }
         }
       />
-    </div>
-    <div
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -43,7 +48,6 @@ exports[`renders correctly 1`] = `
             "id": "comment-2",
           }
         }
-        gutterBottom={true}
       />
       <Relay(ReplyListContainer)
         comment={
@@ -52,8 +56,8 @@ exports[`renders correctly 1`] = `
           }
         }
       />
-    </div>
-  </div>
+    </Flex>
+  </Flex>
 </div>
 `;
 
@@ -67,12 +71,16 @@ exports[`when there is more disables load more button 1`] = `
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
-  <div
+  <Flex
     aria-live="polite"
+    direction="column"
     id="talk-comments-stream-log"
+    itemGutter={true}
     role="log"
   >
-    <div
+    <Flex
+      direction="column"
+      itemGutter={true}
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -81,7 +89,6 @@ exports[`when there is more disables load more button 1`] = `
             "id": "comment-1",
           }
         }
-        gutterBottom={true}
       />
       <Relay(ReplyListContainer)
         comment={
@@ -90,8 +97,10 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
       />
-    </div>
-    <div
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -100,7 +109,6 @@ exports[`when there is more disables load more button 1`] = `
             "id": "comment-2",
           }
         }
-        gutterBottom={true}
       />
       <Relay(ReplyListContainer)
         comment={
@@ -109,7 +117,7 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
       />
-    </div>
+    </Flex>
     <Localized
       id="comments-stream-loadMore"
     >
@@ -125,7 +133,7 @@ exports[`when there is more disables load more button 1`] = `
         Load More
       </withPropsOnChange(Button)>
     </Localized>
-  </div>
+  </Flex>
 </div>
 `;
 
@@ -139,12 +147,16 @@ exports[`when there is more renders a load more button 1`] = `
   <withContext(createMutationContainer(PostCommentFormContainer))
     assetID="asset-id"
   />
-  <div
+  <Flex
     aria-live="polite"
+    direction="column"
     id="talk-comments-stream-log"
+    itemGutter={true}
     role="log"
   >
-    <div
+    <Flex
+      direction="column"
+      itemGutter={true}
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -153,7 +165,6 @@ exports[`when there is more renders a load more button 1`] = `
             "id": "comment-1",
           }
         }
-        gutterBottom={true}
       />
       <Relay(ReplyListContainer)
         comment={
@@ -162,8 +173,10 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
       />
-    </div>
-    <div
+    </Flex>
+    <Flex
+      direction="column"
+      itemGutter={true}
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -172,7 +185,6 @@ exports[`when there is more renders a load more button 1`] = `
             "id": "comment-2",
           }
         }
-        gutterBottom={true}
       />
       <Relay(ReplyListContainer)
         comment={
@@ -181,7 +193,7 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
       />
-    </div>
+    </Flex>
     <Localized
       id="comments-stream-loadMore"
     >
@@ -197,6 +209,6 @@ exports[`when there is more renders a load more button 1`] = `
         Load More
       </withPropsOnChange(Button)>
     </Localized>
-  </div>
+  </Flex>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index ac6fc560a..2ba780577 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`loads more comments 1`] = `
 <div
-  className="Flex-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter"
 >
   <div
     className="Stream-root"
@@ -40,24 +40,26 @@ exports[`loads more comments 1`] = `
     </form>
     <div
       aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
-      <div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
         <div
-          className="Comment-root Comment-gutterBottom"
           role="article"
         >
           <div
-            className="Comment-topBar"
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Username-root"
+              className="Typography-root Typography-heading3 Username-root"
             >
               Markus
             </span>
             <time
-              className="RelativeTime-root"
+              className="Timestamp-root RelativeTime-root"
               dateTime="2018-07-06T21:24:00.000Z"
               title="2018-07-06T18:24:00"
             >
@@ -71,21 +73,22 @@ exports[`loads more comments 1`] = `
           </p>
         </div>
       </div>
-      <div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
         <div
-          className="Comment-root Comment-gutterBottom"
           role="article"
         >
           <div
-            className="Comment-topBar"
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Username-root"
+              className="Typography-root Typography-heading3 Username-root"
             >
               Lukas
             </span>
             <time
-              className="RelativeTime-root"
+              className="Timestamp-root RelativeTime-root"
               dateTime="2018-07-06T21:20:00.000Z"
               title="2018-07-06T18:20:00"
             >
@@ -99,21 +102,22 @@ exports[`loads more comments 1`] = `
           </p>
         </div>
       </div>
-      <div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
         <div
-          className="Comment-root Comment-gutterBottom"
           role="article"
         >
           <div
-            className="Comment-topBar"
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Username-root"
+              className="Typography-root Typography-heading3 Username-root"
             >
               Isabelle
             </span>
             <time
-              className="RelativeTime-root"
+              className="Timestamp-root RelativeTime-root"
               dateTime="2018-07-06T21:14:00.000Z"
               title="2018-07-06T18:14:00"
             >
@@ -134,7 +138,7 @@ exports[`loads more comments 1`] = `
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter"
 >
   <div
     className="Stream-root"
@@ -172,24 +176,26 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
-      <div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
         <div
-          className="Comment-root Comment-gutterBottom"
           role="article"
         >
           <div
-            className="Comment-topBar"
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Username-root"
+              className="Typography-root Typography-heading3 Username-root"
             >
               Markus
             </span>
             <time
-              className="RelativeTime-root"
+              className="Timestamp-root RelativeTime-root"
               dateTime="2018-07-06T21:24:00.000Z"
               title="2018-07-06T18:24:00"
             >
@@ -203,21 +209,22 @@ exports[`renders comment stream 1`] = `
           </p>
         </div>
       </div>
-      <div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
         <div
-          className="Comment-root Comment-gutterBottom"
           role="article"
         >
           <div
-            className="Comment-topBar"
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Username-root"
+              className="Typography-root Typography-heading3 Username-root"
             >
               Lukas
             </span>
             <time
-              className="RelativeTime-root"
+              className="Timestamp-root RelativeTime-root"
               dateTime="2018-07-06T21:20:00.000Z"
               title="2018-07-06T18:20:00"
             >
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index f56c4c188..f13aaef71 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter"
 >
   <div
     className="Stream-root"
@@ -40,24 +40,26 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
-      <div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
         <div
-          className="Comment-root Comment-gutterBottom"
           role="article"
         >
           <div
-            className="Comment-topBar"
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Username-root"
+              className="Typography-root Typography-heading3 Username-root"
             >
               Markus
             </span>
             <time
-              className="RelativeTime-root"
+              className="Timestamp-root RelativeTime-root"
               dateTime="2018-07-06T21:24:00.000Z"
               title="2018-07-06T18:24:00"
             >
@@ -71,21 +73,22 @@ exports[`renders comment stream 1`] = `
           </p>
         </div>
       </div>
-      <div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
         <div
-          className="Comment-root Comment-gutterBottom"
           role="article"
         >
           <div
-            className="Comment-topBar"
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Username-root"
+              className="Typography-root Typography-heading3 Username-root"
             >
               Markus
             </span>
             <time
-              className="RelativeTime-root"
+              className="Timestamp-root RelativeTime-root"
               dateTime="2018-07-06T21:24:00.000Z"
               title="2018-07-06T18:24:00"
             >
@@ -102,23 +105,23 @@ exports[`renders comment stream 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
             id="talk-comments-replyList-log--comment-with-replies"
             role="log"
           >
             <div
-              className="Comment-root Comment-gutterBottom"
               role="article"
             >
               <div
-                className="Comment-topBar"
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
                 <span
-                  className="Username-root"
+                  className="Typography-root Typography-heading3 Username-root"
                 >
                   Markus
                 </span>
                 <time
-                  className="RelativeTime-root"
+                  className="Timestamp-root RelativeTime-root"
                   dateTime="2018-07-06T21:24:00.000Z"
                   title="2018-07-06T18:24:00"
                 >
@@ -132,19 +135,18 @@ exports[`renders comment stream 1`] = `
               </p>
             </div>
             <div
-              className="Comment-root Comment-gutterBottom"
               role="article"
             >
               <div
-                className="Comment-topBar"
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
                 <span
-                  className="Username-root"
+                  className="Typography-root Typography-heading3 Username-root"
                 >
                   Lukas
                 </span>
                 <time
-                  className="RelativeTime-root"
+                  className="Timestamp-root RelativeTime-root"
                   dateTime="2018-07-06T21:20:00.000Z"
                   title="2018-07-06T18:20:00"
                 >
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index e0f5c31f1..116e50813 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter"
 >
   <div
     className="Stream-root"
@@ -40,24 +40,26 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
-      <div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
         <div
-          className="Comment-root Comment-gutterBottom"
           role="article"
         >
           <div
-            className="Comment-topBar"
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Username-root"
+              className="Typography-root Typography-heading3 Username-root"
             >
               Markus
             </span>
             <time
-              className="RelativeTime-root"
+              className="Timestamp-root RelativeTime-root"
               dateTime="2018-07-06T21:24:00.000Z"
               title="2018-07-06T18:24:00"
             >
@@ -71,21 +73,22 @@ exports[`renders comment stream 1`] = `
           </p>
         </div>
       </div>
-      <div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
         <div
-          className="Comment-root Comment-gutterBottom"
           role="article"
         >
           <div
-            className="Comment-topBar"
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Username-root"
+              className="Typography-root Typography-heading3 Username-root"
             >
               Lukas
             </span>
             <time
-              className="RelativeTime-root"
+              className="Timestamp-root RelativeTime-root"
               dateTime="2018-07-06T21:20:00.000Z"
               title="2018-07-06T18:20:00"
             >
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 968bbb0b3..6718b0688 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter"
 >
   <div
     className="Stream-root"
@@ -40,24 +40,26 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
-      <div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
         <div
-          className="Comment-root Comment-gutterBottom"
           role="article"
         >
           <div
-            className="Comment-topBar"
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Username-root"
+              className="Typography-root Typography-heading3 Username-root"
             >
               Markus
             </span>
             <time
-              className="RelativeTime-root"
+              className="Timestamp-root RelativeTime-root"
               dateTime="2018-07-06T21:24:00.000Z"
               title="2018-07-06T18:24:00"
             >
@@ -74,23 +76,23 @@ exports[`renders comment stream 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
             id="talk-comments-replyList-log--comment-0"
             role="log"
           >
             <div
-              className="Comment-root Comment-gutterBottom"
               role="article"
             >
               <div
-                className="Comment-topBar"
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
                 <span
-                  className="Username-root"
+                  className="Typography-root Typography-heading3 Username-root"
                 >
                   Lukas
                 </span>
                 <time
-                  className="RelativeTime-root"
+                  className="Timestamp-root RelativeTime-root"
                   dateTime="2018-07-06T21:20:00.000Z"
                   title="2018-07-06T18:20:00"
                 >
@@ -125,7 +127,7 @@ exports[`renders comment stream 1`] = `
 
 exports[`show all replies 1`] = `
 <div
-  className="Flex-root Flex-justifyCenter"
+  className="Flex-root App-root Flex-justifyCenter"
 >
   <div
     className="Stream-root"
@@ -163,24 +165,26 @@ exports[`show all replies 1`] = `
     </form>
     <div
       aria-live="polite"
+      className="Flex-root Flex-itemGutter Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
-      <div>
+      <div
+        className="Flex-root Flex-itemGutter Flex-directionColumn"
+      >
         <div
-          className="Comment-root Comment-gutterBottom"
           role="article"
         >
           <div
-            className="Comment-topBar"
+            className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
             <span
-              className="Username-root"
+              className="Typography-root Typography-heading3 Username-root"
             >
               Markus
             </span>
             <time
-              className="RelativeTime-root"
+              className="Timestamp-root RelativeTime-root"
               dateTime="2018-07-06T21:24:00.000Z"
               title="2018-07-06T18:24:00"
             >
@@ -197,23 +201,23 @@ exports[`show all replies 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
+            className="Flex-root Flex-itemGutter Flex-directionColumn"
             id="talk-comments-replyList-log--comment-0"
             role="log"
           >
             <div
-              className="Comment-root Comment-gutterBottom"
               role="article"
             >
               <div
-                className="Comment-topBar"
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
                 <span
-                  className="Username-root"
+                  className="Typography-root Typography-heading3 Username-root"
                 >
                   Lukas
                 </span>
                 <time
-                  className="RelativeTime-root"
+                  className="Timestamp-root RelativeTime-root"
                   dateTime="2018-07-06T21:20:00.000Z"
                   title="2018-07-06T18:20:00"
                 >
@@ -227,19 +231,18 @@ exports[`show all replies 1`] = `
               </p>
             </div>
             <div
-              className="Comment-root Comment-gutterBottom"
               role="article"
             >
               <div
-                className="Comment-topBar"
+                className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
                 <span
-                  className="Username-root"
+                  className="Typography-root Typography-heading3 Username-root"
                 >
                   Isabelle
                 </span>
                 <time
-                  className="RelativeTime-root"
+                  className="Timestamp-root RelativeTime-root"
                   dateTime="2018-07-06T21:14:00.000Z"
                   title="2018-07-06T18:14:00"
                 >