diff --git a/src/core/client/stream/components/Comment/IndentedComment.css b/src/core/client/stream/components/Comment/IndentedComment.css
new file mode 100644
index 000000000..ff0a0fa5f
--- /dev/null
+++ b/src/core/client/stream/components/Comment/IndentedComment.css
@@ -0,0 +1,5 @@
+.blur {
+  filter: blur(2px);
+  user-select: none;
+  pointer-events: none;
+}
diff --git a/src/core/client/stream/components/Comment/IndentedComment.tsx b/src/core/client/stream/components/Comment/IndentedComment.tsx
index 2460f905b..157689517 100644
--- a/src/core/client/stream/components/Comment/IndentedComment.tsx
+++ b/src/core/client/stream/components/Comment/IndentedComment.tsx
@@ -1,20 +1,25 @@
+import cn from "classnames";
 import React, { StatelessComponent } from "react";
 
 import { PropTypesOf } from "talk-framework/types";
 
 import Indent from "../Indent";
 import Comment from "./Comment";
+import * as styles from "./IndentedComment.css";
 
 export interface IndentedCommentProps extends PropTypesOf<typeof Comment> {
   indentLevel?: number;
+  blur?: boolean;
 }
 
 const IndentedComment: StatelessComponent<IndentedCommentProps> = props => {
   const { indentLevel, ...rest } = props;
   const CommentElement = <Comment {...rest} />;
-  const CommentwithIndent =
-    (indentLevel && <Indent level={indentLevel}>{CommentElement}</Indent>) ||
-    CommentElement;
+  const CommentwithIndent = (
+    <Indent level={indentLevel} className={cn({ [styles.blur]: props.blur })}>
+      {CommentElement}
+    </Indent>
+  );
   return CommentwithIndent;
 };
 
diff --git a/src/core/client/stream/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap
index d264e4050..daaa79aca 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/IndentedComment.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <Indent
+  className=""
   level={1}
 >
   <Comment
diff --git a/src/core/client/stream/components/Indent.tsx b/src/core/client/stream/components/Indent.tsx
index 1c33c3f26..e40d10181 100644
--- a/src/core/client/stream/components/Indent.tsx
+++ b/src/core/client/stream/components/Indent.tsx
@@ -4,6 +4,7 @@ import React, { StatelessComponent } from "react";
 import * as styles from "./Indent.css";
 
 export interface IndentProps {
+  className?: string;
   level?: number;
   noBorder?: boolean;
   children: React.ReactNode;
@@ -12,7 +13,7 @@ export interface IndentProps {
 const Indent: StatelessComponent<IndentProps> = props => {
   return (
     <div
-      className={cn(styles.root, {
+      className={cn(props.className, styles.root, {
         [styles.level1]: props.level === 1,
         [styles.noBorder]: props.noBorder,
       })}
diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx
index 91f2acafb..7ca1da6e6 100644
--- a/src/core/client/stream/containers/CommentContainer.spec.tsx
+++ b/src/core/client/stream/containers/CommentContainer.spec.tsx
@@ -26,6 +26,7 @@ it("renders username and body", () => {
       editing: {
         editableUntil: "1995-12-17T03:24:30.000Z",
       },
+      pending: false,
     },
     indentLevel: 1,
     showAuthPopup: noop as any,
@@ -51,6 +52,7 @@ it("renders body only", () => {
       editing: {
         editableUntil: "1995-12-17T03:24:30.000Z",
       },
+      pending: false,
     },
     indentLevel: 1,
     showAuthPopup: noop as any,
diff --git a/src/core/client/stream/containers/CommentContainer.tsx b/src/core/client/stream/containers/CommentContainer.tsx
index df61c3f9e..13797018c 100644
--- a/src/core/client/stream/containers/CommentContainer.tsx
+++ b/src/core/client/stream/containers/CommentContainer.tsx
@@ -112,6 +112,7 @@ export class CommentContainer extends Component<InnerProps, State> {
           author={comment.author}
           body={comment.body}
           createdAt={comment.createdAt}
+          blur={comment.pending || false}
           topBarRight={
             (editable && (
               <Localized id="comments-commentContainer-editButton">
@@ -174,6 +175,7 @@ const enhanced = withShowAuthPopupMutation(
         editing {
           editableUntil
         }
+        pending
         ...ReplyCommentFormContainer_comment
         ...EditCommentFormContainer_comment
       }
diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
index 9ad26125f..c58185c5b 100644
--- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -8,6 +8,7 @@ exports[`renders body only 1`] = `
         "username": null,
       }
     }
+    blur={false}
     body="Woof"
     createdAt="1995-12-17T03:24:00.000Z"
     footer={
@@ -35,6 +36,7 @@ exports[`renders username and body 1`] = `
         "username": "Marvin",
       }
     }
+    blur={false}
     body="Woof"
     createdAt="1995-12-17T03:24:00.000Z"
     footer={
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index 9c2585ebf..9e04c476a 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -15,6 +15,10 @@ type AuthPopup {
   view: View
 }
 
+extend type Comment {
+  pending: Boolean
+}
+
 type Local {
   network: Network!
   assetID: String
diff --git a/src/core/client/stream/mutations/CreateCommentMutation.ts b/src/core/client/stream/mutations/CreateCommentMutation.ts
index 958ad9acc..b858f04e2 100644
--- a/src/core/client/stream/mutations/CreateCommentMutation.ts
+++ b/src/core/client/stream/mutations/CreateCommentMutation.ts
@@ -72,6 +72,7 @@ function commit(
 ) {
   const me = getMe(environment)!;
   const currentDate = new Date().toISOString();
+  const id = uuidGenerator();
   return commitMutationPromiseNormalized<MutationTypes>(environment, {
     mutation,
     variables: {
@@ -85,7 +86,7 @@ function commit(
         edge: {
           cursor: currentDate,
           node: {
-            id: uuidGenerator(),
+            id,
             createdAt: currentDate,
             author: {
               id: me.id,
@@ -100,6 +101,9 @@ function commit(
         clientMutationId: (clientMutationId++).toString(),
       },
     } as any, // TODO: (cvle) generated types should contain one for the optimistic response.
+    optimisticUpdater: store => {
+      store.get(id)!.setValue(true, "pending");
+    },
     configs: getConfig(input),
   });
 }
diff --git a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
index 07b6f3c19..32b7681fa 100644
--- a/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/editComment.spec.tsx.snap
@@ -188,32 +188,62 @@ exports[`cancel edit: edit canceled 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+              <div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                  id="comments-commentContainer-editButton-comment-0"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  Edit
+                </button>
+              </div>
             </div>
-            <div>
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
               <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                id="comments-commentContainer-editButton-comment-0"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -223,94 +253,72 @@ exports[`cancel edit: edit canceled 1`] = `
                 onTouchEnd={[Function]}
                 type="button"
               >
-                Edit
+                <span>
+                  Reply
+                </span>
               </button>
             </div>
           </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
-              </span>
-            </button>
-          </div>
         </div>
       </div>
       <div
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -672,56 +680,60 @@ exports[`edit a comment: edit form 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1083,56 +1095,60 @@ exports[`edit a comment: optimistic response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1329,32 +1345,62 @@ exports[`edit a comment: render stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+              <div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                  id="comments-commentContainer-editButton-comment-0"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  Edit
+                </button>
+              </div>
             </div>
-            <div>
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
               <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                id="comments-commentContainer-editButton-comment-0"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -1364,94 +1410,72 @@ exports[`edit a comment: render stream 1`] = `
                 onTouchEnd={[Function]}
                 type="button"
               >
-                Edit
+                <span>
+                  Reply
+                </span>
               </button>
             </div>
           </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
-              </span>
-            </button>
-          </div>
         </div>
       </div>
       <div
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1648,32 +1672,62 @@ exports[`edit a comment: server response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+              <div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                  id="comments-commentContainer-editButton-comment-0"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  Edit
+                </button>
+              </div>
             </div>
-            <div>
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Edited! (from server)",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
               <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                id="comments-commentContainer-editButton-comment-0"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -1683,94 +1737,72 @@ exports[`edit a comment: server response 1`] = `
                 onTouchEnd={[Function]}
                 type="button"
               >
-                Edit
+                <span>
+                  Reply
+                </span>
               </button>
             </div>
           </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Edited! (from server)",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
-              </span>
-            </button>
-          </div>
         </div>
       </div>
       <div
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1967,32 +1999,62 @@ exports[`shows expiry message: edit form closed 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+              <div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                  id="comments-commentContainer-editButton-comment-0"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  Edit
+                </button>
+              </div>
             </div>
-            <div>
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
               <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                id="comments-commentContainer-editButton-comment-0"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -2002,94 +2064,72 @@ exports[`shows expiry message: edit form closed 1`] = `
                 onTouchEnd={[Function]}
                 type="button"
               >
-                Edit
+                <span>
+                  Reply
+                </span>
               </button>
             </div>
           </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
-              </span>
-            </button>
-          </div>
         </div>
       </div>
       <div
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -2428,56 +2468,60 @@ exports[`shows expiry message: edit time expired 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </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 27964d7c7..2d039a849 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -149,56 +149,60 @@ exports[`loads more comments 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -206,56 +210,60 @@ exports[`loads more comments 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -263,56 +271,60 @@ exports[`loads more comments 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Isabelle
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:14:00.000Z"
-                title="2018-07-06T18:14:00.000Z"
-              >
-                2018-07-06T18:14:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Isabelle
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:14:00.000Z"
+                  title="2018-07-06T18:14:00.000Z"
+                >
+                  2018-07-06T18:14:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Hey!",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Hey!",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-2"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-2"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -470,56 +482,60 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -527,56 +543,60 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index a21e1148b..a3598699e 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -24,56 +24,60 @@ exports[`renders permalink view 1`] = `
       Show all comments
     </a>
     <div
-      className="Comment-root"
-      role="article"
+      className="Indent-root"
     >
       <div
-        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+        className="Comment-root"
+        role="article"
       >
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
         >
-          <span
-            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+          <div
+            className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            Markus
-          </span>
-          <time
-            className="Timestamp-root RelativeTime-root"
-            dateTime="2018-07-06T18:24:00.000Z"
-            title="2018-07-06T18:24:00.000Z"
-          >
-            2018-07-06T18:24:00.000Z
-          </time>
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
         </div>
-      </div>
-      <div
-        className="HTMLContent-root"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "Joining Too",
+        <div
+          className="HTMLContent-root"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "Joining Too",
+            }
           }
-        }
-      />
-      <div
-        className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-      >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-          id="comments-commentContainer-replyButton-comment-0"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
+        />
+        <div
+          className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
         >
-          <span>
-            Reply
-          </span>
-        </button>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+            id="comments-commentContainer-replyButton-comment-0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            <span>
+              Reply
+            </span>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -229,56 +233,60 @@ exports[`show all comments 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index f5ac0cf10..e4ccc295a 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -181,56 +181,60 @@ exports[`show all comments 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
index 0c0129082..4ccf8d58d 100644
--- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
@@ -182,32 +182,62 @@ exports[`post a comment: optimistic response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="IndentedComment-blur Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+              <div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                  id="comments-commentContainer-editButton-uuid-0"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  Edit
+                </button>
+              </div>
             </div>
-            <div>
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<strong>Hello world!</strong>",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
               <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                id="comments-commentContainer-editButton-uuid-0"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-uuid-0"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -217,37 +247,72 @@ exports[`post a comment: optimistic response 1`] = `
                 onTouchEnd={[Function]}
                 type="button"
               >
-                Edit
+                <span>
+                  Reply
+                </span>
               </button>
             </div>
           </div>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
           <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "<strong>Hello world!</strong>",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-uuid-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <div
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+            </div>
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -255,113 +320,60 @@ exports[`post a comment: optimistic response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              <span>
-                Reply
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Comment-root"
-          role="article"
-        >
-          <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-          >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
-            </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -558,56 +570,60 @@ exports[`post a comment: server response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "<strong>Hello world! (from server)</strong>",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<strong>Hello world! (from server)</strong>",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-x"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-x"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -615,56 +631,60 @@ exports[`post a comment: server response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -672,56 +692,60 @@ exports[`post a comment: server response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -918,56 +942,60 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -975,56 +1003,60 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
index ad6177fc0..b19964019 100644
--- a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
@@ -188,56 +188,60 @@ exports[`post a reply: open reply form 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <form
@@ -372,56 +376,60 @@ exports[`post a reply: open reply form 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -618,56 +626,60 @@ exports[`post a reply: optimistic response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <form
@@ -797,7 +809,7 @@ exports[`post a reply: optimistic response 1`] = `
           role="log"
         >
           <div
-            className="Indent-root Indent-level1"
+            className="IndentedComment-blur Indent-root Indent-level1"
           >
             <div
               className="Comment-root"
@@ -875,56 +887,60 @@ exports[`post a reply: optimistic response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1121,56 +1137,60 @@ exports[`post a reply: server response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <div
@@ -1241,56 +1261,60 @@ exports[`post a reply: server response 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1487,56 +1511,60 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1544,56 +1572,60 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
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 3ceec7207..68830fcce 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -149,56 +149,60 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -206,56 +210,60 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "I like yoghurt",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "I like yoghurt",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-with-replies"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-with-replies"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <div
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 0cada5f0e..c967faf70 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -149,56 +149,60 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -206,56 +210,60 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
+                >
+                  2018-07-06T18:20:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "What's up?",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "What's up?",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-1"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
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 94cacbaf6..caf62a93a 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -149,56 +149,60 @@ exports[`renders comment stream 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <div
@@ -439,56 +443,60 @@ exports[`show all replies 1`] = `
         className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Comment-root"
-          role="article"
+          className="Indent-root"
         >
           <div
-            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Comment-root"
+            role="article"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
             >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                Markus
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:24:00.000Z"
-                title="2018-07-06T18:24:00.000Z"
-              >
-                2018-07-06T18:24:00.000Z
-              </time>
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
             </div>
-          </div>
-          <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
               }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            />
+            <div
+              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
         <div