diff --git a/package-lock.json b/package-lock.json
index c4ffb60fb..359d2bdeb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19555,9 +19555,9 @@
       "dev": true
     },
     "popper.js": {
-      "version": "1.14.3",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
-      "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU=",
+      "version": "1.14.6",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.6.tgz",
+      "integrity": "sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA==",
       "dev": true
     },
     "portfinder": {
@@ -19573,7 +19573,7 @@
       "dependencies": {
         "async": {
           "version": "1.5.2",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
           "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
           "dev": true
         }
@@ -23268,23 +23268,38 @@
       "dev": true
     },
     "react-popper": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.0.0.tgz",
-      "integrity": "sha1-uZRSFE6P5KzHf6PZWajHngemUIQ=",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.2.tgz",
+      "integrity": "sha512-UbFWj55Yt9uqvy0oZ+vULDL2Bw1oxeZF9/JzGyxQ5ypgauRH/XlarA5+HLZWro/Zss6Ht2kqpegtb6sYL8GUGw==",
       "dev": true,
       "requires": {
-        "babel-runtime": "6.x.x",
-        "create-react-context": "^0.2.1",
-        "popper.js": "^1.14.1",
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "<=0.2.2",
+        "popper.js": "^1.14.4",
         "prop-types": "^15.6.1",
-        "typed-styles": "^0.0.5",
-        "warning": "^3.0.0"
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
       },
       "dependencies": {
+        "@babel/runtime": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.2.0.tgz",
+          "integrity": "sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
+          "dev": true
+        },
         "warning": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+          "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
           "dev": true,
           "requires": {
             "loose-envify": "^1.0.0"
@@ -27160,9 +27175,9 @@
       }
     },
     "typed-styles": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz",
-      "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==",
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==",
       "dev": true
     },
     "typedarray": {
diff --git a/package.json b/package.json
index 4ea9fb7cc..1727e4375 100644
--- a/package.json
+++ b/package.json
@@ -256,7 +256,7 @@
     "react-dev-utils": "6.0.0-next.3e165448",
     "react-dom": "^16.5.2",
     "react-final-form": "^3.6.4",
-    "react-popper": "^1.0.0",
+    "react-popper": "^1.3.2",
     "react-relay": "^1.7.0-rc.1",
     "react-responsive": "^5.0.0",
     "react-test-renderer": "^16.5.2",
diff --git a/src/core/client/admin/components/DecisionHistoryButton.css b/src/core/client/admin/components/DecisionHistoryButton.css
index 001a0a329..fce678540 100644
--- a/src/core/client/admin/components/DecisionHistoryButton.css
+++ b/src/core/client/admin/components/DecisionHistoryButton.css
@@ -1,5 +1,4 @@
 .popover {
-  z-index: var(--zindex-popover);
   width: 350px;
 }
 
diff --git a/src/core/client/framework/lib/messages.tsx b/src/core/client/framework/lib/messages.tsx
index 861864643..5c5f11776 100644
--- a/src/core/client/framework/lib/messages.tsx
+++ b/src/core/client/framework/lib/messages.tsx
@@ -13,8 +13,14 @@ export const VALIDATION_REQUIRED = () => (
 );
 
 export const VALIDATION_TOO_SHORT = (minLength: number) => (
-  <Localized id="framework-validation-tooShort">
-    <span>{"This field must contain at least {$minLength} characters."}</span>
+  <Localized id="framework-validation-tooShort" $minLength={minLength}>
+    <span>{"Please enter at least {$minLength} characters."}</span>
+  </Localized>
+);
+
+export const VALIDATION_TOO_LONG = (maxLength: number) => (
+  <Localized id="framework-validation-tooLong" $maxLength={maxLength}>
+    <span>{"Please enter at max {$maxLength} characters."}</span>
   </Localized>
 );
 
diff --git a/src/core/client/framework/lib/validation.tsx b/src/core/client/framework/lib/validation.tsx
index efbe738c3..0e53ca9eb 100644
--- a/src/core/client/framework/lib/validation.tsx
+++ b/src/core/client/framework/lib/validation.tsx
@@ -19,6 +19,8 @@ import {
   USERNAME_TOO_LONG,
   USERNAME_TOO_SHORT,
   VALIDATION_REQUIRED,
+  VALIDATION_TOO_LONG,
+  VALIDATION_TOO_SHORT,
 } from "./messages";
 
 export type Validator<T = any, V = any> = (v: T, values: V) => ReactNode;
@@ -76,6 +78,24 @@ export const validateURL = createValidator(
   INVALID_URL()
 );
 
+/**
+ * validateMinLength is a Validator that checks that the field has a min length of characters
+ */
+export const validateMinLength = (minLength: number) =>
+  createValidator(
+    v => !v || v.length >= minLength,
+    VALIDATION_TOO_SHORT(minLength)
+  );
+
+/**
+ * validateMaxLength is a Validator that checks that the field has max length of characters
+ */
+export const validateMaxLength = (maxLength: number) =>
+  createValidator(
+    v => !v || v.length <= maxLength,
+    VALIDATION_TOO_LONG(maxLength)
+  );
+
 /**
  * validateUsernameMinLength is a Validator that checks that the username has a min length of characters
  */
diff --git a/src/core/client/framework/testHelpers/byID.ts b/src/core/client/framework/testHelpers/byID.ts
new file mode 100644
index 000000000..82888c57d
--- /dev/null
+++ b/src/core/client/framework/testHelpers/byID.ts
@@ -0,0 +1,36 @@
+import { ReactTestInstance } from "react-test-renderer";
+
+import matchText, { TextMatchOptions, TextMatchPattern } from "./matchText";
+
+const matcher = (pattern: TextMatchPattern, options?: TextMatchOptions) => (
+  i: ReactTestInstance
+) => {
+  // Only look at dom components.
+  if (typeof i.type !== "string" || !i.props.id) {
+    return false;
+  }
+  return matchText(pattern, i.props.id, {
+    collapseWhitespace: false,
+    ...options,
+  });
+};
+
+export function getByID(
+  container: ReactTestInstance,
+  pattern: TextMatchPattern,
+  options?: TextMatchOptions
+) {
+  return container.find(matcher(pattern, options));
+}
+
+export function queryByID(
+  container: ReactTestInstance,
+  pattern: TextMatchPattern,
+  options?: TextMatchOptions
+) {
+  const results = container.findAll(matcher(pattern, options));
+  if (!results.length) {
+    return null;
+  }
+  return results[0];
+}
diff --git a/src/core/client/framework/testHelpers/byLabelText.ts b/src/core/client/framework/testHelpers/byLabelText.ts
index ed69f90c8..19b589b04 100644
--- a/src/core/client/framework/testHelpers/byLabelText.ts
+++ b/src/core/client/framework/testHelpers/byLabelText.ts
@@ -62,7 +62,7 @@ export function queryAllByLabelText(
   options?: TextMatchOptions
 ) {
   const matches = container.findAll(ariaLabelMatcher(pattern, options));
-  queryAllByText(container, pattern).forEach(i => {
+  queryAllByText(container, pattern, options).forEach(i => {
     if (typeof i.type !== "string") {
       return;
     }
diff --git a/src/core/client/framework/testHelpers/byText.ts b/src/core/client/framework/testHelpers/byText.ts
index 104aacbd9..60e3f96db 100644
--- a/src/core/client/framework/testHelpers/byText.ts
+++ b/src/core/client/framework/testHelpers/byText.ts
@@ -1,6 +1,8 @@
 import React from "react";
 import { ReactTestInstance } from "react-test-renderer";
 
+import findParentsWithType from "./findParentsWithType";
+import findParentWithType from "./findParentWithType";
 import matchText, { TextMatchOptions, TextMatchPattern } from "./matchText";
 
 const matcher = (pattern: TextMatchPattern, options?: TextMatchOptions) => (
@@ -10,6 +12,12 @@ const matcher = (pattern: TextMatchPattern, options?: TextMatchOptions) => (
   if (typeof i.type !== "string") {
     return false;
   }
+  if (
+    i.props.dangerouslySetInnerHTML &&
+    matchText(pattern, i.props.dangerouslySetInnerHTML.__html, options)
+  ) {
+    return true;
+  }
   if (!i.props.children) {
     return false;
   }
@@ -22,20 +30,34 @@ const matcher = (pattern: TextMatchPattern, options?: TextMatchOptions) => (
   return false;
 };
 
+interface SelectorOptions {
+  selector?: string | React.ComponentClass<any> | React.StatelessComponent<any>;
+}
+
 export function getByText(
   container: ReactTestInstance,
   pattern: TextMatchPattern,
-  options?: TextMatchOptions
+  options?: TextMatchOptions & SelectorOptions
 ) {
-  return container.find(matcher(pattern, options));
+  const result = findParentWithType(
+    container.find(matcher(pattern, options)),
+    options && options.selector
+  );
+  if (!result) {
+    throw new Error(`Couldn't find text ${pattern}`);
+  }
+  return result;
 }
 
 export function getAllByText(
   container: ReactTestInstance,
   pattern: TextMatchPattern,
-  options?: TextMatchOptions
+  options?: TextMatchOptions & SelectorOptions
 ) {
-  const results = container.findAll(matcher(pattern, options));
+  const results = findParentsWithType(
+    container.findAll(matcher(pattern, options)),
+    options && options.selector
+  );
   if (!results.length) {
     throw new Error(`Couldn't find text ${pattern}`);
   }
@@ -45,9 +67,12 @@ export function getAllByText(
 export function queryByText(
   container: ReactTestInstance,
   pattern: TextMatchPattern,
-  options?: TextMatchOptions
+  options?: TextMatchOptions & SelectorOptions
 ) {
-  const results = container.findAll(matcher(pattern, options));
+  const results = findParentsWithType(
+    container.findAll(matcher(pattern, options)),
+    options && options.selector
+  );
   if (!results.length) {
     return null;
   }
@@ -57,7 +82,10 @@ export function queryByText(
 export function queryAllByText(
   container: ReactTestInstance,
   pattern: TextMatchPattern,
-  options?: TextMatchOptions
+  options?: TextMatchOptions & SelectorOptions
 ) {
-  return container.findAll(matcher(pattern, options));
+  return findParentsWithType(
+    container.findAll(matcher(pattern, options)),
+    options && options.selector
+  );
 }
diff --git a/src/core/client/framework/testHelpers/findParentWithType.ts b/src/core/client/framework/testHelpers/findParentWithType.ts
new file mode 100644
index 000000000..de842c3b2
--- /dev/null
+++ b/src/core/client/framework/testHelpers/findParentWithType.ts
@@ -0,0 +1,20 @@
+import { ReactTestInstance } from "react-test-renderer";
+
+export default function findParentWithType(
+  instance: ReactTestInstance,
+  selector:
+    | string
+    | React.ComponentClass<any>
+    | React.StatelessComponent<any> = "*"
+): ReactTestInstance | null {
+  if (selector === "*") {
+    return instance;
+  }
+  if (instance.type === selector) {
+    return instance;
+  }
+  if (instance.parent) {
+    return findParentWithType(instance.parent, selector);
+  }
+  return null;
+}
diff --git a/src/core/client/framework/testHelpers/findParentsWithType.ts b/src/core/client/framework/testHelpers/findParentsWithType.ts
new file mode 100644
index 000000000..ee280b3e5
--- /dev/null
+++ b/src/core/client/framework/testHelpers/findParentsWithType.ts
@@ -0,0 +1,15 @@
+import { ReactTestInstance } from "react-test-renderer";
+
+import findParentWithType from "./findParentWithType";
+
+export default function findParentsWithType(
+  instances: ReactTestInstance[],
+  selector:
+    | string
+    | React.ComponentClass<any>
+    | React.StatelessComponent<any> = "*"
+): ReactTestInstance[] {
+  return instances
+    .map(i => findParentWithType(i, selector))
+    .filter(i => i) as ReactTestInstance[];
+}
diff --git a/src/core/client/framework/testHelpers/index.ts b/src/core/client/framework/testHelpers/index.ts
index b8b00057e..bbf6a5107 100644
--- a/src/core/client/framework/testHelpers/index.ts
+++ b/src/core/client/framework/testHelpers/index.ts
@@ -20,3 +20,5 @@ export { default as matchText } from "./matchText";
 export { default as toJSON } from "./toJSON";
 export { default as replaceHistoryLocation } from "./replaceHistoryLocation";
 export { default as createAuthToken } from "./createAuthToken";
+export { default as findParentsWithType } from "./findParentsWithType";
+export { default as findParentWithType } from "./findParentWithType";
diff --git a/src/core/client/framework/testHelpers/within.ts b/src/core/client/framework/testHelpers/within.ts
index 1131eea1a..b9e880ae5 100644
--- a/src/core/client/framework/testHelpers/within.ts
+++ b/src/core/client/framework/testHelpers/within.ts
@@ -1,5 +1,9 @@
 import { ReactTestInstance } from "react-test-renderer";
 
+import {
+  getByID,
+  queryByID,
+} from "./byID";
 import {
   getAllByLabelText,
   getByLabelText,
@@ -47,6 +51,8 @@ export default function within(container: ReactTestInstance) {
     getAllByTestID: applyContainer(container, getAllByTestID),
     queryByTestID: applyContainer(container, queryByTestID),
     queryAllByTestID: applyContainer(container, queryAllByTestID),
+    getByID: applyContainer(container, getByID),
+    queryByID: applyContainer(container, queryByID),
     getByText: applyContainer(container, getByText),
     getAllByText: applyContainer(container, getAllByText),
     queryByText: applyContainer(container, queryByText),
diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index fda940372..6ab29fbae 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -19,10 +19,10 @@ const App: StatelessComponent<AppProps> = props => {
     <HorizontalGutter className={styles.root}>
       <TabBarQuery />
       <TabContent activeTab={props.activeTab} className={styles.tabContent}>
-        <TabPane tabId="COMMENTS">
+        <TabPane tabId="COMMENTS" data-testid="current-tab-pane">
           <CommentsPaneContainer />
         </TabPane>
-        <TabPane tabId="PROFILE">
+        <TabPane tabId="PROFILE" data-testid="current-tab-pane">
           <ProfileQuery />
         </TabPane>
       </TabContent>
diff --git a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
index 8962ad068..3e1c12653 100644
--- a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
@@ -10,11 +10,13 @@ exports[`renders correctly 1`] = `
     className="App-tabContent"
   >
     <TabPane
+      data-testid="current-tab-pane"
       tabId="COMMENTS"
     >
       <withContext(withLocalStateContainer(CommentsPaneContainer)) />
     </TabPane>
     <TabPane
+      data-testid="current-tab-pane"
       tabId="PROFILE"
     >
       <withContext(withLocalStateContainer(ProfileQuery)) />
diff --git a/src/core/client/stream/mutations/CreateCommentDontAgreeMutation.ts b/src/core/client/stream/mutations/CreateCommentDontAgreeMutation.ts
new file mode 100644
index 000000000..cb1af6d57
--- /dev/null
+++ b/src/core/client/stream/mutations/CreateCommentDontAgreeMutation.ts
@@ -0,0 +1,55 @@
+import { pick } from "lodash";
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutationContainer,
+} from "talk-framework/lib/relay";
+import { Omit } from "talk-framework/types";
+
+import { CreateCommentDontAgreeMutation as MutationTypes } from "talk-stream/__generated__/CreateCommentDontAgreeMutation.graphql";
+
+export type CreateCommentDontAgreeInput = Omit<
+  MutationTypes["variables"]["input"],
+  "clientMutationId"
+>;
+
+const mutation = graphql`
+  mutation CreateCommentDontAgreeMutation(
+    $input: CreateCommentDontAgreeInput!
+  ) {
+    createCommentDontAgree(input: $input) {
+      comment {
+        id
+        myActionPresence {
+          dontAgree
+        }
+      }
+      clientMutationId
+    }
+  }
+`;
+
+let clientMutationId = 0;
+
+function commit(environment: Environment, input: CreateCommentDontAgreeInput) {
+  return commitMutationPromiseNormalized<MutationTypes>(environment, {
+    mutation,
+    variables: {
+      input: {
+        ...pick(input, ["commentID", "commentRevisionID", "additionalDetails"]),
+        clientMutationId: (clientMutationId++).toString(),
+      },
+    },
+  });
+}
+
+export const withCreateCommentDontAgreeMutation = createMutationContainer(
+  "createCommentDontAgree",
+  commit
+);
+
+export type CreateCommentDontAgreeMutation = (
+  input: CreateCommentDontAgreeInput
+) => Promise<MutationTypes["response"]["createCommentDontAgree"]>;
diff --git a/src/core/client/stream/mutations/CreateCommentFlagMutation.ts b/src/core/client/stream/mutations/CreateCommentFlagMutation.ts
new file mode 100644
index 000000000..e0e9b88cf
--- /dev/null
+++ b/src/core/client/stream/mutations/CreateCommentFlagMutation.ts
@@ -0,0 +1,58 @@
+import { pick } from "lodash";
+import { graphql } from "react-relay";
+import { Environment } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutationContainer,
+} from "talk-framework/lib/relay";
+import { Omit } from "talk-framework/types";
+
+import { CreateCommentFlagMutation as MutationTypes } from "talk-stream/__generated__/CreateCommentFlagMutation.graphql";
+
+export type CreateCommentFlagInput = Omit<
+  MutationTypes["variables"]["input"],
+  "clientMutationId"
+>;
+
+const mutation = graphql`
+  mutation CreateCommentFlagMutation($input: CreateCommentFlagInput!) {
+    createCommentFlag(input: $input) {
+      comment {
+        id
+        myActionPresence {
+          flag
+        }
+      }
+      clientMutationId
+    }
+  }
+`;
+
+let clientMutationId = 0;
+
+function commit(environment: Environment, input: CreateCommentFlagInput) {
+  return commitMutationPromiseNormalized<MutationTypes>(environment, {
+    mutation,
+    variables: {
+      input: {
+        ...pick(input, [
+          "commentID",
+          "commentRevisionID",
+          "reason",
+          "additionalDetails",
+        ]),
+        clientMutationId: (clientMutationId++).toString(),
+      },
+    },
+  });
+}
+
+export const withCreateCommentFlagMutation = createMutationContainer(
+  "createCommentFlag",
+  commit
+);
+
+export type CreateCommentFlagMutation = (
+  input: CreateCommentFlagInput
+) => Promise<MutationTypes["response"]["createCommentFlag"]>;
diff --git a/src/core/client/stream/mutations/CreateCommentReactionMutation.ts b/src/core/client/stream/mutations/CreateCommentReactionMutation.ts
index ef0b7a61a..8290c4fec 100644
--- a/src/core/client/stream/mutations/CreateCommentReactionMutation.ts
+++ b/src/core/client/stream/mutations/CreateCommentReactionMutation.ts
@@ -1,3 +1,4 @@
+import { pick } from "lodash";
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
@@ -37,7 +38,7 @@ function commit(environment: Environment, input: CreateCommentReactionInput) {
     mutation,
     variables: {
       input: {
-        ...input,
+        ...pick(input, ["commentID", "commentRevisionID"]),
         clientMutationId: clientMutationId.toString(),
       },
     },
diff --git a/src/core/client/stream/mutations/EditCommentMutation.ts b/src/core/client/stream/mutations/EditCommentMutation.ts
index 0b85b6a26..cd59f464c 100644
--- a/src/core/client/stream/mutations/EditCommentMutation.ts
+++ b/src/core/client/stream/mutations/EditCommentMutation.ts
@@ -1,3 +1,4 @@
+import { pick } from "lodash";
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
@@ -38,7 +39,7 @@ function commit(environment: Environment, input: EditCommentInput) {
     mutation,
     variables: {
       input: {
-        ...input,
+        ...pick(input, ["commentID", "body"]),
         clientMutationId: clientMutationId.toString(),
       },
     },
diff --git a/src/core/client/stream/mutations/RemoveCommentReactionMutation.ts b/src/core/client/stream/mutations/RemoveCommentReactionMutation.ts
index 8534cb20f..1abc3444f 100644
--- a/src/core/client/stream/mutations/RemoveCommentReactionMutation.ts
+++ b/src/core/client/stream/mutations/RemoveCommentReactionMutation.ts
@@ -1,3 +1,4 @@
+import { pick } from "lodash";
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
@@ -36,7 +37,7 @@ function commit(environment: Environment, input: RemoveCommentReactionInput) {
     mutation,
     variables: {
       input: {
-        ...input,
+        ...pick(input, ["commentID"]),
         clientMutationId: (clientMutationId++).toString(),
       },
     },
diff --git a/src/core/client/stream/mutations/index.ts b/src/core/client/stream/mutations/index.ts
index 0669b0a83..3e2950242 100644
--- a/src/core/client/stream/mutations/index.ts
+++ b/src/core/client/stream/mutations/index.ts
@@ -3,6 +3,16 @@ export {
   CreateCommentMutation,
   CreateCommentInput,
 } from "./CreateCommentMutation";
+export {
+  withCreateCommentFlagMutation,
+  CreateCommentFlagMutation,
+  CreateCommentFlagInput,
+} from "./CreateCommentFlagMutation";
+export {
+  withCreateCommentDontAgreeMutation,
+  CreateCommentDontAgreeMutation,
+  CreateCommentDontAgreeInput,
+} from "./CreateCommentDontAgreeMutation";
 export {
   withCreateCommentReplyMutation,
   CreateCommentReplyMutation,
diff --git a/src/core/client/stream/tabs/comments/components/Comment/Comment.spec.tsx b/src/core/client/stream/tabs/comments/components/Comment/Comment.spec.tsx
index 11636d01c..fee7a40a0 100644
--- a/src/core/client/stream/tabs/comments/components/Comment/Comment.spec.tsx
+++ b/src/core/client/stream/tabs/comments/components/Comment/Comment.spec.tsx
@@ -7,7 +7,6 @@ import Comment from "./Comment";
 
 it("renders username and body", () => {
   const props: PropTypesOf<typeof Comment> = {
-    id: "comment-id",
     username: "Marvin",
     body: "Woof",
     createdAt: "1995-12-17T03:24:00.000Z",
diff --git a/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
index 90c5b0fb7..39955769e 100644
--- a/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
+++ b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
@@ -13,7 +13,6 @@ import Username from "./Username";
 import styles from "./Comment.css";
 
 export interface CommentProps {
-  id?: string;
   className?: string;
   username: string | null;
   body: string | null;
@@ -31,7 +30,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
       role="article"
       className={cn(styles.root, { [styles.highlight]: props.highlight })}
     >
-      <Flex direction="row" justifyContent="space-between" id={props.id}>
+      <Flex direction="row" justifyContent="space-between">
         <TopBarLeft>
           {props.username && <Username>{props.username}</Username>}
           <Flex direction="row" alignItems="baseline" itemGutter>
diff --git a/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap
index d4ab9ae64..44e0e6251 100644
--- a/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -7,7 +7,6 @@ exports[`renders username and body 1`] = `
 >
   <withPropsOnChange(Flex)
     direction="row"
-    id="comment-id"
     justifyContent="space-between"
   >
     <TopBarLeft>
diff --git a/src/core/client/stream/tabs/comments/components/CommentsPane.tsx b/src/core/client/stream/tabs/comments/components/CommentsPane.tsx
index 3bb4bc167..5a1d870e5 100644
--- a/src/core/client/stream/tabs/comments/components/CommentsPane.tsx
+++ b/src/core/client/stream/tabs/comments/components/CommentsPane.tsx
@@ -1,15 +1,15 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import PermalinkViewQuery from "../queries/PermalinkViewQuery";
 import StreamQuery from "../queries/StreamQuery";
+import PermalinkView from "../views/permalink";
 
 export interface CommentsPaneProps {
   showPermalinkView: boolean;
 }
 
 const CommentsPane: StatelessComponent<CommentsPaneProps> = props => {
-  return props.showPermalinkView ? <PermalinkViewQuery /> : <StreamQuery />;
+  return props.showPermalinkView ? <PermalinkView /> : <StreamQuery />;
 };
 
 export default CommentsPane;
diff --git a/src/core/client/stream/tabs/comments/components/EditCommentForm.tsx b/src/core/client/stream/tabs/comments/components/EditCommentForm.tsx
index cedf6846e..716ace121 100644
--- a/src/core/client/stream/tabs/comments/components/EditCommentForm.tsx
+++ b/src/core/client/stream/tabs/comments/components/EditCommentForm.tsx
@@ -56,7 +56,6 @@ const EditCommentForm: StatelessComponent<EditCommentFormProps> = props => {
           className={props.className}
           autoComplete="off"
           onSubmit={handleSubmit}
-          id={`comments-editCommentForm-form-${props.id}`}
         >
           <HorizontalGutter>
             <div>
@@ -120,7 +119,6 @@ const EditCommentForm: StatelessComponent<EditCommentFormProps> = props => {
               {props.expired ? (
                 <Localized id="comments-editCommentForm-close">
                   <Button
-                    id={`comments-editCommentForm-closeButton-${props.id}`}
                     variant="outlined"
                     disabled={submitting}
                     onClick={props.onClose}
@@ -134,9 +132,6 @@ const EditCommentForm: StatelessComponent<EditCommentFormProps> = props => {
                     <>
                       <Localized id="comments-editCommentForm-cancel">
                         <Button
-                          id={`comments-editCommentForm-cancelButton-${
-                            props.id
-                          }`}
                           variant="outlined"
                           disabled={submitting}
                           onClick={props.onCancel}
diff --git a/src/core/client/stream/tabs/comments/components/ReplyList.tsx b/src/core/client/stream/tabs/comments/components/ReplyList.tsx
index 63ae32a8d..50055c213 100644
--- a/src/core/client/stream/tabs/comments/components/ReplyList.tsx
+++ b/src/core/client/stream/tabs/comments/components/ReplyList.tsx
@@ -34,6 +34,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
   return (
     <HorizontalGutter
       id={`talk-comments-replyList-log--${props.comment.id}`}
+      data-testid={`commentReplyList-${props.comment.id}`}
       role="log"
     >
       {props.comments.map(comment => (
diff --git a/src/core/client/stream/tabs/comments/components/ReportButton/ReportButton.css b/src/core/client/stream/tabs/comments/components/ReportButton/ReportButton.css
new file mode 100644
index 000000000..5525aa4a9
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/ReportButton/ReportButton.css
@@ -0,0 +1,6 @@
+.variantGhost {
+  &.colorRegular {
+    color: var(--palette-error-main);
+    opacity: 1;
+  }
+}
diff --git a/src/core/client/stream/tabs/comments/components/ReportButton/ReportButton.spec.tsx b/src/core/client/stream/tabs/comments/components/ReportButton/ReportButton.spec.tsx
new file mode 100644
index 000000000..729658c11
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/ReportButton/ReportButton.spec.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ReportButton from "./ReportButton";
+
+it("renders report button", () => {
+  const props: PropTypesOf<typeof ReportButton> = {
+    reported: false,
+  };
+  const renderer = createRenderer();
+  renderer.render(<ReportButton {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("renders reported button", () => {
+  const props: PropTypesOf<typeof ReportButton> = {
+    reported: true,
+  };
+  const renderer = createRenderer();
+  renderer.render(<ReportButton {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/tabs/comments/components/ReportButton/ReportButton.tsx b/src/core/client/stream/tabs/comments/components/ReportButton/ReportButton.tsx
new file mode 100644
index 000000000..b9ab8131f
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/ReportButton/ReportButton.tsx
@@ -0,0 +1,43 @@
+import { Localized } from "fluent-react/compat";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+import { Button, ButtonIcon, MatchMedia } from "talk-ui/components";
+
+import styles from "./ReportButton.css";
+
+interface Props extends PropTypesOf<typeof Button> {
+  reported: boolean;
+}
+
+class ReportButton extends React.Component<Props> {
+  public render() {
+    const { reported, accessKey, active, ...rest } = this.props;
+    return (
+      <Button
+        {...rest}
+        active={active}
+        disabled={!active && reported}
+        classes={(reported && !active && styles) || {}}
+        variant="ghost"
+        size="small"
+      >
+        <MatchMedia gtWidth="xs">
+          <ButtonIcon>flag</ButtonIcon>
+        </MatchMedia>
+        {!reported && (
+          <Localized id="comments-reportButton-report">
+            <span>Report</span>
+          </Localized>
+        )}
+        {reported && (
+          <Localized id="comments-reportButton-reported">
+            <span>Reported</span>
+          </Localized>
+        )}
+      </Button>
+    );
+  }
+}
+
+export default ReportButton;
diff --git a/src/core/client/stream/tabs/comments/components/ReportButton/ReportButtonWithPopover.tsx b/src/core/client/stream/tabs/comments/components/ReportButton/ReportButtonWithPopover.tsx
new file mode 100644
index 000000000..03023bee9
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/ReportButton/ReportButtonWithPopover.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+
+import { oncePerFrame } from "talk-common/utils";
+import { ClickOutside, Popover } from "talk-ui/components";
+
+import ReportCommentView from "../../views/reportComment";
+import ReportButton from "./ReportButton";
+
+import { PropTypesOf } from "talk-ui/types";
+
+interface Props {
+  comment: { id: string } & PropTypesOf<typeof ReportCommentView>["comment"];
+  reported: boolean;
+}
+
+class ReportButtonWithPopover extends React.Component<Props> {
+  // Helper that prevents calling toggleVisibility more then once per frame.
+  // In essence this means we'll process an event only once.
+  // This might happen, when clicking on the button which will
+  // cause its onClick to happen as well as onClickOutside.
+  private toggleVisibilityOncePerFrame = oncePerFrame(
+    (toggleVisibility: () => void) => toggleVisibility()
+  );
+
+  public render() {
+    const { comment, reported } = this.props;
+    const popoverID = `report-popover-${comment.id}`;
+    return (
+      <Popover
+        id={popoverID}
+        placement="top-end"
+        description="A dialog for reporting comments"
+        body={({ toggleVisibility, scheduleUpdate }) => (
+          <ClickOutside
+            onClickOutside={() =>
+              this.toggleVisibilityOncePerFrame(toggleVisibility)
+            }
+          >
+            <ReportCommentView
+              comment={comment}
+              onClose={() =>
+                this.toggleVisibilityOncePerFrame(toggleVisibility)
+              }
+              onResize={scheduleUpdate}
+            />
+          </ClickOutside>
+        )}
+      >
+        {({ toggleVisibility, forwardRef, visible }) => (
+          <ReportButton
+            onClick={() =>
+              !reported && this.toggleVisibilityOncePerFrame(toggleVisibility)
+            }
+            aria-controls={popoverID}
+            forwardRef={forwardRef}
+            active={visible}
+            reported={reported}
+          />
+        )}
+      </Popover>
+    );
+  }
+}
+
+export default ReportButtonWithPopover;
diff --git a/src/core/client/stream/tabs/comments/components/ReportButton/__snapshots__/ReportButton.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/ReportButton/__snapshots__/ReportButton.spec.tsx.snap
new file mode 100644
index 000000000..586801c83
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/ReportButton/__snapshots__/ReportButton.spec.tsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders report button 1`] = `
+<withPropsOnChange(Button)
+  classes={Object {}}
+  disabled={false}
+  size="small"
+  variant="ghost"
+>
+  <MatchMediaWithContext
+    gtWidth="xs"
+  >
+    <withPropsOnChange(ButtonIcon)>
+      flag
+    </withPropsOnChange(ButtonIcon)>
+  </MatchMediaWithContext>
+  <Localized
+    id="comments-reportButton-report"
+  >
+    <span>
+      Report
+    </span>
+  </Localized>
+</withPropsOnChange(Button)>
+`;
+
+exports[`renders reported button 1`] = `
+<withPropsOnChange(Button)
+  classes={
+    Object {
+      "colorRegular": "ReportButton-colorRegular",
+      "variantGhost": "ReportButton-variantGhost",
+    }
+  }
+  disabled={true}
+  size="small"
+  variant="ghost"
+>
+  <MatchMediaWithContext
+    gtWidth="xs"
+  >
+    <withPropsOnChange(ButtonIcon)>
+      flag
+    </withPropsOnChange(ButtonIcon)>
+  </MatchMediaWithContext>
+  <Localized
+    id="comments-reportButton-reported"
+  >
+    <span>
+      Reported
+    </span>
+  </Localized>
+</withPropsOnChange(Button)>
+`;
diff --git a/src/core/client/stream/tabs/comments/components/ReportButton/index.ts b/src/core/client/stream/tabs/comments/components/ReportButton/index.ts
new file mode 100644
index 000000000..a96556e6f
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/ReportButton/index.ts
@@ -0,0 +1,2 @@
+export { default as ReportButton } from "./ReportButton";
+export { default as ReportButtonWithPopover } from "./ReportButtonWithPopover";
diff --git a/src/core/client/stream/tabs/comments/components/Stream.tsx b/src/core/client/stream/tabs/comments/components/Stream.tsx
index 41bad883a..ff36ae2a5 100644
--- a/src/core/client/stream/tabs/comments/components/Stream.tsx
+++ b/src/core/client/stream/tabs/comments/components/Stream.tsx
@@ -49,6 +49,7 @@ const Stream: StatelessComponent<StreamProps> = props => {
       </HorizontalGutter>
       <HorizontalGutter
         id="talk-comments-stream-log"
+        data-testid="comments-stream-log"
         role="log"
         aria-live="polite"
       >
diff --git a/src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap
index 666ab4bd9..7023d3c75 100644
--- a/src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap
+++ b/src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <withPropsOnChange(HorizontalGutter)
+  data-testid="commentReplyList-comment-id"
   id="talk-comments-replyList-log--comment-id"
   role="log"
 >
@@ -71,6 +72,7 @@ exports[`renders correctly 1`] = `
 
 exports[`when there is more disables load more button 1`] = `
 <withPropsOnChange(HorizontalGutter)
+  data-testid="commentReplyList-comment-id"
   id="talk-comments-replyList-log--comment-id"
   role="log"
 >
@@ -154,6 +156,7 @@ exports[`when there is more disables load more button 1`] = `
 
 exports[`when there is more renders a load more button 1`] = `
 <withPropsOnChange(HorizontalGutter)
+  data-testid="commentReplyList-comment-id"
   id="talk-comments-replyList-log--comment-id"
   role="log"
 >
diff --git a/src/core/client/stream/tabs/comments/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/tabs/comments/components/__snapshots__/Stream.spec.tsx.snap
index fb1b583fc..6e7d3b2cc 100644
--- a/src/core/client/stream/tabs/comments/components/__snapshots__/Stream.spec.tsx.snap
+++ b/src/core/client/stream/tabs/comments/components/__snapshots__/Stream.spec.tsx.snap
@@ -23,6 +23,7 @@ exports[`renders correctly 1`] = `
   </withPropsOnChange(HorizontalGutter)>
   <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
+    data-testid="comments-stream-log"
     id="talk-comments-stream-log"
     role="log"
   >
@@ -149,6 +150,7 @@ exports[`when there is more disables load more button 1`] = `
   </withPropsOnChange(HorizontalGutter)>
   <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
+    data-testid="comments-stream-log"
     id="talk-comments-stream-log"
     role="log"
   >
@@ -289,6 +291,7 @@ exports[`when there is more renders a load more button 1`] = `
   </withPropsOnChange(HorizontalGutter)>
   <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
+    data-testid="comments-stream-log"
     id="talk-comments-stream-log"
     role="log"
   >
@@ -431,6 +434,7 @@ exports[`when use is logged in renders correctly 1`] = `
   </withPropsOnChange(HorizontalGutter)>
   <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
+    data-testid="comments-stream-log"
     id="talk-comments-stream-log"
     role="log"
   >
diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
index c11c05551..5d717b651 100644
--- a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
@@ -17,7 +17,7 @@ import {
   withShowAuthPopupMutation,
 } from "talk-stream/mutations";
 
-import { Button, HorizontalGutter } from "talk-ui/components";
+import { Button, Flex, HorizontalGutter } from "talk-ui/components";
 import ReactionButtonContainer from "./ReactionButtonContainer";
 
 import Comment, {
@@ -28,6 +28,7 @@ import ReplyButton from "../components/Comment/ReplyButton";
 import EditCommentFormContainer from "./EditCommentFormContainer";
 import PermalinkButtonContainer from "./PermalinkButtonContainer";
 import ReplyCommentFormContainer from "./ReplyCommentFormContainer";
+import ReportButtonContainer from "./ReportButtonContainer";
 
 interface InnerProps {
   me: MeData | null;
@@ -148,87 +149,96 @@ export class CommentContainer extends Component<InnerProps, State> {
     const { showReplyDialog, showEditDialog, editable } = this.state;
     if (showEditDialog) {
       return (
-        <EditCommentFormContainer
-          comment={comment}
-          onClose={this.closeEditDialog}
-        />
+        <div data-testid={`comment-${comment.id}`}>
+          <EditCommentFormContainer
+            comment={comment}
+            onClose={this.closeEditDialog}
+          />
+        </div>
       );
     }
     return (
-      <HorizontalGutter>
-        <Comment
-          id={`comment-${comment.id}`}
-          indentLevel={indentLevel}
-          username={comment.author && comment.author.username}
-          body={comment.body}
-          createdAt={comment.createdAt}
-          blur={comment.pending || false}
-          showEditedMarker={comment.editing.edited}
-          highlight={highlight}
-          parentAuthorName={
-            comment.parent &&
-            comment.parent.author &&
-            comment.parent.author.username
-          }
-          topBarRight={
-            (editable && (
-              <Localized id="comments-commentContainer-editButton">
-                <Button
-                  id={`comments-commentContainer-editButton-${comment.id}`}
-                  color="primary"
-                  variant="underlined"
-                  onClick={this.openEditDialog}
-                >
-                  Edit
-                </Button>
-              </Localized>
-            )) ||
-            undefined
-          }
-          footer={
-            <>
-              <ButtonsBar>
-                {!disableReplies && (
-                  <ReplyButton
-                    id={`comments-commentContainer-replyButton-${comment.id}`}
-                    onClick={this.openReplyDialog}
-                    active={showReplyDialog}
+      <div data-testid={`comment-${comment.id}`}>
+        <HorizontalGutter>
+          <Comment
+            indentLevel={indentLevel}
+            username={comment.author && comment.author.username}
+            body={comment.body}
+            createdAt={comment.createdAt}
+            blur={comment.pending || false}
+            showEditedMarker={comment.editing.edited}
+            highlight={highlight}
+            parentAuthorName={
+              comment.parent &&
+              comment.parent.author &&
+              comment.parent.author.username
+            }
+            topBarRight={
+              (editable && (
+                <Localized id="comments-commentContainer-editButton">
+                  <Button
+                    color="primary"
+                    variant="underlined"
+                    onClick={this.openEditDialog}
+                  >
+                    Edit
+                  </Button>
+                </Localized>
+              )) ||
+              undefined
+            }
+            footer={
+              <>
+                <Flex justifyContent="space-between">
+                  <ButtonsBar>
+                    {!disableReplies && (
+                      <ReplyButton
+                        id={`comments-commentContainer-replyButton-${
+                          comment.id
+                        }`}
+                        onClick={this.openReplyDialog}
+                        active={showReplyDialog}
+                      />
+                    )}
+                    <PermalinkButtonContainer
+                      story={story}
+                      commentID={comment.id}
+                    />
+                    <ReactionButtonContainer
+                      comment={comment}
+                      settings={settings}
+                      me={me}
+                    />
+                  </ButtonsBar>
+                  <ButtonsBar>
+                    <ReportButtonContainer comment={comment} me={me} />
+                  </ButtonsBar>
+                </Flex>
+                {showConversationLink && (
+                  <ShowConversationLink
+                    id={`comments-commentContainer-showConversation-${
+                      comment.id
+                    }`}
+                    onClick={this.handleShowConversation}
+                    href={getURLWithCommentID(
+                      this.props.story.url,
+                      this.props.comment.id
+                    )}
                   />
                 )}
-                <PermalinkButtonContainer
-                  story={story}
-                  commentID={comment.id}
-                />
-                <ReactionButtonContainer
-                  comment={comment}
-                  settings={settings}
-                  me={me}
-                />
-              </ButtonsBar>
-              {showConversationLink && (
-                <ShowConversationLink
-                  id={`comments-commentContainer-showConversation-${
-                    comment.id
-                  }`}
-                  onClick={this.handleShowConversation}
-                  href={getURLWithCommentID(
-                    this.props.story.url,
-                    this.props.comment.id
-                  )}
-                />
-              )}
-            </>
-          }
-        />
-        {showReplyDialog && (
-          <ReplyCommentFormContainer
-            comment={comment}
-            story={story}
-            onClose={this.closeReplyDialog}
-            localReply={localReply}
+              </>
+            }
           />
-        )}
-      </HorizontalGutter>
+          {showReplyDialog && (
+            <ReplyCommentFormContainer
+              comment={comment}
+              story={story}
+              onClose={this.closeReplyDialog}
+              localReply={localReply}
+            />
+          )}
+        </HorizontalGutter>
+      </div>
     );
   }
 }
@@ -240,6 +250,7 @@ const enhanced = withSetCommentIDMutation(
         fragment CommentContainer_me on User {
           id
           ...ReactionButtonContainer_me
+          ...ReportButtonContainer_me
         }
       `,
       story: graphql`
@@ -271,6 +282,7 @@ const enhanced = withSetCommentIDMutation(
           ...ReplyCommentFormContainer_comment
           ...EditCommentFormContainer_comment
           ...ReactionButtonContainer_comment
+          ...ReportButtonContainer_comment
         }
       `,
       settings: graphql`
diff --git a/src/core/client/stream/tabs/comments/containers/ReportButtonContainer.tsx b/src/core/client/stream/tabs/comments/containers/ReportButtonContainer.tsx
new file mode 100644
index 000000000..80fff646c
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/containers/ReportButtonContainer.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "talk-framework/lib/relay";
+import { ReportButtonContainer_comment as CommentData } from "talk-stream/__generated__/ReportButtonContainer_comment.graphql";
+import { ReportButtonContainer_me as MeData } from "talk-stream/__generated__/ReportButtonContainer_me.graphql";
+
+import {
+  ReportButton,
+  ReportButtonWithPopover,
+} from "../components/ReportButton";
+
+import {
+  ShowAuthPopupMutation,
+  withShowAuthPopupMutation,
+} from "talk-stream/mutations";
+
+interface ReportButtonContainerProps {
+  comment: CommentData;
+  me: MeData | null;
+  showAuthPopup: ShowAuthPopupMutation;
+}
+
+class ReportButtonContainer extends React.Component<
+  ReportButtonContainerProps
+> {
+  private get loggedIn() {
+    return this.props.me;
+  }
+  private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
+
+  public render() {
+    const reported =
+      this.props.comment.myActionPresence &&
+      (this.props.comment.myActionPresence.flag ||
+        this.props.comment.myActionPresence.dontAgree);
+
+    return this.loggedIn ? (
+      <ReportButtonWithPopover
+        comment={this.props.comment}
+        reported={!!reported}
+      />
+    ) : (
+      <ReportButton onClick={this.handleSignIn} reported={!!reported} />
+    );
+  }
+}
+
+export default withShowAuthPopupMutation(
+  withFragmentContainer<ReportButtonContainerProps>({
+    me: graphql`
+      fragment ReportButtonContainer_me on User {
+        id
+      }
+    `,
+    comment: graphql`
+      fragment ReportButtonContainer_comment on Comment {
+        ...ReportCommentFormContainer_comment
+        id
+        myActionPresence {
+          dontAgree
+          flag
+        }
+      }
+    `,
+  })(ReportButtonContainer)
+);
diff --git a/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
index 2e77b0068..f4ca7b285 100644
--- a/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -1,316 +1,465 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`hide reply button 1`] = `
-<withPropsOnChange(HorizontalGutter)>
-  <IndentedComment
-    blur={false}
-    body="Woof"
-    createdAt="1995-12-17T03:24:00.000Z"
-    footer={
-      <React.Fragment>
-        <ButtonsBar>
-          <Relay(PermalinkButtonContainerProps)
-            commentID="comment-id"
-            story={
-              Object {
-                "url": "http://localhost/story",
-              }
-            }
-          />
-          <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
-            comment={
-              Object {
-                "author": Object {
-                  "id": "author-id",
-                  "username": "Marvin",
-                },
-                "body": "Woof",
-                "createdAt": "1995-12-17T03:24:00.000Z",
-                "editing": Object {
-                  "editableUntil": "1995-12-17T03:24:30.000Z",
-                  "edited": false,
-                },
-                "id": "comment-id",
-                "parent": null,
-                "pending": false,
-              }
-            }
-            me={null}
-            settings={
-              Object {
-                "reaction": Object {
-                  "icon": "thumb_up_alt",
-                  "label": "Respect",
-                },
-              }
-            }
-          />
-        </ButtonsBar>
-      </React.Fragment>
-    }
-    id="comment-comment-id"
-    indentLevel={1}
-    parentAuthorName={null}
-    showEditedMarker={false}
-    username="Marvin"
-  />
-</withPropsOnChange(HorizontalGutter)>
+<div
+  data-testid="comment-comment-id"
+>
+  <withPropsOnChange(HorizontalGutter)>
+    <IndentedComment
+      blur={false}
+      body="Woof"
+      createdAt="1995-12-17T03:24:00.000Z"
+      footer={
+        <React.Fragment>
+          <withPropsOnChange(Flex)
+            justifyContent="space-between"
+          >
+            <ButtonsBar>
+              <Relay(PermalinkButtonContainerProps)
+                commentID="comment-id"
+                story={
+                  Object {
+                    "url": "http://localhost/story",
+                  }
+                }
+              />
+              <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                comment={
+                  Object {
+                    "author": Object {
+                      "id": "author-id",
+                      "username": "Marvin",
+                    },
+                    "body": "Woof",
+                    "createdAt": "1995-12-17T03:24:00.000Z",
+                    "editing": Object {
+                      "editableUntil": "1995-12-17T03:24:30.000Z",
+                      "edited": false,
+                    },
+                    "id": "comment-id",
+                    "parent": null,
+                    "pending": false,
+                  }
+                }
+                me={null}
+                settings={
+                  Object {
+                    "reaction": Object {
+                      "icon": "thumb_up_alt",
+                      "label": "Respect",
+                    },
+                  }
+                }
+              />
+            </ButtonsBar>
+            <ButtonsBar>
+              <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                comment={
+                  Object {
+                    "author": Object {
+                      "id": "author-id",
+                      "username": "Marvin",
+                    },
+                    "body": "Woof",
+                    "createdAt": "1995-12-17T03:24:00.000Z",
+                    "editing": Object {
+                      "editableUntil": "1995-12-17T03:24:30.000Z",
+                      "edited": false,
+                    },
+                    "id": "comment-id",
+                    "parent": null,
+                    "pending": false,
+                  }
+                }
+                me={null}
+              />
+            </ButtonsBar>
+          </withPropsOnChange(Flex)>
+        </React.Fragment>
+      }
+      indentLevel={1}
+      parentAuthorName={null}
+      showEditedMarker={false}
+      username="Marvin"
+    />
+  </withPropsOnChange(HorizontalGutter)>
+</div>
 `;
 
 exports[`renders body only 1`] = `
-<withPropsOnChange(HorizontalGutter)>
-  <IndentedComment
-    blur={false}
-    body="Woof"
-    createdAt="1995-12-17T03:24:00.000Z"
-    footer={
-      <React.Fragment>
-        <ButtonsBar>
-          <ReplyButton
-            active={false}
-            id="comments-commentContainer-replyButton-comment-id"
-            onClick={[Function]}
-          />
-          <Relay(PermalinkButtonContainerProps)
-            commentID="comment-id"
-            story={
-              Object {
-                "url": "http://localhost/story",
-              }
-            }
-          />
-          <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
-            comment={
-              Object {
-                "author": Object {
-                  "id": "author-id",
-                  "username": null,
-                },
-                "body": "Woof",
-                "createdAt": "1995-12-17T03:24:00.000Z",
-                "editing": Object {
-                  "editableUntil": "1995-12-17T03:24:30.000Z",
-                  "edited": false,
-                },
-                "id": "comment-id",
-                "parent": null,
-                "pending": false,
-              }
-            }
-            me={null}
-            settings={
-              Object {
-                "reaction": Object {
-                  "icon": "thumb_up_alt",
-                  "label": "Respect",
-                },
-              }
-            }
-          />
-        </ButtonsBar>
-      </React.Fragment>
-    }
-    id="comment-comment-id"
-    indentLevel={1}
-    parentAuthorName={null}
-    showEditedMarker={false}
-    username={null}
-  />
-</withPropsOnChange(HorizontalGutter)>
+<div
+  data-testid="comment-comment-id"
+>
+  <withPropsOnChange(HorizontalGutter)>
+    <IndentedComment
+      blur={false}
+      body="Woof"
+      createdAt="1995-12-17T03:24:00.000Z"
+      footer={
+        <React.Fragment>
+          <withPropsOnChange(Flex)
+            justifyContent="space-between"
+          >
+            <ButtonsBar>
+              <ReplyButton
+                active={false}
+                id="comments-commentContainer-replyButton-comment-id"
+                onClick={[Function]}
+              />
+              <Relay(PermalinkButtonContainerProps)
+                commentID="comment-id"
+                story={
+                  Object {
+                    "url": "http://localhost/story",
+                  }
+                }
+              />
+              <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                comment={
+                  Object {
+                    "author": Object {
+                      "id": "author-id",
+                      "username": null,
+                    },
+                    "body": "Woof",
+                    "createdAt": "1995-12-17T03:24:00.000Z",
+                    "editing": Object {
+                      "editableUntil": "1995-12-17T03:24:30.000Z",
+                      "edited": false,
+                    },
+                    "id": "comment-id",
+                    "parent": null,
+                    "pending": false,
+                  }
+                }
+                me={null}
+                settings={
+                  Object {
+                    "reaction": Object {
+                      "icon": "thumb_up_alt",
+                      "label": "Respect",
+                    },
+                  }
+                }
+              />
+            </ButtonsBar>
+            <ButtonsBar>
+              <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                comment={
+                  Object {
+                    "author": Object {
+                      "id": "author-id",
+                      "username": null,
+                    },
+                    "body": "Woof",
+                    "createdAt": "1995-12-17T03:24:00.000Z",
+                    "editing": Object {
+                      "editableUntil": "1995-12-17T03:24:30.000Z",
+                      "edited": false,
+                    },
+                    "id": "comment-id",
+                    "parent": null,
+                    "pending": false,
+                  }
+                }
+                me={null}
+              />
+            </ButtonsBar>
+          </withPropsOnChange(Flex)>
+        </React.Fragment>
+      }
+      indentLevel={1}
+      parentAuthorName={null}
+      showEditedMarker={false}
+      username={null}
+    />
+  </withPropsOnChange(HorizontalGutter)>
+</div>
 `;
 
 exports[`renders in reply to 1`] = `
-<withPropsOnChange(HorizontalGutter)>
-  <IndentedComment
-    blur={false}
-    body="Woof"
-    createdAt="1995-12-17T03:24:00.000Z"
-    footer={
-      <React.Fragment>
-        <ButtonsBar>
-          <ReplyButton
-            active={false}
-            id="comments-commentContainer-replyButton-comment-id"
-            onClick={[Function]}
-          />
-          <Relay(PermalinkButtonContainerProps)
-            commentID="comment-id"
-            story={
-              Object {
-                "url": "http://localhost/story",
-              }
-            }
-          />
-          <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
-            comment={
-              Object {
-                "author": Object {
-                  "id": "author-id",
-                  "username": "Marvin",
-                },
-                "body": "Woof",
-                "createdAt": "1995-12-17T03:24:00.000Z",
-                "editing": Object {
-                  "editableUntil": "1995-12-17T03:24:30.000Z",
-                  "edited": false,
-                },
-                "id": "comment-id",
-                "parent": Object {
-                  "author": Object {
-                    "username": "ParentAuthor",
-                  },
-                },
-                "pending": false,
-              }
-            }
-            me={null}
-            settings={
-              Object {
-                "reaction": Object {
-                  "icon": "thumb_up_alt",
-                  "label": "Respect",
-                },
-              }
-            }
-          />
-        </ButtonsBar>
-      </React.Fragment>
-    }
-    id="comment-comment-id"
-    indentLevel={1}
-    parentAuthorName="ParentAuthor"
-    showEditedMarker={false}
-    username="Marvin"
-  />
-</withPropsOnChange(HorizontalGutter)>
+<div
+  data-testid="comment-comment-id"
+>
+  <withPropsOnChange(HorizontalGutter)>
+    <IndentedComment
+      blur={false}
+      body="Woof"
+      createdAt="1995-12-17T03:24:00.000Z"
+      footer={
+        <React.Fragment>
+          <withPropsOnChange(Flex)
+            justifyContent="space-between"
+          >
+            <ButtonsBar>
+              <ReplyButton
+                active={false}
+                id="comments-commentContainer-replyButton-comment-id"
+                onClick={[Function]}
+              />
+              <Relay(PermalinkButtonContainerProps)
+                commentID="comment-id"
+                story={
+                  Object {
+                    "url": "http://localhost/story",
+                  }
+                }
+              />
+              <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                comment={
+                  Object {
+                    "author": Object {
+                      "id": "author-id",
+                      "username": "Marvin",
+                    },
+                    "body": "Woof",
+                    "createdAt": "1995-12-17T03:24:00.000Z",
+                    "editing": Object {
+                      "editableUntil": "1995-12-17T03:24:30.000Z",
+                      "edited": false,
+                    },
+                    "id": "comment-id",
+                    "parent": Object {
+                      "author": Object {
+                        "username": "ParentAuthor",
+                      },
+                    },
+                    "pending": false,
+                  }
+                }
+                me={null}
+                settings={
+                  Object {
+                    "reaction": Object {
+                      "icon": "thumb_up_alt",
+                      "label": "Respect",
+                    },
+                  }
+                }
+              />
+            </ButtonsBar>
+            <ButtonsBar>
+              <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                comment={
+                  Object {
+                    "author": Object {
+                      "id": "author-id",
+                      "username": "Marvin",
+                    },
+                    "body": "Woof",
+                    "createdAt": "1995-12-17T03:24:00.000Z",
+                    "editing": Object {
+                      "editableUntil": "1995-12-17T03:24:30.000Z",
+                      "edited": false,
+                    },
+                    "id": "comment-id",
+                    "parent": Object {
+                      "author": Object {
+                        "username": "ParentAuthor",
+                      },
+                    },
+                    "pending": false,
+                  }
+                }
+                me={null}
+              />
+            </ButtonsBar>
+          </withPropsOnChange(Flex)>
+        </React.Fragment>
+      }
+      indentLevel={1}
+      parentAuthorName="ParentAuthor"
+      showEditedMarker={false}
+      username="Marvin"
+    />
+  </withPropsOnChange(HorizontalGutter)>
+</div>
 `;
 
 exports[`renders username and body 1`] = `
-<withPropsOnChange(HorizontalGutter)>
-  <IndentedComment
-    blur={false}
-    body="Woof"
-    createdAt="1995-12-17T03:24:00.000Z"
-    footer={
-      <React.Fragment>
-        <ButtonsBar>
-          <ReplyButton
-            active={false}
-            id="comments-commentContainer-replyButton-comment-id"
-            onClick={[Function]}
-          />
-          <Relay(PermalinkButtonContainerProps)
-            commentID="comment-id"
-            story={
-              Object {
-                "url": "http://localhost/story",
-              }
-            }
-          />
-          <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
-            comment={
-              Object {
-                "author": Object {
-                  "id": "author-id",
-                  "username": "Marvin",
-                },
-                "body": "Woof",
-                "createdAt": "1995-12-17T03:24:00.000Z",
-                "editing": Object {
-                  "editableUntil": "1995-12-17T03:24:30.000Z",
-                  "edited": false,
-                },
-                "id": "comment-id",
-                "parent": null,
-                "pending": false,
-              }
-            }
-            me={null}
-            settings={
-              Object {
-                "reaction": Object {
-                  "icon": "thumb_up_alt",
-                  "label": "Respect",
-                },
-              }
-            }
-          />
-        </ButtonsBar>
-      </React.Fragment>
-    }
-    id="comment-comment-id"
-    indentLevel={1}
-    parentAuthorName={null}
-    showEditedMarker={false}
-    username="Marvin"
-  />
-</withPropsOnChange(HorizontalGutter)>
+<div
+  data-testid="comment-comment-id"
+>
+  <withPropsOnChange(HorizontalGutter)>
+    <IndentedComment
+      blur={false}
+      body="Woof"
+      createdAt="1995-12-17T03:24:00.000Z"
+      footer={
+        <React.Fragment>
+          <withPropsOnChange(Flex)
+            justifyContent="space-between"
+          >
+            <ButtonsBar>
+              <ReplyButton
+                active={false}
+                id="comments-commentContainer-replyButton-comment-id"
+                onClick={[Function]}
+              />
+              <Relay(PermalinkButtonContainerProps)
+                commentID="comment-id"
+                story={
+                  Object {
+                    "url": "http://localhost/story",
+                  }
+                }
+              />
+              <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                comment={
+                  Object {
+                    "author": Object {
+                      "id": "author-id",
+                      "username": "Marvin",
+                    },
+                    "body": "Woof",
+                    "createdAt": "1995-12-17T03:24:00.000Z",
+                    "editing": Object {
+                      "editableUntil": "1995-12-17T03:24:30.000Z",
+                      "edited": false,
+                    },
+                    "id": "comment-id",
+                    "parent": null,
+                    "pending": false,
+                  }
+                }
+                me={null}
+                settings={
+                  Object {
+                    "reaction": Object {
+                      "icon": "thumb_up_alt",
+                      "label": "Respect",
+                    },
+                  }
+                }
+              />
+            </ButtonsBar>
+            <ButtonsBar>
+              <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                comment={
+                  Object {
+                    "author": Object {
+                      "id": "author-id",
+                      "username": "Marvin",
+                    },
+                    "body": "Woof",
+                    "createdAt": "1995-12-17T03:24:00.000Z",
+                    "editing": Object {
+                      "editableUntil": "1995-12-17T03:24:30.000Z",
+                      "edited": false,
+                    },
+                    "id": "comment-id",
+                    "parent": null,
+                    "pending": false,
+                  }
+                }
+                me={null}
+              />
+            </ButtonsBar>
+          </withPropsOnChange(Flex)>
+        </React.Fragment>
+      }
+      indentLevel={1}
+      parentAuthorName={null}
+      showEditedMarker={false}
+      username="Marvin"
+    />
+  </withPropsOnChange(HorizontalGutter)>
+</div>
 `;
 
 exports[`shows conversation link 1`] = `
-<withPropsOnChange(HorizontalGutter)>
-  <IndentedComment
-    blur={false}
-    body="Woof"
-    createdAt="1995-12-17T03:24:00.000Z"
-    footer={
-      <React.Fragment>
-        <ButtonsBar>
-          <ReplyButton
-            active={false}
-            id="comments-commentContainer-replyButton-comment-id"
+<div
+  data-testid="comment-comment-id"
+>
+  <withPropsOnChange(HorizontalGutter)>
+    <IndentedComment
+      blur={false}
+      body="Woof"
+      createdAt="1995-12-17T03:24:00.000Z"
+      footer={
+        <React.Fragment>
+          <withPropsOnChange(Flex)
+            justifyContent="space-between"
+          >
+            <ButtonsBar>
+              <ReplyButton
+                active={false}
+                id="comments-commentContainer-replyButton-comment-id"
+                onClick={[Function]}
+              />
+              <Relay(PermalinkButtonContainerProps)
+                commentID="comment-id"
+                story={
+                  Object {
+                    "url": "http://localhost/story",
+                  }
+                }
+              />
+              <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
+                comment={
+                  Object {
+                    "author": Object {
+                      "id": "author-id",
+                      "username": "Marvin",
+                    },
+                    "body": "Woof",
+                    "createdAt": "1995-12-17T03:24:00.000Z",
+                    "editing": Object {
+                      "editableUntil": "1995-12-17T03:24:30.000Z",
+                      "edited": false,
+                    },
+                    "id": "comment-id",
+                    "parent": null,
+                    "pending": false,
+                  }
+                }
+                me={null}
+                settings={
+                  Object {
+                    "reaction": Object {
+                      "icon": "thumb_up",
+                      "label": "Respect",
+                      "labelActive": "Respected",
+                    },
+                  }
+                }
+              />
+            </ButtonsBar>
+            <ButtonsBar>
+              <withContext(createMutationContainer(Relay(ReportButtonContainer)))
+                comment={
+                  Object {
+                    "author": Object {
+                      "id": "author-id",
+                      "username": "Marvin",
+                    },
+                    "body": "Woof",
+                    "createdAt": "1995-12-17T03:24:00.000Z",
+                    "editing": Object {
+                      "editableUntil": "1995-12-17T03:24:30.000Z",
+                      "edited": false,
+                    },
+                    "id": "comment-id",
+                    "parent": null,
+                    "pending": false,
+                  }
+                }
+                me={null}
+              />
+            </ButtonsBar>
+          </withPropsOnChange(Flex)>
+          <ShowConversationLink
+            href="http://localhost/story?commentID=comment-id"
+            id="comments-commentContainer-showConversation-comment-id"
             onClick={[Function]}
           />
-          <Relay(PermalinkButtonContainerProps)
-            commentID="comment-id"
-            story={
-              Object {
-                "url": "http://localhost/story",
-              }
-            }
-          />
-          <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
-            comment={
-              Object {
-                "author": Object {
-                  "id": "author-id",
-                  "username": "Marvin",
-                },
-                "body": "Woof",
-                "createdAt": "1995-12-17T03:24:00.000Z",
-                "editing": Object {
-                  "editableUntil": "1995-12-17T03:24:30.000Z",
-                  "edited": false,
-                },
-                "id": "comment-id",
-                "parent": null,
-                "pending": false,
-              }
-            }
-            me={null}
-            settings={
-              Object {
-                "reaction": Object {
-                  "icon": "thumb_up",
-                  "label": "Respect",
-                  "labelActive": "Respected",
-                },
-              }
-            }
-          />
-        </ButtonsBar>
-        <ShowConversationLink
-          href="http://localhost/story?commentID=comment-id"
-          id="comments-commentContainer-showConversation-comment-id"
-          onClick={[Function]}
-        />
-      </React.Fragment>
-    }
-    id="comment-comment-id"
-    indentLevel={1}
-    parentAuthorName={null}
-    showEditedMarker={false}
-    username="Marvin"
-  />
-</withPropsOnChange(HorizontalGutter)>
+        </React.Fragment>
+      }
+      indentLevel={1}
+      parentAuthorName={null}
+      showEditedMarker={false}
+      username="Marvin"
+    />
+  </withPropsOnChange(HorizontalGutter)>
+</div>
 `;
diff --git a/src/core/client/stream/tabs/comments/components/ConversationThread.css b/src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.css
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/ConversationThread.css
rename to src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.css
diff --git a/src/core/client/stream/tabs/comments/components/ConversationThread.spec.tsx b/src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.spec.tsx
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/ConversationThread.spec.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.spec.tsx
diff --git a/src/core/client/stream/tabs/comments/components/ConversationThread.tsx b/src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.tsx
similarity index 87%
rename from src/core/client/stream/tabs/comments/components/ConversationThread.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.tsx
index a5af01a8f..157dd65f5 100644
--- a/src/core/client/stream/tabs/comments/components/ConversationThread.tsx
+++ b/src/core/client/stream/tabs/comments/views/permalink/components/ConversationThread.tsx
@@ -5,12 +5,12 @@ import React, { StatelessComponent } from "react";
 import { PropTypesOf } from "talk-framework/types";
 import { Button, Counter, Flex, HorizontalGutter } from "talk-ui/components";
 
-import CommentContainer from "../containers/CommentContainer";
-import LocalReplyListContainer from "../containers/LocalReplyListContainer";
-import { RootParent } from "./Comment";
-import { Circle, Line } from "./Timeline";
+import { RootParent } from "talk-stream/tabs/comments/components/Comment";
+import CommentContainer from "talk-stream/tabs/comments/containers/CommentContainer";
+import LocalReplyListContainer from "talk-stream/tabs/comments/containers/LocalReplyListContainer";
 
 import styles from "./ConversationThread.css";
+import { Circle, Line } from "./Timeline";
 
 export interface ConversationThreadProps {
   className?: string;
@@ -38,9 +38,13 @@ export interface ConversationThreadProps {
 const ConversationThread: StatelessComponent<
   ConversationThreadProps
 > = props => {
+  const dataTestID = "comments-permalinkView-conversationThread";
   if (props.remaining === 0 && props.parents.length === 0) {
     return (
-      <div className={cn(props.className, styles.root)}>
+      <div
+        className={cn(props.className, styles.root)}
+        data-testid={dataTestID}
+      >
         <CommentContainer
           comment={props.comment}
           story={props.story}
@@ -52,7 +56,7 @@ const ConversationThread: StatelessComponent<
     );
   }
   return (
-    <div className={cn(props.className, styles.root)}>
+    <div className={cn(props.className, styles.root)} data-testid={dataTestID}>
       <HorizontalGutter container={<Line dotted />}>
         {props.rootParent && (
           <Circle>
diff --git a/src/core/client/stream/tabs/comments/components/PermalinkView.css b/src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.css
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/PermalinkView.css
rename to src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.css
diff --git a/src/core/client/stream/tabs/comments/components/PermalinkView.spec.tsx b/src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.spec.tsx
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/PermalinkView.spec.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.spec.tsx
diff --git a/src/core/client/stream/tabs/comments/components/PermalinkView.tsx b/src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.tsx
similarity index 93%
rename from src/core/client/stream/tabs/comments/components/PermalinkView.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.tsx
index 5f5ed608b..99793b10c 100644
--- a/src/core/client/stream/tabs/comments/components/PermalinkView.tsx
+++ b/src/core/client/stream/tabs/comments/views/permalink/components/PermalinkView.tsx
@@ -4,9 +4,10 @@ import React, { MouseEvent, StatelessComponent } from "react";
 import { PropTypesOf } from "talk-framework/types";
 import { Button, Flex, HorizontalGutter, Typography } from "talk-ui/components";
 
-import UserBoxContainer from "../../../containers/UserBoxContainer";
+import UserBoxContainer from "talk-stream/containers/UserBoxContainer";
+import ReplyListContainer from "talk-stream/tabs/comments/containers/ReplyListContainer";
+
 import ConversationThreadContainer from "../containers/ConversationThreadContainer";
-import ReplyListContainer from "../containers/ReplyListContainer";
 
 import styles from "./PermalinkView.css";
 
@@ -50,7 +51,6 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
         {showAllCommentsHref && (
           <Localized id="comments-permalinkView-viewFullDiscussion">
             <Button
-              id="talk-comments-permalinkView-viewFullDiscussion"
               variant="underlined"
               color="primary"
               onClick={onShowAllComments}
diff --git a/src/core/client/stream/tabs/comments/components/Timeline/Circle.css b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Circle.css
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/Timeline/Circle.css
rename to src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Circle.css
diff --git a/src/core/client/stream/tabs/comments/components/Timeline/Circle.spec.tsx b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Circle.spec.tsx
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/Timeline/Circle.spec.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Circle.spec.tsx
diff --git a/src/core/client/stream/tabs/comments/components/Timeline/Circle.tsx b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Circle.tsx
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/Timeline/Circle.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Circle.tsx
diff --git a/src/core/client/stream/tabs/comments/components/Timeline/Line.css b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Line.css
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/Timeline/Line.css
rename to src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Line.css
diff --git a/src/core/client/stream/tabs/comments/components/Timeline/Line.spec.tsx b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Line.spec.tsx
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/Timeline/Line.spec.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Line.spec.tsx
diff --git a/src/core/client/stream/tabs/comments/components/Timeline/Line.tsx b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Line.tsx
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/Timeline/Line.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/components/Timeline/Line.tsx
diff --git a/src/core/client/stream/tabs/comments/components/Timeline/__snapshots__/Circle.spec.tsx.snap b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/__snapshots__/Circle.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/Timeline/__snapshots__/Circle.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/views/permalink/components/Timeline/__snapshots__/Circle.spec.tsx.snap
diff --git a/src/core/client/stream/tabs/comments/components/Timeline/__snapshots__/Line.spec.tsx.snap b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/__snapshots__/Line.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/Timeline/__snapshots__/Line.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/views/permalink/components/Timeline/__snapshots__/Line.spec.tsx.snap
diff --git a/src/core/client/stream/tabs/comments/components/Timeline/index.ts b/src/core/client/stream/tabs/comments/views/permalink/components/Timeline/index.ts
similarity index 100%
rename from src/core/client/stream/tabs/comments/components/Timeline/index.ts
rename to src/core/client/stream/tabs/comments/views/permalink/components/Timeline/index.ts
diff --git a/src/core/client/stream/tabs/comments/components/__snapshots__/ConversationThread.spec.tsx.snap b/src/core/client/stream/tabs/comments/views/permalink/components/__snapshots__/ConversationThread.spec.tsx.snap
similarity index 95%
rename from src/core/client/stream/tabs/comments/components/__snapshots__/ConversationThread.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/views/permalink/components/__snapshots__/ConversationThread.spec.tsx.snap
index 0519d3fab..71fbe6919 100644
--- a/src/core/client/stream/tabs/comments/components/__snapshots__/ConversationThread.spec.tsx.snap
+++ b/src/core/client/stream/tabs/comments/views/permalink/components/__snapshots__/ConversationThread.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`renders with no parent comments 1`] = `
 <div
   className="root ConversationThread-root"
+  data-testid="comments-permalinkView-conversationThread"
 >
   <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
     comment={Object {}}
@@ -17,6 +18,7 @@ exports[`renders with no parent comments 1`] = `
 exports[`with 2 remaining parent comments renders correctly 1`] = `
 <div
   className="root ConversationThread-root"
+  data-testid="comments-permalinkView-conversationThread"
 >
   <withPropsOnChange(HorizontalGutter)
     container={
@@ -80,6 +82,7 @@ exports[`with 2 remaining parent comments renders correctly 1`] = `
 exports[`with 2 remaining parent comments renders with disabled load more 1`] = `
 <div
   className="root ConversationThread-root"
+  data-testid="comments-permalinkView-conversationThread"
 >
   <withPropsOnChange(HorizontalGutter)
     container={
diff --git a/src/core/client/stream/tabs/comments/components/__snapshots__/PermalinkView.spec.tsx.snap b/src/core/client/stream/tabs/comments/views/permalink/components/__snapshots__/PermalinkView.spec.tsx.snap
similarity index 96%
rename from src/core/client/stream/tabs/comments/components/__snapshots__/PermalinkView.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/views/permalink/components/__snapshots__/PermalinkView.spec.tsx.snap
index caf15e087..61e21204f 100644
--- a/src/core/client/stream/tabs/comments/components/__snapshots__/PermalinkView.spec.tsx.snap
+++ b/src/core/client/stream/tabs/comments/views/permalink/components/__snapshots__/PermalinkView.spec.tsx.snap
@@ -39,7 +39,6 @@ exports[`renders comment not found 1`] = `
         anchor={true}
         color="primary"
         href="http://localhost/link"
-        id="talk-comments-permalinkView-viewFullDiscussion"
         onClick={[Function]}
         target="_parent"
         variant="underlined"
@@ -97,7 +96,6 @@ exports[`renders correctly 1`] = `
         anchor={true}
         color="primary"
         href="http://localhost/link"
-        id="talk-comments-permalinkView-viewFullDiscussion"
         onClick={[Function]}
         target="_parent"
         variant="underlined"
diff --git a/src/core/client/stream/tabs/comments/containers/ConversationThreadContainer.tsx b/src/core/client/stream/tabs/comments/views/permalink/containers/ConversationThreadContainer.tsx
similarity index 100%
rename from src/core/client/stream/tabs/comments/containers/ConversationThreadContainer.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/containers/ConversationThreadContainer.tsx
diff --git a/src/core/client/stream/tabs/comments/containers/PermalinkViewContainer.tsx b/src/core/client/stream/tabs/comments/views/permalink/containers/PermalinkViewContainer.tsx
similarity index 100%
rename from src/core/client/stream/tabs/comments/containers/PermalinkViewContainer.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/containers/PermalinkViewContainer.tsx
diff --git a/src/core/client/stream/tabs/comments/views/permalink/index.ts b/src/core/client/stream/tabs/comments/views/permalink/index.ts
new file mode 100644
index 000000000..edfe25463
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/permalink/index.ts
@@ -0,0 +1 @@
+export { default } from "./queries/PermalinkViewQuery";
diff --git a/src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.spec.tsx b/src/core/client/stream/tabs/comments/views/permalink/queries/PermalinkViewQuery.spec.tsx
similarity index 100%
rename from src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.spec.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/queries/PermalinkViewQuery.spec.tsx
diff --git a/src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.tsx b/src/core/client/stream/tabs/comments/views/permalink/queries/PermalinkViewQuery.tsx
similarity index 100%
rename from src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.tsx
rename to src/core/client/stream/tabs/comments/views/permalink/queries/PermalinkViewQuery.tsx
diff --git a/src/core/client/stream/tabs/comments/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap b/src/core/client/stream/tabs/comments/views/permalink/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
similarity index 100%
rename from src/core/client/stream/tabs/comments/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
rename to src/core/client/stream/tabs/comments/views/permalink/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/PropagateMount.tsx b/src/core/client/stream/tabs/comments/views/reportComment/components/PropagateMount.tsx
new file mode 100644
index 000000000..20fe12622
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/components/PropagateMount.tsx
@@ -0,0 +1,18 @@
+import { Component } from "react";
+
+interface Props {
+  onMount: () => void;
+}
+
+/**
+ * A component that calls onMount, after componentDidMount.
+ */
+export default class PropagateUpdate extends Component<Props> {
+  public componentDidMount() {
+    this.props.onMount();
+  }
+
+  public render() {
+    return null;
+  }
+}
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/ReportCommentForm.css b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportCommentForm.css
new file mode 100644
index 000000000..f6c6fc92f
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportCommentForm.css
@@ -0,0 +1,30 @@
+.root {
+  width: 260px;
+}
+
+.title {
+  padding-right: calc(2 * var(--spacing-unit));
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.detail {
+  display: block;
+  color: var(--palette-text-secondary);
+}
+
+.textarea {
+  width: 100%;
+  height: 60px;
+  box-sizing: border-box;
+  border: 1px solid var(--palette-grey-light);
+}
+
+.textareaInfo {
+  margin-top: -2px;
+  text-align: right;
+}
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/ReportCommentForm.tsx b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportCommentForm.tsx
new file mode 100644
index 000000000..bd84feb68
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportCommentForm.tsx
@@ -0,0 +1,220 @@
+import { Localized } from "fluent-react/compat";
+import { get } from "lodash";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+
+import { OnSubmit } from "talk-framework/lib/form";
+import { validateMaxLength } from "talk-framework/lib/validation";
+import { PropTypesOf } from "talk-framework/types";
+import {
+  Button,
+  Flex,
+  HorizontalGutter,
+  RadioButton,
+  Typography,
+} from "talk-ui/components";
+
+import PropagateMount from "./PropagateMount";
+import styles from "./ReportCommentForm.css";
+
+const RadioField: StatelessComponent<
+  Pick<
+    PropTypesOf<typeof Field>,
+    "validate" | "name" | "value" | "disabled" | "children"
+  >
+> = ({ name, value, disabled, children }) => (
+  <Field name={name} type="radio" value={value}>
+    {({ input }) => (
+      <RadioButton
+        id={`reportComment-popover--${input.name}-${value}`}
+        name={input.name}
+        onChange={input.onChange}
+        onFocus={input.onFocus}
+        onBlur={input.onBlur}
+        checked={input.checked}
+        disabled={disabled}
+        value={input.value}
+      >
+        {children}
+      </RadioButton>
+    )}
+  </Field>
+);
+
+interface InnerProps {
+  id: string;
+  onCancel: () => void;
+  onResize: () => void;
+  onSubmit: OnSubmit<FormProps>;
+}
+
+export interface FormProps {
+  reason:
+    | "COMMENT_REPORTED_OFFENSIVE"
+    | "COMMENT_REPORTED_SPAM"
+    | "COMMENT_REPORTED_OTHER"
+    | "DISAGREE";
+  additionalDetails?: string;
+}
+
+class ReportCommentForm extends React.Component<InnerProps> {
+  public render() {
+    const { onCancel, onSubmit, onResize, id } = this.props;
+    return (
+      <Form onSubmit={onSubmit}>
+        {({ handleSubmit, submitting, hasValidationErrors, form }) => (
+          <form
+            autoComplete="off"
+            onSubmit={handleSubmit}
+            className={styles.root}
+            id="report-comments-form"
+          >
+            <HorizontalGutter className={styles.root}>
+              <Localized id="comments-reportPopover-reportThisComment">
+                <Typography variant="heading2" className={styles.title}>
+                  Report This Comment
+                </Typography>
+              </Localized>
+              <HorizontalGutter size="half">
+                <Localized id="comments-reportPopover-whyAreYouReporting">
+                  <Typography variant="detail" className={styles.detail}>
+                    Why are you reporting this comment?
+                  </Typography>
+                </Localized>
+                <ul className={styles.list}>
+                  <li>
+                    <Localized id="comments-reportPopover-reasonOffensive">
+                      <RadioField
+                        name="reason"
+                        value="COMMENT_REPORTED_OFFENSIVE"
+                        disabled={submitting}
+                      >
+                        This comment is offensive
+                      </RadioField>
+                    </Localized>
+                  </li>
+                  <li>
+                    <Localized id="comments-reportPopover-reasonIDisagree">
+                      <RadioField
+                        name="reason"
+                        value="DISAGREE"
+                        disabled={submitting}
+                      >
+                        I disagree with this comment
+                      </RadioField>
+                    </Localized>
+                  </li>
+                  <li>
+                    <Localized id="comments-reportPopover-reasonSpam">
+                      <RadioField
+                        name="reason"
+                        value="COMMENT_REPORTED_SPAM"
+                        disabled={submitting}
+                      >
+                        This looks like an ad or marketing
+                      </RadioField>
+                    </Localized>
+                  </li>
+                  <li>
+                    <Localized id="comments-reportPopover-reasonOther">
+                      <RadioField
+                        name="reason"
+                        value="COMMENT_REPORTED_OTHER"
+                        disabled={submitting}
+                      >
+                        Other
+                      </RadioField>
+                    </Localized>
+                  </li>
+                </ul>
+                {get(form.getFieldState("reason"), "value") && (
+                  <>
+                    <PropagateMount onMount={onResize} />
+                    <Localized id="comments-reportPopover-pleaseLeaveAdditionalInformation">
+                      <Typography
+                        variant="detail"
+                        className={styles.detail}
+                        container={
+                          <label
+                            htmlFor={`comments-reportCommentForm-aditionalDetails--${id}`}
+                          />
+                        }
+                      >
+                        Please leave any additional information that may be
+                        helpful to our moderators. (Optional)
+                      </Typography>
+                    </Localized>
+                    <div>
+                      <Field
+                        name="additionalDetails"
+                        validate={validateMaxLength(500)}
+                      >
+                        {({ input, meta }) => (
+                          <div>
+                            <textarea
+                              id={`comments-reportCommentForm-aditionalDetails--${id}`}
+                              className={styles.textarea}
+                              onChange={input.onChange}
+                              onFocus={input.onFocus}
+                              onBlur={input.onBlur}
+                              disabled={submitting}
+                              value={input.value}
+                            />
+                            {(meta.error && (
+                              <Typography
+                                variant="detail"
+                                color="error"
+                                className={styles.textareaInfo}
+                              >
+                                {meta.error}
+                              </Typography>
+                            )) || (
+                              <Localized
+                                id="comments-reportPopover-maxCharacters"
+                                $maxCharacters={500}
+                              >
+                                <Typography
+                                  variant="detail"
+                                  color="textSecondary"
+                                  className={styles.textareaInfo}
+                                >
+                                  Max. 500 Characters
+                                </Typography>
+                              </Localized>
+                            )}
+                          </div>
+                        )}
+                      </Field>
+                    </div>
+                  </>
+                )}
+              </HorizontalGutter>
+              {get(form.getFieldState("reason"), "value") && (
+                <Flex alignItems="center" justifyContent="flex-end">
+                  <Localized id="comments-reportPopover-cancel">
+                    <Button color="primary" size="small" onClick={onCancel}>
+                      Cancel
+                    </Button>
+                  </Localized>
+                  <Localized id="comments-reportPopover-submit">
+                    <Button
+                      color="primary"
+                      size="small"
+                      variant="filled"
+                      type="submit"
+                      disabled={submitting || hasValidationErrors}
+                    >
+                      Submit
+                    </Button>
+                  </Localized>
+                </Flex>
+              )}
+            </HorizontalGutter>
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+export default ReportCommentForm;
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.css b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.css
new file mode 100644
index 000000000..00b172137
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.css
@@ -0,0 +1,9 @@
+.root {
+  padding: calc(1 * var(--spacing-unit));
+}
+
+.close {
+  position: absolute;
+  top: calc(0.5 * var(--spacing-unit));
+  right: calc(0.5 * var(--spacing-unit));
+}
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.spec.tsx b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.spec.tsx
new file mode 100644
index 000000000..e95bff475
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.spec.tsx
@@ -0,0 +1,21 @@
+import { noop } from "lodash";
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { removeFragmentRefs } from "talk-framework/testHelpers";
+import { PropTypesOf } from "talk-framework/types";
+
+import ReportPopover from "./ReportPopover";
+
+const ReportPopoverN = removeFragmentRefs(ReportPopover);
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ReportPopoverN> = {
+    comment: {},
+    onClose: noop,
+    onResize: noop,
+  };
+  const renderer = createRenderer();
+  renderer.render(<ReportPopoverN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.tsx b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.tsx
new file mode 100644
index 000000000..9af6e9dfb
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/components/ReportPopover.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+import { BaseButton, Icon } from "talk-ui/components";
+import { PropTypesOf } from "talk-ui/types";
+
+import ReportCommentFormContainer from "../containers/ReportCommentFormContainer";
+import styles from "./ReportPopover.css";
+
+interface InnerProps {
+  comment: PropTypesOf<typeof ReportCommentFormContainer>["comment"];
+  onClose: () => void;
+  onResize: () => void;
+}
+
+class ReportPopover extends React.Component<InnerProps> {
+  public render() {
+    const { onClose, onResize, comment } = this.props;
+    return (
+      <div className={styles.root}>
+        <BaseButton
+          onClick={onClose}
+          className={styles.close}
+          aria-label="Close Popover"
+        >
+          <Icon>close</Icon>
+        </BaseButton>
+        <ReportCommentFormContainer
+          comment={comment}
+          onClose={onClose}
+          onResize={onResize}
+        />
+      </div>
+    );
+  }
+}
+
+export default ReportPopover;
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.css b/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.css
new file mode 100644
index 000000000..469fbcaf4
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.css
@@ -0,0 +1,11 @@
+.root {
+  width: 260px;
+}
+
+.title {
+  padding-right: calc(2 * var(--spacing-unit));
+}
+
+.dismiss {
+  margin-top: -3px;
+}
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.spec.tsx b/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.spec.tsx
new file mode 100644
index 000000000..34c4e2806
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.spec.tsx
@@ -0,0 +1,16 @@
+import { noop } from "lodash";
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ThankYou from "./ThankYou";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ThankYou> = {
+    onDismiss: noop,
+  };
+  const renderer = createRenderer();
+  renderer.render(<ThankYou {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.tsx b/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.tsx
new file mode 100644
index 000000000..08db88b86
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/components/ThankYou.tsx
@@ -0,0 +1,52 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+
+import { Button, HorizontalGutter, Typography } from "talk-ui/components";
+
+import styles from "./ThankYou.css";
+
+interface InnerProps {
+  onDismiss: () => void;
+}
+
+class ReportForm extends React.Component<InnerProps> {
+  public render() {
+    const { onDismiss } = this.props;
+    const Content: StatelessComponent = ({ children }) => (
+      <Typography variant="bodyCopy">
+        {children}
+        {" "}
+        <Localized id="comments-reportPopover-dismiss">
+          <Button
+            className={styles.dismiss}
+            color="primary"
+            variant="underlined"
+            onClick={onDismiss}
+          >
+            Dismiss
+          </Button>
+        </Localized>
+      </Typography>
+    );
+
+    return (
+      <HorizontalGutter className={styles.root}>
+        <Localized id="comments-reportPopover-thankYou">
+          <Typography variant="heading2" className={styles.title}>
+            Thank you!
+          </Typography>
+        </Localized>
+        <div>
+          <Localized id="comments-reportPopover-receivedMessage">
+            <Content>
+              We’ve received your message. Reports from members like you keep
+              the community safe.
+            </Content>
+          </Localized>
+        </div>
+      </HorizontalGutter>
+    );
+  }
+}
+
+export default ReportForm;
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/__snapshots__/ReportPopover.spec.tsx.snap b/src/core/client/stream/tabs/comments/views/reportComment/components/__snapshots__/ReportPopover.spec.tsx.snap
new file mode 100644
index 000000000..245c516ad
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/components/__snapshots__/ReportPopover.spec.tsx.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="ReportPopover-root"
+>
+  <withPropsOnChange(WithMouseHover)
+    aria-label="Close Popover"
+    className="ReportPopover-close"
+    onClick={[Function]}
+  >
+    <withPropsOnChange(Icon)>
+      close
+    </withPropsOnChange(Icon)>
+  </withPropsOnChange(WithMouseHover)>
+  <withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReportCommentFormContainer)))))
+    comment={Object {}}
+    onClose={[Function]}
+    onResize={[Function]}
+  />
+</div>
+`;
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/components/__snapshots__/ThankYou.spec.tsx.snap b/src/core/client/stream/tabs/comments/views/reportComment/components/__snapshots__/ThankYou.spec.tsx.snap
new file mode 100644
index 000000000..af4b0d06e
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/components/__snapshots__/ThankYou.spec.tsx.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(HorizontalGutter)
+  className="ThankYou-root"
+>
+  <Localized
+    id="comments-reportPopover-thankYou"
+  >
+    <withPropsOnChange(Typography)
+      className="ThankYou-title"
+      variant="heading2"
+    >
+      Thank you!
+    </withPropsOnChange(Typography)>
+  </Localized>
+  <div>
+    <Localized
+      id="comments-reportPopover-receivedMessage"
+    >
+      <Content>
+        We’ve received your message. Reports from members like you keep the community safe.
+      </Content>
+    </Localized>
+  </div>
+</withPropsOnChange(HorizontalGutter)>
+`;
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/containers/ReportCommentFormContainer.tsx b/src/core/client/stream/tabs/comments/views/reportComment/containers/ReportCommentFormContainer.tsx
new file mode 100644
index 000000000..c8326dfba
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/containers/ReportCommentFormContainer.tsx
@@ -0,0 +1,101 @@
+import React, { Component } from "react";
+import { graphql } from "react-relay";
+
+import { BadUserInputError } from "talk-framework/lib/errors";
+import { withFragmentContainer } from "talk-framework/lib/relay";
+import { PropTypesOf } from "talk-framework/types";
+import { ReportCommentFormContainer_comment as CommentData } from "talk-stream/__generated__/ReportCommentFormContainer_comment.graphql";
+
+import {
+  CreateCommentDontAgreeMutation,
+  CreateCommentFlagMutation,
+  withCreateCommentDontAgreeMutation,
+  withCreateCommentFlagMutation,
+} from "talk-stream/mutations";
+import ReportCommentForm from "../components/ReportCommentForm";
+import ThankYou from "../components/ThankYou";
+
+interface Props {
+  comment: CommentData;
+  createCommentFlag: CreateCommentFlagMutation;
+  createCommentDontAgree: CreateCommentDontAgreeMutation;
+  onClose: () => void;
+  onResize: () => void;
+}
+
+interface State {
+  done: boolean;
+}
+
+export class ReportCommentFormContainer extends Component<Props, State> {
+  public state = {
+    done: false,
+  };
+
+  private handleOnSubmit: PropTypesOf<
+    typeof ReportCommentForm
+  >["onSubmit"] = async (input, form) => {
+    try {
+      if (input.reason === "DISAGREE") {
+        await this.props.createCommentDontAgree({
+          commentID: this.props.comment.id,
+          commentRevisionID: this.props.comment.revision.id,
+          additionalDetails: input.additionalDetails,
+        });
+      } else {
+        await this.props.createCommentFlag({
+          commentID: this.props.comment.id,
+          commentRevisionID: this.props.comment.revision.id,
+          reason: input.reason,
+          additionalDetails: input.additionalDetails,
+        });
+      }
+      this.setState({ done: true });
+    } catch (error) {
+      if (error instanceof BadUserInputError) {
+        return error.invalidArgsLocalized;
+      }
+      // tslint:disable-next-line:no-console
+      console.error(error);
+    }
+    return undefined;
+  };
+
+  public componentDidUpdate(prevProps: Props, prevState: State) {
+    // Reposition popper after switching view.
+    if (this.state.done && !prevState.done) {
+      this.props.onResize();
+    }
+  }
+
+  public render() {
+    if (!this.state.done) {
+      return (
+        <ReportCommentForm
+          id={this.props.comment.id}
+          onSubmit={this.handleOnSubmit}
+          onCancel={this.props.onClose}
+          onResize={this.props.onResize}
+        />
+      );
+    }
+    return <ThankYou onDismiss={this.props.onClose} />;
+  }
+}
+
+const enhanced = withCreateCommentDontAgreeMutation(
+  withCreateCommentFlagMutation(
+    withFragmentContainer<Props>({
+      comment: graphql`
+        fragment ReportCommentFormContainer_comment on Comment {
+          id
+          revision {
+            id
+          }
+        }
+      `,
+    })(ReportCommentFormContainer)
+  )
+);
+export type ReportCommentFormContainerProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/stream/tabs/comments/views/reportComment/index.ts b/src/core/client/stream/tabs/comments/views/reportComment/index.ts
new file mode 100644
index 000000000..2d930bc81
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/views/reportComment/index.ts
@@ -0,0 +1 @@
+export { default } from "./components/ReportPopover";
diff --git a/src/core/client/stream/tabs/profile/components/CommentHistory.tsx b/src/core/client/stream/tabs/profile/components/CommentHistory.tsx
index b9b8bc5da..8dd4e9621 100644
--- a/src/core/client/stream/tabs/profile/components/CommentHistory.tsx
+++ b/src/core/client/stream/tabs/profile/components/CommentHistory.tsx
@@ -18,7 +18,7 @@ interface CommentHistoryProps {
 
 const CommentHistory: StatelessComponent<CommentHistoryProps> = props => {
   return (
-    <HorizontalGutter size="double">
+    <HorizontalGutter size="double" data-testid="profile-commentHistory">
       <Localized id="profile-historyComment-commentHistory">
         <Typography variant="heading3">Comment History</Typography>
       </Localized>
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.spec.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.spec.tsx
index f525e88f3..cff290190 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.spec.tsx
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.spec.tsx
@@ -11,6 +11,7 @@ const HistoryCommentN = removeFragmentRefs(HistoryComment);
 
 it("renders correctly", () => {
   const props: PropTypesOf<typeof HistoryCommentN> = {
+    id: "comment-id",
     body: "Hello World",
     createdAt: "2018-07-06T18:24:00.000Z",
     replyCount: 4,
diff --git a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
index 22100fcdd..1db1186c7 100644
--- a/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
+++ b/src/core/client/stream/tabs/profile/components/HistoryComment.tsx
@@ -16,6 +16,7 @@ import HTMLContent from "../../../components/HTMLContent";
 import styles from "./HistoryComment.css";
 
 export interface HistoryCommentProps {
+  id: string;
   body: string | null;
   createdAt: string;
   replyCount: number | null;
@@ -30,7 +31,7 @@ export interface HistoryCommentProps {
 
 const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
   return (
-    <HorizontalGutter>
+    <HorizontalGutter data-testid={`historyComment-${props.id}`}>
       <Localized
         id="profile-historyComment-story"
         $title={props.story.metadata ? props.story.metadata.title : "N/A"} // FIXME: (wyattjoh) When a title for a Story isn't available, we need a fallback.
diff --git a/src/core/client/stream/tabs/profile/components/__snapshots__/CommentHistory.spec.tsx.snap b/src/core/client/stream/tabs/profile/components/__snapshots__/CommentHistory.spec.tsx.snap
index 1e9a31d87..5f5558007 100644
--- a/src/core/client/stream/tabs/profile/components/__snapshots__/CommentHistory.spec.tsx.snap
+++ b/src/core/client/stream/tabs/profile/components/__snapshots__/CommentHistory.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`has more disables load more 1`] = `
 <withPropsOnChange(HorizontalGutter)
+  data-testid="profile-commentHistory"
   size="double"
 >
   <Localized
@@ -48,6 +49,7 @@ exports[`has more disables load more 1`] = `
 
 exports[`has more renders correctly 1`] = `
 <withPropsOnChange(HorizontalGutter)
+  data-testid="profile-commentHistory"
   size="double"
 >
   <Localized
@@ -94,6 +96,7 @@ exports[`has more renders correctly 1`] = `
 
 exports[`renders correctly 1`] = `
 <withPropsOnChange(HorizontalGutter)
+  data-testid="profile-commentHistory"
   size="double"
 >
   <Localized
diff --git a/src/core/client/stream/tabs/profile/components/__snapshots__/HistoryComment.spec.tsx.snap b/src/core/client/stream/tabs/profile/components/__snapshots__/HistoryComment.spec.tsx.snap
index ad55b5b74..808dd1788 100644
--- a/src/core/client/stream/tabs/profile/components/__snapshots__/HistoryComment.spec.tsx.snap
+++ b/src/core/client/stream/tabs/profile/components/__snapshots__/HistoryComment.spec.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<withPropsOnChange(HorizontalGutter)>
+<withPropsOnChange(HorizontalGutter)
+  data-testid="historyComment-comment-id"
+>
   <Localized
     $title="Story Title"
     id="profile-historyComment-story"
diff --git a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
index 97dcd8750..897480ce2 100644
--- a/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap
@@ -1,97 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cancel edit: edit canceled 1`] = `
+exports[`cancel edit 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  data-testid="comment-comment-0"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      className="Indent-root"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className=""
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Signed in as 
               <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
               >
                 Markus
               </span>
-              .
+              <div
+                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+              >
+                <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="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
+            <div>
               <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -100,399 +51,122 @@ exports[`cancel edit: edit canceled 1`] = `
                 onTouchEnd={[Function]}
                 type="button"
               >
-                Sign Out
+                Edit
               </button>
             </div>
           </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
           <div
             className="HorizontalGutter-root HorizontalGutter-full"
           >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="PostCommentForm-poweredBy"
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
               >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  id="comments-commentContainer-replyButton-comment-0"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
                 >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
+                  <span>
+                    Reply
                   </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
+                </button>
                 <div
-                  className="Comment-root"
-                  role="article"
+                  className="Popover-root"
                 >
+                  <button
+                    aria-controls="permalink-popover-comment-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Share
+                    </span>
+                  </button>
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
+                    aria-hidden={true}
+                    aria-labelledby="permalink-popover-comment-0-ariainfo"
+                    id="permalink-popover-comment-0"
+                    role="popup"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="AriaInfo-root"
+                      id="permalink-popover-comment-0-ariainfo"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                        id="comments-commentContainer-editButton-comment-0"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        Edit
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
+                      A dialog showing a permalink to the comment
                     </div>
                   </div>
                 </div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Respect
+                  </span>
+                </button>
               </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
               <div
-                className=""
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
               >
                 <div
-                  className="Comment-root"
-                  role="article"
+                  className="Popover-root"
                 >
+                  <button
+                    aria-controls="report-popover-comment-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Report
+                    </span>
+                  </button>
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
+                    aria-hidden={true}
+                    aria-labelledby="report-popover-comment-0-ariainfo"
+                    id="report-popover-comment-0"
+                    role="popup"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="AriaInfo-root"
+                      id="report-popover-comment-0-ariainfo"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
+                      A dialog for reporting comments
                     </div>
                   </div>
                 </div>
@@ -502,633 +176,381 @@ exports[`cancel edit: edit canceled 1`] = `
         </div>
       </div>
     </div>
-  </section>
+  </div>
 </div>
 `;
 
 exports[`edit a comment: edit form 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  data-testid="comment-comment-0"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      className="HorizontalGutter-root HorizontalGutter-full"
     >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
+      <div>
         <div
-          className="Flex-root"
+          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
         >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
+          <span
+            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
           >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
+            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>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
       </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+      <div>
+        <label
+          className="AriaInfo-root"
+          htmlFor="comments-editCommentForm-rte-comment-0"
         >
-          <form
-            autoComplete="off"
-            id="comments-editCommentForm-form-comment-0"
-            onSubmit={[Function]}
+          Edit comment
+        </label>
+        <div>
+          <div
+            className=""
           >
             <div
-              className="HorizontalGutter-root HorizontalGutter-full"
+              aria-placeholder="Edit comment"
+              className="RTE-contentEditable RTE-content"
+              contentEditable={true}
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+              disabled={false}
+              id="comments-editCommentForm-rte-comment-0"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onCut={[Function]}
+              onFocus={[Function]}
+              onInput={[Function]}
+              onKeyDown={[Function]}
+              onPaste={[Function]}
+              onSelect={[Function]}
+            />
+            <div
+              className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
             >
-              <div>
-                <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>
-                <label
-                  className="AriaInfo-root"
-                  htmlFor="comments-editCommentForm-rte-comment-0"
-                >
-                  Edit comment
-                </label>
-                <div>
-                  <div
-                    className=""
-                  >
-                    <div
-                      aria-placeholder="Edit comment"
-                      className="RTE-contentEditable RTE-content"
-                      contentEditable={true}
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                      disabled={false}
-                      id="comments-editCommentForm-rte-comment-0"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onCut={[Function]}
-                      onFocus={[Function]}
-                      onInput={[Function]}
-                      onKeyDown={[Function]}
-                      onPaste={[Function]}
-                      onSelect={[Function]}
-                    />
-                    <div
-                      className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                    >
-                      <button
-                        className="Button-button"
-                        disabled={false}
-                        onClick={[Function]}
-                        title="Bold"
-                        type="button"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="Icon-root Icon-md"
-                        >
-                          format_bold
-                        </span>
-                      </button>
-                      <button
-                        className="Button-button"
-                        disabled={false}
-                        onClick={[Function]}
-                        title="Italic"
-                        type="button"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="Icon-root Icon-md"
-                        >
-                          format_italic
-                        </span>
-                      </button>
-                      <button
-                        className="Button-button"
-                        disabled={false}
-                        onClick={[Function]}
-                        title="Blockquote"
-                        type="button"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="Icon-root Icon-md"
-                        >
-                          format_quote
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="Message-root Message-colorGrey Message-fullWidth"
+              <button
+                className="Button-button"
+                disabled={false}
+                onClick={[Function]}
+                title="Bold"
+                type="button"
               >
                 <span
                   aria-hidden="true"
-                  className="Icon-root MessageIcon-root Icon-sm"
+                  className="Icon-root Icon-md"
                 >
-                  alarm
+                  format_bold
                 </span>
-                <span>
-                  Edit: 
-                  <time
-                    className="RelativeTime-root"
-                    dateTime="2018-07-06T18:24:30.000Z"
-                    title="2018-07-06T18:24:30.000Z"
-                  >
-                    2018-07-06T18:24:30.000Z
-                  </time>
-                   remaining
+              </button>
+              <button
+                className="Button-button"
+                disabled={false}
+                onClick={[Function]}
+                title="Italic"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  className="Icon-root Icon-md"
+                >
+                  format_italic
                 </span>
-              </div>
-              <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+              </button>
+              <button
+                className="Button-button"
+                disabled={false}
+                onClick={[Function]}
+                title="Blockquote"
+                type="button"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
-                  disabled={false}
-                  id="comments-editCommentForm-cancelButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <span
+                  aria-hidden="true"
+                  className="Icon-root Icon-md"
                 >
-                  Cancel
-                </button>
-                <button
-                  className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                  disabled={true}
-                  onBlur={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="submit"
-                >
-                  Save Changes
-                </button>
-              </div>
-            </div>
-          </form>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
+                  format_quote
+                </span>
+              </button>
             </div>
           </div>
         </div>
       </div>
+      <div
+        className="Message-root Message-colorGrey Message-fullWidth"
+      >
+        <span
+          aria-hidden="true"
+          className="Icon-root MessageIcon-root Icon-sm"
+        >
+          alarm
+        </span>
+        <span>
+          Edit: 
+          <time
+            className="RelativeTime-root"
+            dateTime="2018-07-06T18:24:30.000Z"
+            title="2018-07-06T18:24:30.000Z"
+          >
+            2018-07-06T18:24:30.000Z
+          </time>
+           remaining
+        </span>
+      </div>
+      <div
+        className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+          disabled={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Save Changes
+        </button>
+      </div>
     </div>
-  </section>
+  </form>
 </div>
 `;
 
 exports[`edit a comment: optimistic response 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  data-testid="comment-comment-0"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      className="HorizontalGutter-root HorizontalGutter-full"
     >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
+      <div>
         <div
-          className="Flex-root"
+          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>
+        <label
+          className="AriaInfo-root"
+          htmlFor="comments-editCommentForm-rte-comment-0"
+        >
+          Edit comment
+        </label>
+        <div>
           <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
+            className=""
           >
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              aria-placeholder="Edit comment"
+              className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+              contentEditable={false}
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Edited!",
+                }
+              }
+              disabled={true}
+              id="comments-editCommentForm-rte-comment-0"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onCut={[Function]}
+              onFocus={[Function]}
+              onInput={[Function]}
+              onKeyDown={[Function]}
+              onPaste={[Function]}
+              onSelect={[Function]}
+            />
+            <div
+              className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
+            >
+              <button
+                className="Button-button"
+                disabled={false}
+                onClick={[Function]}
+                title="Bold"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  className="Icon-root Icon-md"
+                >
+                  format_bold
+                </span>
+              </button>
+              <button
+                className="Button-button"
+                disabled={false}
+                onClick={[Function]}
+                title="Italic"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  className="Icon-root Icon-md"
+                >
+                  format_italic
+                </span>
+              </button>
+              <button
+                className="Button-button"
+                disabled={false}
+                onClick={[Function]}
+                title="Blockquote"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  className="Icon-root Icon-md"
+                >
+                  format_quote
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="Message-root Message-colorGrey Message-fullWidth"
+      >
+        <span
+          aria-hidden="true"
+          className="Icon-root MessageIcon-root Icon-sm"
+        >
+          alarm
+        </span>
+        <span>
+          Edit: 
+          <time
+            className="RelativeTime-root"
+            dateTime="2018-07-06T18:24:30.000Z"
+            title="2018-07-06T18:24:30.000Z"
+          >
+            2018-07-06T18:24:30.000Z
+          </time>
+           remaining
+        </span>
+      </div>
+      <div
+        className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Save Changes
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`edit a comment: render comment with edit button 1`] = `
+<div
+  data-testid="comment-comment-0"
+>
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
+  >
+    <div
+      className="Indent-root"
+    >
+      <div
+        className=""
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Signed in as 
               <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
               >
                 Markus
               </span>
-              .
+              <div
+                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+              >
+                <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="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
+            <div>
               <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -1137,282 +559,30 @@ exports[`edit a comment: optimistic response 1`] = `
                 onTouchEnd={[Function]}
                 type="button"
               >
-                Sign Out
+                Edit
               </button>
             </div>
           </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
           <div
             className="HorizontalGutter-root HorizontalGutter-full"
           >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <form
-            autoComplete="off"
-            id="comments-editCommentForm-form-comment-0"
-            onSubmit={[Function]}
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div>
-                <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>
-                <label
-                  className="AriaInfo-root"
-                  htmlFor="comments-editCommentForm-rte-comment-0"
-                >
-                  Edit comment
-                </label>
-                <div>
-                  <div
-                    className=""
-                  >
-                    <div
-                      aria-placeholder="Edit comment"
-                      className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                      contentEditable={false}
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Edited!",
-                        }
-                      }
-                      disabled={true}
-                      id="comments-editCommentForm-rte-comment-0"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onCut={[Function]}
-                      onFocus={[Function]}
-                      onInput={[Function]}
-                      onKeyDown={[Function]}
-                      onPaste={[Function]}
-                      onSelect={[Function]}
-                    />
-                    <div
-                      className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
-                    >
-                      <button
-                        className="Button-button"
-                        disabled={false}
-                        onClick={[Function]}
-                        title="Bold"
-                        type="button"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="Icon-root Icon-md"
-                        >
-                          format_bold
-                        </span>
-                      </button>
-                      <button
-                        className="Button-button"
-                        disabled={false}
-                        onClick={[Function]}
-                        title="Italic"
-                        type="button"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="Icon-root Icon-md"
-                        >
-                          format_italic
-                        </span>
-                      </button>
-                      <button
-                        className="Button-button"
-                        disabled={false}
-                        onClick={[Function]}
-                        title="Blockquote"
-                        type="button"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="Icon-root Icon-md"
-                        >
-                          format_quote
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="Message-root Message-colorGrey Message-fullWidth"
-              >
-                <span
-                  aria-hidden="true"
-                  className="Icon-root MessageIcon-root Icon-sm"
-                >
-                  alarm
-                </span>
-                <span>
-                  Edit: 
-                  <time
-                    className="RelativeTime-root"
-                    dateTime="2018-07-06T18:24:30.000Z"
-                    title="2018-07-06T18:24:30.000Z"
-                  >
-                    2018-07-06T18:24:30.000Z
-                  </time>
-                   remaining
-                </span>
-              </div>
-              <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-disabled"
-                  disabled={true}
-                  id="comments-editCommentForm-cancelButton-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]}
@@ -1421,646 +591,90 @@ exports[`edit a comment: optimistic response 1`] = `
                   onTouchEnd={[Function]}
                   type="button"
                 >
-                  Cancel
+                  <span>
+                    Reply
+                  </span>
                 </button>
+                <div
+                  className="Popover-root"
+                >
+                  <button
+                    aria-controls="permalink-popover-comment-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Share
+                    </span>
+                  </button>
+                  <div
+                    aria-hidden={true}
+                    aria-labelledby="permalink-popover-comment-0-ariainfo"
+                    id="permalink-popover-comment-0"
+                    role="popup"
+                  >
+                    <div
+                      className="AriaInfo-root"
+                      id="permalink-popover-comment-0-ariainfo"
+                    >
+                      A dialog showing a permalink to the comment
+                    </div>
+                  </div>
+                </div>
                 <button
-                  className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                  disabled={true}
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                   onBlur={[Function]}
+                  onClick={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
                   onTouchEnd={[Function]}
-                  type="submit"
+                  type="button"
                 >
-                  Save Changes
+                  <span>
+                    Respect
+                  </span>
                 </button>
               </div>
-            </div>
-          </form>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
               <div
-                className=""
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
               >
                 <div
-                  className="Comment-root"
-                  role="article"
+                  className="Popover-root"
                 >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`edit a comment: render stream 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root"
-        >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
-          >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
+                  <button
+                    aria-controls="report-popover-comment-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                     disabled={false}
-                    id="comments-postCommentForm-field"
                     onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Report
+                    </span>
+                  </button>
                   <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
+                    aria-hidden={true}
+                    aria-labelledby="report-popover-comment-0-ariainfo"
+                    id="report-popover-comment-0"
+                    role="popup"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="AriaInfo-root"
+                      id="report-popover-comment-0-ariainfo"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                        id="comments-commentContainer-editButton-comment-0"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        Edit
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
+                      A dialog for reporting comments
                     </div>
                   </div>
                 </div>
@@ -2070,102 +684,62 @@ exports[`edit a comment: render stream 1`] = `
         </div>
       </div>
     </div>
-  </section>
+  </div>
 </div>
 `;
 
 exports[`edit a comment: server response 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  data-testid="comment-comment-0"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      className="Indent-root"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className=""
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Signed in as 
               <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
               >
                 Markus
               </span>
-              .
+              <div
+                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+              >
+                <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
+                  className="EditedMarker-root"
+                >
+                  (
+                  <span>
+                    Edited
+                  </span>
+                  )
+                </div>
+              </div>
             </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
+            <div>
               <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -2174,1293 +748,30 @@ exports[`edit a comment: server response 1`] = `
                 onTouchEnd={[Function]}
                 type="button"
               >
-                Sign Out
+                Edit
               </button>
             </div>
           </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
           <div
             className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className="Indent-root"
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Edited! (from server)",
+                }
+              }
+            />
+            <div
+              className="Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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
-                          className="EditedMarker-root"
-                        >
-                          (
-                          <span>
-                            Edited
-                          </span>
-                          )
-                        </div>
-                      </div>
-                    </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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        Edit
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Edited! (from server)",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`shows expiry message: edit form closed 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root"
-        >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
-          >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                        id="comments-commentContainer-editButton-comment-0"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        Edit
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`shows expiry message: edit time expired 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root"
-        >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
-          >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <form
-            autoComplete="off"
-            id="comments-editCommentForm-form-comment-0"
-            onSubmit={[Function]}
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div>
-                <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>
-                <label
-                  className="AriaInfo-root"
-                  htmlFor="comments-editCommentForm-rte-comment-0"
-                >
-                  Edit comment
-                </label>
-                <div>
-                  <div
-                    className=""
-                  >
-                    <div
-                      aria-placeholder="Edit comment"
-                      className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                      contentEditable={false}
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                      disabled={true}
-                      id="comments-editCommentForm-rte-comment-0"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onCut={[Function]}
-                      onFocus={[Function]}
-                      onInput={[Function]}
-                      onKeyDown={[Function]}
-                      onPaste={[Function]}
-                      onSelect={[Function]}
-                    />
-                    <div
-                      className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
-                    >
-                      <button
-                        className="Button-button"
-                        disabled={false}
-                        onClick={[Function]}
-                        title="Bold"
-                        type="button"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="Icon-root Icon-md"
-                        >
-                          format_bold
-                        </span>
-                      </button>
-                      <button
-                        className="Button-button"
-                        disabled={false}
-                        onClick={[Function]}
-                        title="Italic"
-                        type="button"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="Icon-root Icon-md"
-                        >
-                          format_italic
-                        </span>
-                      </button>
-                      <button
-                        className="Button-button"
-                        disabled={false}
-                        onClick={[Function]}
-                        title="Blockquote"
-                        type="button"
-                      >
-                        <span
-                          aria-hidden="true"
-                          className="Icon-root Icon-md"
-                        >
-                          format_quote
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="Message-root Message-colorError Message-fullWidth"
-              >
-                <span
-                  aria-hidden="true"
-                  className="Icon-root MessageIcon-root Icon-sm"
-                >
-                  warning
-                </span>
-                Edit time has expired. You can no longer edit this comment. Why not post another one?
-              </div>
-              <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
               >
                 <button
-                  className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
-                  disabled={false}
-                  id="comments-editCommentForm-closeButton-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]}
@@ -3469,128 +780,90 @@ exports[`shows expiry message: edit time expired 1`] = `
                   onTouchEnd={[Function]}
                   type="button"
                 >
-                  Close
+                  <span>
+                    Reply
+                  </span>
                 </button>
-              </div>
-            </div>
-          </form>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
                 <div
-                  className="Comment-root"
-                  role="article"
+                  className="Popover-root"
                 >
+                  <button
+                    aria-controls="permalink-popover-comment-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Share
+                    </span>
+                  </button>
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
+                    aria-hidden={true}
+                    aria-labelledby="permalink-popover-comment-0-ariainfo"
+                    id="permalink-popover-comment-0"
+                    role="popup"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="AriaInfo-root"
+                      id="permalink-popover-comment-0-ariainfo"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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>
+                      A dialog showing a permalink to the comment
                     </div>
                   </div>
+                </div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Respect
+                  </span>
+                </button>
+              </div>
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+              >
+                <div
+                  className="Popover-root"
+                >
+                  <button
+                    aria-controls="report-popover-comment-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Report
+                    </span>
+                  </button>
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
+                    aria-hidden={true}
+                    aria-labelledby="report-popover-comment-0-ariainfo"
+                    id="report-popover-comment-0"
+                    role="popup"
                   >
                     <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="AriaInfo-root"
+                      id="report-popover-comment-0-ariainfo"
                     >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-1"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
+                      A dialog for reporting comments
                     </div>
                   </div>
                 </div>
@@ -3600,6 +873,328 @@ exports[`shows expiry message: edit time expired 1`] = `
         </div>
       </div>
     </div>
-  </section>
+  </div>
+</div>
+`;
+
+exports[`shows expiry message: edit form closed 1`] = `
+<div
+  data-testid="comment-comment-0"
+>
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
+  >
+    <div
+      className="Indent-root"
+    >
+      <div
+        className=""
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root 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"
+              >
+                Markus
+              </span>
+              <div
+                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+              >
+                <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>
+              <button
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                Edit
+              </button>
+            </div>
+          </div>
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+            >
+              <div
+                className="Flex-root 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]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Reply
+                  </span>
+                </button>
+                <div
+                  className="Popover-root"
+                >
+                  <button
+                    aria-controls="permalink-popover-comment-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Share
+                    </span>
+                  </button>
+                  <div
+                    aria-hidden={true}
+                    aria-labelledby="permalink-popover-comment-0-ariainfo"
+                    id="permalink-popover-comment-0"
+                    role="popup"
+                  >
+                    <div
+                      className="AriaInfo-root"
+                      id="permalink-popover-comment-0-ariainfo"
+                    >
+                      A dialog showing a permalink to the comment
+                    </div>
+                  </div>
+                </div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Respect
+                  </span>
+                </button>
+              </div>
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+              >
+                <div
+                  className="Popover-root"
+                >
+                  <button
+                    aria-controls="report-popover-comment-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Report
+                    </span>
+                  </button>
+                  <div
+                    aria-hidden={true}
+                    aria-labelledby="report-popover-comment-0-ariainfo"
+                    id="report-popover-comment-0"
+                    role="popup"
+                  >
+                    <div
+                      className="AriaInfo-root"
+                      id="report-popover-comment-0-ariainfo"
+                    >
+                      A dialog for reporting comments
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`shows expiry message: edit time expired 1`] = `
+<div
+  data-testid="comment-comment-0"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-full"
+    >
+      <div>
+        <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>
+        <label
+          className="AriaInfo-root"
+          htmlFor="comments-editCommentForm-rte-comment-0"
+        >
+          Edit comment
+        </label>
+        <div>
+          <div
+            className=""
+          >
+            <div
+              aria-placeholder="Edit comment"
+              className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+              contentEditable={false}
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+              disabled={true}
+              id="comments-editCommentForm-rte-comment-0"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onCut={[Function]}
+              onFocus={[Function]}
+              onInput={[Function]}
+              onKeyDown={[Function]}
+              onPaste={[Function]}
+              onSelect={[Function]}
+            />
+            <div
+              className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
+            >
+              <button
+                className="Button-button"
+                disabled={false}
+                onClick={[Function]}
+                title="Bold"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  className="Icon-root Icon-md"
+                >
+                  format_bold
+                </span>
+              </button>
+              <button
+                className="Button-button"
+                disabled={false}
+                onClick={[Function]}
+                title="Italic"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  className="Icon-root Icon-md"
+                >
+                  format_italic
+                </span>
+              </button>
+              <button
+                className="Button-button"
+                disabled={false}
+                onClick={[Function]}
+                title="Blockquote"
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  className="Icon-root Icon-md"
+                >
+                  format_quote
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="Message-root Message-colorError Message-fullWidth"
+      >
+        <span
+          aria-hidden="true"
+          className="Icon-root MessageIcon-root Icon-sm"
+        >
+          warning
+        </span>
+        Edit time has expired. You can no longer edit this comment. Why not post another one?
+      </div>
+      <div
+        className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+          disabled={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  </form>
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
index 9e20970c9..1448e36a7 100644
--- a/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap
@@ -1,239 +1,94 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`loads more comments 1`] = `
+exports[`renders comment stream with load more button 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  aria-live="polite"
+  className="HorizontalGutter-root HorizontalGutter-full"
+  data-testid="comments-stream-log"
+  id="talk-comments-stream-log"
+  role="log"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      data-testid="comment-comment-0"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-        >
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in
-          </button>
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Register
-          </button>
-        </div>
-        <div
-          className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+          className="Indent-root"
         >
           <div
-            aria-hidden="true"
+            className=""
           >
-            <div>
+            <div
+              className="Comment-root"
+              role="article"
+            >
               <div
-                className=""
+                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder "
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                 >
-                  Post a comment
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    Markus
+                  </span>
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                  >
+                    <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="HorizontalGutter-root HorizontalGutter-full"
+              >
                 <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                  contentEditable={false}
+                  className="HTMLContent-root"
                   dangerouslySetInnerHTML={
                     Object {
-                      "__html": "",
+                      "__html": "Joining Too",
                     }
                   }
-                  disabled={true}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
                 />
                 <div
-                  className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
-          >
-            Sign in and Join the Conversation
-          </button>
-        </div>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
+                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                   >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-0"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
+                      <span>
+                        Reply
                       </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
+                    </button>
                     <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Popover-root"
                     >
                       <button
+                        aria-controls="permalink-popover-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]}
@@ -243,302 +98,56 @@ exports[`loads more comments 1`] = `
                         type="button"
                       >
                         <span>
-                          Reply
+                          Share
                         </span>
                       </button>
                       <div
-                        className="Popover-root"
+                        aria-hidden={true}
+                        aria-labelledby="permalink-popover-comment-0-ariainfo"
+                        id="permalink-popover-comment-0"
+                        role="popup"
                       >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
                         <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
+                          className="AriaInfo-root"
+                          id="permalink-popover-comment-0-ariainfo"
                         >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
+                          A dialog showing a permalink to the comment
                         </div>
                       </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
                     </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
+                      <span>
+                        Respect
                       </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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>
                   </div>
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                   >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      disabled={false}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-2"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Isabelle
+                      <span>
+                        Report
                       </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Hey!",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-2"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-2-ariainfo"
-                          id="permalink-popover-comment-2"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-2-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -547,244 +156,88 @@ exports[`loads more comments 1`] = `
         </div>
       </div>
     </div>
-  </section>
-</div>
-`;
-
-exports[`renders comment stream 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  </div>
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      data-testid="comment-comment-1"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-        >
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in
-          </button>
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Register
-          </button>
-        </div>
-        <div
-          className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+          className="Indent-root"
         >
           <div
-            aria-hidden="true"
+            className=""
           >
-            <div>
+            <div
+              className="Comment-root"
+              role="article"
+            >
               <div
-                className=""
+                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder "
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                 >
-                  Post a comment
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    Lukas
+                  </span>
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                  >
+                    <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="HorizontalGutter-root HorizontalGutter-full"
+              >
                 <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                  contentEditable={false}
+                  className="HTMLContent-root"
                   dangerouslySetInnerHTML={
                     Object {
-                      "__html": "",
+                      "__html": "What's up?",
                     }
                   }
-                  disabled={true}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
                 />
                 <div
-                  className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
-          >
-            Sign in and Join the Conversation
-          </button>
-        </div>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
+                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                   >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
+                      <span>
+                        Reply
                       </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
+                    </button>
                     <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Popover-root"
                     >
                       <button
+                        aria-controls="permalink-popover-comment-1"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-0"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -794,202 +247,79 @@ exports[`renders comment stream 1`] = `
                         type="button"
                       >
                         <span>
-                          Reply
+                          Share
                         </span>
                       </button>
                       <div
-                        className="Popover-root"
+                        aria-hidden={true}
+                        aria-labelledby="permalink-popover-comment-1-ariainfo"
+                        id="permalink-popover-comment-1"
+                        role="popup"
                       >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
                         <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
+                          className="AriaInfo-root"
+                          id="permalink-popover-comment-1-ariainfo"
                         >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
+                          A dialog showing a permalink to the comment
                         </div>
                       </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
                     </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
+                      <span>
+                        Respect
                       </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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>
                   </div>
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                   >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      disabled={false}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
+                      <span>
+                        Report
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <button
-          aria-controls="talk-comments-stream-log"
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
-          disabled={false}
-          id="talk-comments-stream-loadMore"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Load More
-        </button>
       </div>
     </div>
-  </section>
+  </div>
+  <button
+    aria-controls="talk-comments-stream-log"
+    className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+    disabled={false}
+    id="talk-comments-stream-loadMore"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseOut={[Function]}
+    onMouseOver={[Function]}
+    onTouchEnd={[Function]}
+    type="button"
+  >
+    Load More
+  </button>
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
index fd7ec9a3c..b9d667520 100644
--- a/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap
@@ -1,133 +1,106 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+<section
+  aria-labelledby="tab-COMMENTS"
+  className="App-tabContent"
+  data-testid="current-tab-pane"
+  id="tabPane-COMMENTS"
+  role="tabpanel"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
+  <div
+    className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
   >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
+    <div
+      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
     >
       <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
+        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         onTouchEnd={[Function]}
-        role="tab"
         type="button"
       >
-        <span>
-          ⁨2⁩ Comments
-        </span>
+        Sign in
       </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
+      <button
+        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="button"
+      >
+        Register
+      </button>
+    </div>
     <div
-      className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
+      className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
+    >
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
+      >
+        You are currently viewing a
+      </p>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
+      >
+        SINGLE CONVERSATION
+      </p>
+      <a
+        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+        href="http://localhost/"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        target="_parent"
+        type="button"
+      >
+        View Full Discussion
+      </a>
+    </div>
+    <div
+      className="HorizontalGutter-root HorizontalGutter-full"
     >
       <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-      >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Sign in
-        </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
-      </div>
-      <div
-        className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
-      >
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
-        >
-          You are currently viewing a
-        </p>
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
-        >
-          SINGLE CONVERSATION
-        </p>
-        <a
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-          href="http://localhost/"
-          id="talk-comments-permalinkView-viewFullDiscussion"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          target="_parent"
-          type="button"
-        >
-          View Full Discussion
-        </a>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="ConversationThread-root"
+        data-testid="comments-permalinkView-conversationThread"
       >
         <div
-          className="ConversationThread-root"
+          className="Line-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
+        />
+        <div
+          className="Line-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Line-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
-          />
-          <div
-            className="Line-root HorizontalGutter-root HorizontalGutter-full"
+            className="Circle-circleContainer"
           >
             <div
-              className="Circle-circleContainer"
+              className="Circle-circleSubContainer"
             >
-              <div
-                className="Circle-circleSubContainer"
+              <svg
+                className="Circle-circle"
+                viewBox="0 0 100 100"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  className="Circle-circle"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    cx="50"
-                    cy="50"
-                    r="50"
-                  />
-                </svg>
-              </div>
+                <circle
+                  cx="50"
+                  cy="50"
+                  r="50"
+                />
+              </svg>
+            </div>
+            <div
+              data-testid="comment-comment-1"
+            >
               <div
                 className="HorizontalGutter-root HorizontalGutter-full"
               >
@@ -143,7 +116,6 @@ exports[`renders permalink view 1`] = `
                     >
                       <div
                         className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-1"
                       >
                         <div
                           className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -178,28 +150,59 @@ exports[`renders permalink view 1`] = `
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-1"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
                           <div
-                            className="Popover-root"
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                           >
                             <button
-                              aria-controls="permalink-popover-comment-1"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              id="comments-commentContainer-replyButton-comment-1"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Reply
+                              </span>
+                            </button>
+                            <div
+                              className="Popover-root"
+                            >
+                              <button
+                                aria-controls="permalink-popover-comment-1"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Share
+                                </span>
+                              </button>
+                              <div
+                                aria-hidden={true}
+                                aria-labelledby="permalink-popover-comment-1-ariainfo"
+                                id="permalink-popover-comment-1"
+                                role="popup"
+                              >
+                                <div
+                                  className="AriaInfo-root"
+                                  id="permalink-popover-comment-1-ariainfo"
+                                >
+                                  A dialog showing a permalink to the comment
+                                </div>
+                              </div>
+                            </div>
+                            <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -210,37 +213,29 @@ exports[`renders permalink view 1`] = `
                               type="button"
                             >
                               <span>
-                                Share
+                                Respect
                               </span>
                             </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-1-ariainfo"
-                              id="permalink-popover-comment-1"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-1-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
                           </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
+                          <div
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                           >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              disabled={false}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Report
+                              </span>
+                            </button>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -248,26 +243,30 @@ exports[`renders permalink view 1`] = `
                 </div>
               </div>
             </div>
+          </div>
+          <div
+            className="Circle-circleContainer"
+          >
             <div
-              className="Circle-circleContainer"
+              className="Circle-circleSubContainer"
             >
-              <div
-                className="Circle-circleSubContainer"
+              <svg
+                className="Circle-circle"
+                viewBox="0 0 100 100"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  className="Circle-circle"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    cx="50"
-                    cy="50"
-                    fill="none"
-                    r="40"
-                    strokeWidth="8"
-                  />
-                </svg>
-              </div>
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="40"
+                  strokeWidth="8"
+                />
+              </svg>
+            </div>
+            <div
+              data-testid="comment-comment-2"
+            >
               <div
                 className="HorizontalGutter-root HorizontalGutter-full"
               >
@@ -283,7 +282,6 @@ exports[`renders permalink view 1`] = `
                     >
                       <div
                         className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-2"
                       >
                         <div
                           className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -318,28 +316,59 @@ exports[`renders permalink view 1`] = `
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-2"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
                           <div
-                            className="Popover-root"
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                           >
                             <button
-                              aria-controls="permalink-popover-comment-2"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              id="comments-commentContainer-replyButton-comment-2"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Reply
+                              </span>
+                            </button>
+                            <div
+                              className="Popover-root"
+                            >
+                              <button
+                                aria-controls="permalink-popover-comment-2"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Share
+                                </span>
+                              </button>
+                              <div
+                                aria-hidden={true}
+                                aria-labelledby="permalink-popover-comment-2-ariainfo"
+                                id="permalink-popover-comment-2"
+                                role="popup"
+                              >
+                                <div
+                                  className="AriaInfo-root"
+                                  id="permalink-popover-comment-2-ariainfo"
+                                >
+                                  A dialog showing a permalink to the comment
+                                </div>
+                              </div>
+                            </div>
+                            <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -350,37 +379,29 @@ exports[`renders permalink view 1`] = `
                               type="button"
                             >
                               <span>
-                                Share
+                                Respect
                               </span>
                             </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-2-ariainfo"
-                              id="permalink-popover-comment-2"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-2-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
                           </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
+                          <div
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                           >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              disabled={false}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Report
+                              </span>
+                            </button>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -388,24 +409,28 @@ exports[`renders permalink view 1`] = `
                 </div>
               </div>
             </div>
+          </div>
+          <div
+            className="Circle-circleContainer"
+          >
             <div
-              className="Circle-circleContainer"
+              className="Circle-circleSubContainer Circle-end"
             >
-              <div
-                className="Circle-circleSubContainer Circle-end"
+              <svg
+                className="Circle-circle"
+                viewBox="0 0 100 100"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  className="Circle-circle"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    cx="50"
-                    cy="50"
-                    r="50"
-                  />
-                </svg>
-              </div>
+                <circle
+                  cx="50"
+                  cy="50"
+                  r="50"
+                />
+              </svg>
+            </div>
+            <div
+              data-testid="comment-comment-with-replies"
+            >
               <div
                 className="HorizontalGutter-root HorizontalGutter-full"
               >
@@ -421,7 +446,6 @@ exports[`renders permalink view 1`] = `
                     >
                       <div
                         className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-with-replies"
                       >
                         <div
                           className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -456,28 +480,59 @@ exports[`renders permalink view 1`] = `
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
-                          <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]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
                           <div
-                            className="Popover-root"
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                           >
                             <button
-                              aria-controls="permalink-popover-comment-with-replies"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              id="comments-commentContainer-replyButton-comment-with-replies"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Reply
+                              </span>
+                            </button>
+                            <div
+                              className="Popover-root"
+                            >
+                              <button
+                                aria-controls="permalink-popover-comment-with-replies"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Share
+                                </span>
+                              </button>
+                              <div
+                                aria-hidden={true}
+                                aria-labelledby="permalink-popover-comment-with-replies-ariainfo"
+                                id="permalink-popover-comment-with-replies"
+                                role="popup"
+                              >
+                                <div
+                                  className="AriaInfo-root"
+                                  id="permalink-popover-comment-with-replies-ariainfo"
+                                >
+                                  A dialog showing a permalink to the comment
+                                </div>
+                              </div>
+                            </div>
+                            <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -488,130 +543,16 @@ exports[`renders permalink view 1`] = `
                               type="button"
                             >
                               <span>
-                                Share
+                                Respect
                               </span>
                             </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-with-replies-ariainfo"
-                              id="permalink-popover-comment-with-replies"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-with-replies-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
                           </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="PermalinkView-replyList"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-with-replies"
-            role="log"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-3"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Isabelle
-                          </span>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Comment Body 3",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-3"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                           >
                             <button
-                              aria-controls="permalink-popover-comment-3"
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              disabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
                               onFocus={[Function]}
@@ -621,160 +562,10 @@ exports[`renders permalink view 1`] = `
                               type="button"
                             >
                               <span>
-                                Share
+                                Report
                               </span>
                             </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-3-ariainfo"
-                              id="permalink-popover-comment-3"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-3-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
                           </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-4"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Isabelle
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Comment Body 4",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-4"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-4"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-4-ariainfo"
-                              id="permalink-popover-comment-4"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-4-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
                         </div>
                       </div>
                     </div>
@@ -785,316 +576,20 @@ exports[`renders permalink view 1`] = `
           </div>
         </div>
       </div>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`show all comments 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-        >
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in
-          </button>
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Register
-          </button>
-        </div>
-        <div
-          className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
-        >
-          <div
-            aria-hidden="true"
-          >
-            <div>
-              <div
-                className=""
-              >
-                <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder "
-                >
-                  Post a comment
-                </div>
-                <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                  contentEditable={false}
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "",
-                    }
-                  }
-                  disabled={true}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
-                />
-                <div
-                  className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
-          >
-            Sign in and Join the Conversation
-          </button>
-        </div>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
+        className="PermalinkView-replyList"
       >
         <div
           className="HorizontalGutter-root HorizontalGutter-full"
+          data-testid="commentReplyList-comment-with-replies"
+          id="talk-comments-replyList-log--comment-with-replies"
+          role="log"
         >
           <div
             className="HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-with-replies"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "I like yoghurt",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-with-replies"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-with-replies-ariainfo"
-                          id="permalink-popover-comment-with-replies"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-with-replies-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-with-replies"
-            role="log"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
+              data-testid="comment-comment-3"
             >
               <div
                 className="HorizontalGutter-root HorizontalGutter-full"
@@ -1111,7 +606,6 @@ exports[`show all comments 1`] = `
                     >
                       <div
                         className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-3"
                       >
                         <div
                           className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1146,28 +640,59 @@ exports[`show all comments 1`] = `
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-3"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
                           <div
-                            className="Popover-root"
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                           >
                             <button
-                              aria-controls="permalink-popover-comment-3"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              id="comments-commentContainer-replyButton-comment-3"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Reply
+                              </span>
+                            </button>
+                            <div
+                              className="Popover-root"
+                            >
+                              <button
+                                aria-controls="permalink-popover-comment-3"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Share
+                                </span>
+                              </button>
+                              <div
+                                aria-hidden={true}
+                                aria-labelledby="permalink-popover-comment-3-ariainfo"
+                                id="permalink-popover-comment-3"
+                                role="popup"
+                              >
+                                <div
+                                  className="AriaInfo-root"
+                                  id="permalink-popover-comment-3-ariainfo"
+                                >
+                                  A dialog showing a permalink to the comment
+                                </div>
+                              </div>
+                            </div>
+                            <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -1178,37 +703,29 @@ exports[`show all comments 1`] = `
                               type="button"
                             >
                               <span>
-                                Share
+                                Respect
                               </span>
                             </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-3-ariainfo"
-                              id="permalink-popover-comment-3"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-3-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
                           </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
+                          <div
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                           >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              disabled={false}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Report
+                              </span>
+                            </button>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1216,8 +733,12 @@ exports[`show all comments 1`] = `
                 </div>
               </div>
             </div>
+          </div>
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+          >
             <div
-              className="HorizontalGutter-root HorizontalGutter-full"
+              data-testid="comment-comment-4"
             >
               <div
                 className="HorizontalGutter-root HorizontalGutter-full"
@@ -1234,7 +755,6 @@ exports[`show all comments 1`] = `
                     >
                       <div
                         className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-4"
                       >
                         <div
                           className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1269,28 +789,59 @@ exports[`show all comments 1`] = `
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-4"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
                           <div
-                            className="Popover-root"
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                           >
                             <button
-                              aria-controls="permalink-popover-comment-4"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              id="comments-commentContainer-replyButton-comment-4"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Reply
+                              </span>
+                            </button>
+                            <div
+                              className="Popover-root"
+                            >
+                              <button
+                                aria-controls="permalink-popover-comment-4"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Share
+                                </span>
+                              </button>
+                              <div
+                                aria-hidden={true}
+                                aria-labelledby="permalink-popover-comment-4-ariainfo"
+                                id="permalink-popover-comment-4"
+                                role="popup"
+                              >
+                                <div
+                                  className="AriaInfo-root"
+                                  id="permalink-popover-comment-4-ariainfo"
+                                >
+                                  A dialog showing a permalink to the comment
+                                </div>
+                              </div>
+                            </div>
+                            <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -1301,37 +852,29 @@ exports[`show all comments 1`] = `
                               type="button"
                             >
                               <span>
-                                Share
+                                Respect
                               </span>
                             </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-4-ariainfo"
-                              id="permalink-popover-comment-4"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-4-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
                           </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
+                          <div
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                           >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              disabled={false}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Report
+                              </span>
+                            </button>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1343,6 +886,6 @@ exports[`show all comments 1`] = `
         </div>
       </div>
     </div>
-  </section>
-</div>
+  </div>
+</section>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index 99b204934..80e5d1244 100644
--- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -1,414 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown comment 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+<section
+  aria-labelledby="tab-COMMENTS"
+  className="App-tabContent"
+  data-testid="current-tab-pane"
+  id="tabPane-COMMENTS"
+  role="tabpanel"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
+  <div
+    className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
   >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
+    <div
+      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
     >
       <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
+        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         onTouchEnd={[Function]}
-        role="tab"
         type="button"
       >
-        <span>
-          ⁨2⁩ Comments
-        </span>
+        Sign in
       </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
+      <button
+        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="button"
+      >
+        Register
+      </button>
+    </div>
     <div
-      className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
+      className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
     >
-      <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-      >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Sign in
-        </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
-      </div>
-      <div
-        className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
-      >
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
-        >
-          You are currently viewing a
-        </p>
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
-        >
-          SINGLE CONVERSATION
-        </p>
-        <a
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-          href="http://localhost/"
-          id="talk-comments-permalinkView-viewFullDiscussion"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          target="_parent"
-          type="button"
-        >
-          View Full Discussion
-        </a>
-      </div>
       <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
       >
-        Comment not found
+        You are currently viewing a
       </p>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`show all comments 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
+      >
+        SINGLE CONVERSATION
+      </p>
+      <a
+        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+        href="http://localhost/"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         onTouchEnd={[Function]}
-        role="tab"
+        target="_parent"
         type="button"
       >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-        >
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in
-          </button>
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Register
-          </button>
-        </div>
-        <div
-          className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
-        >
-          <div
-            aria-hidden="true"
-          >
-            <div>
-              <div
-                className=""
-              >
-                <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder "
-                >
-                  Post a comment
-                </div>
-                <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                  contentEditable={false}
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "",
-                    }
-                  }
-                  disabled={true}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
-                />
-                <div
-                  className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
-          >
-            Sign in and Join the Conversation
-          </button>
-        </div>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+        View Full Discussion
+      </a>
     </div>
-  </section>
-</div>
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
+  </div>
+</section>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
index d4d72ee7f..d63332eb1 100644
--- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
@@ -1,341 +1,264 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders permalink view 1`] = `
+exports[`renders conversation thread 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  className="ConversationThread-root"
+  data-testid="comments-permalinkView-conversationThread"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="Line-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
   >
     <div
-      className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
+      className="Circle-circleContainer"
     >
       <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+        className="Circle-circleSubContainer"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
+        <svg
+          className="Circle-circle"
+          viewBox="0 0 100 100"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          Sign in
-        </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
+          <circle
+            cx="50"
+            cy="50"
+            r="50"
+          />
+        </svg>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
-      >
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
-        >
-          You are currently viewing a
-        </p>
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
-        >
-          SINGLE CONVERSATION
-        </p>
-        <a
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-          href="http://localhost/"
-          id="talk-comments-permalinkView-viewFullDiscussion"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          target="_parent"
-          type="button"
-        >
-          View Full Discussion
-        </a>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+        id="comment-2"
       >
         <div
-          className="ConversationThread-root"
+          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+        >
+          <span
+            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+          >
+            Isabelle
+          </span>
+          <div
+            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+          >
+            <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>
+    <div
+      className="Circle-circleContainer ConversationThread-loadMore"
+    >
+      <div
+        className="Circle-circleSubContainer"
+      >
+        <svg
+          className="Circle-circle"
+          viewBox="0 0 100 100"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="50"
+            cy="50"
+            fill="none"
+            r="40"
+            strokeWidth="8"
+          />
+        </svg>
+      </div>
+      <div
+        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
+          disabled={false}
+          id="comments-conversationThread-showHiddenComments"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          SHOW HIDDEN COMMENTS
+        </button>
+        <span
+          className="Counter-root Counter-colorInherit"
+        >
+          <span
+            className="Counter-text"
+          >
+            2
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    className="Line-root HorizontalGutter-root HorizontalGutter-full"
+  >
+    <div
+      className="Circle-circleContainer"
+    >
+      <div
+        className="Circle-circleSubContainer Circle-end"
+      >
+        <svg
+          className="Circle-circle"
+          viewBox="0 0 100 100"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="50"
+            cy="50"
+            r="50"
+          />
+        </svg>
+      </div>
+      <div
+        data-testid="comment-comment-0"
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Line-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
+            className="Indent-root"
           >
             <div
-              className="Circle-circleContainer"
+              className=""
             >
               <div
-                className="Circle-circleSubContainer"
-              >
-                <svg
-                  className="Circle-circle"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    cx="50"
-                    cy="50"
-                    r="50"
-                  />
-                </svg>
-              </div>
-              <div
-                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                id="comment-2"
+                className="Comment-root Comment-highlight"
+                role="article"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                 >
-                  <span
-                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                  >
-                    Isabelle
-                  </span>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                   >
-                    <time
-                      className="Timestamp-root RelativeTime-root"
-                      dateTime="2018-07-06T18:24:00.000Z"
-                      title="2018-07-06T18:24:00.000Z"
+                    <span
+                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
-                      2018-07-06T18:24:00.000Z
-                    </time>
+                      Markus
+                    </span>
+                    <div
+                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    >
+                      <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>
-            </div>
-            <div
-              className="Circle-circleContainer ConversationThread-loadMore"
-            >
-              <div
-                className="Circle-circleSubContainer"
-              >
-                <svg
-                  className="Circle-circle"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    cx="50"
-                    cy="50"
-                    fill="none"
-                    r="40"
-                    strokeWidth="8"
-                  />
-                </svg>
-              </div>
-              <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
-              >
-                <button
-                  className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
-                  disabled={false}
-                  id="comments-conversationThread-showHiddenComments"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  SHOW HIDDEN COMMENTS
-                </button>
-                <span
-                  className="Counter-root Counter-colorInherit"
-                >
-                  <span
-                    className="Counter-text"
-                  >
-                    2
-                  </span>
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            className="Line-root HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Circle-circleContainer"
-            >
-              <div
-                className="Circle-circleSubContainer Circle-end"
-              >
-                <svg
-                  className="Circle-circle"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    cx="50"
-                    cy="50"
-                    r="50"
-                  />
-                </svg>
-              </div>
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
                 <div
-                  className="Indent-root"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                 >
                   <div
-                    className=""
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween"
                   >
                     <div
-                      className="Comment-root Comment-highlight"
-                      role="article"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-0"
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-0"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
                       >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <div
+                        className="Popover-root"
+                      >
+                        <button
+                          aria-controls="permalink-popover-comment-0"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
                         >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Markus
+                          <span>
+                            Share
                           </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
+                        </button>
                         <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Joining Too",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          aria-hidden={true}
+                          aria-labelledby="permalink-popover-comment-0-ariainfo"
+                          id="permalink-popover-comment-0"
+                          role="popup"
                         >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-0"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
                           <div
-                            className="Popover-root"
+                            className="AriaInfo-root"
+                            id="permalink-popover-comment-0-ariainfo"
                           >
-                            <button
-                              aria-controls="permalink-popover-comment-0"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-0-ariainfo"
-                              id="permalink-popover-comment-0"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-0-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
+                            A dialog showing a permalink to the comment
                           </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
                         </div>
                       </div>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    >
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        disabled={false}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Report
+                        </span>
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -343,536 +266,178 @@ exports[`renders permalink view 1`] = `
             </div>
           </div>
         </div>
-        <div
-          className="PermalinkView-replyList"
-        />
       </div>
     </div>
-  </section>
+  </div>
 </div>
 `;
 
-exports[`views pervious comments 1`] = `
+exports[`shows hidden comments 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  className="ConversationThread-root"
+  data-testid="comments-permalinkView-conversationThread"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="Line-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
+  />
+  <div
+    className="Line-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
+      className="Circle-circleContainer"
     >
       <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+        className="Circle-circleSubContainer"
       >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
+        <svg
+          className="Circle-circle"
+          viewBox="0 0 100 100"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          Sign in
-        </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
+          <circle
+            cx="50"
+            cy="50"
+            r="50"
+          />
+        </svg>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
-      >
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
-        >
-          You are currently viewing a
-        </p>
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
-        >
-          SINGLE CONVERSATION
-        </p>
-        <a
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-          href="http://localhost/"
-          id="talk-comments-permalinkView-viewFullDiscussion"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          target="_parent"
-          type="button"
-        >
-          View Full Discussion
-        </a>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        data-testid="comment-comment-1"
       >
         <div
-          className="ConversationThread-root"
+          className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="Line-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
-          />
-          <div
-            className="Line-root HorizontalGutter-root HorizontalGutter-full"
+            className="Indent-root"
           >
             <div
-              className="Circle-circleContainer"
+              className=""
             >
               <div
-                className="Circle-circleSubContainer"
-              >
-                <svg
-                  className="Circle-circle"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    cx="50"
-                    cy="50"
-                    r="50"
-                  />
-                </svg>
-              </div>
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Comment-root"
+                role="article"
               >
                 <div
-                  className="Indent-root"
+                  className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                 >
                   <div
-                    className=""
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                   >
-                    <div
-                      className="Comment-root"
-                      role="article"
+                    <span
+                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-1"
+                      Lukas
+                    </span>
+                    <div
+                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    >
+                      <time
+                        className="Timestamp-root RelativeTime-root"
+                        dateTime="2018-07-06T18:24:00.000Z"
+                        title="2018-07-06T18:24:00.000Z"
                       >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Lukas
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "What's up?",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root 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]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-1"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-1-ariainfo"
-                              id="permalink-popover-comment-1"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-1-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
+                        2018-07-06T18:24:00.000Z
+                      </time>
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            <div
-              className="Circle-circleContainer"
-            >
-              <div
-                className="Circle-circleSubContainer"
-              >
-                <svg
-                  className="Circle-circle"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    cx="50"
-                    cy="50"
-                    fill="none"
-                    r="40"
-                    strokeWidth="8"
-                  />
-                </svg>
-              </div>
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
                 <div
-                  className="Indent-root"
+                  className="HorizontalGutter-root HorizontalGutter-full"
                 >
                   <div
-                    className=""
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "What's up?",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween"
                   >
                     <div
-                      className="Comment-root"
-                      role="article"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-2"
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-1"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
                       >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <div
+                        className="Popover-root"
+                      >
+                        <button
+                          aria-controls="permalink-popover-comment-1"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
                         >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Isabelle
+                          <span>
+                            Share
                           </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
+                        </button>
                         <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Hey!",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          aria-hidden={true}
+                          aria-labelledby="permalink-popover-comment-1-ariainfo"
+                          id="permalink-popover-comment-1"
+                          role="popup"
                         >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-2"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
                           <div
-                            className="Popover-root"
+                            className="AriaInfo-root"
+                            id="permalink-popover-comment-1-ariainfo"
                           >
-                            <button
-                              aria-controls="permalink-popover-comment-2"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-2-ariainfo"
-                              id="permalink-popover-comment-2"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-2-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
+                            A dialog showing a permalink to the comment
                           </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
                         </div>
                       </div>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
                     </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Circle-circleContainer"
-            >
-              <div
-                className="Circle-circleSubContainer Circle-end"
-              >
-                <svg
-                  className="Circle-circle"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <circle
-                    cx="50"
-                    cy="50"
-                    r="50"
-                  />
-                </svg>
-              </div>
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className=""
-                  >
                     <div
-                      className="Comment-root Comment-highlight"
-                      role="article"
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-0"
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        disabled={false}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="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>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Joining Too",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root 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]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-0"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-0-ariainfo"
-                              id="permalink-popover-comment-0"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-0-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
+                        <span>
+                          Report
+                        </span>
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -880,11 +445,338 @@ exports[`views pervious comments 1`] = `
             </div>
           </div>
         </div>
-        <div
-          className="PermalinkView-replyList"
-        />
       </div>
     </div>
-  </section>
+    <div
+      className="Circle-circleContainer"
+    >
+      <div
+        className="Circle-circleSubContainer"
+      >
+        <svg
+          className="Circle-circle"
+          viewBox="0 0 100 100"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="50"
+            cy="50"
+            fill="none"
+            r="40"
+            strokeWidth="8"
+          />
+        </svg>
+      </div>
+      <div
+        data-testid="comment-comment-2"
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div
+            className="Indent-root"
+          >
+            <div
+              className=""
+            >
+              <div
+                className="Comment-root"
+                role="article"
+              >
+                <div
+                  className="Flex-root 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"
+                    >
+                      Isabelle
+                    </span>
+                    <div
+                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    >
+                      <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="HorizontalGutter-root HorizontalGutter-full"
+                >
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Hey!",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  >
+                    <div
+                      className="Flex-root 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]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <div
+                        className="Popover-root"
+                      >
+                        <button
+                          aria-controls="permalink-popover-comment-2"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Share
+                          </span>
+                        </button>
+                        <div
+                          aria-hidden={true}
+                          aria-labelledby="permalink-popover-comment-2-ariainfo"
+                          id="permalink-popover-comment-2"
+                          role="popup"
+                        >
+                          <div
+                            className="AriaInfo-root"
+                            id="permalink-popover-comment-2-ariainfo"
+                          >
+                            A dialog showing a permalink to the comment
+                          </div>
+                        </div>
+                      </div>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    >
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        disabled={false}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Report
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="Circle-circleContainer"
+    >
+      <div
+        className="Circle-circleSubContainer Circle-end"
+      >
+        <svg
+          className="Circle-circle"
+          viewBox="0 0 100 100"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="50"
+            cy="50"
+            r="50"
+          />
+        </svg>
+      </div>
+      <div
+        data-testid="comment-comment-0"
+      >
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+        >
+          <div
+            className="Indent-root"
+          >
+            <div
+              className=""
+            >
+              <div
+                className="Comment-root Comment-highlight"
+                role="article"
+              >
+                <div
+                  className="Flex-root 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"
+                    >
+                      Markus
+                    </span>
+                    <div
+                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    >
+                      <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="HorizontalGutter-root HorizontalGutter-full"
+                >
+                  <div
+                    className="HTMLContent-root"
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "Joining Too",
+                      }
+                    }
+                  />
+                  <div
+                    className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  >
+                    <div
+                      className="Flex-root 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]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                      <div
+                        className="Popover-root"
+                      >
+                        <button
+                          aria-controls="permalink-popover-comment-0"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Share
+                          </span>
+                        </button>
+                        <div
+                          aria-hidden={true}
+                          aria-labelledby="permalink-popover-comment-0-ariainfo"
+                          id="permalink-popover-comment-0"
+                          role="popup"
+                        >
+                          <div
+                            className="AriaInfo-root"
+                            id="permalink-popover-comment-0-ariainfo"
+                          >
+                            A dialog showing a permalink to the comment
+                          </div>
+                        </div>
+                      </div>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Respect
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    >
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        disabled={false}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Report
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/permalinkViewStoryNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/permalinkViewStoryNotFound.spec.tsx.snap
index bf33eab9f..eca7971c4 100644
--- a/src/core/client/stream/test/comments/__snapshots__/permalinkViewStoryNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/permalinkViewStoryNotFound.spec.tsx.snap
@@ -1,46 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown story 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+<section
+  aria-labelledby="tab-COMMENTS"
+  className="App-tabContent"
+  data-testid="current-tab-pane"
+  id="tabPane-COMMENTS"
+  role="tabpanel"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div>
-      Story not found
-    </div>
-  </section>
-</div>
+  <div>
+    Story not found
+  </div>
+</section>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
index f6469c57e..c8034b67b 100644
--- a/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap
@@ -2,96 +2,47 @@
 
 exports[`post a comment: optimistic response 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  data-testid="comment-uuid-0"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨3⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      className="IndentedComment-blur Indent-root"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className=""
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Signed in as 
               <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
               >
                 Markus
               </span>
-              .
+              <div
+                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+              >
+                <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="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
+            <div>
               <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -100,1130 +51,122 @@ exports[`post a comment: optimistic response 1`] = `
                 onTouchEnd={[Function]}
                 type="button"
               >
-                Sign Out
+                Edit
               </button>
             </div>
           </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
           <div
             className="HorizontalGutter-root HorizontalGutter-full"
           >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                    contentEditable={false}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<strong>Hello world!</strong>",
-                      }
-                    }
-                    disabled={true}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<strong>Hello world!</strong>",
+                }
+              }
+            />
+            <div
+              className="Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="PostCommentForm-poweredBy"
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
               >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  id="comments-commentContainer-replyButton-uuid-0"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
                 >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
+                  <span>
+                    Reply
                   </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="IndentedComment-blur Indent-root"
-            >
-              <div
-                className=""
-              >
+                </button>
                 <div
-                  className="Comment-root"
-                  role="article"
+                  className="Popover-root"
                 >
+                  <button
+                    aria-controls="permalink-popover-uuid-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Share
+                    </span>
+                  </button>
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-uuid-0"
+                    aria-hidden={true}
+                    aria-labelledby="permalink-popover-uuid-0-ariainfo"
+                    id="permalink-popover-uuid-0"
+                    role="popup"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="AriaInfo-root"
+                      id="permalink-popover-uuid-0-ariainfo"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                        id="comments-commentContainer-editButton-uuid-0"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        Edit
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "<strong>Hello world!</strong>",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-uuid-0"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-uuid-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-uuid-0-ariainfo"
-                          id="permalink-popover-uuid-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-uuid-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
+                      A dialog showing a permalink to the comment
                     </div>
                   </div>
                 </div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Respect
+                  </span>
+                </button>
               </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
               <div
-                className=""
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
               >
                 <div
-                  className="Comment-root"
-                  role="article"
+                  className="Popover-root"
                 >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`post a comment: server response 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨3⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root"
-        >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
-          >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
+                  <button
+                    aria-controls="report-popover-uuid-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                     disabled={false}
-                    id="comments-postCommentForm-field"
                     onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Report
+                    </span>
+                  </button>
                   <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-x"
+                    aria-hidden={true}
+                    aria-labelledby="report-popover-uuid-0-ariainfo"
+                    id="report-popover-uuid-0"
+                    role="popup"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="AriaInfo-root"
+                      id="report-popover-uuid-0-ariainfo"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "<strong>Hello world! (from server)</strong>",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-x"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-x-ariainfo"
-                          id="permalink-popover-comment-x"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-x-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
+                      A dialog for reporting comments
                     </div>
                   </div>
                 </div>
@@ -1233,497 +176,6 @@ exports[`post a comment: server response 1`] = `
         </div>
       </div>
     </div>
-  </section>
-</div>
-`;
-
-exports[`renders comment stream 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root"
-        >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
-          >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
+  </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
index 712998980..8b7101734 100644
--- a/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/postLocalReply.spec.tsx.snap
@@ -2,245 +2,694 @@
 
 exports[`post a reply: open reply form 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  data-testid="comment-comment-with-deepest-replies-5"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨1⁩ Comment
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      className="Indent-root"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className="Indent-level5"
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Signed in as 
               <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
               >
                 Markus
               </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
+              <div
+                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
               >
-                Sign Out
-              </button>
+                <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>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
           <div
             className="HorizontalGutter-root HorizontalGutter-full"
           >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "body 5",
+                }
+              }
+            />
+            <div
+              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+            >
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
               >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
+                  id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
                 >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
+                  <span>
+                    Reply
+                  </span>
+                </button>
+                <div
+                  className="Popover-root"
+                >
+                  <button
+                    aria-controls="permalink-popover-comment-with-deepest-replies-5"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                     onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
                   >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
+                    <span>
+                      Share
+                    </span>
+                  </button>
+                  <div
+                    aria-hidden={true}
+                    aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
+                    id="permalink-popover-comment-with-deepest-replies-5"
+                    role="popup"
+                  >
+                    <div
+                      className="AriaInfo-root"
+                      id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
                     >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
+                      A dialog showing a permalink to the comment
+                    </div>
+                  </div>
+                </div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Respect
+                  </span>
+                </button>
+              </div>
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+              >
+                <div
+                  className="Popover-root"
+                >
+                  <button
+                    aria-controls="report-popover-comment-with-deepest-replies-5"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    disabled={false}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Report
+                    </span>
+                  </button>
+                  <div
+                    aria-hidden={true}
+                    aria-labelledby="report-popover-comment-with-deepest-replies-5-ariainfo"
+                    id="report-popover-comment-with-deepest-replies-5"
+                    role="popup"
+                  >
+                    <div
+                      className="AriaInfo-root"
+                      id="report-popover-comment-with-deepest-replies-5-ariainfo"
                     >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
+                      A dialog for reporting comments
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
+            <a
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+              href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
+              id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              target="_parent"
+              type="button"
+            >
+              Read More of this Conversation &gt;
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <form
+      autoComplete="off"
+      id="comments-replyCommentForm-form-comment-with-deepest-replies-5"
+      onSubmit={[Function]}
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div>
+          <label
+            className="AriaInfo-root"
+            htmlFor="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
+          >
+            Write a reply
+          </label>
+          <div
+            className="Flex-root ReplyTo-root Flex-flex Flex-alignCenter"
+          >
+            <span
+              aria-hidden="true"
+              className="Icon-root Icon-sm"
+            >
+              reply
+            </span>
+            <span>
+               
+            </span>
+            <span
+              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ReplyTo-text"
+            >
+              Replying to: 
+              <span
+                className="Typography-root Typography-heading4 Typography-colorTextPrimary ReplyTo-username"
+              >
+                Markus
+              </span>
+            </span>
+          </div>
+          <div>
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+              className=""
             >
               <div
-                className="PostCommentForm-poweredBy"
+                aria-hidden="true"
+                className="RTE-placeholder RTE-placeholder"
               >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
+                Write a reply
               </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
+              <div
+                aria-placeholder="Write a reply"
+                className="RTE-contentEditable RTE-content"
+                contentEditable={true}
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "",
+                  }
+                }
+                disabled={false}
+                id="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
                 onBlur={[Function]}
+                onChange={[Function]}
+                onCut={[Function]}
                 onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
+                onInput={[Function]}
+                onKeyDown={[Function]}
+                onPaste={[Function]}
+                onSelect={[Function]}
+              />
+              <div
+                className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
               >
-                Submit
-              </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Bold"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_bold
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Italic"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_italic
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Blockquote"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_quote
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
-        </form>
+        </div>
+        <div
+          className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Cancel
+          </button>
+          <button
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="submit"
+          >
+            Submit
+          </button>
+        </div>
       </div>
+    </form>
+  </div>
+</div>
+`;
+
+exports[`post a reply: optimistic response 1`] = `
+<div
+  className="HorizontalGutter-root HorizontalGutter-full"
+  data-testid="commentReplyList-comment-with-deepest-replies-5"
+  id="talk-comments-replyList-log--comment-with-deepest-replies-5"
+  role="log"
+>
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
+  >
+    <div
+      data-testid="comment-uuid-0"
+    >
       <div
-        aria-live="polite"
         className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="IndentedComment-blur Indent-root"
+        >
+          <div
+            className="Indent-level6"
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root 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"
+                  >
+                    Markus
+                  </span>
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                  >
+                    <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>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    Edit
+                  </button>
+                </div>
+              </div>
+              <div
+                className="HorizontalGutter-root HorizontalGutter-full"
+              >
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<strong>Hello world!</strong>",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                >
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  >
+                    <div
+                      className="Popover-root"
+                    >
+                      <button
+                        aria-controls="permalink-popover-uuid-0"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Share
+                        </span>
+                      </button>
+                      <div
+                        aria-hidden={true}
+                        aria-labelledby="permalink-popover-uuid-0-ariainfo"
+                        id="permalink-popover-uuid-0"
+                        role="popup"
+                      >
+                        <div
+                          className="AriaInfo-root"
+                          id="permalink-popover-uuid-0-ariainfo"
+                        >
+                          A dialog showing a permalink to the comment
+                        </div>
+                      </div>
+                    </div>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  >
+                    <div
+                      className="Popover-root"
+                    >
+                      <button
+                        aria-controls="report-popover-uuid-0"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        disabled={false}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Report
+                        </span>
+                      </button>
+                      <div
+                        aria-hidden={true}
+                        aria-labelledby="report-popover-uuid-0-ariainfo"
+                        id="report-popover-uuid-0"
+                        role="popup"
+                      >
+                        <div
+                          className="AriaInfo-root"
+                          id="report-popover-uuid-0-ariainfo"
+                        >
+                          A dialog for reporting comments
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders comment stream 1`] = `
+<div
+  aria-live="polite"
+  className="HorizontalGutter-root HorizontalGutter-full"
+  data-testid="comments-stream-log"
+  id="talk-comments-stream-log"
+  role="log"
+>
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
+  >
+    <div
+      data-testid="comment-comment-with-deepest-replies"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className=""
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root 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"
+                  >
+                    Markus
+                  </span>
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                  >
+                    <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="HorizontalGutter-root HorizontalGutter-full"
+              >
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "body 0",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                >
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  >
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-with-deepest-replies"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                    <div
+                      className="Popover-root"
+                    >
+                      <button
+                        aria-controls="permalink-popover-comment-with-deepest-replies"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Share
+                        </span>
+                      </button>
+                      <div
+                        aria-hidden={true}
+                        aria-labelledby="permalink-popover-comment-with-deepest-replies-ariainfo"
+                        id="permalink-popover-comment-with-deepest-replies"
+                        role="popup"
+                      >
+                        <div
+                          className="AriaInfo-root"
+                          id="permalink-popover-comment-with-deepest-replies-ariainfo"
+                        >
+                          A dialog showing a permalink to the comment
+                        </div>
+                      </div>
+                    </div>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  >
+                    <div
+                      className="Popover-root"
+                    >
+                      <button
+                        aria-controls="report-popover-comment-with-deepest-replies"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        disabled={false}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Report
+                        </span>
+                      </button>
+                      <div
+                        aria-hidden={true}
+                        aria-labelledby="report-popover-comment-with-deepest-replies-ariainfo"
+                        id="report-popover-comment-with-deepest-replies"
+                        role="popup"
+                      >
+                        <div
+                          className="AriaInfo-root"
+                          id="report-popover-comment-with-deepest-replies-ariainfo"
+                        >
+                          A dialog for reporting comments
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="HorizontalGutter-root HorizontalGutter-full"
+      data-testid="commentReplyList-comment-with-deepest-replies"
+      id="talk-comments-replyList-log--comment-with-deepest-replies"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          data-testid="comment-comment-with-deepest-replies-1"
         >
           <div
             className="HorizontalGutter-root HorizontalGutter-full"
@@ -249,7 +698,7 @@ exports[`post a reply: open reply form 1`] = `
               className="Indent-root"
             >
               <div
-                className=""
+                className="Indent-level1"
               >
                 <div
                   className="Comment-root"
@@ -257,7 +706,6 @@ exports[`post a reply: open reply form 1`] = `
                 >
                   <div
                     className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-with-deepest-replies"
                   >
                     <div
                       className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -287,33 +735,64 @@ exports[`post a reply: open reply form 1`] = `
                       className="HTMLContent-root"
                       dangerouslySetInnerHTML={
                         Object {
-                          "__html": "body 0",
+                          "__html": "body 1",
                         }
                       }
                     />
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-justifySpaceBetween"
                     >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-with-deepest-replies"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
                       <div
-                        className="Popover-root"
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                       >
                         <button
-                          aria-controls="permalink-popover-comment-with-deepest-replies"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          id="comments-commentContainer-replyButton-comment-with-deepest-replies-1"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Reply
+                          </span>
+                        </button>
+                        <div
+                          className="Popover-root"
+                        >
+                          <button
+                            aria-controls="permalink-popover-comment-with-deepest-replies-1"
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Share
+                            </span>
+                          </button>
+                          <div
+                            aria-hidden={true}
+                            aria-labelledby="permalink-popover-comment-with-deepest-replies-1-ariainfo"
+                            id="permalink-popover-comment-with-deepest-replies-1"
+                            role="popup"
+                          >
+                            <div
+                              className="AriaInfo-root"
+                              id="permalink-popover-comment-with-deepest-replies-1-ariainfo"
+                            >
+                              A dialog showing a permalink to the comment
+                            </div>
+                          </div>
+                        </div>
+                        <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -324,50 +803,65 @@ exports[`post a reply: open reply form 1`] = `
                           type="button"
                         >
                           <span>
-                            Share
+                            Respect
                           </span>
                         </button>
+                      </div>
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      >
                         <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-with-deepest-replies-ariainfo"
-                          id="permalink-popover-comment-with-deepest-replies"
-                          role="popup"
+                          className="Popover-root"
                         >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-with-deepest-replies-ariainfo"
+                          <button
+                            aria-controls="report-popover-comment-with-deepest-replies-1"
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            disabled={false}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
                           >
-                            A dialog showing a permalink to the comment
+                            <span>
+                              Report
+                            </span>
+                          </button>
+                          <div
+                            aria-hidden={true}
+                            aria-labelledby="report-popover-comment-with-deepest-replies-1-ariainfo"
+                            id="report-popover-comment-with-deepest-replies-1"
+                            role="popup"
+                          >
+                            <div
+                              className="AriaInfo-root"
+                              id="report-popover-comment-with-deepest-replies-1-ariainfo"
+                            >
+                              A dialog for reporting comments
+                            </div>
                           </div>
                         </div>
                       </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
+        </div>
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+          data-testid="commentReplyList-comment-with-deepest-replies-1"
+          id="talk-comments-replyList-log--comment-with-deepest-replies-1"
+          role="log"
+        >
           <div
             className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-with-deepest-replies"
-            role="log"
           >
             <div
-              className="HorizontalGutter-root HorizontalGutter-full"
+              data-testid="comment-comment-with-deepest-replies-2"
             >
               <div
                 className="HorizontalGutter-root HorizontalGutter-full"
@@ -376,7 +870,7 @@ exports[`post a reply: open reply form 1`] = `
                   className="Indent-root"
                 >
                   <div
-                    className="Indent-level1"
+                    className="Indent-level2"
                   >
                     <div
                       className="Comment-root"
@@ -384,7 +878,6 @@ exports[`post a reply: open reply form 1`] = `
                     >
                       <div
                         className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-with-deepest-replies-1"
                       >
                         <div
                           className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -414,33 +907,64 @@ exports[`post a reply: open reply form 1`] = `
                           className="HTMLContent-root"
                           dangerouslySetInnerHTML={
                             Object {
-                              "__html": "body 1",
+                              "__html": "body 2",
                             }
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-with-deepest-replies-1"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
                           <div
-                            className="Popover-root"
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                           >
                             <button
-                              aria-controls="permalink-popover-comment-with-deepest-replies-1"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              id="comments-commentContainer-replyButton-comment-with-deepest-replies-2"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Reply
+                              </span>
+                            </button>
+                            <div
+                              className="Popover-root"
+                            >
+                              <button
+                                aria-controls="permalink-popover-comment-with-deepest-replies-2"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Share
+                                </span>
+                              </button>
+                              <div
+                                aria-hidden={true}
+                                aria-labelledby="permalink-popover-comment-with-deepest-replies-2-ariainfo"
+                                id="permalink-popover-comment-with-deepest-replies-2"
+                                role="popup"
+                              >
+                                <div
+                                  className="AriaInfo-root"
+                                  id="permalink-popover-comment-with-deepest-replies-2-ariainfo"
+                                >
+                                  A dialog showing a permalink to the comment
+                                </div>
+                              </div>
+                            </div>
+                            <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                               onBlur={[Function]}
                               onClick={[Function]}
@@ -451,50 +975,65 @@ exports[`post a reply: open reply form 1`] = `
                               type="button"
                             >
                               <span>
-                                Share
+                                Respect
                               </span>
                             </button>
+                          </div>
+                          <div
+                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          >
                             <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-with-deepest-replies-1-ariainfo"
-                              id="permalink-popover-comment-with-deepest-replies-1"
-                              role="popup"
+                              className="Popover-root"
                             >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-with-deepest-replies-1-ariainfo"
+                              <button
+                                aria-controls="report-popover-comment-with-deepest-replies-2"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                disabled={false}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
                               >
-                                A dialog showing a permalink to the comment
+                                <span>
+                                  Report
+                                </span>
+                              </button>
+                              <div
+                                aria-hidden={true}
+                                aria-labelledby="report-popover-comment-with-deepest-replies-2-ariainfo"
+                                id="report-popover-comment-with-deepest-replies-2"
+                                role="popup"
+                              >
+                                <div
+                                  className="AriaInfo-root"
+                                  id="report-popover-comment-with-deepest-replies-2-ariainfo"
+                                >
+                                  A dialog for reporting comments
+                                </div>
                               </div>
                             </div>
                           </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
+            </div>
+            <div
+              className="HorizontalGutter-root HorizontalGutter-full"
+              data-testid="commentReplyList-comment-with-deepest-replies-2"
+              id="talk-comments-replyList-log--comment-with-deepest-replies-2"
+              role="log"
+            >
               <div
                 className="HorizontalGutter-root HorizontalGutter-full"
-                id="talk-comments-replyList-log--comment-with-deepest-replies-1"
-                role="log"
               >
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
+                  data-testid="comment-comment-with-deepest-replies-3"
                 >
                   <div
                     className="HorizontalGutter-root HorizontalGutter-full"
@@ -503,7 +1042,7 @@ exports[`post a reply: open reply form 1`] = `
                       className="Indent-root"
                     >
                       <div
-                        className="Indent-level2"
+                        className="Indent-level3"
                       >
                         <div
                           className="Comment-root"
@@ -511,7 +1050,6 @@ exports[`post a reply: open reply form 1`] = `
                         >
                           <div
                             className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                            id="comment-comment-with-deepest-replies-2"
                           >
                             <div
                               className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -541,33 +1079,64 @@ exports[`post a reply: open reply form 1`] = `
                               className="HTMLContent-root"
                               dangerouslySetInnerHTML={
                                 Object {
-                                  "__html": "body 2",
+                                  "__html": "body 3",
                                 }
                               }
                             />
                             <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                              className="Flex-root Flex-flex Flex-justifySpaceBetween"
                             >
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                id="comments-commentContainer-replyButton-comment-with-deepest-replies-2"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Reply
-                                </span>
-                              </button>
                               <div
-                                className="Popover-root"
+                                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                               >
                                 <button
-                                  aria-controls="permalink-popover-comment-with-deepest-replies-2"
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Reply
+                                  </span>
+                                </button>
+                                <div
+                                  className="Popover-root"
+                                >
+                                  <button
+                                    aria-controls="permalink-popover-comment-with-deepest-replies-3"
+                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                    onTouchEnd={[Function]}
+                                    type="button"
+                                  >
+                                    <span>
+                                      Share
+                                    </span>
+                                  </button>
+                                  <div
+                                    aria-hidden={true}
+                                    aria-labelledby="permalink-popover-comment-with-deepest-replies-3-ariainfo"
+                                    id="permalink-popover-comment-with-deepest-replies-3"
+                                    role="popup"
+                                  >
+                                    <div
+                                      className="AriaInfo-root"
+                                      id="permalink-popover-comment-with-deepest-replies-3-ariainfo"
+                                    >
+                                      A dialog showing a permalink to the comment
+                                    </div>
+                                  </div>
+                                </div>
+                                <button
                                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                                   onBlur={[Function]}
                                   onClick={[Function]}
@@ -578,50 +1147,65 @@ exports[`post a reply: open reply form 1`] = `
                                   type="button"
                                 >
                                   <span>
-                                    Share
+                                    Respect
                                   </span>
                                 </button>
+                              </div>
+                              <div
+                                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                              >
                                 <div
-                                  aria-hidden={true}
-                                  aria-labelledby="permalink-popover-comment-with-deepest-replies-2-ariainfo"
-                                  id="permalink-popover-comment-with-deepest-replies-2"
-                                  role="popup"
+                                  className="Popover-root"
                                 >
-                                  <div
-                                    className="AriaInfo-root"
-                                    id="permalink-popover-comment-with-deepest-replies-2-ariainfo"
+                                  <button
+                                    aria-controls="report-popover-comment-with-deepest-replies-3"
+                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                    disabled={false}
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                    onTouchEnd={[Function]}
+                                    type="button"
                                   >
-                                    A dialog showing a permalink to the comment
+                                    <span>
+                                      Report
+                                    </span>
+                                  </button>
+                                  <div
+                                    aria-hidden={true}
+                                    aria-labelledby="report-popover-comment-with-deepest-replies-3-ariainfo"
+                                    id="report-popover-comment-with-deepest-replies-3"
+                                    role="popup"
+                                  >
+                                    <div
+                                      className="AriaInfo-root"
+                                      id="report-popover-comment-with-deepest-replies-3-ariainfo"
+                                    >
+                                      A dialog for reporting comments
+                                    </div>
                                   </div>
                                 </div>
                               </div>
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Respect
-                                </span>
-                              </button>
                             </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
+                </div>
+                <div
+                  className="HorizontalGutter-root HorizontalGutter-full"
+                  data-testid="commentReplyList-comment-with-deepest-replies-3"
+                  id="talk-comments-replyList-log--comment-with-deepest-replies-3"
+                  role="log"
+                >
                   <div
                     className="HorizontalGutter-root HorizontalGutter-full"
-                    id="talk-comments-replyList-log--comment-with-deepest-replies-2"
-                    role="log"
                   >
                     <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
+                      data-testid="comment-comment-with-deepest-replies-4"
                     >
                       <div
                         className="HorizontalGutter-root HorizontalGutter-full"
@@ -630,7 +1214,7 @@ exports[`post a reply: open reply form 1`] = `
                           className="Indent-root"
                         >
                           <div
-                            className="Indent-level3"
+                            className="Indent-level4"
                           >
                             <div
                               className="Comment-root"
@@ -638,7 +1222,6 @@ exports[`post a reply: open reply form 1`] = `
                             >
                               <div
                                 className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                id="comment-comment-with-deepest-replies-3"
                               >
                                 <div
                                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -668,33 +1251,64 @@ exports[`post a reply: open reply form 1`] = `
                                   className="HTMLContent-root"
                                   dangerouslySetInnerHTML={
                                     Object {
-                                      "__html": "body 3",
+                                      "__html": "body 4",
                                     }
                                   }
                                 />
                                 <div
-                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
                                 >
-                                  <button
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                    id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                    onTouchEnd={[Function]}
-                                    type="button"
-                                  >
-                                    <span>
-                                      Reply
-                                    </span>
-                                  </button>
                                   <div
-                                    className="Popover-root"
+                                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                                   >
                                     <button
-                                      aria-controls="permalink-popover-comment-with-deepest-replies-3"
+                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                      id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onMouseOut={[Function]}
+                                      onMouseOver={[Function]}
+                                      onTouchEnd={[Function]}
+                                      type="button"
+                                    >
+                                      <span>
+                                        Reply
+                                      </span>
+                                    </button>
+                                    <div
+                                      className="Popover-root"
+                                    >
+                                      <button
+                                        aria-controls="permalink-popover-comment-with-deepest-replies-4"
+                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onMouseOut={[Function]}
+                                        onMouseOver={[Function]}
+                                        onTouchEnd={[Function]}
+                                        type="button"
+                                      >
+                                        <span>
+                                          Share
+                                        </span>
+                                      </button>
+                                      <div
+                                        aria-hidden={true}
+                                        aria-labelledby="permalink-popover-comment-with-deepest-replies-4-ariainfo"
+                                        id="permalink-popover-comment-with-deepest-replies-4"
+                                        role="popup"
+                                      >
+                                        <div
+                                          className="AriaInfo-root"
+                                          id="permalink-popover-comment-with-deepest-replies-4-ariainfo"
+                                        >
+                                          A dialog showing a permalink to the comment
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <button
                                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                                       onBlur={[Function]}
                                       onClick={[Function]}
@@ -705,433 +1319,19 @@ exports[`post a reply: open reply form 1`] = `
                                       type="button"
                                     >
                                       <span>
-                                        Share
+                                        Respect
                                       </span>
                                     </button>
-                                    <div
-                                      aria-hidden={true}
-                                      aria-labelledby="permalink-popover-comment-with-deepest-replies-3-ariainfo"
-                                      id="permalink-popover-comment-with-deepest-replies-3"
-                                      role="popup"
-                                    >
-                                      <div
-                                        className="AriaInfo-root"
-                                        id="permalink-popover-comment-with-deepest-replies-3-ariainfo"
-                                      >
-                                        A dialog showing a permalink to the comment
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <button
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                    onTouchEnd={[Function]}
-                                    type="button"
-                                  >
-                                    <span>
-                                      Respect
-                                    </span>
-                                  </button>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
-                        id="talk-comments-replyList-log--comment-with-deepest-replies-3"
-                        role="log"
-                      >
-                        <div
-                          className="HorizontalGutter-root HorizontalGutter-full"
-                        >
-                          <div
-                            className="HorizontalGutter-root HorizontalGutter-full"
-                          >
-                            <div
-                              className="Indent-root"
-                            >
-                              <div
-                                className="Indent-level4"
-                              >
-                                <div
-                                  className="Comment-root"
-                                  role="article"
-                                >
-                                  <div
-                                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                    id="comment-comment-with-deepest-replies-4"
-                                  >
-                                    <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                    >
-                                      <span
-                                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                      >
-                                        Markus
-                                      </span>
-                                      <div
-                                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                      >
-                                        <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="HorizontalGutter-root HorizontalGutter-full"
+                                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                                   >
                                     <div
-                                      className="HTMLContent-root"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "body 4",
-                                        }
-                                      }
-                                    />
-                                    <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                      className="Popover-root"
                                     >
                                       <button
+                                        aria-controls="report-popover-comment-with-deepest-replies-4"
                                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                        id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="button"
-                                      >
-                                        <span>
-                                          Reply
-                                        </span>
-                                      </button>
-                                      <div
-                                        className="Popover-root"
-                                      >
-                                        <button
-                                          aria-controls="permalink-popover-comment-with-deepest-replies-4"
-                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                          onTouchEnd={[Function]}
-                                          type="button"
-                                        >
-                                          <span>
-                                            Share
-                                          </span>
-                                        </button>
-                                        <div
-                                          aria-hidden={true}
-                                          aria-labelledby="permalink-popover-comment-with-deepest-replies-4-ariainfo"
-                                          id="permalink-popover-comment-with-deepest-replies-4"
-                                          role="popup"
-                                        >
-                                          <div
-                                            className="AriaInfo-root"
-                                            id="permalink-popover-comment-with-deepest-replies-4-ariainfo"
-                                          >
-                                            A dialog showing a permalink to the comment
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="button"
-                                      >
-                                        <span>
-                                          Respect
-                                        </span>
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <div
-                            className="HorizontalGutter-root HorizontalGutter-full"
-                            id="talk-comments-replyList-log--comment-with-deepest-replies-4"
-                            role="log"
-                          >
-                            <div
-                              className="HorizontalGutter-root HorizontalGutter-full"
-                            >
-                              <div
-                                className="HorizontalGutter-root HorizontalGutter-full"
-                              >
-                                <div
-                                  className="Indent-root"
-                                >
-                                  <div
-                                    className="Indent-level5"
-                                  >
-                                    <div
-                                      className="Comment-root"
-                                      role="article"
-                                    >
-                                      <div
-                                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                        id="comment-comment-with-deepest-replies-5"
-                                      >
-                                        <div
-                                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                        >
-                                          <span
-                                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                          >
-                                            Markus
-                                          </span>
-                                          <div
-                                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                          >
-                                            <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="HorizontalGutter-root HorizontalGutter-full"
-                                      >
-                                        <div
-                                          className="HTMLContent-root"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "body 5",
-                                            }
-                                          }
-                                        />
-                                        <div
-                                          className="Flex-root 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-with-deepest-replies-5"
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                            onTouchEnd={[Function]}
-                                            type="button"
-                                          >
-                                            <span>
-                                              Reply
-                                            </span>
-                                          </button>
-                                          <div
-                                            className="Popover-root"
-                                          >
-                                            <button
-                                              aria-controls="permalink-popover-comment-with-deepest-replies-5"
-                                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseOut={[Function]}
-                                              onMouseOver={[Function]}
-                                              onTouchEnd={[Function]}
-                                              type="button"
-                                            >
-                                              <span>
-                                                Share
-                                              </span>
-                                            </button>
-                                            <div
-                                              aria-hidden={true}
-                                              aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                                              id="permalink-popover-comment-with-deepest-replies-5"
-                                              role="popup"
-                                            >
-                                              <div
-                                                className="AriaInfo-root"
-                                                id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                                              >
-                                                A dialog showing a permalink to the comment
-                                              </div>
-                                            </div>
-                                          </div>
-                                          <button
-                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                            onTouchEnd={[Function]}
-                                            type="button"
-                                          >
-                                            <span>
-                                              Respect
-                                            </span>
-                                          </button>
-                                        </div>
-                                        <a
-                                          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                                          href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
-                                          id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                          onTouchEnd={[Function]}
-                                          target="_parent"
-                                          type="button"
-                                        >
-                                          Read More of this Conversation &gt;
-                                        </a>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                                <form
-                                  autoComplete="off"
-                                  id="comments-replyCommentForm-form-comment-with-deepest-replies-5"
-                                  onSubmit={[Function]}
-                                >
-                                  <div
-                                    className="HorizontalGutter-root HorizontalGutter-full"
-                                  >
-                                    <div>
-                                      <label
-                                        className="AriaInfo-root"
-                                        htmlFor="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
-                                      >
-                                        Write a reply
-                                      </label>
-                                      <div
-                                        className="Flex-root ReplyTo-root Flex-flex Flex-alignCenter"
-                                      >
-                                        <span
-                                          aria-hidden="true"
-                                          className="Icon-root Icon-sm"
-                                        >
-                                          reply
-                                        </span>
-                                        <span>
-                                           
-                                        </span>
-                                        <span
-                                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ReplyTo-text"
-                                        >
-                                          Replying to: 
-                                          <span
-                                            className="Typography-root Typography-heading4 Typography-colorTextPrimary ReplyTo-username"
-                                          >
-                                            Markus
-                                          </span>
-                                        </span>
-                                      </div>
-                                      <div>
-                                        <div
-                                          className=""
-                                        >
-                                          <div
-                                            aria-hidden="true"
-                                            className="RTE-placeholder RTE-placeholder"
-                                          >
-                                            Write a reply
-                                          </div>
-                                          <div
-                                            aria-placeholder="Write a reply"
-                                            className="RTE-contentEditable RTE-content"
-                                            contentEditable={true}
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "",
-                                              }
-                                            }
-                                            disabled={false}
-                                            id="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onCut={[Function]}
-                                            onFocus={[Function]}
-                                            onInput={[Function]}
-                                            onKeyDown={[Function]}
-                                            onPaste={[Function]}
-                                            onSelect={[Function]}
-                                          />
-                                          <div
-                                            className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                                          >
-                                            <button
-                                              className="Button-button"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              title="Bold"
-                                              type="button"
-                                            >
-                                              <span
-                                                aria-hidden="true"
-                                                className="Icon-root Icon-md"
-                                              >
-                                                format_bold
-                                              </span>
-                                            </button>
-                                            <button
-                                              className="Button-button"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              title="Italic"
-                                              type="button"
-                                            >
-                                              <span
-                                                aria-hidden="true"
-                                                className="Icon-root Icon-md"
-                                              >
-                                                format_italic
-                                              </span>
-                                            </button>
-                                            <button
-                                              className="Button-button"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              title="Blockquote"
-                                              type="button"
-                                            >
-                                              <span
-                                                aria-hidden="true"
-                                                className="Icon-root Icon-md"
-                                              >
-                                                format_quote
-                                              </span>
-                                            </button>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                    <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
-                                    >
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
                                         disabled={false}
                                         onBlur={[Function]}
                                         onClick={[Function]}
@@ -1141,790 +1341,43 @@ exports[`post a reply: open reply form 1`] = `
                                         onTouchEnd={[Function]}
                                         type="button"
                                       >
-                                        Cancel
+                                        <span>
+                                          Report
+                                        </span>
                                       </button>
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                                        disabled={true}
-                                        onBlur={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="submit"
-                                      >
-                                        Submit
-                                      </button>
-                                    </div>
-                                  </div>
-                                </form>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`post a reply: optimistic response 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root"
-        >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
-          >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-with-deepest-replies"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "body 0",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-with-deepest-replies"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-with-deepest-replies"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-with-deepest-replies-ariainfo"
-                          id="permalink-popover-comment-with-deepest-replies"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-with-deepest-replies-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-with-deepest-replies"
-            role="log"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-with-deepest-replies-1"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Markus
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "body 1",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-with-deepest-replies-1"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-with-deepest-replies-1"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-with-deepest-replies-1-ariainfo"
-                              id="permalink-popover-comment-with-deepest-replies-1"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-with-deepest-replies-1-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-                id="talk-comments-replyList-log--comment-with-deepest-replies-1"
-                role="log"
-              >
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="Indent-root"
-                    >
-                      <div
-                        className="Indent-level2"
-                      >
-                        <div
-                          className="Comment-root"
-                          role="article"
-                        >
-                          <div
-                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                            id="comment-comment-with-deepest-replies-2"
-                          >
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                            >
-                              <span
-                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                              >
-                                Markus
-                              </span>
-                              <div
-                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                              >
-                                <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="HorizontalGutter-root HorizontalGutter-full"
-                          >
-                            <div
-                              className="HTMLContent-root"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "body 2",
-                                }
-                              }
-                            />
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                            >
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                id="comments-commentContainer-replyButton-comment-with-deepest-replies-2"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Reply
-                                </span>
-                              </button>
-                              <div
-                                className="Popover-root"
-                              >
-                                <button
-                                  aria-controls="permalink-popover-comment-with-deepest-replies-2"
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseOut={[Function]}
-                                  onMouseOver={[Function]}
-                                  onTouchEnd={[Function]}
-                                  type="button"
-                                >
-                                  <span>
-                                    Share
-                                  </span>
-                                </button>
-                                <div
-                                  aria-hidden={true}
-                                  aria-labelledby="permalink-popover-comment-with-deepest-replies-2-ariainfo"
-                                  id="permalink-popover-comment-with-deepest-replies-2"
-                                  role="popup"
-                                >
-                                  <div
-                                    className="AriaInfo-root"
-                                    id="permalink-popover-comment-with-deepest-replies-2-ariainfo"
-                                  >
-                                    A dialog showing a permalink to the comment
-                                  </div>
-                                </div>
-                              </div>
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Respect
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                    id="talk-comments-replyList-log--comment-with-deepest-replies-2"
-                    role="log"
-                  >
-                    <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
-                    >
-                      <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="Indent-root"
-                        >
-                          <div
-                            className="Indent-level3"
-                          >
-                            <div
-                              className="Comment-root"
-                              role="article"
-                            >
-                              <div
-                                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                id="comment-comment-with-deepest-replies-3"
-                              >
-                                <div
-                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                >
-                                  <span
-                                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                  >
-                                    Markus
-                                  </span>
-                                  <div
-                                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                  >
-                                    <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="HorizontalGutter-root HorizontalGutter-full"
-                              >
-                                <div
-                                  className="HTMLContent-root"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "body 3",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                >
-                                  <button
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                    id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                    onTouchEnd={[Function]}
-                                    type="button"
-                                  >
-                                    <span>
-                                      Reply
-                                    </span>
-                                  </button>
-                                  <div
-                                    className="Popover-root"
-                                  >
-                                    <button
-                                      aria-controls="permalink-popover-comment-with-deepest-replies-3"
-                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                      onBlur={[Function]}
-                                      onClick={[Function]}
-                                      onFocus={[Function]}
-                                      onMouseOut={[Function]}
-                                      onMouseOver={[Function]}
-                                      onTouchEnd={[Function]}
-                                      type="button"
-                                    >
-                                      <span>
-                                        Share
-                                      </span>
-                                    </button>
-                                    <div
-                                      aria-hidden={true}
-                                      aria-labelledby="permalink-popover-comment-with-deepest-replies-3-ariainfo"
-                                      id="permalink-popover-comment-with-deepest-replies-3"
-                                      role="popup"
-                                    >
                                       <div
-                                        className="AriaInfo-root"
-                                        id="permalink-popover-comment-with-deepest-replies-3-ariainfo"
+                                        aria-hidden={true}
+                                        aria-labelledby="report-popover-comment-with-deepest-replies-4-ariainfo"
+                                        id="report-popover-comment-with-deepest-replies-4"
+                                        role="popup"
                                       >
-                                        A dialog showing a permalink to the comment
+                                        <div
+                                          className="AriaInfo-root"
+                                          id="report-popover-comment-with-deepest-replies-4-ariainfo"
+                                        >
+                                          A dialog for reporting comments
+                                        </div>
                                       </div>
                                     </div>
                                   </div>
-                                  <button
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                    onTouchEnd={[Function]}
-                                    type="button"
-                                  >
-                                    <span>
-                                      Respect
-                                    </span>
-                                  </button>
                                 </div>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
+                    </div>
+                    <div
+                      className="HorizontalGutter-root HorizontalGutter-full"
+                      data-testid="commentReplyList-comment-with-deepest-replies-4"
+                      id="talk-comments-replyList-log--comment-with-deepest-replies-4"
+                      role="log"
+                    >
                       <div
                         className="HorizontalGutter-root HorizontalGutter-full"
-                        id="talk-comments-replyList-log--comment-with-deepest-replies-3"
-                        role="log"
                       >
                         <div
-                          className="HorizontalGutter-root HorizontalGutter-full"
+                          data-testid="comment-comment-with-deepest-replies-5"
                         >
                           <div
                             className="HorizontalGutter-root HorizontalGutter-full"
@@ -1933,7 +1386,7 @@ exports[`post a reply: optimistic response 1`] = `
                               className="Indent-root"
                             >
                               <div
-                                className="Indent-level4"
+                                className="Indent-level5"
                               >
                                 <div
                                   className="Comment-root"
@@ -1941,7 +1394,6 @@ exports[`post a reply: optimistic response 1`] = `
                                 >
                                   <div
                                     className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                    id="comment-comment-with-deepest-replies-4"
                                   >
                                     <div
                                       className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1971,34 +1423,19 @@ exports[`post a reply: optimistic response 1`] = `
                                       className="HTMLContent-root"
                                       dangerouslySetInnerHTML={
                                         Object {
-                                          "__html": "body 4",
+                                          "__html": "body 5",
                                         }
                                       }
                                     />
                                     <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                      className="Flex-root Flex-flex Flex-justifySpaceBetween"
                                     >
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                        id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="button"
-                                      >
-                                        <span>
-                                          Reply
-                                        </span>
-                                      </button>
                                       <div
-                                        className="Popover-root"
+                                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                                       >
                                         <button
-                                          aria-controls="permalink-popover-comment-with-deepest-replies-4"
                                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                          id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
                                           onBlur={[Function]}
                                           onClick={[Function]}
                                           onFocus={[Function]}
@@ -2008,151 +1445,14 @@ exports[`post a reply: optimistic response 1`] = `
                                           type="button"
                                         >
                                           <span>
-                                            Share
+                                            Reply
                                           </span>
                                         </button>
                                         <div
-                                          aria-hidden={true}
-                                          aria-labelledby="permalink-popover-comment-with-deepest-replies-4-ariainfo"
-                                          id="permalink-popover-comment-with-deepest-replies-4"
-                                          role="popup"
-                                        >
-                                          <div
-                                            className="AriaInfo-root"
-                                            id="permalink-popover-comment-with-deepest-replies-4-ariainfo"
-                                          >
-                                            A dialog showing a permalink to the comment
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="button"
-                                      >
-                                        <span>
-                                          Respect
-                                        </span>
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <div
-                            className="HorizontalGutter-root HorizontalGutter-full"
-                            id="talk-comments-replyList-log--comment-with-deepest-replies-4"
-                            role="log"
-                          >
-                            <div
-                              className="HorizontalGutter-root HorizontalGutter-full"
-                            >
-                              <div
-                                className="HorizontalGutter-root HorizontalGutter-full"
-                              >
-                                <div
-                                  className="Indent-root"
-                                >
-                                  <div
-                                    className="Indent-level5"
-                                  >
-                                    <div
-                                      className="Comment-root"
-                                      role="article"
-                                    >
-                                      <div
-                                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                        id="comment-comment-with-deepest-replies-5"
-                                      >
-                                        <div
-                                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                        >
-                                          <span
-                                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                          >
-                                            Markus
-                                          </span>
-                                          <div
-                                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                          >
-                                            <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="HorizontalGutter-root HorizontalGutter-full"
-                                      >
-                                        <div
-                                          className="HTMLContent-root"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "body 5",
-                                            }
-                                          }
-                                        />
-                                        <div
-                                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                          className="Popover-root"
                                         >
                                           <button
-                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
-                                            id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                            onTouchEnd={[Function]}
-                                            type="button"
-                                          >
-                                            <span>
-                                              Reply
-                                            </span>
-                                          </button>
-                                          <div
-                                            className="Popover-root"
-                                          >
-                                            <button
-                                              aria-controls="permalink-popover-comment-with-deepest-replies-5"
-                                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseOut={[Function]}
-                                              onMouseOver={[Function]}
-                                              onTouchEnd={[Function]}
-                                              type="button"
-                                            >
-                                              <span>
-                                                Share
-                                              </span>
-                                            </button>
-                                            <div
-                                              aria-hidden={true}
-                                              aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                                              id="permalink-popover-comment-with-deepest-replies-5"
-                                              role="popup"
-                                            >
-                                              <div
-                                                className="AriaInfo-root"
-                                                id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                                              >
-                                                A dialog showing a permalink to the comment
-                                              </div>
-                                            </div>
-                                          </div>
-                                          <button
+                                            aria-controls="permalink-popover-comment-with-deepest-replies-5"
                                             className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                                             onBlur={[Function]}
                                             onClick={[Function]}
@@ -2163,1440 +1463,91 @@ exports[`post a reply: optimistic response 1`] = `
                                             type="button"
                                           >
                                             <span>
-                                              Respect
+                                              Share
                                             </span>
                                           </button>
+                                          <div
+                                            aria-hidden={true}
+                                            aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
+                                            id="permalink-popover-comment-with-deepest-replies-5"
+                                            role="popup"
+                                          >
+                                            <div
+                                              className="AriaInfo-root"
+                                              id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
+                                            >
+                                              A dialog showing a permalink to the comment
+                                            </div>
+                                          </div>
                                         </div>
-                                        <a
-                                          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                                          href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
-                                          id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
+                                        <button
+                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                                           onBlur={[Function]}
                                           onClick={[Function]}
                                           onFocus={[Function]}
                                           onMouseOut={[Function]}
                                           onMouseOver={[Function]}
                                           onTouchEnd={[Function]}
-                                          target="_parent"
                                           type="button"
                                         >
-                                          Read More of this Conversation &gt;
-                                        </a>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                                <form
-                                  autoComplete="off"
-                                  id="comments-replyCommentForm-form-comment-with-deepest-replies-5"
-                                  onSubmit={[Function]}
-                                >
-                                  <div
-                                    className="HorizontalGutter-root HorizontalGutter-full"
-                                  >
-                                    <div>
-                                      <label
-                                        className="AriaInfo-root"
-                                        htmlFor="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
-                                      >
-                                        Write a reply
-                                      </label>
-                                      <div
-                                        className="Flex-root ReplyTo-root Flex-flex Flex-alignCenter"
-                                      >
-                                        <span
-                                          aria-hidden="true"
-                                          className="Icon-root Icon-sm"
-                                        >
-                                          reply
-                                        </span>
-                                        <span>
-                                           
-                                        </span>
-                                        <span
-                                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ReplyTo-text"
-                                        >
-                                          Replying to: 
-                                          <span
-                                            className="Typography-root Typography-heading4 Typography-colorTextPrimary ReplyTo-username"
-                                          >
-                                            Markus
+                                          <span>
+                                            Respect
                                           </span>
-                                        </span>
+                                        </button>
                                       </div>
-                                      <div>
-                                        <div
-                                          className=""
-                                        >
-                                          <div
-                                            aria-placeholder="Write a reply"
-                                            className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                                            contentEditable={false}
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<strong>Hello world!</strong>",
-                                              }
-                                            }
-                                            disabled={true}
-                                            id="comments-replyCommentForm-rte-comment-with-deepest-replies-5"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onCut={[Function]}
-                                            onFocus={[Function]}
-                                            onInput={[Function]}
-                                            onKeyDown={[Function]}
-                                            onPaste={[Function]}
-                                            onSelect={[Function]}
-                                          />
-                                          <div
-                                            className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
-                                          >
-                                            <button
-                                              className="Button-button"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              title="Bold"
-                                              type="button"
-                                            >
-                                              <span
-                                                aria-hidden="true"
-                                                className="Icon-root Icon-md"
-                                              >
-                                                format_bold
-                                              </span>
-                                            </button>
-                                            <button
-                                              className="Button-button"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              title="Italic"
-                                              type="button"
-                                            >
-                                              <span
-                                                aria-hidden="true"
-                                                className="Icon-root Icon-md"
-                                              >
-                                                format_italic
-                                              </span>
-                                            </button>
-                                            <button
-                                              className="Button-button"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              title="Blockquote"
-                                              type="button"
-                                            >
-                                              <span
-                                                aria-hidden="true"
-                                                className="Icon-root Icon-md"
-                                              >
-                                                format_quote
-                                              </span>
-                                            </button>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                    <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
-                                    >
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-disabled"
-                                        disabled={true}
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="button"
-                                      >
-                                        Cancel
-                                      </button>
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                                        disabled={true}
-                                        onBlur={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="submit"
-                                      >
-                                        Submit
-                                      </button>
-                                    </div>
-                                  </div>
-                                </form>
-                              </div>
-                              <div
-                                className="HorizontalGutter-root HorizontalGutter-full"
-                                id="talk-comments-replyList-log--comment-with-deepest-replies-5"
-                                role="log"
-                              >
-                                <div
-                                  className="HorizontalGutter-root HorizontalGutter-full"
-                                >
-                                  <div
-                                    className="HorizontalGutter-root HorizontalGutter-full"
-                                  >
-                                    <div
-                                      className="IndentedComment-blur Indent-root"
-                                    >
                                       <div
-                                        className="Indent-level6"
+                                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                                       >
                                         <div
-                                          className="Comment-root"
-                                          role="article"
+                                          className="Popover-root"
                                         >
+                                          <button
+                                            aria-controls="report-popover-comment-with-deepest-replies-5"
+                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                            disabled={false}
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                            onTouchEnd={[Function]}
+                                            type="button"
+                                          >
+                                            <span>
+                                              Report
+                                            </span>
+                                          </button>
                                           <div
-                                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                            id="comment-uuid-0"
+                                            aria-hidden={true}
+                                            aria-labelledby="report-popover-comment-with-deepest-replies-5-ariainfo"
+                                            id="report-popover-comment-with-deepest-replies-5"
+                                            role="popup"
                                           >
                                             <div
-                                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                                              className="AriaInfo-root"
+                                              id="report-popover-comment-with-deepest-replies-5-ariainfo"
                                             >
-                                              <span
-                                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                              >
-                                                Markus
-                                              </span>
-                                              <div
-                                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                              >
-                                                <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>
-                                              <button
-                                                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                                                id="comments-commentContainer-editButton-uuid-0"
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseOut={[Function]}
-                                                onMouseOver={[Function]}
-                                                onTouchEnd={[Function]}
-                                                type="button"
-                                              >
-                                                Edit
-                                              </button>
-                                            </div>
-                                          </div>
-                                          <div
-                                            className="HorizontalGutter-root HorizontalGutter-full"
-                                          >
-                                            <div
-                                              className="HTMLContent-root"
-                                              dangerouslySetInnerHTML={
-                                                Object {
-                                                  "__html": "<strong>Hello world!</strong>",
-                                                }
-                                              }
-                                            />
-                                            <div
-                                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                            >
-                                              <div
-                                                className="Popover-root"
-                                              >
-                                                <button
-                                                  aria-controls="permalink-popover-uuid-0"
-                                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseOut={[Function]}
-                                                  onMouseOver={[Function]}
-                                                  onTouchEnd={[Function]}
-                                                  type="button"
-                                                >
-                                                  <span>
-                                                    Share
-                                                  </span>
-                                                </button>
-                                                <div
-                                                  aria-hidden={true}
-                                                  aria-labelledby="permalink-popover-uuid-0-ariainfo"
-                                                  id="permalink-popover-uuid-0"
-                                                  role="popup"
-                                                >
-                                                  <div
-                                                    className="AriaInfo-root"
-                                                    id="permalink-popover-uuid-0-ariainfo"
-                                                  >
-                                                    A dialog showing a permalink to the comment
-                                                  </div>
-                                                </div>
-                                              </div>
-                                              <button
-                                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseOut={[Function]}
-                                                onMouseOver={[Function]}
-                                                onTouchEnd={[Function]}
-                                                type="button"
-                                              >
-                                                <span>
-                                                  Respect
-                                                </span>
-                                              </button>
+                                              A dialog for reporting comments
                                             </div>
                                           </div>
                                         </div>
                                       </div>
                                     </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`post a reply: server response 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root"
-        >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
-          >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-with-deepest-replies"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "body 0",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-with-deepest-replies"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-with-deepest-replies"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-with-deepest-replies-ariainfo"
-                          id="permalink-popover-comment-with-deepest-replies"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-with-deepest-replies-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-with-deepest-replies"
-            role="log"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-with-deepest-replies-1"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Markus
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "body 1",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-with-deepest-replies-1"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-with-deepest-replies-1"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-with-deepest-replies-1-ariainfo"
-                              id="permalink-popover-comment-with-deepest-replies-1"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-with-deepest-replies-1-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-                id="talk-comments-replyList-log--comment-with-deepest-replies-1"
-                role="log"
-              >
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="Indent-root"
-                    >
-                      <div
-                        className="Indent-level2"
-                      >
-                        <div
-                          className="Comment-root"
-                          role="article"
-                        >
-                          <div
-                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                            id="comment-comment-with-deepest-replies-2"
-                          >
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                            >
-                              <span
-                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                              >
-                                Markus
-                              </span>
-                              <div
-                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                              >
-                                <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="HorizontalGutter-root HorizontalGutter-full"
-                          >
-                            <div
-                              className="HTMLContent-root"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "body 2",
-                                }
-                              }
-                            />
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                            >
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                id="comments-commentContainer-replyButton-comment-with-deepest-replies-2"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Reply
-                                </span>
-                              </button>
-                              <div
-                                className="Popover-root"
-                              >
-                                <button
-                                  aria-controls="permalink-popover-comment-with-deepest-replies-2"
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseOut={[Function]}
-                                  onMouseOver={[Function]}
-                                  onTouchEnd={[Function]}
-                                  type="button"
-                                >
-                                  <span>
-                                    Share
-                                  </span>
-                                </button>
-                                <div
-                                  aria-hidden={true}
-                                  aria-labelledby="permalink-popover-comment-with-deepest-replies-2-ariainfo"
-                                  id="permalink-popover-comment-with-deepest-replies-2"
-                                  role="popup"
-                                >
-                                  <div
-                                    className="AriaInfo-root"
-                                    id="permalink-popover-comment-with-deepest-replies-2-ariainfo"
-                                  >
-                                    A dialog showing a permalink to the comment
-                                  </div>
-                                </div>
-                              </div>
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Respect
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                    id="talk-comments-replyList-log--comment-with-deepest-replies-2"
-                    role="log"
-                  >
-                    <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
-                    >
-                      <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="Indent-root"
-                        >
-                          <div
-                            className="Indent-level3"
-                          >
-                            <div
-                              className="Comment-root"
-                              role="article"
-                            >
-                              <div
-                                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                id="comment-comment-with-deepest-replies-3"
-                              >
-                                <div
-                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                >
-                                  <span
-                                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                  >
-                                    Markus
-                                  </span>
-                                  <div
-                                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                  >
-                                    <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="HorizontalGutter-root HorizontalGutter-full"
-                              >
-                                <div
-                                  className="HTMLContent-root"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "body 3",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                >
-                                  <button
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                    id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                    onTouchEnd={[Function]}
-                                    type="button"
-                                  >
-                                    <span>
-                                      Reply
-                                    </span>
-                                  </button>
-                                  <div
-                                    className="Popover-root"
-                                  >
-                                    <button
-                                      aria-controls="permalink-popover-comment-with-deepest-replies-3"
-                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                    <a
+                                      className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                                      href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
+                                      id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
                                       onBlur={[Function]}
                                       onClick={[Function]}
                                       onFocus={[Function]}
                                       onMouseOut={[Function]}
                                       onMouseOver={[Function]}
                                       onTouchEnd={[Function]}
+                                      target="_parent"
                                       type="button"
                                     >
-                                      <span>
-                                        Share
-                                      </span>
-                                    </button>
-                                    <div
-                                      aria-hidden={true}
-                                      aria-labelledby="permalink-popover-comment-with-deepest-replies-3-ariainfo"
-                                      id="permalink-popover-comment-with-deepest-replies-3"
-                                      role="popup"
-                                    >
-                                      <div
-                                        className="AriaInfo-root"
-                                        id="permalink-popover-comment-with-deepest-replies-3-ariainfo"
-                                      >
-                                        A dialog showing a permalink to the comment
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <button
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                    onTouchEnd={[Function]}
-                                    type="button"
-                                  >
-                                    <span>
-                                      Respect
-                                    </span>
-                                  </button>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
-                        id="talk-comments-replyList-log--comment-with-deepest-replies-3"
-                        role="log"
-                      >
-                        <div
-                          className="HorizontalGutter-root HorizontalGutter-full"
-                        >
-                          <div
-                            className="HorizontalGutter-root HorizontalGutter-full"
-                          >
-                            <div
-                              className="Indent-root"
-                            >
-                              <div
-                                className="Indent-level4"
-                              >
-                                <div
-                                  className="Comment-root"
-                                  role="article"
-                                >
-                                  <div
-                                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                    id="comment-comment-with-deepest-replies-4"
-                                  >
-                                    <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                    >
-                                      <span
-                                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                      >
-                                        Markus
-                                      </span>
-                                      <div
-                                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                      >
-                                        <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="HorizontalGutter-root HorizontalGutter-full"
-                                  >
-                                    <div
-                                      className="HTMLContent-root"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "body 4",
-                                        }
-                                      }
-                                    />
-                                    <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                    >
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                        id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="button"
-                                      >
-                                        <span>
-                                          Reply
-                                        </span>
-                                      </button>
-                                      <div
-                                        className="Popover-root"
-                                      >
-                                        <button
-                                          aria-controls="permalink-popover-comment-with-deepest-replies-4"
-                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                          onTouchEnd={[Function]}
-                                          type="button"
-                                        >
-                                          <span>
-                                            Share
-                                          </span>
-                                        </button>
-                                        <div
-                                          aria-hidden={true}
-                                          aria-labelledby="permalink-popover-comment-with-deepest-replies-4-ariainfo"
-                                          id="permalink-popover-comment-with-deepest-replies-4"
-                                          role="popup"
-                                        >
-                                          <div
-                                            className="AriaInfo-root"
-                                            id="permalink-popover-comment-with-deepest-replies-4-ariainfo"
-                                          >
-                                            A dialog showing a permalink to the comment
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="button"
-                                      >
-                                        <span>
-                                          Respect
-                                        </span>
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <div
-                            className="HorizontalGutter-root HorizontalGutter-full"
-                            id="talk-comments-replyList-log--comment-with-deepest-replies-4"
-                            role="log"
-                          >
-                            <div
-                              className="HorizontalGutter-root HorizontalGutter-full"
-                            >
-                              <div
-                                className="HorizontalGutter-root HorizontalGutter-full"
-                              >
-                                <div
-                                  className="Indent-root"
-                                >
-                                  <div
-                                    className="Indent-level5"
-                                  >
-                                    <div
-                                      className="Comment-root"
-                                      role="article"
-                                    >
-                                      <div
-                                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                        id="comment-comment-with-deepest-replies-5"
-                                      >
-                                        <div
-                                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                        >
-                                          <span
-                                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                          >
-                                            Markus
-                                          </span>
-                                          <div
-                                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                          >
-                                            <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="HorizontalGutter-root HorizontalGutter-full"
-                                      >
-                                        <div
-                                          className="HTMLContent-root"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "body 5",
-                                            }
-                                          }
-                                        />
-                                        <div
-                                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                        >
-                                          <button
-                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                            id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                            onTouchEnd={[Function]}
-                                            type="button"
-                                          >
-                                            <span>
-                                              Reply
-                                            </span>
-                                          </button>
-                                          <div
-                                            className="Popover-root"
-                                          >
-                                            <button
-                                              aria-controls="permalink-popover-comment-with-deepest-replies-5"
-                                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseOut={[Function]}
-                                              onMouseOver={[Function]}
-                                              onTouchEnd={[Function]}
-                                              type="button"
-                                            >
-                                              <span>
-                                                Share
-                                              </span>
-                                            </button>
-                                            <div
-                                              aria-hidden={true}
-                                              aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                                              id="permalink-popover-comment-with-deepest-replies-5"
-                                              role="popup"
-                                            >
-                                              <div
-                                                className="AriaInfo-root"
-                                                id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                                              >
-                                                A dialog showing a permalink to the comment
-                                              </div>
-                                            </div>
-                                          </div>
-                                          <button
-                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                            onTouchEnd={[Function]}
-                                            type="button"
-                                          >
-                                            <span>
-                                              Respect
-                                            </span>
-                                          </button>
-                                        </div>
-                                        <a
-                                          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                                          href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
-                                          id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                          onTouchEnd={[Function]}
-                                          target="_parent"
-                                          type="button"
-                                        >
-                                          Read More of this Conversation &gt;
-                                        </a>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                className="HorizontalGutter-root HorizontalGutter-full"
-                                id="talk-comments-replyList-log--comment-with-deepest-replies-5"
-                                role="log"
-                              >
-                                <div
-                                  className="HorizontalGutter-root HorizontalGutter-full"
-                                >
-                                  <div
-                                    className="HorizontalGutter-root HorizontalGutter-full"
-                                  >
-                                    <div
-                                      className="Indent-root"
-                                    >
-                                      <div
-                                        className="Indent-level6"
-                                      >
-                                        <div
-                                          className="Comment-root"
-                                          role="article"
-                                        >
-                                          <div
-                                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                            id="comment-comment-x"
-                                          >
-                                            <div
-                                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                            >
-                                              <span
-                                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                              >
-                                                Markus
-                                              </span>
-                                              <div
-                                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                              >
-                                                <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="HorizontalGutter-root HorizontalGutter-full"
-                                          >
-                                            <div
-                                              className="HTMLContent-root"
-                                              dangerouslySetInnerHTML={
-                                                Object {
-                                                  "__html": "<strong>Hello world! (from server)</strong>",
-                                                }
-                                              }
-                                            />
-                                            <div
-                                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                            >
-                                              <div
-                                                className="Popover-root"
-                                              >
-                                                <button
-                                                  aria-controls="permalink-popover-comment-x"
-                                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseOut={[Function]}
-                                                  onMouseOver={[Function]}
-                                                  onTouchEnd={[Function]}
-                                                  type="button"
-                                                >
-                                                  <span>
-                                                    Share
-                                                  </span>
-                                                </button>
-                                                <div
-                                                  aria-hidden={true}
-                                                  aria-labelledby="permalink-popover-comment-x-ariainfo"
-                                                  id="permalink-popover-comment-x"
-                                                  role="popup"
-                                                >
-                                                  <div
-                                                    className="AriaInfo-root"
-                                                    id="permalink-popover-comment-x-ariainfo"
-                                                  >
-                                                    A dialog showing a permalink to the comment
-                                                  </div>
-                                                </div>
-                                              </div>
-                                              <button
-                                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseOut={[Function]}
-                                                onMouseOver={[Function]}
-                                                onTouchEnd={[Function]}
-                                                type="button"
-                                              >
-                                                <span>
-                                                  Respect
-                                                </span>
-                                              </button>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
+                                      Read More of this Conversation &gt;
+                                    </a>
                                   </div>
                                 </div>
                               </div>
@@ -3613,1034 +1564,6 @@ exports[`post a reply: server response 1`] = `
         </div>
       </div>
     </div>
-  </section>
-</div>
-`;
-
-exports[`renders comment stream 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨1⁩ Comment
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root"
-        >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
-          >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-with-deepest-replies"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "body 0",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-with-deepest-replies"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-with-deepest-replies"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-with-deepest-replies-ariainfo"
-                          id="permalink-popover-comment-with-deepest-replies"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-with-deepest-replies-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-with-deepest-replies"
-            role="log"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-with-deepest-replies-1"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Markus
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "body 1",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-with-deepest-replies-1"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-with-deepest-replies-1"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-with-deepest-replies-1-ariainfo"
-                              id="permalink-popover-comment-with-deepest-replies-1"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-with-deepest-replies-1-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-                id="talk-comments-replyList-log--comment-with-deepest-replies-1"
-                role="log"
-              >
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="Indent-root"
-                    >
-                      <div
-                        className="Indent-level2"
-                      >
-                        <div
-                          className="Comment-root"
-                          role="article"
-                        >
-                          <div
-                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                            id="comment-comment-with-deepest-replies-2"
-                          >
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                            >
-                              <span
-                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                              >
-                                Markus
-                              </span>
-                              <div
-                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                              >
-                                <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="HorizontalGutter-root HorizontalGutter-full"
-                          >
-                            <div
-                              className="HTMLContent-root"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "body 2",
-                                }
-                              }
-                            />
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                            >
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                id="comments-commentContainer-replyButton-comment-with-deepest-replies-2"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Reply
-                                </span>
-                              </button>
-                              <div
-                                className="Popover-root"
-                              >
-                                <button
-                                  aria-controls="permalink-popover-comment-with-deepest-replies-2"
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseOut={[Function]}
-                                  onMouseOver={[Function]}
-                                  onTouchEnd={[Function]}
-                                  type="button"
-                                >
-                                  <span>
-                                    Share
-                                  </span>
-                                </button>
-                                <div
-                                  aria-hidden={true}
-                                  aria-labelledby="permalink-popover-comment-with-deepest-replies-2-ariainfo"
-                                  id="permalink-popover-comment-with-deepest-replies-2"
-                                  role="popup"
-                                >
-                                  <div
-                                    className="AriaInfo-root"
-                                    id="permalink-popover-comment-with-deepest-replies-2-ariainfo"
-                                  >
-                                    A dialog showing a permalink to the comment
-                                  </div>
-                                </div>
-                              </div>
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Respect
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                    id="talk-comments-replyList-log--comment-with-deepest-replies-2"
-                    role="log"
-                  >
-                    <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
-                    >
-                      <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="Indent-root"
-                        >
-                          <div
-                            className="Indent-level3"
-                          >
-                            <div
-                              className="Comment-root"
-                              role="article"
-                            >
-                              <div
-                                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                id="comment-comment-with-deepest-replies-3"
-                              >
-                                <div
-                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                >
-                                  <span
-                                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                  >
-                                    Markus
-                                  </span>
-                                  <div
-                                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                  >
-                                    <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="HorizontalGutter-root HorizontalGutter-full"
-                              >
-                                <div
-                                  className="HTMLContent-root"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "body 3",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                >
-                                  <button
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                    id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                    onTouchEnd={[Function]}
-                                    type="button"
-                                  >
-                                    <span>
-                                      Reply
-                                    </span>
-                                  </button>
-                                  <div
-                                    className="Popover-root"
-                                  >
-                                    <button
-                                      aria-controls="permalink-popover-comment-with-deepest-replies-3"
-                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                      onBlur={[Function]}
-                                      onClick={[Function]}
-                                      onFocus={[Function]}
-                                      onMouseOut={[Function]}
-                                      onMouseOver={[Function]}
-                                      onTouchEnd={[Function]}
-                                      type="button"
-                                    >
-                                      <span>
-                                        Share
-                                      </span>
-                                    </button>
-                                    <div
-                                      aria-hidden={true}
-                                      aria-labelledby="permalink-popover-comment-with-deepest-replies-3-ariainfo"
-                                      id="permalink-popover-comment-with-deepest-replies-3"
-                                      role="popup"
-                                    >
-                                      <div
-                                        className="AriaInfo-root"
-                                        id="permalink-popover-comment-with-deepest-replies-3-ariainfo"
-                                      >
-                                        A dialog showing a permalink to the comment
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <button
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                    onTouchEnd={[Function]}
-                                    type="button"
-                                  >
-                                    <span>
-                                      Respect
-                                    </span>
-                                  </button>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
-                        id="talk-comments-replyList-log--comment-with-deepest-replies-3"
-                        role="log"
-                      >
-                        <div
-                          className="HorizontalGutter-root HorizontalGutter-full"
-                        >
-                          <div
-                            className="HorizontalGutter-root HorizontalGutter-full"
-                          >
-                            <div
-                              className="Indent-root"
-                            >
-                              <div
-                                className="Indent-level4"
-                              >
-                                <div
-                                  className="Comment-root"
-                                  role="article"
-                                >
-                                  <div
-                                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                    id="comment-comment-with-deepest-replies-4"
-                                  >
-                                    <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                    >
-                                      <span
-                                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                      >
-                                        Markus
-                                      </span>
-                                      <div
-                                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                      >
-                                        <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="HorizontalGutter-root HorizontalGutter-full"
-                                  >
-                                    <div
-                                      className="HTMLContent-root"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "body 4",
-                                        }
-                                      }
-                                    />
-                                    <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                    >
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                        id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="button"
-                                      >
-                                        <span>
-                                          Reply
-                                        </span>
-                                      </button>
-                                      <div
-                                        className="Popover-root"
-                                      >
-                                        <button
-                                          aria-controls="permalink-popover-comment-with-deepest-replies-4"
-                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                          onTouchEnd={[Function]}
-                                          type="button"
-                                        >
-                                          <span>
-                                            Share
-                                          </span>
-                                        </button>
-                                        <div
-                                          aria-hidden={true}
-                                          aria-labelledby="permalink-popover-comment-with-deepest-replies-4-ariainfo"
-                                          id="permalink-popover-comment-with-deepest-replies-4"
-                                          role="popup"
-                                        >
-                                          <div
-                                            className="AriaInfo-root"
-                                            id="permalink-popover-comment-with-deepest-replies-4-ariainfo"
-                                          >
-                                            A dialog showing a permalink to the comment
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="button"
-                                      >
-                                        <span>
-                                          Respect
-                                        </span>
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <div
-                            className="HorizontalGutter-root HorizontalGutter-full"
-                            id="talk-comments-replyList-log--comment-with-deepest-replies-4"
-                            role="log"
-                          >
-                            <div
-                              className="HorizontalGutter-root HorizontalGutter-full"
-                            >
-                              <div
-                                className="HorizontalGutter-root HorizontalGutter-full"
-                              >
-                                <div
-                                  className="Indent-root"
-                                >
-                                  <div
-                                    className="Indent-level5"
-                                  >
-                                    <div
-                                      className="Comment-root"
-                                      role="article"
-                                    >
-                                      <div
-                                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                        id="comment-comment-with-deepest-replies-5"
-                                      >
-                                        <div
-                                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                        >
-                                          <span
-                                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                          >
-                                            Markus
-                                          </span>
-                                          <div
-                                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                          >
-                                            <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="HorizontalGutter-root HorizontalGutter-full"
-                                      >
-                                        <div
-                                          className="HTMLContent-root"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "body 5",
-                                            }
-                                          }
-                                        />
-                                        <div
-                                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                        >
-                                          <button
-                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                            id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                            onTouchEnd={[Function]}
-                                            type="button"
-                                          >
-                                            <span>
-                                              Reply
-                                            </span>
-                                          </button>
-                                          <div
-                                            className="Popover-root"
-                                          >
-                                            <button
-                                              aria-controls="permalink-popover-comment-with-deepest-replies-5"
-                                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseOut={[Function]}
-                                              onMouseOver={[Function]}
-                                              onTouchEnd={[Function]}
-                                              type="button"
-                                            >
-                                              <span>
-                                                Share
-                                              </span>
-                                            </button>
-                                            <div
-                                              aria-hidden={true}
-                                              aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                                              id="permalink-popover-comment-with-deepest-replies-5"
-                                              role="popup"
-                                            >
-                                              <div
-                                                className="AriaInfo-root"
-                                                id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                                              >
-                                                A dialog showing a permalink to the comment
-                                              </div>
-                                            </div>
-                                          </div>
-                                          <button
-                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                            onTouchEnd={[Function]}
-                                            type="button"
-                                          >
-                                            <span>
-                                              Respect
-                                            </span>
-                                          </button>
-                                        </div>
-                                        <a
-                                          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                                          href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
-                                          id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                          onTouchEnd={[Function]}
-                                          target="_parent"
-                                          type="button"
-                                        >
-                                          Read More of this Conversation &gt;
-                                        </a>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
+  </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
index 85b887323..fbbfdb42d 100644
--- a/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap
@@ -2,486 +2,133 @@
 
 exports[`post a reply: open reply form 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  data-testid="comment-comment-0"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      className="Indent-root"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className=""
       >
         <div
-          className="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
             >
-              Signed in as 
               <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
               >
                 Markus
               </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
+              <div
+                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
               >
-                Sign Out
-              </button>
+                <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>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
           <div
             className="HorizontalGutter-root HorizontalGutter-full"
           >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="PostCommentForm-poweredBy"
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
               >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
+                <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]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
                 >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
+                  <span>
+                    Reply
                   </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
+                </button>
                 <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <form
-              autoComplete="off"
-              id="comments-replyCommentForm-form-comment-0"
-              onSubmit={[Function]}
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div>
-                  <label
-                    className="AriaInfo-root"
-                    htmlFor="comments-replyCommentForm-rte-comment-0"
-                  >
-                    Write a reply
-                  </label>
-                  <div
-                    className="Flex-root ReplyTo-root Flex-flex Flex-alignCenter"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-sm"
-                    >
-                      reply
-                    </span>
-                    <span>
-                       
-                    </span>
-                    <span
-                      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ReplyTo-text"
-                    >
-                      Replying to: 
-                      <span
-                        className="Typography-root Typography-heading4 Typography-colorTextPrimary ReplyTo-username"
-                      >
-                        Markus
-                      </span>
-                    </span>
-                  </div>
-                  <div>
-                    <div
-                      className=""
-                    >
-                      <div
-                        aria-hidden="true"
-                        className="RTE-placeholder RTE-placeholder"
-                      >
-                        Write a reply
-                      </div>
-                      <div
-                        aria-placeholder="Write a reply"
-                        className="RTE-contentEditable RTE-content"
-                        contentEditable={true}
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "",
-                          }
-                        }
-                        disabled={false}
-                        id="comments-replyCommentForm-rte-comment-0"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onCut={[Function]}
-                        onFocus={[Function]}
-                        onInput={[Function]}
-                        onKeyDown={[Function]}
-                        onPaste={[Function]}
-                        onSelect={[Function]}
-                      />
-                      <div
-                        className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                      >
-                        <button
-                          className="Button-button"
-                          disabled={false}
-                          onClick={[Function]}
-                          title="Bold"
-                          type="button"
-                        >
-                          <span
-                            aria-hidden="true"
-                            className="Icon-root Icon-md"
-                          >
-                            format_bold
-                          </span>
-                        </button>
-                        <button
-                          className="Button-button"
-                          disabled={false}
-                          onClick={[Function]}
-                          title="Italic"
-                          type="button"
-                        >
-                          <span
-                            aria-hidden="true"
-                            className="Icon-root Icon-md"
-                          >
-                            format_italic
-                          </span>
-                        </button>
-                        <button
-                          className="Button-button"
-                          disabled={false}
-                          onClick={[Function]}
-                          title="Blockquote"
-                          type="button"
-                        >
-                          <span
-                            aria-hidden="true"
-                            className="Icon-root Icon-md"
-                          >
-                            format_quote
-                          </span>
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+                  className="Popover-root"
                 >
                   <button
-                    className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+                    aria-controls="permalink-popover-comment-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Share
+                    </span>
+                  </button>
+                  <div
+                    aria-hidden={true}
+                    aria-labelledby="permalink-popover-comment-0-ariainfo"
+                    id="permalink-popover-comment-0"
+                    role="popup"
+                  >
+                    <div
+                      className="AriaInfo-root"
+                      id="permalink-popover-comment-0-ariainfo"
+                    >
+                      A dialog showing a permalink to the comment
+                    </div>
+                  </div>
+                </div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Respect
+                  </span>
+                </button>
+              </div>
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+              >
+                <div
+                  className="Popover-root"
+                >
+                  <button
+                    aria-controls="report-popover-comment-0"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -491,141 +138,21 @@ exports[`post a reply: open reply form 1`] = `
                     onTouchEnd={[Function]}
                     type="button"
                   >
-                    Cancel
+                    <span>
+                      Report
+                    </span>
                   </button>
-                  <button
-                    className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                    disabled={true}
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="submit"
-                  >
-                    Submit
-                  </button>
-                </div>
-              </div>
-            </form>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
+                    aria-hidden={true}
+                    aria-labelledby="report-popover-comment-0-ariainfo"
+                    id="report-popover-comment-0"
+                    role="popup"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="AriaInfo-root"
+                      id="report-popover-comment-0-ariainfo"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
+                      A dialog for reporting comments
                     </div>
                   </div>
                 </div>
@@ -635,487 +162,210 @@ exports[`post a reply: open reply form 1`] = `
         </div>
       </div>
     </div>
-  </section>
+    <form
+      autoComplete="off"
+      id="comments-replyCommentForm-form-comment-0"
+      onSubmit={[Function]}
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div>
+          <label
+            className="AriaInfo-root"
+            htmlFor="comments-replyCommentForm-rte-comment-0"
+          >
+            Write a reply
+          </label>
+          <div
+            className="Flex-root ReplyTo-root Flex-flex Flex-alignCenter"
+          >
+            <span
+              aria-hidden="true"
+              className="Icon-root Icon-sm"
+            >
+              reply
+            </span>
+            <span>
+               
+            </span>
+            <span
+              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ReplyTo-text"
+            >
+              Replying to: 
+              <span
+                className="Typography-root Typography-heading4 Typography-colorTextPrimary ReplyTo-username"
+              >
+                Markus
+              </span>
+            </span>
+          </div>
+          <div>
+            <div
+              className=""
+            >
+              <div
+                aria-hidden="true"
+                className="RTE-placeholder RTE-placeholder"
+              >
+                Write a reply
+              </div>
+              <div
+                aria-placeholder="Write a reply"
+                className="RTE-contentEditable RTE-content"
+                contentEditable={true}
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "",
+                  }
+                }
+                disabled={false}
+                id="comments-replyCommentForm-rte-comment-0"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onCut={[Function]}
+                onFocus={[Function]}
+                onInput={[Function]}
+                onKeyDown={[Function]}
+                onPaste={[Function]}
+                onSelect={[Function]}
+              />
+              <div
+                className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+              >
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Bold"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_bold
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Italic"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_italic
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Blockquote"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_quote
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
+            disabled={false}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Cancel
+          </button>
+          <button
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
+            disabled={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="submit"
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
 </div>
 `;
 
 exports[`post a reply: optimistic response 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  className="HorizontalGutter-root HorizontalGutter-full"
+  data-testid="commentReplyList-comment-0"
+  id="talk-comments-replyList-log--comment-0"
+  role="log"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨3⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      data-testid="comment-uuid-0"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root"
-        >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
-          >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
         className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="IndentedComment-blur Indent-root"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Indent-level1"
           >
             <div
-              className="Indent-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className=""
+                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  className="Comment-root"
-                  role="article"
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                 >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                   >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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>
+                    Markus
+                  </span>
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                   >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:24:00.000Z"
+                      title="2018-07-06T18:24:00.000Z"
                     >
-                      <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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
+                      2018-07-06T18:24:00.000Z
+                    </time>
                   </div>
                 </div>
-              </div>
-            </div>
-            <form
-              autoComplete="off"
-              id="comments-replyCommentForm-form-comment-0"
-              onSubmit={[Function]}
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
                 <div>
-                  <label
-                    className="AriaInfo-root"
-                    htmlFor="comments-replyCommentForm-rte-comment-0"
-                  >
-                    Write a reply
-                  </label>
-                  <div
-                    className="Flex-root ReplyTo-root Flex-flex Flex-alignCenter"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-sm"
-                    >
-                      reply
-                    </span>
-                    <span>
-                       
-                    </span>
-                    <span
-                      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ReplyTo-text"
-                    >
-                      Replying to: 
-                      <span
-                        className="Typography-root Typography-heading4 Typography-colorTextPrimary ReplyTo-username"
-                      >
-                        Markus
-                      </span>
-                    </span>
-                  </div>
-                  <div>
-                    <div
-                      className=""
-                    >
-                      <div
-                        aria-placeholder="Write a reply"
-                        className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                        contentEditable={false}
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "<strong>Hello world!</strong>",
-                          }
-                        }
-                        disabled={true}
-                        id="comments-replyCommentForm-rte-comment-0"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onCut={[Function]}
-                        onFocus={[Function]}
-                        onInput={[Function]}
-                        onKeyDown={[Function]}
-                        onPaste={[Function]}
-                        onSelect={[Function]}
-                      />
-                      <div
-                        className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
-                      >
-                        <button
-                          className="Button-button"
-                          disabled={false}
-                          onClick={[Function]}
-                          title="Bold"
-                          type="button"
-                        >
-                          <span
-                            aria-hidden="true"
-                            className="Icon-root Icon-md"
-                          >
-                            format_bold
-                          </span>
-                        </button>
-                        <button
-                          className="Button-button"
-                          disabled={false}
-                          onClick={[Function]}
-                          title="Italic"
-                          type="button"
-                        >
-                          <span
-                            aria-hidden="true"
-                            className="Icon-root Icon-md"
-                          >
-                            format_italic
-                          </span>
-                        </button>
-                        <button
-                          className="Button-button"
-                          disabled={false}
-                          onClick={[Function]}
-                          title="Blockquote"
-                          type="button"
-                        >
-                          <span
-                            aria-hidden="true"
-                            className="Icon-root Icon-md"
-                          >
-                            format_quote
-                          </span>
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
-                >
                   <button
-                    className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-disabled"
-                    disabled={true}
+                    className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -1124,595 +374,99 @@ exports[`post a reply: optimistic response 1`] = `
                     onTouchEnd={[Function]}
                     type="button"
                   >
-                    Cancel
-                  </button>
-                  <button
-                    className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                    disabled={true}
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    onTouchEnd={[Function]}
-                    type="submit"
-                  >
-                    Submit
+                    Edit
                   </button>
                 </div>
               </div>
-            </form>
-          </div>
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-0"
-            role="log"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
               <div
                 className="HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="IndentedComment-blur Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-uuid-0"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Markus
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                            id="comments-commentContainer-editButton-uuid-0"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            Edit
-                          </button>
-                        </div>
-                      </div>
-                      <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "<strong>Hello world!</strong>",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-uuid-0"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-uuid-0"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-uuid-0-ariainfo"
-                              id="permalink-popover-uuid-0"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-uuid-0-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`post a reply: server response 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨3⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root"
-        >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
-          >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<strong>Hello world!</strong>",
                     }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                >
                   <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                   >
                     <button
-                      className="Button-button"
-                      disabled={false}
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-uuid-0"
+                      onBlur={[Function]}
                       onClick={[Function]}
-                      title="Bold"
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
                       type="button"
                     >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
+                      <span>
+                        Reply
                       </span>
                     </button>
+                    <div
+                      className="Popover-root"
+                    >
+                      <button
+                        aria-controls="permalink-popover-uuid-0"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Share
+                        </span>
+                      </button>
+                      <div
+                        aria-hidden={true}
+                        aria-labelledby="permalink-popover-uuid-0-ariainfo"
+                        id="permalink-popover-uuid-0"
+                        role="popup"
+                      >
+                        <div
+                          className="AriaInfo-root"
+                          id="permalink-popover-uuid-0-ariainfo"
+                        >
+                          A dialog showing a permalink to the comment
+                        </div>
+                      </div>
+                    </div>
                     <button
-                      className="Button-button"
-                      disabled={false}
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
                       onClick={[Function]}
-                      title="Italic"
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
                       type="button"
                     >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
+                      <span>
+                        Respect
                       </span>
                     </button>
                   </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Popover-root"
                     >
                       <button
+                        aria-controls="report-popover-uuid-0"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-0"
+                        disabled={false}
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -1722,307 +476,22 @@ exports[`post a reply: server response 1`] = `
                         type="button"
                       >
                         <span>
-                          Reply
+                          Report
                         </span>
                       </button>
                       <div
-                        className="Popover-root"
+                        aria-hidden={true}
+                        aria-labelledby="report-popover-uuid-0-ariainfo"
+                        id="report-popover-uuid-0"
+                        role="popup"
                       >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
                         <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
+                          className="AriaInfo-root"
+                          id="report-popover-uuid-0-ariainfo"
                         >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
+                          A dialog for reporting comments
                         </div>
                       </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-0"
-            role="log"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-x"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Markus
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "<strong>Hello world! (from server)</strong>",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root 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]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-x"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-x-ariainfo"
-                              id="permalink-popover-comment-x"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-x-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
                     </div>
                   </div>
                 </div>
@@ -2032,497 +501,6 @@ exports[`post a reply: server response 1`] = `
         </div>
       </div>
     </div>
-  </section>
-</div>
-`;
-
-exports[`renders comment stream 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-    <li
-      className="Tab-root"
-      id="tab-PROFILE"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-PROFILE"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          My Profile
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root"
-        >
-          <div
-            className="Flex-flex Flex-halfItemGutter Flex-wrap"
-          >
-            <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Signed in as 
-              <span
-                className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-              >
-                Markus
-              </span>
-              .
-            </div>
-            <div
-              className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-            >
-              <span>
-                Not you? 
-              </span>
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                Sign Out
-              </button>
-            </div>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          id="comments-postCommentForm-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div>
-              <label
-                className="AriaInfo-root"
-                htmlFor="comments-postCommentForm-field"
-              >
-                Post a comment
-              </label>
-              <div>
-                <div
-                  className=""
-                >
-                  <div
-                    aria-hidden="true"
-                    className="RTE-placeholder RTE-placeholder"
-                  >
-                    Post a comment
-                  </div>
-                  <div
-                    aria-placeholder="Post a comment"
-                    className="RTE-contentEditable RTE-content"
-                    contentEditable={true}
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "",
-                      }
-                    }
-                    disabled={false}
-                    id="comments-postCommentForm-field"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onCut={[Function]}
-                    onFocus={[Function]}
-                    onInput={[Function]}
-                    onKeyDown={[Function]}
-                    onPaste={[Function]}
-                    onSelect={[Function]}
-                  />
-                  <div
-                    className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
-                  >
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Bold"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_bold
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Italic"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_italic
-                      </span>
-                    </button>
-                    <button
-                      className="Button-button"
-                      disabled={false}
-                      onClick={[Function]}
-                      title="Blockquote"
-                      type="button"
-                    >
-                      <span
-                        aria-hidden="true"
-                        className="Icon-root Icon-md"
-                      >
-                        format_quote
-                      </span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-            >
-              <div
-                className="PostCommentForm-poweredBy"
-              >
-                <span
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
-                >
-                  Powered by 
-                  <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    ⁨The Coral Project⁩
-                  </span>
-                </span>
-              </div>
-              <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
-                disabled={true}
-                onBlur={[Function]}
-                onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
-              >
-                Submit
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
+  </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/reaction.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/reaction.spec.tsx.snap
new file mode 100644
index 000000000..182f3a6ad
--- /dev/null
+++ b/src/core/client/stream/test/comments/__snapshots__/reaction.spec.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`create and remove reaction: Respected 1`] = `
+<button
+  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
+  onTouchEnd={[Function]}
+  type="button"
+>
+  <span>
+    Respected
+  </span>
+  <span>
+    1
+  </span>
+</button>
+`;
+
+exports[`create and remove reaction: Unrespected 1`] = `
+<button
+  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
+  onTouchEnd={[Function]}
+  type="button"
+>
+  <span>
+    Respect
+  </span>
+</button>
+`;
diff --git a/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
index 6b3173960..46876fb90 100644
--- a/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap
@@ -1,183 +1,320 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders comment stream 1`] = `
+exports[`renders reply list 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  className="HorizontalGutter-root HorizontalGutter-full"
+  data-testid="commentReplyList-comment-with-deep-replies"
+  id="talk-comments-replyList-log--comment-with-deep-replies"
+  role="log"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      data-testid="comment-comment-with-replies"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-        >
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in
-          </button>
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Register
-          </button>
-        </div>
-        <div
-          className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+          className="Indent-root"
         >
           <div
-            aria-hidden="true"
+            className="Indent-level1"
           >
-            <div>
+            <div
+              className="Comment-root"
+              role="article"
+            >
               <div
-                className=""
+                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder "
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                 >
-                  Post a comment
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    Markus
+                  </span>
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                  >
+                    <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="HorizontalGutter-root HorizontalGutter-full"
+              >
                 <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                  contentEditable={false}
+                  className="HTMLContent-root"
                   dangerouslySetInnerHTML={
                     Object {
-                      "__html": "",
+                      "__html": "I like yoghurt",
                     }
                   }
-                  disabled={true}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
                 />
                 <div
-                  className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
+                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                   >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
+                    <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]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
                     >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                    <div
+                      className="Popover-root"
+                    >
+                      <button
+                        aria-controls="permalink-popover-comment-with-replies"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Share
+                        </span>
+                      </button>
+                      <div
+                        aria-hidden={true}
+                        aria-labelledby="permalink-popover-comment-with-replies-ariainfo"
+                        id="permalink-popover-comment-with-replies"
+                        role="popup"
+                      >
+                        <div
+                          className="AriaInfo-root"
+                          id="permalink-popover-comment-with-replies-ariainfo"
+                        >
+                          A dialog showing a permalink to the comment
+                        </div>
+                      </div>
+                    </div>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                   >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      disabled={false}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
                     >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
+                      <span>
+                        Report
+                      </span>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
+        </div>
+      </div>
+    </div>
+    <div
+      className="HorizontalGutter-root HorizontalGutter-full"
+      data-testid="commentReplyList-comment-with-replies"
+      id="talk-comments-replyList-log--comment-with-replies"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          data-testid="comment-comment-3"
+        >
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
-            Sign in and Join the Conversation
-          </button>
+            <div
+              className="Indent-root"
+            >
+              <div
+                className="Indent-level2"
+              >
+                <div
+                  className="Comment-root"
+                  role="article"
+                >
+                  <div
+                    className="Flex-root 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"
+                      >
+                        Isabelle
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <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="HorizontalGutter-root HorizontalGutter-full"
+                  >
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Comment Body 3",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                    >
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      >
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          id="comments-commentContainer-replyButton-comment-3"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Reply
+                          </span>
+                        </button>
+                        <div
+                          className="Popover-root"
+                        >
+                          <button
+                            aria-controls="permalink-popover-comment-3"
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Share
+                            </span>
+                          </button>
+                          <div
+                            aria-hidden={true}
+                            aria-labelledby="permalink-popover-comment-3-ariainfo"
+                            id="permalink-popover-comment-3"
+                            role="popup"
+                          >
+                            <div
+                              className="AriaInfo-root"
+                              id="permalink-popover-comment-3-ariainfo"
+                            >
+                              A dialog showing a permalink to the comment
+                            </div>
+                          </div>
+                        </div>
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Respect
+                          </span>
+                        </button>
+                      </div>
+                      <div
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      >
+                        <button
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          disabled={false}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Report
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
-        aria-live="polite"
         className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          data-testid="comment-comment-4"
         >
           <div
             className="HorizontalGutter-root HorizontalGutter-full"
@@ -186,7 +323,7 @@ exports[`renders comment stream 1`] = `
               className="Indent-root"
             >
               <div
-                className=""
+                className="Indent-level2"
               >
                 <div
                   className="Comment-root"
@@ -194,7 +331,6 @@ exports[`renders comment stream 1`] = `
                 >
                   <div
                     className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
                   >
                     <div
                       className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -202,7 +338,7 @@ exports[`renders comment stream 1`] = `
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                       >
-                        Markus
+                        Isabelle
                       </span>
                       <div
                         className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
@@ -224,33 +360,64 @@ exports[`renders comment stream 1`] = `
                       className="HTMLContent-root"
                       dangerouslySetInnerHTML={
                         Object {
-                          "__html": "Joining Too",
+                          "__html": "Comment Body 4",
                         }
                       }
                     />
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Flex-root Flex-flex Flex-justifySpaceBetween"
                     >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-0"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
                       <div
-                        className="Popover-root"
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                       >
                         <button
-                          aria-controls="permalink-popover-comment-0"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          id="comments-commentContainer-replyButton-comment-4"
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                          onTouchEnd={[Function]}
+                          type="button"
+                        >
+                          <span>
+                            Reply
+                          </span>
+                        </button>
+                        <div
+                          className="Popover-root"
+                        >
+                          <button
+                            aria-controls="permalink-popover-comment-4"
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Share
+                            </span>
+                          </button>
+                          <div
+                            aria-hidden={true}
+                            aria-labelledby="permalink-popover-comment-4-ariainfo"
+                            id="permalink-popover-comment-4"
+                            role="popup"
+                          >
+                            <div
+                              className="AriaInfo-root"
+                              id="permalink-popover-comment-4-ariainfo"
+                            >
+                              A dialog showing a permalink to the comment
+                            </div>
+                          </div>
+                        </div>
+                        <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -261,120 +428,16 @@ exports[`renders comment stream 1`] = `
                           type="button"
                         >
                           <span>
-                            Share
+                            Respect
                           </span>
                         </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
                       </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-with-deep-replies"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
                       <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "I like yoghurt",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-with-deep-replies"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                       >
                         <button
-                          aria-controls="permalink-popover-comment-with-deep-replies"
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                          disabled={false}
                           onBlur={[Function]}
                           onClick={[Function]}
                           onFocus={[Function]}
@@ -384,540 +447,9 @@ exports[`renders comment stream 1`] = `
                           type="button"
                         >
                           <span>
-                            Share
+                            Report
                           </span>
                         </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-with-deep-replies-ariainfo"
-                          id="permalink-popover-comment-with-deep-replies"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-with-deep-replies-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-with-deep-replies"
-            role="log"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-with-replies"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Markus
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "I like yoghurt",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root 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]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-with-replies"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-with-replies-ariainfo"
-                              id="permalink-popover-comment-with-replies"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-with-replies-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-                id="talk-comments-replyList-log--comment-with-replies"
-                role="log"
-              >
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="Indent-root"
-                    >
-                      <div
-                        className="Indent-level2"
-                      >
-                        <div
-                          className="Comment-root"
-                          role="article"
-                        >
-                          <div
-                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                            id="comment-comment-3"
-                          >
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                            >
-                              <span
-                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                              >
-                                Isabelle
-                              </span>
-                              <div
-                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                              >
-                                <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="HorizontalGutter-root HorizontalGutter-full"
-                          >
-                            <div
-                              className="HTMLContent-root"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "Comment Body 3",
-                                }
-                              }
-                            />
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                            >
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                id="comments-commentContainer-replyButton-comment-3"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Reply
-                                </span>
-                              </button>
-                              <div
-                                className="Popover-root"
-                              >
-                                <button
-                                  aria-controls="permalink-popover-comment-3"
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseOut={[Function]}
-                                  onMouseOver={[Function]}
-                                  onTouchEnd={[Function]}
-                                  type="button"
-                                >
-                                  <span>
-                                    Share
-                                  </span>
-                                </button>
-                                <div
-                                  aria-hidden={true}
-                                  aria-labelledby="permalink-popover-comment-3-ariainfo"
-                                  id="permalink-popover-comment-3"
-                                  role="popup"
-                                >
-                                  <div
-                                    className="AriaInfo-root"
-                                    id="permalink-popover-comment-3-ariainfo"
-                                  >
-                                    A dialog showing a permalink to the comment
-                                  </div>
-                                </div>
-                              </div>
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Respect
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="Indent-root"
-                    >
-                      <div
-                        className="Indent-level2"
-                      >
-                        <div
-                          className="Comment-root"
-                          role="article"
-                        >
-                          <div
-                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                            id="comment-comment-4"
-                          >
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                            >
-                              <span
-                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                              >
-                                Isabelle
-                              </span>
-                              <div
-                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                              >
-                                <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="HorizontalGutter-root HorizontalGutter-full"
-                          >
-                            <div
-                              className="HTMLContent-root"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "Comment Body 4",
-                                }
-                              }
-                            />
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                            >
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                id="comments-commentContainer-replyButton-comment-4"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Reply
-                                </span>
-                              </button>
-                              <div
-                                className="Popover-root"
-                              >
-                                <button
-                                  aria-controls="permalink-popover-comment-4"
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseOut={[Function]}
-                                  onMouseOver={[Function]}
-                                  onTouchEnd={[Function]}
-                                  type="button"
-                                >
-                                  <span>
-                                    Share
-                                  </span>
-                                </button>
-                                <div
-                                  aria-hidden={true}
-                                  aria-labelledby="permalink-popover-comment-4-ariainfo"
-                                  id="permalink-popover-comment-4"
-                                  role="popup"
-                                >
-                                  <div
-                                    className="AriaInfo-root"
-                                    id="permalink-popover-comment-4-ariainfo"
-                                  >
-                                    A dialog showing a permalink to the comment
-                                  </div>
-                                </div>
-                              </div>
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Respect
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-5"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Isabelle
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Comment Body 5",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-5"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-5"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-5-ariainfo"
-                              id="permalink-popover-comment-5"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-5-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
                       </div>
                     </div>
                   </div>
@@ -928,6 +460,155 @@ exports[`renders comment stream 1`] = `
         </div>
       </div>
     </div>
-  </section>
+  </div>
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
+  >
+    <div
+      data-testid="comment-comment-5"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className="Indent-level1"
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root 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"
+                  >
+                    Isabelle
+                  </span>
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                  >
+                    <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="HorizontalGutter-root HorizontalGutter-full"
+              >
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Comment Body 5",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                >
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  >
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-5"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reply
+                      </span>
+                    </button>
+                    <div
+                      className="Popover-root"
+                    >
+                      <button
+                        aria-controls="permalink-popover-comment-5"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Share
+                        </span>
+                      </button>
+                      <div
+                        aria-hidden={true}
+                        aria-labelledby="permalink-popover-comment-5-ariainfo"
+                        id="permalink-popover-comment-5"
+                        role="popup"
+                      >
+                        <div
+                          className="AriaInfo-root"
+                          id="permalink-popover-comment-5-ariainfo"
+                        >
+                          A dialog showing a permalink to the comment
+                        </div>
+                      </div>
+                    </div>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Respect
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                  >
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      disabled={false}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Report
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
index d1d07d9f6..ea824774f 100644
--- a/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders comment stream 1`] = `
+exports[`renders app with comment stream 1`] = `
 <div
   className="HorizontalGutter-root App-root HorizontalGutter-full"
 >
@@ -35,6 +35,7 @@ exports[`renders comment stream 1`] = `
   <section
     aria-labelledby="tab-COMMENTS"
     className="App-tabContent"
+    data-testid="current-tab-pane"
     id="tabPane-COMMENTS"
     role="tabpanel"
   >
@@ -173,6 +174,7 @@ exports[`renders comment stream 1`] = `
       <div
         aria-live="polite"
         className="HorizontalGutter-root HorizontalGutter-full"
+        data-testid="comments-stream-log"
         id="talk-comments-stream-log"
         role="log"
       >
@@ -180,118 +182,144 @@ exports[`renders comment stream 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            data-testid="comment-comment-0"
           >
             <div
-              className="Indent-root"
+              className="HorizontalGutter-root HorizontalGutter-full"
             >
               <div
-                className=""
+                className="Indent-root"
               >
                 <div
-                  className="Comment-root"
-                  role="article"
+                  className=""
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
+                    className="Comment-root"
+                    role="article"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
                       <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                       >
-                        <time
-                          className="Timestamp-root RelativeTime-root"
-                          dateTime="2018-07-06T18:24:00.000Z"
-                          title="2018-07-06T18:24:00.000Z"
+                        <span
+                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
-                          2018-07-06T18:24:00.000Z
-                        </time>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
+                          Markus
                         </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
                         <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
+                          className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                         >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
+                          <time
+                            className="Timestamp-root RelativeTime-root"
+                            dateTime="2018-07-06T18:24:00.000Z"
+                            title="2018-07-06T18:24:00.000Z"
                           >
-                            A dialog showing a permalink to the comment
-                          </div>
+                            2018-07-06T18:24:00.000Z
+                          </time>
                         </div>
                       </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
+                    </div>
+                    <div
+                      className="HorizontalGutter-root HorizontalGutter-full"
+                    >
+                      <div
+                        className="HTMLContent-root"
+                        dangerouslySetInnerHTML={
+                          Object {
+                            "__html": "Joining Too",
+                          }
+                        }
+                      />
+                      <div
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween"
                       >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
+                        <div
+                          className="Flex-root 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]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                          <div
+                            className="Popover-root"
+                          >
+                            <button
+                              aria-controls="permalink-popover-comment-0"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Share
+                              </span>
+                            </button>
+                            <div
+                              aria-hidden={true}
+                              aria-labelledby="permalink-popover-comment-0-ariainfo"
+                              id="permalink-popover-comment-0"
+                              role="popup"
+                            >
+                              <div
+                                className="AriaInfo-root"
+                                id="permalink-popover-comment-0-ariainfo"
+                              >
+                                A dialog showing a permalink to the comment
+                              </div>
+                            </div>
+                          </div>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Respect
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        >
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            disabled={false}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Report
+                            </span>
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -303,118 +331,144 @@ exports[`renders comment stream 1`] = `
           className="HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            data-testid="comment-comment-1"
           >
             <div
-              className="Indent-root"
+              className="HorizontalGutter-root HorizontalGutter-full"
             >
               <div
-                className=""
+                className="Indent-root"
               >
                 <div
-                  className="Comment-root"
-                  role="article"
+                  className=""
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-1"
+                    className="Comment-root"
+                    role="article"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Lukas
-                      </span>
                       <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                       >
-                        <time
-                          className="Timestamp-root RelativeTime-root"
-                          dateTime="2018-07-06T18:24:00.000Z"
-                          title="2018-07-06T18:24:00.000Z"
+                        <span
+                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
-                          2018-07-06T18:24:00.000Z
-                        </time>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root 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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
+                          Lukas
                         </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-1"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
                         <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-1-ariainfo"
-                          id="permalink-popover-comment-1"
-                          role="popup"
+                          className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
                         >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-1-ariainfo"
+                          <time
+                            className="Timestamp-root RelativeTime-root"
+                            dateTime="2018-07-06T18:24:00.000Z"
+                            title="2018-07-06T18:24:00.000Z"
                           >
-                            A dialog showing a permalink to the comment
-                          </div>
+                            2018-07-06T18:24:00.000Z
+                          </time>
                         </div>
                       </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
+                    </div>
+                    <div
+                      className="HorizontalGutter-root HorizontalGutter-full"
+                    >
+                      <div
+                        className="HTMLContent-root"
+                        dangerouslySetInnerHTML={
+                          Object {
+                            "__html": "What's up?",
+                          }
+                        }
+                      />
+                      <div
+                        className="Flex-root Flex-flex Flex-justifySpaceBetween"
                       >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
+                        <div
+                          className="Flex-root 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]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                          <div
+                            className="Popover-root"
+                          >
+                            <button
+                              aria-controls="permalink-popover-comment-1"
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Share
+                              </span>
+                            </button>
+                            <div
+                              aria-hidden={true}
+                              aria-labelledby="permalink-popover-comment-1-ariainfo"
+                              id="permalink-popover-comment-1"
+                              role="popup"
+                            >
+                              <div
+                                className="AriaInfo-root"
+                                id="permalink-popover-comment-1-ariainfo"
+                              >
+                                A dialog showing a permalink to the comment
+                              </div>
+                            </div>
+                          </div>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Respect
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        >
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            disabled={false}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Report
+                            </span>
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/src/core/client/stream/test/comments/__snapshots__/reportComment.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/reportComment.spec.tsx.snap
new file mode 100644
index 000000000..b1d35e8d8
--- /dev/null
+++ b/src/core/client/stream/test/comments/__snapshots__/reportComment.spec.tsx.snap
@@ -0,0 +1,501 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`close popup 1`] = `
+<div
+  aria-hidden={true}
+  aria-labelledby="report-popover-comment-0-ariainfo"
+  id="report-popover-comment-0"
+  role="popup"
+>
+  <div
+    className="AriaInfo-root"
+    id="report-popover-comment-0-ariainfo"
+  >
+    A dialog for reporting comments
+  </div>
+</div>
+`;
+
+exports[`render popup 1`] = `
+<div
+  aria-hidden={false}
+  aria-labelledby="report-popover-comment-0-ariainfo"
+  id="report-popover-comment-0"
+  role="popup"
+>
+  <div
+    className="AriaInfo-root"
+    id="report-popover-comment-0-ariainfo"
+  >
+    A dialog for reporting comments
+  </div>
+  <div
+    className="Popover-popover Popover-top"
+    style={
+      Object {
+        "left": 0,
+        "opacity": 0,
+        "pointerEvents": "none",
+        "position": "absolute",
+        "top": 0,
+      }
+    }
+  >
+    <div
+      className="ReportPopover-root"
+    >
+      <button
+        aria-label="Close Popover"
+        className="BaseButton-root ReportPopover-close"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          className="Icon-root Icon-sm"
+        >
+          close
+        </span>
+      </button>
+      <form
+        autoComplete="off"
+        className="ReportCommentForm-root"
+        id="report-comments-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root ReportCommentForm-root HorizontalGutter-full"
+        >
+          <h1
+            className="Typography-root Typography-heading2 Typography-colorTextPrimary ReportCommentForm-title"
+          >
+            Report This Comment
+          </h1>
+          <div
+            className="HorizontalGutter-root HorizontalGutter-half"
+          >
+            <p
+              className="Typography-root Typography-detail Typography-colorTextPrimary ReportCommentForm-detail"
+            >
+              Why are you reporting this comment?
+            </p>
+            <ul
+              className="ReportCommentForm-list"
+            >
+              <li>
+                <div
+                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                >
+                  <input
+                    checked={false}
+                    className="RadioButton-input"
+                    disabled={false}
+                    id="reportComment-popover--reason-COMMENT_REPORTED_OFFENSIVE"
+                    name="reason"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    type="radio"
+                    value="COMMENT_REPORTED_OFFENSIVE"
+                  />
+                  <label
+                    className="RadioButton-label"
+                    htmlFor="reportComment-popover--reason-COMMENT_REPORTED_OFFENSIVE"
+                  >
+                    This comment is offensive
+                  </label>
+                </div>
+              </li>
+              <li>
+                <div
+                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                >
+                  <input
+                    checked={false}
+                    className="RadioButton-input"
+                    disabled={false}
+                    id="reportComment-popover--reason-DISAGREE"
+                    name="reason"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    type="radio"
+                    value="DISAGREE"
+                  />
+                  <label
+                    className="RadioButton-label"
+                    htmlFor="reportComment-popover--reason-DISAGREE"
+                  >
+                    I disagree with this comment
+                  </label>
+                </div>
+              </li>
+              <li>
+                <div
+                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                >
+                  <input
+                    checked={false}
+                    className="RadioButton-input"
+                    disabled={false}
+                    id="reportComment-popover--reason-COMMENT_REPORTED_SPAM"
+                    name="reason"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    type="radio"
+                    value="COMMENT_REPORTED_SPAM"
+                  />
+                  <label
+                    className="RadioButton-label"
+                    htmlFor="reportComment-popover--reason-COMMENT_REPORTED_SPAM"
+                  >
+                    This looks like an ad or marketing
+                  </label>
+                </div>
+              </li>
+              <li>
+                <div
+                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                >
+                  <input
+                    checked={false}
+                    className="RadioButton-input"
+                    disabled={false}
+                    id="reportComment-popover--reason-COMMENT_REPORTED_OTHER"
+                    name="reason"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    type="radio"
+                    value="COMMENT_REPORTED_OTHER"
+                  />
+                  <label
+                    className="RadioButton-label"
+                    htmlFor="reportComment-popover--reason-COMMENT_REPORTED_OTHER"
+                  >
+                    Other
+                  </label>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`render popup expanded 1`] = `
+<div
+  aria-hidden={false}
+  aria-labelledby="report-popover-comment-0-ariainfo"
+  id="report-popover-comment-0"
+  role="popup"
+>
+  <div
+    className="AriaInfo-root"
+    id="report-popover-comment-0-ariainfo"
+  >
+    A dialog for reporting comments
+  </div>
+  <div
+    className="Popover-popover Popover-top"
+    style={
+      Object {
+        "left": 0,
+        "opacity": 0,
+        "pointerEvents": "none",
+        "position": "absolute",
+        "top": 0,
+      }
+    }
+  >
+    <div
+      className="ReportPopover-root"
+    >
+      <button
+        aria-label="Close Popover"
+        className="BaseButton-root ReportPopover-close"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          className="Icon-root Icon-sm"
+        >
+          close
+        </span>
+      </button>
+      <form
+        autoComplete="off"
+        className="ReportCommentForm-root"
+        id="report-comments-form"
+        onSubmit={[Function]}
+      >
+        <div
+          className="HorizontalGutter-root ReportCommentForm-root HorizontalGutter-full"
+        >
+          <h1
+            className="Typography-root Typography-heading2 Typography-colorTextPrimary ReportCommentForm-title"
+          >
+            Report This Comment
+          </h1>
+          <div
+            className="HorizontalGutter-root HorizontalGutter-half"
+          >
+            <p
+              className="Typography-root Typography-detail Typography-colorTextPrimary ReportCommentForm-detail"
+            >
+              Why are you reporting this comment?
+            </p>
+            <ul
+              className="ReportCommentForm-list"
+            >
+              <li>
+                <div
+                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                >
+                  <input
+                    checked={true}
+                    className="RadioButton-input"
+                    disabled={false}
+                    id="reportComment-popover--reason-COMMENT_REPORTED_OFFENSIVE"
+                    name="reason"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    type="radio"
+                    value="COMMENT_REPORTED_OFFENSIVE"
+                  />
+                  <label
+                    className="RadioButton-label"
+                    htmlFor="reportComment-popover--reason-COMMENT_REPORTED_OFFENSIVE"
+                  >
+                    This comment is offensive
+                  </label>
+                </div>
+              </li>
+              <li>
+                <div
+                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                >
+                  <input
+                    checked={false}
+                    className="RadioButton-input"
+                    disabled={false}
+                    id="reportComment-popover--reason-DISAGREE"
+                    name="reason"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    type="radio"
+                    value="DISAGREE"
+                  />
+                  <label
+                    className="RadioButton-label"
+                    htmlFor="reportComment-popover--reason-DISAGREE"
+                  >
+                    I disagree with this comment
+                  </label>
+                </div>
+              </li>
+              <li>
+                <div
+                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                >
+                  <input
+                    checked={false}
+                    className="RadioButton-input"
+                    disabled={false}
+                    id="reportComment-popover--reason-COMMENT_REPORTED_SPAM"
+                    name="reason"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    type="radio"
+                    value="COMMENT_REPORTED_SPAM"
+                  />
+                  <label
+                    className="RadioButton-label"
+                    htmlFor="reportComment-popover--reason-COMMENT_REPORTED_SPAM"
+                  >
+                    This looks like an ad or marketing
+                  </label>
+                </div>
+              </li>
+              <li>
+                <div
+                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                >
+                  <input
+                    checked={false}
+                    className="RadioButton-input"
+                    disabled={false}
+                    id="reportComment-popover--reason-COMMENT_REPORTED_OTHER"
+                    name="reason"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    type="radio"
+                    value="COMMENT_REPORTED_OTHER"
+                  />
+                  <label
+                    className="RadioButton-label"
+                    htmlFor="reportComment-popover--reason-COMMENT_REPORTED_OTHER"
+                  >
+                    Other
+                  </label>
+                </div>
+              </li>
+            </ul>
+            <label
+              className="Typography-root Typography-detail Typography-colorTextPrimary ReportCommentForm-detail"
+              htmlFor="comments-reportCommentForm-aditionalDetails--comment-0"
+            >
+              Please leave any additional information that may be helpful to our moderators. (Optional)
+            </label>
+            <div>
+              <div>
+                <textarea
+                  className="ReportCommentForm-textarea"
+                  disabled={false}
+                  id="comments-reportCommentForm-aditionalDetails--comment-0"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  value=""
+                />
+                <p
+                  className="Typography-root Typography-detail Typography-colorTextSecondary ReportCommentForm-textareaInfo"
+                >
+                  Max. ⁨500⁩ Characters
+                </p>
+              </div>
+            </div>
+          </div>
+          <div
+            className="Flex-root Flex-flex Flex-justifyFlexEnd Flex-alignCenter"
+          >
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Cancel
+            </button>
+            <button
+              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
+              disabled={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`report comment as offensive 1`] = `
+<div
+  aria-hidden={false}
+  aria-labelledby="report-popover-comment-0-ariainfo"
+  id="report-popover-comment-0"
+  role="popup"
+>
+  <div
+    className="AriaInfo-root"
+    id="report-popover-comment-0-ariainfo"
+  >
+    A dialog for reporting comments
+  </div>
+  <div
+    className="Popover-popover Popover-top"
+    style={
+      Object {
+        "left": 0,
+        "opacity": 0,
+        "pointerEvents": "none",
+        "position": "absolute",
+        "top": 0,
+      }
+    }
+  >
+    <div
+      className="ReportPopover-root"
+    >
+      <button
+        aria-label="Close Popover"
+        className="BaseButton-root ReportPopover-close"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          className="Icon-root Icon-sm"
+        >
+          close
+        </span>
+      </button>
+      <div
+        className="HorizontalGutter-root ThankYou-root HorizontalGutter-full"
+      >
+        <h1
+          className="Typography-root Typography-heading2 Typography-colorTextPrimary ThankYou-title"
+        >
+          Thank you!
+        </h1>
+        <div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            We’ve received your message. Reports from members like you keep the community safe.
+             
+            <button
+              className="BaseButton-root Button-root ThankYou-dismiss Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              type="button"
+            >
+              Dismiss
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
index 618f2c4fe..e21e5d6fb 100644
--- a/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap
@@ -2,283 +2,91 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  className="HorizontalGutter-root HorizontalGutter-full"
+  data-testid="commentReplyList-comment-0"
+  id="talk-comments-replyList-log--comment-0"
+  role="log"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      data-testid="comment-comment-1"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className="HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-        >
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in
-          </button>
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Register
-          </button>
-        </div>
-        <div
-          className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+          className="Indent-root"
         >
           <div
-            aria-hidden="true"
+            className="Indent-level1"
           >
-            <div>
+            <div
+              className="Comment-root"
+              role="article"
+            >
               <div
-                className=""
+                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder "
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
                 >
-                  Post a comment
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    Lukas
+                  </span>
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                  >
+                    <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="HorizontalGutter-root HorizontalGutter-full"
+              >
                 <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                  contentEditable={false}
+                  className="HTMLContent-root"
                   dangerouslySetInnerHTML={
                     Object {
-                      "__html": "",
+                      "__html": "What's up?",
                     }
                   }
-                  disabled={true}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
                 />
                 <div
-                  className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
-          >
-            Sign in and Join the Conversation
-          </button>
-        </div>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
+                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                   >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      id="comments-commentContainer-replyButton-comment-1"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
                     >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
+                      <span>
+                        Reply
                       </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
+                    </button>
                     <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Popover-root"
                     >
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-0"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
+                        aria-controls="permalink-popover-comment-1"
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -289,719 +97,56 @@ exports[`renders comment stream 1`] = `
                         type="button"
                       >
                         <span>
-                          Respect
+                          Share
                         </span>
                       </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-0"
-            role="log"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
                       <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-1"
+                        aria-hidden={true}
+                        aria-labelledby="permalink-popover-comment-1-ariainfo"
+                        id="permalink-popover-comment-1"
+                        role="popup"
                       >
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                          className="AriaInfo-root"
+                          id="permalink-popover-comment-1-ariainfo"
                         >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Lukas
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "What's up?",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root 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]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-1"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-1-ariainfo"
-                              id="permalink-popover-comment-1"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-1-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
+                          A dialog showing a permalink to the comment
                         </div>
                       </div>
                     </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="Indent-root"
-            >
-              <div
-                className="Indent-level1 Indent-noBorder"
-              >
-                <button
-                  aria-controls="talk-comments-replyList-log--comment-0"
-                  className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
-                  disabled={false}
-                  id="talk-comments-replyList-showAll--comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  Show All
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</div>
-`;
-
-exports[`show all replies 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-half"
-      >
-        <div
-          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-        >
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in
-          </button>
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Register
-          </button>
-        </div>
-        <div
-          className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
-        >
-          <div
-            aria-hidden="true"
-          >
-            <div>
-              <div
-                className=""
-              >
-                <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder "
-                >
-                  Post a comment
-                </div>
-                <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                  contentEditable={false}
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "",
-                    }
-                  }
-                  disabled={true}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
-                  onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
-                />
-                <div
-                  className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
-                >
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Bold"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
                     >
-                      format_bold
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
-          >
-            Sign in and Join the Conversation
-          </button>
-        </div>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-0"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
+                      <span>
+                        Respect
                       </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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>
                   </div>
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
+                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                   >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                      disabled={false}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="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]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-0"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-0-ariainfo"
-                          id="permalink-popover-comment-0"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-0-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-0"
-            role="log"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-1"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Lukas
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "What's up?",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root 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]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-1"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-1-ariainfo"
-                              id="permalink-popover-comment-1"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-1-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-2"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Isabelle
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "Hey!",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root 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]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-2"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-2-ariainfo"
-                              id="permalink-popover-comment-2"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-2-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
+                      <span>
+                        Report
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1010,6 +155,29 @@ exports[`show all replies 1`] = `
         </div>
       </div>
     </div>
-  </section>
+  </div>
+  <div
+    className="Indent-root"
+  >
+    <div
+      className="Indent-level1 Indent-noBorder"
+    >
+      <button
+        aria-controls="talk-comments-replyList-log--comment-0"
+        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+        disabled={false}
+        id="talk-comments-replyList-showAll--comment-0"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="button"
+      >
+        Show All
+      </button>
+    </div>
+  </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
index 6de8accd5..5383c918a 100644
--- a/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap
@@ -1,1199 +1,164 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders comment stream 1`] = `
+exports[`renders deepest comment with link 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  data-testid="comment-comment-with-deepest-replies-5"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨1⁩ Comment
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      className="Indent-root"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className="Indent-level5"
       >
         <div
-          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-        >
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Sign in
-          </button>
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            Register
-          </button>
-        </div>
-        <div
-          className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+          className="Comment-root"
+          role="article"
         >
           <div
-            aria-hidden="true"
+            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
-            <div>
-              <div
-                className=""
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
               >
-                <div
-                  aria-hidden="true"
-                  className="RTE-placeholder RTE-placeholder "
+                Markus
+              </span>
+              <div
+                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+              >
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
                 >
-                  Post a comment
-                </div>
-                <div
-                  aria-placeholder="Post a comment"
-                  className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
-                  contentEditable={false}
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "",
-                    }
-                  }
-                  disabled={true}
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+            </div>
+          </div>
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "body 5",
+                }
+              }
+            />
+            <div
+              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+            >
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+              >
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
                   onBlur={[Function]}
-                  onChange={[Function]}
-                  onCut={[Function]}
+                  onClick={[Function]}
                   onFocus={[Function]}
-                  onInput={[Function]}
-                  onKeyDown={[Function]}
-                  onPaste={[Function]}
-                  onSelect={[Function]}
-                />
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Reply
+                  </span>
+                </button>
                 <div
-                  className="RTE-toolbar  RTE-toolbarDisabled RTE-toolbarBottom Toolbar-toolbar"
+                  className="Popover-root"
                 >
                   <button
-                    className="Button-button"
-                    disabled={false}
+                    aria-controls="permalink-popover-comment-with-deepest-replies-5"
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    onBlur={[Function]}
                     onClick={[Function]}
-                    title="Bold"
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
                     type="button"
                   >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_bold
+                    <span>
+                      Share
                     </span>
                   </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Italic"
-                    type="button"
+                  <div
+                    aria-hidden={true}
+                    aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
+                    id="permalink-popover-comment-with-deepest-replies-5"
+                    role="popup"
                   >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
+                    <div
+                      className="AriaInfo-root"
+                      id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
                     >
-                      format_italic
-                    </span>
-                  </button>
-                  <button
-                    className="Button-button"
-                    disabled={false}
-                    onClick={[Function]}
-                    title="Blockquote"
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="Icon-root Icon-md"
-                    >
-                      format_quote
-                    </span>
-                  </button>
+                      A dialog showing a permalink to the comment
+                    </div>
+                  </div>
                 </div>
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Respect
+                  </span>
+                </button>
+              </div>
+              <div
+                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+              >
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  disabled={false}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Report
+                  </span>
+                </button>
               </div>
             </div>
-          </div>
-          <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onFocus={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="submit"
-          >
-            Sign in and Join the Conversation
-          </button>
-        </div>
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        id="talk-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
+            <a
+              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+              href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
+              id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              target="_parent"
+              type="button"
             >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-with-deepest-replies"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "body 0",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-with-deepest-replies"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-with-deepest-replies"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-with-deepest-replies-ariainfo"
-                          id="permalink-popover-comment-with-deepest-replies"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-with-deepest-replies-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-            id="talk-comments-replyList-log--comment-with-deepest-replies"
-            role="log"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-              >
-                <div
-                  className="Indent-root"
-                >
-                  <div
-                    className="Indent-level1"
-                  >
-                    <div
-                      className="Comment-root"
-                      role="article"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                        id="comment-comment-with-deepest-replies-1"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                        >
-                          <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                          >
-                            Markus
-                          </span>
-                          <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                          >
-                            <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="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="HTMLContent-root"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "body 1",
-                            }
-                          }
-                        />
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            id="comments-commentContainer-replyButton-comment-with-deepest-replies-1"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-with-deepest-replies-1"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-with-deepest-replies-1-ariainfo"
-                              id="permalink-popover-comment-with-deepest-replies-1"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-with-deepest-replies-1-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="HorizontalGutter-root HorizontalGutter-full"
-                id="talk-comments-replyList-log--comment-with-deepest-replies-1"
-                role="log"
-              >
-                <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
-                >
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="Indent-root"
-                    >
-                      <div
-                        className="Indent-level2"
-                      >
-                        <div
-                          className="Comment-root"
-                          role="article"
-                        >
-                          <div
-                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                            id="comment-comment-with-deepest-replies-2"
-                          >
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                            >
-                              <span
-                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                              >
-                                Markus
-                              </span>
-                              <div
-                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                              >
-                                <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="HorizontalGutter-root HorizontalGutter-full"
-                          >
-                            <div
-                              className="HTMLContent-root"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "body 2",
-                                }
-                              }
-                            />
-                            <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                            >
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                id="comments-commentContainer-replyButton-comment-with-deepest-replies-2"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Reply
-                                </span>
-                              </button>
-                              <div
-                                className="Popover-root"
-                              >
-                                <button
-                                  aria-controls="permalink-popover-comment-with-deepest-replies-2"
-                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseOut={[Function]}
-                                  onMouseOver={[Function]}
-                                  onTouchEnd={[Function]}
-                                  type="button"
-                                >
-                                  <span>
-                                    Share
-                                  </span>
-                                </button>
-                                <div
-                                  aria-hidden={true}
-                                  aria-labelledby="permalink-popover-comment-with-deepest-replies-2-ariainfo"
-                                  id="permalink-popover-comment-with-deepest-replies-2"
-                                  role="popup"
-                                >
-                                  <div
-                                    className="AriaInfo-root"
-                                    id="permalink-popover-comment-with-deepest-replies-2-ariainfo"
-                                  >
-                                    A dialog showing a permalink to the comment
-                                  </div>
-                                </div>
-                              </div>
-                              <button
-                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                onTouchEnd={[Function]}
-                                type="button"
-                              >
-                                <span>
-                                  Respect
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                    id="talk-comments-replyList-log--comment-with-deepest-replies-2"
-                    role="log"
-                  >
-                    <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
-                    >
-                      <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
-                      >
-                        <div
-                          className="Indent-root"
-                        >
-                          <div
-                            className="Indent-level3"
-                          >
-                            <div
-                              className="Comment-root"
-                              role="article"
-                            >
-                              <div
-                                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                id="comment-comment-with-deepest-replies-3"
-                              >
-                                <div
-                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                >
-                                  <span
-                                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                  >
-                                    Markus
-                                  </span>
-                                  <div
-                                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                  >
-                                    <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="HorizontalGutter-root HorizontalGutter-full"
-                              >
-                                <div
-                                  className="HTMLContent-root"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "body 3",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                >
-                                  <button
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                    id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                    onTouchEnd={[Function]}
-                                    type="button"
-                                  >
-                                    <span>
-                                      Reply
-                                    </span>
-                                  </button>
-                                  <div
-                                    className="Popover-root"
-                                  >
-                                    <button
-                                      aria-controls="permalink-popover-comment-with-deepest-replies-3"
-                                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                      onBlur={[Function]}
-                                      onClick={[Function]}
-                                      onFocus={[Function]}
-                                      onMouseOut={[Function]}
-                                      onMouseOver={[Function]}
-                                      onTouchEnd={[Function]}
-                                      type="button"
-                                    >
-                                      <span>
-                                        Share
-                                      </span>
-                                    </button>
-                                    <div
-                                      aria-hidden={true}
-                                      aria-labelledby="permalink-popover-comment-with-deepest-replies-3-ariainfo"
-                                      id="permalink-popover-comment-with-deepest-replies-3"
-                                      role="popup"
-                                    >
-                                      <div
-                                        className="AriaInfo-root"
-                                        id="permalink-popover-comment-with-deepest-replies-3-ariainfo"
-                                      >
-                                        A dialog showing a permalink to the comment
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <button
-                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseOut={[Function]}
-                                    onMouseOver={[Function]}
-                                    onTouchEnd={[Function]}
-                                    type="button"
-                                  >
-                                    <span>
-                                      Respect
-                                    </span>
-                                  </button>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
-                        id="talk-comments-replyList-log--comment-with-deepest-replies-3"
-                        role="log"
-                      >
-                        <div
-                          className="HorizontalGutter-root HorizontalGutter-full"
-                        >
-                          <div
-                            className="HorizontalGutter-root HorizontalGutter-full"
-                          >
-                            <div
-                              className="Indent-root"
-                            >
-                              <div
-                                className="Indent-level4"
-                              >
-                                <div
-                                  className="Comment-root"
-                                  role="article"
-                                >
-                                  <div
-                                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                    id="comment-comment-with-deepest-replies-4"
-                                  >
-                                    <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                    >
-                                      <span
-                                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                      >
-                                        Markus
-                                      </span>
-                                      <div
-                                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                      >
-                                        <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="HorizontalGutter-root HorizontalGutter-full"
-                                  >
-                                    <div
-                                      className="HTMLContent-root"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "body 4",
-                                        }
-                                      }
-                                    />
-                                    <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                    >
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                        id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="button"
-                                      >
-                                        <span>
-                                          Reply
-                                        </span>
-                                      </button>
-                                      <div
-                                        className="Popover-root"
-                                      >
-                                        <button
-                                          aria-controls="permalink-popover-comment-with-deepest-replies-4"
-                                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                          onTouchEnd={[Function]}
-                                          type="button"
-                                        >
-                                          <span>
-                                            Share
-                                          </span>
-                                        </button>
-                                        <div
-                                          aria-hidden={true}
-                                          aria-labelledby="permalink-popover-comment-with-deepest-replies-4-ariainfo"
-                                          id="permalink-popover-comment-with-deepest-replies-4"
-                                          role="popup"
-                                        >
-                                          <div
-                                            className="AriaInfo-root"
-                                            id="permalink-popover-comment-with-deepest-replies-4-ariainfo"
-                                          >
-                                            A dialog showing a permalink to the comment
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <button
-                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseOut={[Function]}
-                                        onMouseOver={[Function]}
-                                        onTouchEnd={[Function]}
-                                        type="button"
-                                      >
-                                        <span>
-                                          Respect
-                                        </span>
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <div
-                            className="HorizontalGutter-root HorizontalGutter-full"
-                            id="talk-comments-replyList-log--comment-with-deepest-replies-4"
-                            role="log"
-                          >
-                            <div
-                              className="HorizontalGutter-root HorizontalGutter-full"
-                            >
-                              <div
-                                className="HorizontalGutter-root HorizontalGutter-full"
-                              >
-                                <div
-                                  className="Indent-root"
-                                >
-                                  <div
-                                    className="Indent-level5"
-                                  >
-                                    <div
-                                      className="Comment-root"
-                                      role="article"
-                                    >
-                                      <div
-                                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                                        id="comment-comment-with-deepest-replies-5"
-                                      >
-                                        <div
-                                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                                        >
-                                          <span
-                                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                                          >
-                                            Markus
-                                          </span>
-                                          <div
-                                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                                          >
-                                            <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="HorizontalGutter-root HorizontalGutter-full"
-                                      >
-                                        <div
-                                          className="HTMLContent-root"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "body 5",
-                                            }
-                                          }
-                                        />
-                                        <div
-                                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                                        >
-                                          <button
-                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                            id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                            onTouchEnd={[Function]}
-                                            type="button"
-                                          >
-                                            <span>
-                                              Reply
-                                            </span>
-                                          </button>
-                                          <div
-                                            className="Popover-root"
-                                          >
-                                            <button
-                                              aria-controls="permalink-popover-comment-with-deepest-replies-5"
-                                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                              onBlur={[Function]}
-                                              onClick={[Function]}
-                                              onFocus={[Function]}
-                                              onMouseOut={[Function]}
-                                              onMouseOver={[Function]}
-                                              onTouchEnd={[Function]}
-                                              type="button"
-                                            >
-                                              <span>
-                                                Share
-                                              </span>
-                                            </button>
-                                            <div
-                                              aria-hidden={true}
-                                              aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                                              id="permalink-popover-comment-with-deepest-replies-5"
-                                              role="popup"
-                                            >
-                                              <div
-                                                className="AriaInfo-root"
-                                                id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                                              >
-                                                A dialog showing a permalink to the comment
-                                              </div>
-                                            </div>
-                                          </div>
-                                          <button
-                                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseOut={[Function]}
-                                            onMouseOver={[Function]}
-                                            onTouchEnd={[Function]}
-                                            type="button"
-                                          >
-                                            <span>
-                                              Respect
-                                            </span>
-                                          </button>
-                                        </div>
-                                        <a
-                                          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-                                          href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-5"
-                                          id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
-                                          onBlur={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onMouseOut={[Function]}
-                                          onMouseOver={[Function]}
-                                          onTouchEnd={[Function]}
-                                          target="_parent"
-                                          type="button"
-                                        >
-                                          Read More of this Conversation &gt;
-                                        </a>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+              Read More of this Conversation &gt;
+            </a>
           </div>
         </div>
       </div>
     </div>
-  </section>
-</div>
-`;
-
-exports[`shows conversation 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={true}
-        className="BaseButton-root Tab-button Tab-primary Tab-active"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨1⁩ Comment
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-COMMENTS"
-    className="App-tabContent"
-    id="tabPane-COMMENTS"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
-    >
-      <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
-      >
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Sign in
-        </button>
-        <button
-          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Register
-        </button>
-      </div>
-      <div
-        className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
-      >
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
-        >
-          You are currently viewing a
-        </p>
-        <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
-        >
-          SINGLE CONVERSATION
-        </p>
-        <a
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
-          href="http://localhost/"
-          id="talk-comments-permalinkView-viewFullDiscussion"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          target="_parent"
-          type="button"
-        >
-          View Full Discussion
-        </a>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="ConversationThread-root"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root Comment-highlight"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    id="comment-comment-with-deepest-replies-5"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Markus
-                      </span>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <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="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                    >
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reply
-                        </span>
-                      </button>
-                      <div
-                        className="Popover-root"
-                      >
-                        <button
-                          aria-controls="permalink-popover-comment-with-deepest-replies-5"
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Share
-                          </span>
-                        </button>
-                        <div
-                          aria-hidden={true}
-                          aria-labelledby="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                          id="permalink-popover-comment-with-deepest-replies-5"
-                          role="popup"
-                        >
-                          <div
-                            className="AriaInfo-root"
-                            id="permalink-popover-comment-with-deepest-replies-5-ariainfo"
-                          >
-                            A dialog showing a permalink to the comment
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Respect
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          className="PermalinkView-replyList"
-        />
-      </div>
-    </div>
-  </section>
+  </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/comments/editComment.spec.tsx b/src/core/client/stream/test/comments/editComment.spec.tsx
index f9e626b27..f16b5140e 100644
--- a/src/core/client/stream/test/comments/editComment.spec.tsx
+++ b/src/core/client/stream/test/comments/editComment.spec.tsx
@@ -1,8 +1,11 @@
 import sinon from "sinon";
 import timekeeper from "timekeeper";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { settings, stories, users } from "../fixtures";
 import create from "./create";
@@ -67,75 +70,90 @@ afterAll(() => {
 });
 
 it("edit a comment", async () => {
-  timekeeper.freeze(stories[0].comments.edges[0].node.createdAt);
+  const commentData = stories[0].comments.edges[0].node;
+  timekeeper.freeze(commentData.createdAt);
   const testRenderer = createTestRenderer();
 
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot("render stream");
+  const comment = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`comment-${commentData.id}`)
+  );
+  expect(within(comment).toJSON()).toMatchSnapshot(
+    "render comment with edit button"
+  );
 
   // Open edit form.
-  testRenderer.root
-    .findByProps({ id: "comments-commentContainer-editButton-comment-0" })
+  within(comment)
+    .getByText("Edit")
     .props.onClick();
-  expect(testRenderer.toJSON()).toMatchSnapshot("edit form");
+  expect(within(comment).toJSON()).toMatchSnapshot("edit form");
 
   testRenderer.root
-    .findByProps({ inputId: "comments-editCommentForm-rte-comment-0" })
+    .findByProps({ inputId: `comments-editCommentForm-rte-${commentData.id}` })
     .props.onChange({ html: "Edited!" });
 
-  testRenderer.root
-    .findByProps({ id: "comments-editCommentForm-form-comment-0" })
+  within(comment)
+    .getByType("form")
     .props.onSubmit();
 
   // Test optimistic response.
-  expect(testRenderer.toJSON()).toMatchSnapshot("optimistic response");
+  expect(within(comment).toJSON()).toMatchSnapshot("optimistic response");
 
-  // Wait for loading.
-  await timeout();
+  // Wait for server response.
+  await waitForElement(() =>
+    within(comment).getByText("Edited! (from server)")
+  );
 
   // Test after server response.
-  expect(testRenderer.toJSON()).toMatchSnapshot("server response");
+  expect(within(comment).toJSON()).toMatchSnapshot("server response");
 });
 
 it("cancel edit", async () => {
-  timekeeper.freeze(stories[0].comments.edges[0].node.createdAt);
+  const commentData = stories[0].comments.edges[0].node;
+  timekeeper.freeze(commentData.createdAt);
   const testRenderer = createTestRenderer();
 
-  await timeout();
+  const comment = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`comment-${commentData.id}`)
+  );
 
   // Open edit form.
-  testRenderer.root
-    .findByProps({ id: "comments-commentContainer-editButton-comment-0" })
+  within(comment)
+    .getByText("Edit")
     .props.onClick();
 
   // Cancel edit form.
-  testRenderer.root
-    .findByProps({ id: "comments-editCommentForm-cancelButton-comment-0" })
+  within(comment)
+    .getByText("Cancel")
     .props.onClick();
-  expect(testRenderer.toJSON()).toMatchSnapshot("edit canceled");
+
+  expect(within(comment).toJSON()).toMatchSnapshot();
 });
 
 it("shows expiry message", async () => {
-  timekeeper.freeze(stories[0].comments.edges[0].node.createdAt);
+  const commentData = stories[0].comments.edges[0].node;
+  timekeeper.freeze(commentData.createdAt);
   const testRenderer = createTestRenderer();
 
-  await timeout();
+  const comment = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`comment-${commentData.id}`)
+  );
+
   jest.useFakeTimers();
+
   // Open edit form.
-  testRenderer.root
-    .findByProps({ id: "comments-commentContainer-editButton-comment-0" })
+  within(comment)
+    .getByText("Edit")
     .props.onClick();
 
   timekeeper.reset();
   jest.runOnlyPendingTimers();
 
   // Show edit time expired.
-  expect(testRenderer.toJSON()).toMatchSnapshot("edit time expired");
+  expect(within(comment).toJSON()).toMatchSnapshot("edit time expired");
 
   // Close edit form.
-  testRenderer.root
-    .findByProps({ id: "comments-editCommentForm-closeButton-comment-0" })
+  within(comment)
+    .getByText("Close")
     .props.onClick();
-  expect(testRenderer.toJSON()).toMatchSnapshot("edit form closed");
+  expect(within(comment).toJSON()).toMatchSnapshot("edit form closed");
 });
diff --git a/src/core/client/stream/test/comments/loadMore.spec.tsx b/src/core/client/stream/test/comments/loadMore.spec.tsx
index 8edf35b86..b9ba06672 100644
--- a/src/core/client/stream/test/comments/loadMore.spec.tsx
+++ b/src/core/client/stream/test/comments/loadMore.spec.tsx
@@ -1,8 +1,12 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  wait,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { comments, settings, stories } from "../fixtures";
 import create from "./create";
@@ -80,18 +84,33 @@ beforeEach(() => {
   }));
 });
 
-it("renders comment stream", async () => {
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+it("renders comment stream with load more button", async () => {
+  const streamLog = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
+  expect(within(streamLog).toJSON()).toMatchSnapshot();
 });
 
 it("loads more comments", async () => {
-  testRenderer.root
-    .findByProps({ id: "talk-comments-stream-loadMore" })
+  const streamLog = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
+
+  // Get amount of comments before.
+  const commentsBefore = within(streamLog).getAllByTestID(/^comment-/).length;
+
+  within(streamLog)
+    .getByText("Load More")
     .props.onClick();
 
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+  // Wait for load more button to disappear
+
+  // Should now have one more comment
+  await wait(() =>
+    expect(within(streamLog).queryByText("Load More")).toBeNull()
+  );
+
+  expect(within(streamLog).getAllByTestID(/^comment-/).length).toBe(
+    commentsBefore + 1
+  );
 });
diff --git a/src/core/client/stream/test/comments/permalinkView.spec.tsx b/src/core/client/stream/test/comments/permalinkView.spec.tsx
index 5cd33971d..66de53a89 100644
--- a/src/core/client/stream/test/comments/permalinkView.spec.tsx
+++ b/src/core/client/stream/test/comments/permalinkView.spec.tsx
@@ -1,8 +1,11 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { comments, commentWithReplies, settings, stories } from "../fixtures";
 import create from "./create";
@@ -73,21 +76,27 @@ beforeEach(() => {
 });
 
 it("renders permalink view", async () => {
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+  const tabPane = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("current-tab-pane")
+  );
+  expect(within(tabPane).toJSON()).toMatchSnapshot();
 });
 
 it("show all comments", async () => {
   const mockEvent = {
     preventDefault: sinon.mock().once(),
   };
-  testRenderer.root
-    .findByProps({
-      id: "talk-comments-permalinkView-viewFullDiscussion",
-    })
+
+  const tabPane = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("current-tab-pane")
+  );
+
+  within(tabPane)
+    .getByText("View Full Discussion")
     .props.onClick(mockEvent);
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+
+  await waitForElement(() =>
+    within(tabPane).getByTestID("comments-stream-log")
+  );
   mockEvent.preventDefault.verify();
 });
diff --git a/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx
index 5162388a6..173b2f1b7 100644
--- a/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx
+++ b/src/core/client/stream/test/comments/permalinkViewCommentNotFound.spec.tsx
@@ -1,8 +1,11 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { comments, settings, stories } from "../fixtures";
 import create from "./create";
@@ -54,9 +57,10 @@ beforeEach(() => {
 });
 
 it("renders permalink view with unknown comment", async () => {
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+  const tabPane = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("current-tab-pane")
+  );
+  expect(within(tabPane).toJSON()).toMatchSnapshot();
 });
 
 it("show all comments", async () => {
@@ -64,12 +68,16 @@ it("show all comments", async () => {
     preventDefault: sinon.mock().once(),
   };
 
-  testRenderer.root
-    .findByProps({
-      id: "talk-comments-permalinkView-viewFullDiscussion",
-    })
+  const tabPane = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("current-tab-pane")
+  );
+
+  within(tabPane)
+    .getByText("View Full Discussion")
     .props.onClick(mockEvent);
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+
+  await waitForElement(() =>
+    within(tabPane).getByTestID("comments-stream-log")
+  );
   mockEvent.preventDefault.verify();
 });
diff --git a/src/core/client/stream/test/comments/permalinkViewLoadMoreParents.spec.tsx b/src/core/client/stream/test/comments/permalinkViewLoadMoreParents.spec.tsx
index 87d5cd998..03efa7a9a 100644
--- a/src/core/client/stream/test/comments/permalinkViewLoadMoreParents.spec.tsx
+++ b/src/core/client/stream/test/comments/permalinkViewLoadMoreParents.spec.tsx
@@ -1,8 +1,12 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  wait,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { comments, settings, stories } from "../fixtures";
 import create from "./create";
@@ -86,20 +90,33 @@ beforeEach(() => {
   }));
 });
 
-it("renders permalink view", async () => {
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+it("renders conversation thread", async () => {
+  const conversationThread = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(
+      "comments-permalinkView-conversationThread"
+    )
+  );
+  expect(within(conversationThread).toJSON()).toMatchSnapshot();
 });
 
-it("views pervious comments", async () => {
-  testRenderer.root
-    .find(
-      node =>
-        node.props.onClick &&
-        node.props.id === "comments-conversationThread-showHiddenComments"
+it("shows hidden comments", async () => {
+  const conversationThread = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(
+      "comments-permalinkView-conversationThread"
     )
+  );
+
+  // Show hidden comments.
+  within(conversationThread)
+    .getByText("SHOW HIDDEN COMMENTS")
     .props.onClick();
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+
+  // Wait until button disappears.
+  await wait(() =>
+    expect(
+      within(conversationThread).queryByText("SHOW HIDDEN COMMENTS")
+    ).toBeNull()
+  );
+
+  expect(within(conversationThread).toJSON()).toMatchSnapshot();
 });
diff --git a/src/core/client/stream/test/comments/permalinkViewStoryNotFound.spec.tsx b/src/core/client/stream/test/comments/permalinkViewStoryNotFound.spec.tsx
index 460c1dbd3..6aadf6ec2 100644
--- a/src/core/client/stream/test/comments/permalinkViewStoryNotFound.spec.tsx
+++ b/src/core/client/stream/test/comments/permalinkViewStoryNotFound.spec.tsx
@@ -1,8 +1,7 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "talk-common/utils";
-
+import { waitForElement, within } from "talk-framework/testHelpers";
 import create from "talk-stream/test/comments/create";
 import { settings } from "talk-stream/test/fixtures";
 
@@ -28,7 +27,8 @@ beforeEach(() => {
 });
 
 it("renders permalink view with unknown story", async () => {
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+  const tabPane = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("current-tab-pane")
+  );
+  expect(within(tabPane).toJSON()).toMatchSnapshot();
 });
diff --git a/src/core/client/stream/test/comments/postComment.spec.tsx b/src/core/client/stream/test/comments/postComment.spec.tsx
index 790c344b2..dabd851c1 100644
--- a/src/core/client/stream/test/comments/postComment.spec.tsx
+++ b/src/core/client/stream/test/comments/postComment.spec.tsx
@@ -2,8 +2,11 @@ import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 import timekeeper from "timekeeper";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { baseComment, settings, stories, users } from "../fixtures";
 import create from "./create";
@@ -62,15 +65,11 @@ beforeEach(() => {
   }));
 });
 
-it("renders comment stream", async () => {
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
-});
-
 it("post a comment", async () => {
-  // Wait for loading.
-  await timeout();
+  const tabPane = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("current-tab-pane")
+  );
+
   testRenderer.root
     .findByProps({ inputId: "comments-postCommentForm-field" })
     .props.onChange({ html: "<strong>Hello world!</strong>" });
@@ -84,11 +83,14 @@ it("post a comment", async () => {
   timekeeper.reset();
 
   // Test optimistic response.
-  expect(testRenderer.toJSON()).toMatchSnapshot("optimistic response");
+  expect(
+    within(within(tabPane).queryAllByTestID(/^comment-/)[0]).toJSON()
+  ).toMatchSnapshot("optimistic response");
 
-  // Wait for loading.
-  await timeout();
-
-  // Test after server response.
-  expect(testRenderer.toJSON()).toMatchSnapshot("server response");
+  // Test for server response.
+  await waitForElement(() =>
+    within(within(tabPane).queryAllByTestID(/^comment-/)[0]).getByText(
+      "<strong>Hello world! (from server)</strong>"
+    )
+  );
 });
diff --git a/src/core/client/stream/test/comments/postLocalReply.spec.tsx b/src/core/client/stream/test/comments/postLocalReply.spec.tsx
index 326add8c4..d45dccfe8 100644
--- a/src/core/client/stream/test/comments/postLocalReply.spec.tsx
+++ b/src/core/client/stream/test/comments/postLocalReply.spec.tsx
@@ -2,8 +2,11 @@ import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 import timekeeper from "timekeeper";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import {
   baseComment,
@@ -69,25 +72,31 @@ beforeEach(() => {
 });
 
 it("renders comment stream", async () => {
+  const streamLog = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
   // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+  expect(within(streamLog).toJSON()).toMatchSnapshot();
 });
 
 it("post a reply", async () => {
-  // Wait for loading.
-  await timeout();
+  const streamLog = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
+
+  const deepestReply = within(streamLog).getByTestID(
+    "comment-comment-with-deepest-replies-5"
+  );
 
   // Open reply form.
-  testRenderer.root
-    .findByProps({
-      id:
-        "comments-commentContainer-replyButton-comment-with-deepest-replies-5",
-    })
+  within(deepestReply)
+    .getByText("Reply", { selector: "button" })
     .props.onClick();
 
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot("open reply form");
+  const form = await waitForElement(() =>
+    within(deepestReply).getByType("form")
+  );
+  expect(within(deepestReply).toJSON()).toMatchSnapshot("open reply form");
 
   // Write reply .
   testRenderer.root
@@ -97,18 +106,20 @@ it("post a reply", async () => {
     .props.onChange({ html: "<strong>Hello world!</strong>" });
 
   timekeeper.freeze(new Date(baseComment.createdAt));
-  testRenderer.root
-    .findByProps({
-      id: "comments-replyCommentForm-form-comment-with-deepest-replies-5",
-    })
-    .props.onSubmit();
+  form.props.onSubmit();
+
+  const deepestReplyList = within(streamLog).getByTestID(
+    "commentReplyList-comment-with-deepest-replies-5"
+  );
+
   // Test optimistic response.
-  expect(testRenderer.toJSON()).toMatchSnapshot("optimistic response");
+  expect(within(deepestReplyList).toJSON()).toMatchSnapshot(
+    "optimistic response"
+  );
   timekeeper.reset();
 
-  // Wait for loading.
-  await timeout();
-
   // Test after server response.
-  expect(testRenderer.toJSON()).toMatchSnapshot("server response");
+  await waitForElement(() =>
+    within(deepestReplyList).getByText("(from server)", { exact: false })
+  );
 });
diff --git a/src/core/client/stream/test/comments/postReply.spec.tsx b/src/core/client/stream/test/comments/postReply.spec.tsx
index 7aab966cf..4078163a3 100644
--- a/src/core/client/stream/test/comments/postReply.spec.tsx
+++ b/src/core/client/stream/test/comments/postReply.spec.tsx
@@ -2,8 +2,11 @@ import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 import timekeeper from "timekeeper";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { baseComment, settings, stories, users } from "../fixtures";
 import create from "./create";
@@ -63,23 +66,20 @@ beforeEach(() => {
   }));
 });
 
-it("renders comment stream", async () => {
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
-});
-
 it("post a reply", async () => {
-  // Wait for loading.
-  await timeout();
+  const streamLog = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
+
+  const comment = within(streamLog).getByTestID("comment-comment-0");
 
   // Open reply form.
-  testRenderer.root
-    .findByProps({ id: "comments-commentContainer-replyButton-comment-0" })
+  within(comment)
+    .getByText("Reply", { selector: "button" })
     .props.onClick();
 
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot("open reply form");
+  const form = await waitForElement(() => within(comment).getByType("form"));
+  expect(within(comment).toJSON()).toMatchSnapshot("open reply form");
 
   // Write reply .
   testRenderer.root
@@ -87,16 +87,20 @@ it("post a reply", async () => {
     .props.onChange({ html: "<strong>Hello world!</strong>" });
 
   timekeeper.freeze(new Date(baseComment.createdAt));
-  testRenderer.root
-    .findByProps({ id: "comments-replyCommentForm-form-comment-0" })
-    .props.onSubmit();
+  form.props.onSubmit();
+
+  const commentReplyList = within(streamLog).getByTestID(
+    "commentReplyList-comment-0"
+  );
+
   // Test optimistic response.
-  expect(testRenderer.toJSON()).toMatchSnapshot("optimistic response");
+  expect(within(commentReplyList).toJSON()).toMatchSnapshot(
+    "optimistic response"
+  );
   timekeeper.reset();
 
-  // Wait for loading.
-  await timeout();
-
   // Test after server response.
-  expect(testRenderer.toJSON()).toMatchSnapshot("server response");
+  await waitForElement(() =>
+    within(commentReplyList).getByText("(from server)", { exact: false })
+  );
 });
diff --git a/src/core/client/stream/test/comments/reaction.spec.tsx b/src/core/client/stream/test/comments/reaction.spec.tsx
new file mode 100644
index 000000000..9ec94ac4c
--- /dev/null
+++ b/src/core/client/stream/test/comments/reaction.spec.tsx
@@ -0,0 +1,81 @@
+import sinon from "sinon";
+
+import { waitForElement, within } from "talk-framework/testHelpers";
+
+import { settings, stories, users } from "../fixtures";
+import create from "./create";
+
+function createTestRenderer() {
+  const resolvers = {
+    Query: {
+      story: sinon.stub().callsFake((_: any, data: any) => {
+        expect(data).toEqual({
+          id: stories[0].id,
+          url: null,
+        });
+        return stories[0];
+      }),
+      me: sinon.stub().returns(users[0]),
+      settings: sinon.stub().returns(settings),
+    },
+    Mutation: {
+      createCommentReaction: sinon.stub().callsFake((_: any, data: any) => {
+        expect(data.input).toEqual({
+          commentID: stories[0].comments.edges[0].node.id,
+          commentRevisionID: stories[0].comments.edges[0].node.revision.id,
+          clientMutationId: "0",
+        });
+        return {
+          comment: {
+            id: stories[0].comments.edges[0].node.id,
+            revision: { id: stories[0].comments.edges[0].node.revision.id },
+            myActionPresence: { reaction: true },
+            actionCounts: { reaction: { total: 1 } },
+          },
+          clientMutationId: "0",
+        };
+      }),
+      removeCommentReaction: sinon.stub().callsFake((_: any, data: any) => {
+        expect(data.input).toEqual({
+          commentID: stories[0].comments.edges[0].node.id,
+          clientMutationId: "0",
+        });
+        return {
+          comment: {
+            id: stories[0].comments.edges[0].node.id,
+            revision: { id: stories[0].comments.edges[0].node.revision.id },
+            myActionPresence: { reaction: false },
+            actionCounts: { reaction: { total: 0 } },
+          },
+          clientMutationId: "0",
+        };
+      }),
+    },
+  };
+
+  const { testRenderer } = create({
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    initLocalState: localRecord => {
+      localRecord.setValue(stories[0].id, "storyID");
+      localRecord.setValue(true, "loggedIn");
+    },
+  });
+  return { testRenderer, resolvers };
+}
+
+it("create and remove reaction", async () => {
+  const commentID = stories[0].comments.edges[0].node.id;
+  const { testRenderer, resolvers } = createTestRenderer();
+  const comment = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`comment-${commentID}`)
+  );
+  const button = within(comment).getByText("Respect", { selector: "button" });
+  button.props.onClick({});
+  expect(within(button).toJSON()).toMatchSnapshot("Respected");
+  expect(resolvers.Mutation.createCommentReaction.called).toBe(true);
+  button.props.onClick({});
+  expect(within(button).toJSON()).toMatchSnapshot("Unrespected");
+  expect(resolvers.Mutation.removeCommentReaction.called).toBe(true);
+});
diff --git a/src/core/client/stream/test/comments/renderReplies.spec.tsx b/src/core/client/stream/test/comments/renderReplies.spec.tsx
index 086f38c19..793d8e67b 100644
--- a/src/core/client/stream/test/comments/renderReplies.spec.tsx
+++ b/src/core/client/stream/test/comments/renderReplies.spec.tsx
@@ -1,8 +1,11 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { settings, storyWithDeepReplies } from "../fixtures";
 import create from "./create";
@@ -32,8 +35,11 @@ beforeEach(() => {
   }));
 });
 
-it("renders comment stream", async () => {
+it("renders reply list", async () => {
+  const commentID = storyWithDeepReplies.comments.edges[1].node.id;
+  const commentReplyList = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`commentReplyList-${commentID}`)
+  );
   // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+  expect(within(commentReplyList).toJSON()).toMatchSnapshot();
 });
diff --git a/src/core/client/stream/test/comments/renderStream.spec.tsx b/src/core/client/stream/test/comments/renderStream.spec.tsx
index 5c9f46d35..ef5034a54 100644
--- a/src/core/client/stream/test/comments/renderStream.spec.tsx
+++ b/src/core/client/stream/test/comments/renderStream.spec.tsx
@@ -1,8 +1,11 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { settings, stories } from "../fixtures";
 import create from "./create";
@@ -32,8 +35,9 @@ beforeEach(() => {
   }));
 });
 
-it("renders comment stream", async () => {
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+it("renders app with comment stream", async () => {
+  await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
+  expect(within(testRenderer.root).toJSON()).toMatchSnapshot();
 });
diff --git a/src/core/client/stream/test/comments/reportComment.spec.tsx b/src/core/client/stream/test/comments/reportComment.spec.tsx
new file mode 100644
index 000000000..6dbe5fdbf
--- /dev/null
+++ b/src/core/client/stream/test/comments/reportComment.spec.tsx
@@ -0,0 +1,224 @@
+import sinon from "sinon";
+
+import { wait, waitForElement, within } from "talk-framework/testHelpers";
+
+import { timeout } from "talk-common/utils";
+import { settings, stories, users } from "../fixtures";
+import create from "./create";
+
+function createTestRenderer() {
+  const resolvers = {
+    Query: {
+      story: sinon.stub().callsFake((_: any, data: any) => {
+        expect(data).toEqual({
+          id: stories[0].id,
+          url: null,
+        });
+        return stories[0];
+      }),
+      me: sinon.stub().returns(users[0]),
+      settings: sinon.stub().returns(settings),
+    },
+    Mutation: {
+      createCommentFlag: sinon.stub().callsFake((_: any, data: any) => {
+        expect(data.input).toEqual({
+          commentID: stories[0].comments.edges[0].node.id,
+          commentRevisionID: stories[0].comments.edges[0].node.revision.id,
+          reason: "COMMENT_REPORTED_OFFENSIVE",
+          additionalDetails: "More info",
+          clientMutationId: "0",
+        });
+        return {
+          comment: {
+            id: stories[0].comments.edges[0].node.id,
+            myActionPresence: { flag: true },
+          },
+          clientMutationId: "0",
+        };
+      }),
+      createCommentDontAgree: sinon.stub().callsFake((_: any, data: any) => {
+        expect(data.input).toEqual({
+          commentID: stories[0].comments.edges[0].node.id,
+          commentRevisionID: stories[0].comments.edges[0].node.revision.id,
+          additionalDetails: "More info",
+          clientMutationId: "0",
+        });
+        return {
+          comment: {
+            id: stories[0].comments.edges[0].node.id,
+            myActionPresence: { dontAgree: true },
+          },
+          clientMutationId: "0",
+        };
+      }),
+    },
+  };
+
+  const { testRenderer } = create({
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    initLocalState: localRecord => {
+      localRecord.setValue(stories[0].id, "storyID");
+      localRecord.setValue(true, "loggedIn");
+    },
+  });
+  return { testRenderer, resolvers };
+}
+
+it("render popup", async () => {
+  const commentID = stories[0].comments.edges[0].node.id;
+  const { testRenderer } = createTestRenderer();
+  const comment = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`comment-${commentID}`)
+  );
+  const button = within(comment).getByText("Report", { selector: "button" });
+  button.props.onClick();
+
+  const popover = within(testRenderer.root).getByID(
+    button.props["aria-controls"]
+  );
+
+  expect(within(popover).toJSON()).toMatchSnapshot();
+});
+
+it("close popup", async () => {
+  const commentID = stories[0].comments.edges[0].node.id;
+  const { testRenderer } = createTestRenderer();
+  const comment = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`comment-${commentID}`)
+  );
+  const button = within(comment).getByText("Report", { selector: "button" });
+  button.props.onClick();
+
+  const popover = within(testRenderer.root).getByID(
+    button.props["aria-controls"]
+  );
+
+  // There is a once per frame click protection, so we wait a frame...
+  await timeout();
+
+  within(popover)
+    .getByLabelText("Close Popover", { exact: false })
+    .props.onClick({});
+  expect(within(popover).toJSON()).toMatchSnapshot();
+});
+
+it("render popup expanded", async () => {
+  const commentID = stories[0].comments.edges[0].node.id;
+  const { testRenderer } = createTestRenderer();
+  const comment = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`comment-${commentID}`)
+  );
+  const button = within(comment).getByText("Report", { selector: "button" });
+  button.props.onClick();
+
+  const popover = within(testRenderer.root).getByID(
+    button.props["aria-controls"]
+  );
+
+  const radioButton = within(popover).getByLabelText(
+    "This comment is offensive"
+  );
+
+  radioButton.props.onChange({
+    target: { type: "radio", value: radioButton.props.value },
+  });
+
+  expect(within(popover).toJSON()).toMatchSnapshot();
+});
+
+it("report comment as offensive", async () => {
+  const commentID = stories[0].comments.edges[0].node.id;
+  const { testRenderer, resolvers } = createTestRenderer();
+  const comment = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`comment-${commentID}`)
+  );
+  const button = within(comment).getByText("Report", { selector: "button" });
+  button.props.onClick();
+
+  const popover = within(testRenderer.root).getByID(
+    button.props["aria-controls"]
+  );
+
+  const radioButton = within(popover).getByLabelText(
+    "This comment is offensive"
+  );
+
+  radioButton.props.onChange({
+    target: { type: "radio", value: radioButton.props.value },
+  });
+
+  within(popover)
+    .getByLabelText("Please leave any additional information", { exact: false })
+    .props.onChange({ target: { value: "More info" } });
+
+  within(popover)
+    .getByType("form")
+    .props.onSubmit({});
+
+  await waitForElement(() =>
+    within(popover).getByText("Thank you", { exact: false })
+  );
+  expect(within(popover).toJSON()).toMatchSnapshot();
+
+  const reportedButton = within(comment).getByText("Reported", {
+    selector: "button",
+  });
+  expect(reportedButton.props.disabled).toBe(false);
+  within(comment)
+    .getByText("Dismiss")
+    .props.onClick();
+  expect(reportedButton.props.disabled).toBe(true);
+  expect(resolvers.Mutation.createCommentFlag.called).toBe(true);
+});
+
+it("dont agree with comment", async () => {
+  const commentID = stories[0].comments.edges[0].node.id;
+  const { testRenderer, resolvers } = createTestRenderer();
+  const comment = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`comment-${commentID}`)
+  );
+  const button = within(comment).getByText("Report", { selector: "button" });
+  button.props.onClick();
+
+  const popover = within(testRenderer.root).getByID(
+    button.props["aria-controls"]
+  );
+
+  const radioButton = within(popover).getByLabelText("I disagree", {
+    exact: false,
+  });
+
+  radioButton.props.onChange({
+    target: { type: "radio", value: radioButton.props.value },
+  });
+
+  within(popover)
+    .getByLabelText("Please leave any additional information", { exact: false })
+    .props.onChange({ target: { value: "More info" } });
+
+  within(popover)
+    .getByType("form")
+    .props.onSubmit({});
+
+  await waitForElement(() =>
+    within(popover).getByText("Thank you", { exact: false })
+  );
+
+  within(popover)
+    .getByText("Dismiss", { exact: false })
+    .props.onClick({});
+
+  await wait(() =>
+    expect(
+      within(popover).queryByText("Thank you", { exact: false })
+    ).toBeNull()
+  );
+
+  const reportedButton = within(comment).getByText("Reported", {
+    selector: "button",
+  });
+  expect(reportedButton.props.disabled).toBe(true);
+  expect(resolvers.Mutation.createCommentDontAgree.called).toBe(true);
+});
diff --git a/src/core/client/stream/test/comments/showAllReplies.spec.tsx b/src/core/client/stream/test/comments/showAllReplies.spec.tsx
index 833413bc3..c3e9f13a2 100644
--- a/src/core/client/stream/test/comments/showAllReplies.spec.tsx
+++ b/src/core/client/stream/test/comments/showAllReplies.spec.tsx
@@ -1,8 +1,12 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  wait,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { comments, settings, stories } from "../fixtures";
 import create from "./create";
@@ -91,17 +95,33 @@ beforeEach(() => {
 });
 
 it("renders comment stream", async () => {
+  const commentID = comments[0].id;
+  const commentReplyList = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`commentReplyList-${commentID}`)
+  );
   // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+  expect(within(commentReplyList).toJSON()).toMatchSnapshot();
 });
 
 it("show all replies", async () => {
-  testRenderer.root
-    .findByProps({ id: `talk-comments-replyList-showAll--${comments[0].id}` })
-    .props.onClick();
+  const commentID = comments[0].id;
+  const commentReplyList = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`commentReplyList-${commentID}`)
+  );
 
+  // Get amount of comments before.
+  const commentsBefore = within(commentReplyList).getAllByTestID(/^comment-/)
+    .length;
+
+  within(commentReplyList)
+    .getByText("Show All")
+    .props.onClick();
   // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+  await wait(() =>
+    expect(within(commentReplyList).queryByText("Show All")).toBeNull()
+  );
+
+  expect(within(commentReplyList).getAllByTestID(/^comment-/).length).toBe(
+    commentsBefore + 1
+  );
 });
diff --git a/src/core/client/stream/test/comments/showConversation.spec.tsx b/src/core/client/stream/test/comments/showConversation.spec.tsx
index aa8a4d907..84c88d8b0 100644
--- a/src/core/client/stream/test/comments/showConversation.spec.tsx
+++ b/src/core/client/stream/test/comments/showConversation.spec.tsx
@@ -1,8 +1,11 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { comments, settings, storyWithDeepestReplies } from "../fixtures";
 import create from "./create";
@@ -39,29 +42,28 @@ beforeEach(() => {
   }));
 });
 
-it("renders comment stream", async () => {
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+it("renders deepest comment with link", async () => {
+  const streamLog = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
+  const deepestReply = within(streamLog).getByTestID(
+    "comment-comment-with-deepest-replies-5"
+  );
+  expect(within(deepestReply).toJSON()).toMatchSnapshot();
 });
 
 it("shows conversation", async () => {
   const mockEvent = {
     preventDefault: sinon.mock().once(),
   };
-
-  // Wait for loading.
-  await timeout();
-
-  testRenderer.root
-    .findByProps({
-      id:
-        "comments-commentContainer-showConversation-comment-with-deepest-replies-5",
-    })
+  const streamLog = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
+  within(streamLog)
+    .getByText("Read More of this Conversation", { exact: false })
     .props.onClick(mockEvent);
 
-  // Wait for loading.
-  await timeout();
-
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+  await waitForElement(() =>
+    within(testRenderer.root).getByText("SINGLE CONVERSATION")
+  );
 });
diff --git a/src/core/client/stream/test/profile/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/loadMore.spec.tsx.snap
index dc3925390..dfc05dec9 100644
--- a/src/core/client/stream/test/profile/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/profile/__snapshots__/loadMore.spec.tsx.snap
@@ -1,472 +1,139 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`loads more comments 1`] = `
+exports[`renders profile 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  className="HorizontalGutter-root HorizontalGutter-double"
+  data-testid="profile-commentHistory"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
+  <h1
+    className="Typography-root Typography-heading3 Typography-colorTextPrimary"
   >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
+    Comment History
+  </h1>
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
+    data-testid="historyComment-comment-0"
+  >
+    <h1
+      className="Typography-root Typography-heading4 Typography-colorTextPrimary"
     >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
+      Story: ⁨title⁩
+    </h1>
+    <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
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      <div
+        className="HTMLContent-root"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Joining Too",
+          }
+        }
+      />
+    </div>
+    <div
+      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
+    >
+      <a
+        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
+        href="http://localhost/stories/story-1?commentID=comment-0"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         onTouchEnd={[Function]}
-        role="tab"
+        target="_parent"
         type="button"
       >
-        <span>
-          ⁨2⁩ Comments
+        <span
+          aria-hidden="true"
+          className="Icon-root Icon-sm"
+        >
+          launch
         </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-PROFILE"
-    className="App-tabContent"
-    id="tabPane-PROFILE"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-double"
-    >
-      <div
-        className="Flex-root"
-      >
-        <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap"
-        >
-          <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Signed in as 
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              Markus
-            </span>
-            .
-          </div>
-          <div
-            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-          >
-            <span>
-              Not you? 
-            </span>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Sign Out
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-double"
-      >
-        <h1
-          className="Typography-root Typography-heading3 Typography-colorTextPrimary"
-        >
-          Comment History
-        </h1>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <h1
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-          >
-            Story: ⁨title⁩
-          </h1>
-          <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
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Joining Too",
-                }
-              }
-            />
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
-          >
-            <a
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
-              href="http://localhost/stories/story-1?commentID=comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              target="_parent"
-              type="button"
-            >
-              <span
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                launch
-              </span>
-              <span>
-                View Conversation
-              </span>
-            </a>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <h1
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-          >
-            Story: ⁨title⁩
-          </h1>
-          <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
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "What's up?",
-                }
-              }
-            />
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
-          >
-            <a
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
-              href="http://localhost/stories/story-1?commentID=comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              target="_parent"
-              type="button"
-            >
-              <span
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                launch
-              </span>
-              <span>
-                View Conversation
-              </span>
-            </a>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <h1
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-          >
-            Story: ⁨title⁩
-          </h1>
-          <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
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Hey!",
-                }
-              }
-            />
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
-          >
-            <a
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
-              href="http://localhost/stories/story-1?commentID=comment-2"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              target="_parent"
-              type="button"
-            >
-              <span
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                launch
-              </span>
-              <span>
-                View Conversation
-              </span>
-            </a>
-          </div>
-        </div>
-      </div>
+        <span>
+          View Conversation
+        </span>
+      </a>
     </div>
-  </section>
-</div>
-`;
-
-exports[`renders comment stream 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
->
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
+  </div>
+  <div
+    className="HorizontalGutter-root HorizontalGutter-full"
+    data-testid="historyComment-comment-1"
   >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
+    <h1
+      className="Typography-root Typography-heading4 Typography-colorTextPrimary"
     >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
+      Story: ⁨title⁩
+    </h1>
+    <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
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      <div
+        className="HTMLContent-root"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "What's up?",
+          }
+        }
+      />
+    </div>
+    <div
+      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
+    >
+      <a
+        className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
+        href="http://localhost/stories/story-1?commentID=comment-1"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         onTouchEnd={[Function]}
-        role="tab"
+        target="_parent"
         type="button"
       >
-        <span>
-          ⁨2⁩ Comments
+        <span
+          aria-hidden="true"
+          className="Icon-root Icon-sm"
+        >
+          launch
         </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-PROFILE"
-    className="App-tabContent"
-    id="tabPane-PROFILE"
-    role="tabpanel"
-  >
-    <div
-      className="HorizontalGutter-root HorizontalGutter-double"
-    >
-      <div
-        className="Flex-root"
-      >
-        <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap"
-        >
-          <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            Signed in as 
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              Markus
-            </span>
-            .
-          </div>
-          <div
-            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-          >
-            <span>
-              Not you? 
-            </span>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Sign Out
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-double"
-      >
-        <h1
-          className="Typography-root Typography-heading3 Typography-colorTextPrimary"
-        >
-          Comment History
-        </h1>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <h1
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-          >
-            Story: ⁨title⁩
-          </h1>
-          <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
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Joining Too",
-                }
-              }
-            />
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
-          >
-            <a
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
-              href="http://localhost/stories/story-1?commentID=comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              target="_parent"
-              type="button"
-            >
-              <span
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                launch
-              </span>
-              <span>
-                View Conversation
-              </span>
-            </a>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <h1
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-          >
-            Story: ⁨title⁩
-          </h1>
-          <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
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "What's up?",
-                }
-              }
-            />
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
-          >
-            <a
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
-              href="http://localhost/stories/story-1?commentID=comment-1"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              target="_parent"
-              type="button"
-            >
-              <span
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                launch
-              </span>
-              <span>
-                View Conversation
-              </span>
-            </a>
-          </div>
-        </div>
-        <button
-          aria-controls="talk-profile-commentHistory-log"
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
-          disabled={false}
-          id="talk-profile-commentHistory-loadMore"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          type="button"
-        >
-          Load More
-        </button>
-      </div>
+        <span>
+          View Conversation
+        </span>
+      </a>
     </div>
-  </section>
+  </div>
+  <button
+    aria-controls="talk-profile-commentHistory-log"
+    className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-fullWidth"
+    disabled={false}
+    id="talk-profile-commentHistory-loadMore"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseOut={[Function]}
+    onMouseOver={[Function]}
+    onTouchEnd={[Function]}
+    type="button"
+  >
+    Load More
+  </button>
 </div>
 `;
diff --git a/src/core/client/stream/test/profile/__snapshots__/renderProfile.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/renderProfile.spec.tsx.snap
index df0256a54..e85fa1731 100644
--- a/src/core/client/stream/test/profile/__snapshots__/renderProfile.spec.tsx.snap
+++ b/src/core/client/stream/test/profile/__snapshots__/renderProfile.spec.tsx.snap
@@ -1,202 +1,174 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders profile 1`] = `
-<div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+<section
+  aria-labelledby="tab-PROFILE"
+  className="App-tabContent"
+  data-testid="current-tab-pane"
+  id="tabPane-PROFILE"
+  role="tabpanel"
 >
-  <ul
-    className="TabBar-root TabBar-primary"
-    role="tablist"
-  >
-    <li
-      className="Tab-root"
-      id="tab-COMMENTS"
-      role="presentation"
-    >
-      <button
-        aria-controls="tabPane-COMMENTS"
-        aria-selected={false}
-        className="BaseButton-root Tab-button Tab-primary"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        role="tab"
-        type="button"
-      >
-        <span>
-          ⁨2⁩ Comments
-        </span>
-      </button>
-    </li>
-  </ul>
-  <section
-    aria-labelledby="tab-PROFILE"
-    className="App-tabContent"
-    id="tabPane-PROFILE"
-    role="tabpanel"
+  <div
+    className="HorizontalGutter-root HorizontalGutter-double"
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Flex-root"
     >
       <div
-        className="Flex-root"
+        className="Flex-flex Flex-halfItemGutter Flex-wrap"
       >
         <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
         >
-          <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          Signed in as 
+          <span
+            className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
           >
-            Signed in as 
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              Markus
-            </span>
-            .
-          </div>
-          <div
-            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
-          >
-            <span>
-              Not you? 
-            </span>
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Sign Out
-            </button>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-double"
-      >
-        <h1
-          className="Typography-root Typography-heading3 Typography-colorTextPrimary"
-        >
-          Comment History
-        </h1>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <h1
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary"
-          >
-            Story: ⁨title⁩
-          </h1>
-          <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
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Joining Too",
-                }
-              }
-            />
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
-          >
-            <a
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
-              href="http://localhost/stories/story-1?commentID=comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              target="_parent"
-              type="button"
-            >
-              <span
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                launch
-              </span>
-              <span>
-                View Conversation
-              </span>
-            </a>
-          </div>
+            Markus
+          </span>
+          .
         </div>
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
-          <h1
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+          <span>
+            Not you? 
+          </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
           >
-            Story: ⁨title⁩
-          </h1>
-          <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
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-          >
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Hey!",
-                }
-              }
-            />
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
-          >
-            <a
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
-              href="http://localhost/stories/story-2?commentID=comment-2"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              target="_parent"
-              type="button"
-            >
-              <span
-                aria-hidden="true"
-                className="Icon-root Icon-sm"
-              >
-                launch
-              </span>
-              <span>
-                View Conversation
-              </span>
-            </a>
-          </div>
+            Sign Out
+          </button>
         </div>
       </div>
     </div>
-  </section>
-</div>
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+      data-testid="profile-commentHistory"
+    >
+      <h1
+        className="Typography-root Typography-heading3 Typography-colorTextPrimary"
+      >
+        Comment History
+      </h1>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+        data-testid="historyComment-comment-0"
+      >
+        <h1
+          className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+        >
+          Story: ⁨title⁩
+        </h1>
+        <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
+          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        >
+          <div
+            className="HTMLContent-root"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Joining Too",
+              }
+            }
+          />
+        </div>
+        <div
+          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
+        >
+          <a
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
+            href="http://localhost/stories/story-1?commentID=comment-0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            target="_parent"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              className="Icon-root Icon-sm"
+            >
+              launch
+            </span>
+            <span>
+              View Conversation
+            </span>
+          </a>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+        data-testid="historyComment-comment-2"
+      >
+        <h1
+          className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+        >
+          Story: ⁨title⁩
+        </h1>
+        <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
+          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        >
+          <div
+            className="HTMLContent-root"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "Hey!",
+              }
+            }
+          />
+        </div>
+        <div
+          className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
+        >
+          <a
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantUnderlined"
+            href="http://localhost/stories/story-2?commentID=comment-2"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            target="_parent"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              className="Icon-root Icon-sm"
+            >
+              launch
+            </span>
+            <span>
+              View Conversation
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
 `;
diff --git a/src/core/client/stream/test/profile/loadMore.spec.tsx b/src/core/client/stream/test/profile/loadMore.spec.tsx
index 50f7cd423..7707dd173 100644
--- a/src/core/client/stream/test/profile/loadMore.spec.tsx
+++ b/src/core/client/stream/test/profile/loadMore.spec.tsx
@@ -1,8 +1,12 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  wait,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { comments, meWithComments, settings, stories } from "../fixtures";
 import create from "./create";
@@ -76,18 +80,33 @@ beforeEach(() => {
   }));
 });
 
-it("renders comment stream", async () => {
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+it("renders profile", async () => {
+  const commentHistory = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("profile-commentHistory")
+  );
+  expect(within(commentHistory).toJSON()).toMatchSnapshot();
 });
 
 it("loads more comments", async () => {
-  testRenderer.root
-    .findByProps({ id: "talk-profile-commentHistory-loadMore" })
+  const commentHistory = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("profile-commentHistory")
+  );
+
+  // Get amount of comments before.
+  const commentsBefore = within(commentHistory).getAllByTestID(
+    /^historyComment-/
+  ).length;
+
+  within(commentHistory)
+    .getByText("Load More")
     .props.onClick();
 
   // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+  await wait(() =>
+    expect(within(commentHistory).queryByText("Load More")).toBeNull()
+  );
+
+  expect(within(commentHistory).getAllByTestID(/^historyComment-/).length).toBe(
+    commentsBefore + 1
+  );
 });
diff --git a/src/core/client/stream/test/profile/renderProfile.spec.tsx b/src/core/client/stream/test/profile/renderProfile.spec.tsx
index fa9727732..91d1428ca 100644
--- a/src/core/client/stream/test/profile/renderProfile.spec.tsx
+++ b/src/core/client/stream/test/profile/renderProfile.spec.tsx
@@ -1,8 +1,11 @@
 import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
-import { timeout } from "talk-common/utils";
-import { createSinonStub } from "talk-framework/testHelpers";
+import {
+  createSinonStub,
+  waitForElement,
+  within,
+} from "talk-framework/testHelpers";
 
 import { meWithComments, settings, stories } from "../fixtures";
 import create from "./create";
@@ -34,7 +37,8 @@ beforeEach(() => {
 });
 
 it("renders profile", async () => {
-  // Wait for loading.
-  await timeout();
-  expect(testRenderer.toJSON()).toMatchSnapshot();
+  const tabPane = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("current-tab-pane")
+  );
+  expect(within(tabPane).toJSON()).toMatchSnapshot();
 });
diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css
index ed8fe6c1a..85b24c5a2 100644
--- a/src/core/client/ui/components/Popover/Popover.css
+++ b/src/core/client/ui/components/Popover/Popover.css
@@ -7,6 +7,7 @@
   box-sizing: border-box;
   box-shadow: var(--elevation-main);
   border-radius: var(--round-corners);
+  z-index: var(--zindex-popover);
 }
 
 .top {
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index d47aff060..a5b7c58aa 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -1,12 +1,6 @@
 import cn from "classnames";
 import React from "react";
-import {
-  Manager,
-  Popper,
-  PopperArrowProps,
-  Reference,
-  RefHandler,
-} from "react-popper";
+import { Manager, Popper, Reference, RefHandler } from "react-popper";
 
 import { withStyles } from "talk-ui/hocs";
 
@@ -31,6 +25,7 @@ type Placement =
 interface BodyRenderProps {
   toggleVisibility: () => void;
   visible: boolean;
+  scheduleUpdate: () => void;
 }
 
 interface ChildrenRenderProps {
@@ -112,7 +107,7 @@ class Popover extends React.Component<PopoverProps> {
       <div className={cn(classes.root, className)} {...rest}>
         <Manager>
           <Reference>
-            {(props: PopperArrowProps) =>
+            {props =>
               children({
                 forwardRef: props.ref,
                 toggleVisibility: this.toggleVisibility,
@@ -121,7 +116,7 @@ class Popover extends React.Component<PopoverProps> {
             }
           </Reference>
           <Popper placement={placement} eventsEnabled positionFixed={false}>
-            {(props: PopperArrowProps) => (
+            {props => (
               <div
                 id={id}
                 role="popup"
@@ -137,6 +132,7 @@ class Popover extends React.Component<PopoverProps> {
                   >
                     {typeof body === "function"
                       ? body({
+                          scheduleUpdate: props.scheduleUpdate,
                           toggleVisibility: this.toggleVisibility,
                           visible: this.state.visible,
                         })
diff --git a/src/core/client/ui/components/Tabs/TabPane.tsx b/src/core/client/ui/components/Tabs/TabPane.tsx
index a3c84480c..7caa0a7d0 100644
--- a/src/core/client/ui/components/Tabs/TabPane.tsx
+++ b/src/core/client/ui/components/Tabs/TabPane.tsx
@@ -12,9 +12,10 @@ export interface TabBarProps {
 }
 
 const TabPane: StatelessComponent<TabBarProps> = props => {
-  const { className, children, tabId } = props;
+  const { className, children, tabId, ...rest } = props;
   return (
     <section
+      {...rest}
       className={className}
       key={tabId}
       id={`tabPane-${tabId}`}
diff --git a/src/locales/en-US/framework.ftl b/src/locales/en-US/framework.ftl
index 0c962e00f..039fca2c5 100644
--- a/src/locales/en-US/framework.ftl
+++ b/src/locales/en-US/framework.ftl
@@ -18,7 +18,8 @@ framework-shortNumber-1000000000 = 0.0B
 ## Validation
 
 framework-validation-required = This field is required.
-framework-validation-tooShort = The field must contain at least {$minLength} characters.
+framework-validation-tooShort = Please enter at least {$minLength} characters.
+framework-validation-tooLong = Please enter at max {$maxLength} characters.
 framework-validation-usernameTooShort = Username must contain at least {$minLength} characters.
 framework-validation-usernameTooLong = Usernames cannot be longer than {$maxLength} characters.
 framework-validation-invalidCharacters = Invalid characters. Try again.
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index e912972b2..276ed6635 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -85,6 +85,9 @@ comments-permalinkView-singleConversation = SINGLE CONVERSATION
 comments-inReplyTo = In reply to <username></username>
 comments-replyTo = Replying to: <username></username>
 
+comments-reportButton-report = Report
+comments-reportButton-reported = Reported
+
 ## Profile Tab
 profile-historyComment-viewConversation = View Conversation
 profile-historyComment-replies = Replies {$replyCount}
@@ -93,3 +96,25 @@ profile-historyComment-story = Story: {$title}
 profile-profileQuery-errorLoadingProfile = Error loading profile
 profile-profileQuery-storyNotFound = Story not found
 profile-commentHistory-loadMore = Load More
+
+## Report Comment Popover
+comments-reportPopover-reportThisComment = Report This Comment
+comments-reportPopover-whyAreYouReporting = Why are you reporting this comment?
+
+comments-reportPopover-reasonOffensive = This comment is offensive
+comments-reportPopover-reasonIDisagree = I disagree with this comment
+comments-reportPopover-reasonSpam = This looks like an ad or marketing
+comments-reportPopover-reasonOther = Other
+
+comments-reportPopover-pleaseLeaveAdditionalInformation =
+  Please leave any additional information that may be helpful to our moderators. (Optional)
+
+comments-reportPopover-maxCharacters = Max. { $maxCharacters } Characters
+comments-reportPopover-cancel = Cancel
+comments-reportPopover-submit = Submit
+
+comments-reportPopover-thankYou = Thank you!
+comments-reportPopover-receivedMessage =
+  We’ve received your message. Reports from members like you keep the community safe.
+
+comments-reportPopover-dismiss = Dismiss