diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
index cb01d2c1b..898850de7 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -34,11 +34,11 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -180,11 +180,11 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -290,11 +290,11 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -321,11 +321,11 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -546,11 +546,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -577,11 +577,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index 6293da7d8..4b0ee2dc7 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -34,11 +34,11 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -70,11 +70,11 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -124,11 +124,11 @@ exports[`accepts correct password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -215,11 +215,11 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -251,11 +251,11 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -287,11 +287,11 @@ exports[`accepts correct password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -318,11 +318,11 @@ exports[`accepts correct password confirmation 1`] = `
           value="testtest"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -432,11 +432,11 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -468,11 +468,11 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -499,11 +499,11 @@ exports[`accepts valid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -590,11 +590,11 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -649,11 +649,11 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -680,11 +680,11 @@ exports[`accepts valid username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -771,11 +771,11 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -807,11 +807,11 @@ exports[`checks for invalid characters in username 1`] = `
           value="$%$§$%$§%"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -843,11 +843,11 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -874,11 +874,11 @@ exports[`checks for invalid characters in username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -965,11 +965,11 @@ exports[`checks for invalid email 1`] = `
           value="invalid-email"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1001,11 +1001,11 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1037,11 +1037,11 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1068,11 +1068,11 @@ exports[`checks for invalid email 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1159,11 +1159,11 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1195,11 +1195,11 @@ exports[`checks for too long username 1`] = `
           value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1231,11 +1231,11 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1262,11 +1262,11 @@ exports[`checks for too long username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1353,11 +1353,11 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1389,11 +1389,11 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1425,11 +1425,11 @@ exports[`checks for too short password 1`] = `
           value="pass"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1456,11 +1456,11 @@ exports[`checks for too short password 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1547,11 +1547,11 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1583,11 +1583,11 @@ exports[`checks for too short username 1`] = `
           value="u"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1619,11 +1619,11 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1650,11 +1650,11 @@ exports[`checks for too short username 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1741,11 +1741,11 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1777,11 +1777,11 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1813,11 +1813,11 @@ exports[`checks for wrong password confirmation 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -1844,11 +1844,11 @@ exports[`checks for wrong password confirmation 1`] = `
           value="not-matching"
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -2077,11 +2077,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -2113,11 +2113,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -2149,11 +2149,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
@@ -2180,11 +2180,11 @@ exports[`shows error when submitting empty form 1`] = `
           value=""
         />
         <div
-          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <span
             aria-hidden="true"
-            className="Icon-root ValidationMessage-icon Icon-sm"
+            className="Icon-root MessageIcon-root Icon-sm"
           >
             warning
           </span>
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 1d82d7bb9..19c1b6129 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -325,278 +325,15 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <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]}
-          onMouseDown={[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]}
-          onMouseDown={[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
-                className=" RTE-toolbarDisabled 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
-                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>
-          </div>
-        </div>
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[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="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar 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
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Joining Too",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-0"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
-            </div>
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "What's up?",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-1"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </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]}
-        onMouseDown={[Function]}
-        onMouseOut={[Function]}
-        onMouseOver={[Function]}
-        onTouchEnd={[Function]}
-        type="button"
-      >
-        Load more
-      </button>
-    </div>
+  <div>
+    Unknown argument "clientAuthRevision" on field "me" of type "Query".
+
+GraphQL request (5:6)
+4: ) {
+5:   me(clientAuthRevision: $authRevision) {
+        ^
+6:     ...StreamContainer_me
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index 19ba2686a..89eba3ff5 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -4,78 +4,15 @@ exports[`renders permalink view 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div
-    className="PermalinkView-root"
-  >
-    <a
-      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-      href="http://localhost/"
-      id="talk-comments-permalinkView-showAllComments"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-      onTouchEnd={[Function]}
-      target="_parent"
-      type="button"
-    >
-      Show all comments
-    </a>
-    <div
-      className="Indent-root"
-    >
-      <div
-        className="Comment-root"
-        role="article"
-      >
-        <div
-          className="Flex-root Comment-topBar 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
-          className="HTMLContent-root"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "Joining Too",
-            }
-          }
-        />
-        <div
-          className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-        >
-          <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-            id="comments-commentContainer-replyButton-comment-0"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseOut={[Function]}
-            onMouseOver={[Function]}
-            onTouchEnd={[Function]}
-            type="button"
-          >
-            <span>
-              Reply
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
+  <div>
+    Unknown argument "clientAuthRevision" on field "me" of type "Query".
+
+GraphQL request (6:6)
+5: ) {
+6:   me(clientAuthRevision: $authRevision) {
+        ^
+7:     ...PermalinkViewContainer_me
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
index b7f4fc521..d5c3a172c 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -5,7 +5,14 @@ exports[`renders permalink view with unknown asset 1`] = `
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div>
-    Asset not found
+    Unknown argument "clientAuthRevision" on field "me" of type "Query".
+
+GraphQL request (6:6)
+5: ) {
+6:   me(clientAuthRevision: $authRevision) {
+        ^
+7:     ...PermalinkViewContainer_me
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index 931557b1a..39cd1503f 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -4,30 +4,15 @@ exports[`renders permalink view with unknown comment 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <div
-    className="PermalinkView-root"
-  >
-    <a
-      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
-      href="http://localhost/"
-      id="talk-comments-permalinkView-showAllComments"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onMouseDown={[Function]}
-      onMouseOut={[Function]}
-      onMouseOver={[Function]}
-      onTouchEnd={[Function]}
-      target="_parent"
-      type="button"
-    >
-      Show all comments
-    </a>
-    <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-    >
-      Comment not found
-    </p>
+  <div>
+    Unknown argument "clientAuthRevision" on field "me" of type "Query".
+
+GraphQL request (6:6)
+5: ) {
+6:   me(clientAuthRevision: $authRevision) {
+        ^
+7:     ...PermalinkViewContainer_me
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
index dacf75add..97fd167f7 100644
--- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap
@@ -718,301 +718,15 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <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]}
-              onMouseDown={[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
-                  className="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
-                  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>
-            </div>
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-          >
-            <div
-              className="PostCommentForm-poweredBy"
-            >
-              <span
-                className="Typography-root Typography-inputDescription 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]}
-              onMouseDown={[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="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar 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
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Joining Too",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-0"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
-            </div>
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "What's up?",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-1"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    Unknown argument "clientAuthRevision" on field "me" of type "Query".
+
+GraphQL request (5:6)
+4: ) {
+5:   me(clientAuthRevision: $authRevision) {
+        ^
+6:     ...StreamContainer_me
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
index 63360eccb..a7fce87a7 100644
--- a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap
@@ -1279,301 +1279,15 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <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]}
-              onMouseDown={[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
-                  className="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
-                  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>
-            </div>
-          </div>
-          <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart Flex-directionRow"
-          >
-            <div
-              className="PostCommentForm-poweredBy"
-            >
-              <span
-                className="Typography-root Typography-inputDescription 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]}
-              onMouseDown={[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="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar 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
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Joining Too",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-0"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
-            </div>
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "What's up?",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-1"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    Unknown argument "clientAuthRevision" on field "me" of type "Query".
+
+GraphQL request (5:6)
+4: ) {
+5:   me(clientAuthRevision: $authRevision) {
+        ^
+6:     ...StreamContainer_me
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index bc69ca2ca..dbdc4fd2e 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -4,374 +4,15 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <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]}
-          onMouseDown={[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]}
-          onMouseDown={[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
-                className=" RTE-toolbarDisabled 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
-                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>
-          </div>
-        </div>
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[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="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar 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
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Joining Too",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-0"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar 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
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "I like yoghurt",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-with-replies"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-          id="talk-comments-replyList-log--comment-with-replies"
-          role="log"
-        >
-          <div
-            className="Indent-root Indent-level1"
-          >
-            <div
-              className="Comment-root"
-              role="article"
-            >
-              <div
-                className="Flex-root Comment-topBar 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
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-              >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  <span>
-                    Reply
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            className="Indent-root Indent-level1"
-          >
-            <div
-              className="Comment-root"
-              role="article"
-            >
-              <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  Lukas
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
-                >
-                  2018-07-06T18:20:00.000Z
-                </time>
-              </div>
-              <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-              >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  <span>
-                    Reply
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    Unknown argument "clientAuthRevision" on field "me" of type "Query".
+
+GraphQL request (5:6)
+4: ) {
+5:   me(clientAuthRevision: $authRevision) {
+        ^
+6:     ...StreamContainer_me
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index befacc4ef..dbdc4fd2e 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -4,262 +4,15 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <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]}
-          onMouseDown={[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]}
-          onMouseDown={[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
-                className=" RTE-toolbarDisabled 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
-                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>
-          </div>
-        </div>
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[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="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar 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
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Joining Too",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-0"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          className="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-            >
-              <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-              >
-                Lukas
-              </span>
-              <time
-                className="Timestamp-root RelativeTime-root"
-                dateTime="2018-07-06T18:20:00.000Z"
-                title="2018-07-06T18:20:00.000Z"
-              >
-                2018-07-06T18:20:00.000Z
-              </time>
-            </div>
-            <div
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "What's up?",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-1"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    Unknown argument "clientAuthRevision" on field "me" of type "Query".
+
+GraphQL request (5:6)
+4: ) {
+5:   me(clientAuthRevision: $authRevision) {
+        ^
+6:     ...StreamContainer_me
+
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index d8a24d800..4bfa26a4a 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -4,284 +4,15 @@ exports[`renders comment stream 1`] = `
 <div
   className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
-  <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]}
-          onMouseDown={[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]}
-          onMouseDown={[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
-                className=" RTE-toolbarDisabled 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
-                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>
-          </div>
-        </div>
-        <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseDown={[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="Indent-root"
-        >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root Comment-topBar 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
-              className="HTMLContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Joining Too",
-                }
-              }
-            />
-            <div
-              className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-            >
-              <button
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                id="comments-commentContainer-replyButton-comment-0"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseDown={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="button"
-              >
-                <span>
-                  Reply
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-          id="talk-comments-replyList-log--comment-0"
-          role="log"
-        >
-          <div
-            className="Indent-root Indent-level1"
-          >
-            <div
-              className="Comment-root"
-              role="article"
-            >
-              <div
-                className="Flex-root Comment-topBar Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-              >
-                <span
-                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                >
-                  Lukas
-                </span>
-                <time
-                  className="Timestamp-root RelativeTime-root"
-                  dateTime="2018-07-06T18:20:00.000Z"
-                  title="2018-07-06T18:20:00.000Z"
-                >
-                  2018-07-06T18:20:00.000Z
-                </time>
-              </div>
-              <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
-              >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
-                >
-                  <span>
-                    Reply
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            className="Indent-root 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]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
-            >
-              Show all
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div>
+    Unknown argument "clientAuthRevision" on field "me" of type "Query".
+
+GraphQL request (5:6)
+4: ) {
+5:   me(clientAuthRevision: $authRevision) {
+        ^
+6:     ...StreamContainer_me
+
   </div>
 </div>
 `;
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css b/src/core/client/ui/components/Message/Message.css
similarity index 75%
rename from src/core/client/ui/components/ValidationMessage/ValidationMessage.css
rename to src/core/client/ui/components/Message/Message.css
index b3d6a6290..5811ad377 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css
+++ b/src/core/client/ui/components/Message/Message.css
@@ -7,8 +7,15 @@
   padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
   box-sizing: border-box;
   border-radius: var(--round-corners);
+  border-width: 1px;
+  border-style: solid;
   border-left-width: calc(0.5 * var(--spacing-unit));
-  border-left-style: solid;
+}
+
+.colorGrey {
+  background-color: var(--palette-common-white);
+  border-color: var(--palette-grey-main);
+  color: var(--palette-grey-main);
 }
 
 .colorError {
@@ -21,7 +28,3 @@
   display: flex;
   width: 100%;
 }
-
-.icon {
-  margin-right: var(--spacing-unit);
-}
diff --git a/src/core/client/ui/components/Message/Message.mdx b/src/core/client/ui/components/Message/Message.mdx
new file mode 100644
index 000000000..828d18036
--- /dev/null
+++ b/src/core/client/ui/components/Message/Message.mdx
@@ -0,0 +1,28 @@
+---
+name: Message
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import Message from './Message'
+import MessageIcon from './MessageIcon'
+import HorizontalGutter from '../HorizontalGutter'
+
+# Message
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <Message>This is a message</Message>
+    <Message fullWidth>Contrary to popular belief, Lorem Ipsum is not simply random text.</Message>
+  </HorizontalGutter>
+</Playground>
+
+## Usage with icon
+<Playground>
+  <HorizontalGutter>
+    <Message><MessageIcon size="sm">alarm</MessageIcon>Edit: 1 min 23 secs Remaining</Message>
+  </HorizontalGutter>
+</Playground>
+
+
diff --git a/src/core/client/ui/components/Message/Message.spec.tsx b/src/core/client/ui/components/Message/Message.spec.tsx
new file mode 100644
index 000000000..ac69cea85
--- /dev/null
+++ b/src/core/client/ui/components/Message/Message.spec.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import Message from "./Message";
+import MessageIcon from "./MessageIcon";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Message> = {
+    className: "custom",
+    children: "Hello World",
+  };
+  const renderer = TestRenderer.create(<Message {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders icon", () => {
+  const renderer = TestRenderer.create(
+    <Message>
+      <MessageIcon>alert</MessageIcon>Alert Message
+    </Message>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx
new file mode 100644
index 000000000..7547d8442
--- /dev/null
+++ b/src/core/client/ui/components/Message/Message.tsx
@@ -0,0 +1,55 @@
+import cn from "classnames";
+import React, { ReactNode, StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./Message.css";
+
+export interface MessageProps {
+  /**
+   * The content of the component.
+   */
+  children: ReactNode;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /*
+  * If set renders a full width message
+  */
+  fullWidth?: boolean;
+  /*
+  * Name of color, "grey" stays by default - common gray one
+  */
+  color?: "error" | "grey";
+}
+
+const Message: StatelessComponent<MessageProps> = props => {
+  const { className, classes, fullWidth, children, color, ...rest } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.colorGrey]: color === "grey",
+      [classes.colorError]: color === "error",
+      [classes.fullWidth]: fullWidth,
+    },
+    className
+  );
+
+  return (
+    <div className={rootClassName} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+Message.defaultProps = {
+  color: "grey",
+  fullWidth: false,
+};
+
+const enhanced = withStyles(styles)(Message);
+export default enhanced;
diff --git a/src/core/client/ui/components/Message/MessageIcon.css b/src/core/client/ui/components/Message/MessageIcon.css
new file mode 100644
index 000000000..df730b2de
--- /dev/null
+++ b/src/core/client/ui/components/Message/MessageIcon.css
@@ -0,0 +1,5 @@
+.root {
+  &:first-child {
+    margin-right: calc(0.5 * var(--spacing-unit));
+  }
+}
diff --git a/src/core/client/ui/components/Message/MessageIcon.tsx b/src/core/client/ui/components/Message/MessageIcon.tsx
new file mode 100644
index 000000000..cd4d0ad13
--- /dev/null
+++ b/src/core/client/ui/components/Message/MessageIcon.tsx
@@ -0,0 +1,36 @@
+import cn from "classnames";
+import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+
+import Icon, { IconProps } from "talk-ui/components/Icon";
+import { withForwardRef, withStyles } from "talk-ui/hocs";
+
+import * as styles from "./MessageIcon.css";
+
+interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles & IconProps["classes"];
+
+  size?: IconProps["size"];
+
+  /** The name of the icon to render */
+  children: string;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLSpanElement>;
+}
+
+export const MessageIcon: StatelessComponent<InnerProps> = props => {
+  const { classes, className, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className);
+  return <Icon className={rootClassName} {...rest} forwardRef={forwardRef} />;
+};
+
+MessageIcon.defaultProps = {
+  size: "sm",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(MessageIcon));
+export default enhanced;
diff --git a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
new file mode 100644
index 000000000..38381f0c6
--- /dev/null
+++ b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Message-root Message-colorGrey custom"
+>
+  Hello World
+</div>
+`;
+
+exports[`renders icon 1`] = `
+<div
+  className="Message-root Message-colorGrey"
+>
+  <span
+    aria-hidden="true"
+    className="Icon-root MessageIcon-root Icon-sm"
+  >
+    alert
+  </span>
+  Alert Message
+</div>
+`;
diff --git a/src/core/client/ui/components/Message/index.ts b/src/core/client/ui/components/Message/index.ts
new file mode 100644
index 000000000..a6d22dd86
--- /dev/null
+++ b/src/core/client/ui/components/Message/index.ts
@@ -0,0 +1 @@
+export { default } from "./Message";
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
index c8e7b11ad..28bbec5a6 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
@@ -4,7 +4,7 @@ menu: UI Kit
 ---
 
 import { Playground } from 'docz'
-import ValidationMessage from './ValidationMessage.tsx'
+import ValidationMessage from './ValidationMessage'
 import HorizontalGutter from '../HorizontalGutter'
 
 # ValidationMessage
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
index 0cc781560..8d1343f8b 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
@@ -1,10 +1,6 @@
-import cn from "classnames";
 import React, { ReactNode, StatelessComponent } from "react";
-
-import { withStyles } from "talk-ui/hocs";
-
-import Icon from "../Icon";
-import * as styles from "./ValidationMessage.css";
+import Message from "../Message";
+import MessageIcon from "../Message/MessageIcon";
 
 export interface ValidationMessageProps {
   /**
@@ -16,34 +12,24 @@ export interface ValidationMessageProps {
    */
   className?: string;
   /**
-   * Override or extend the styles applied to the component.
+   * If set renders a full width message
    */
-  classes: typeof styles;
-  /*
-  * If set renders a full width message
-  */
   fullWidth?: boolean;
 }
 
 const ValidationMessage: StatelessComponent<ValidationMessageProps> = props => {
-  const { className, classes, fullWidth, children, ...rest } = props;
-
-  const rootClassName = cn(
-    classes.root,
-    classes.colorError,
-    {
-      [classes.fullWidth]: fullWidth,
-    },
-    className
-  );
+  const { className, fullWidth, children, ...rest } = props;
 
   return (
-    <div className={rootClassName} {...rest}>
-      <Icon size="sm" className={classes.icon}>
-        warning
-      </Icon>
+    <Message
+      color="error"
+      className={className}
+      fullWidth={fullWidth}
+      {...rest}
+    >
+      <MessageIcon>warning</MessageIcon>
       {children}
-    </div>
+    </Message>
   );
 };
 
@@ -51,5 +37,4 @@ ValidationMessage.defaultProps = {
   fullWidth: false,
 };
 
-const enhanced = withStyles(styles)(ValidationMessage);
-export default enhanced;
+export default ValidationMessage;
diff --git a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
index 7f03e37e0..c0e1861bb 100644
--- a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
+++ b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="ValidationMessage-root ValidationMessage-colorError custom"
+  className="Message-root Message-colorError custom"
 >
   <span
     aria-hidden="true"
-    className="Icon-root ValidationMessage-icon Icon-sm"
+    className="Icon-root MessageIcon-root Icon-sm"
   >
     warning
   </span>
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 28a3f5c36..78261d408 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -20,4 +20,5 @@ export { default as Spinner } from "./Spinner";
 export { default as HorizontalGutter } from "./HorizontalGutter";
 export { default as Icon } from "./Icon";
 export { default as AriaInfo } from "./AriaInfo";
+export { default as Message } from "./Message";
 export { Tab, TabBar, TabContent, TabPane } from "./Tabs";