diff --git a/config/watcher.ts b/config/watcher.ts
index 04c4f5f7d..10dd6e54d 100644
--- a/config/watcher.ts
+++ b/config/watcher.ts
@@ -19,6 +19,9 @@ const config: Config = {
         "core/client/stream/**/*.ts",
         "core/client/stream/**/*.tsx",
         "core/client/stream/**/*.graphql",
+        "core/client/auth/**/*.ts",
+        "core/client/auth/**/*.tsx",
+        "core/client/auth/**/*.graphql",
         "core/server/**/*.graphql",
       ],
       ignore: [
diff --git a/package-lock.json b/package-lock.json
index a08665dc8..a86945926 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5681,6 +5681,12 @@
         "ylru": "^1.2.0"
       }
     },
+    "cached-iterable": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/cached-iterable/-/cached-iterable-0.2.1.tgz",
+      "integrity": "sha512-8zAVjMjdn/S/QXJaOnqsko0+ZJzXT2Dum2u9TMGg5YR9fxONPrUjuO9VYqnb1AoldXeYVAcNJLgT5Q8WaIJSgA==",
+      "dev": true
+    },
     "call-me-maybe": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
@@ -9943,9 +9949,9 @@
       "integrity": "sha1-A5/fI/iCPkQMOPMnfm/vEXQhWzA="
     },
     "fluent": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/fluent/-/fluent-0.6.4.tgz",
-      "integrity": "sha512-EXfMJmnGbUgaIC1myIzDk5akAF6+1JrI7KVnNCba2ou7WCKc/2CWa8QshfhImVtettOvEs0z0UVdMrS6zX7pxA==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/fluent/-/fluent-0.8.0.tgz",
+      "integrity": "sha512-bZfthhubEH1lKgGIi0fIDeNkZrfEOu3MrLbi284LdxNG+9Q5gq2KsuoocumqNPStVtWo3S3/1p8RIqd34u3Mzw==",
       "dev": true
     },
     "fluent-intl-polyfill": {
@@ -9964,15 +9970,22 @@
       "dev": true
     },
     "fluent-react": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/fluent-react/-/fluent-react-0.7.0.tgz",
-      "integrity": "sha512-XgAG06hcVW6oQu3NqLB4KACFBDC9broXG4XDP2xqmj+/DPmZlhHMMD73tFz1mBxCs1pLeojmsYdgyl8l6fF4SA==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/fluent-react/-/fluent-react-0.8.0.tgz",
+      "integrity": "sha512-mO8iPb+muWopEDcbNgb66kr6Tl9tPjRpguDaez9W0xU1hiJ9fQ6EfdCxCUQOYsnVnbruLJqxaRsExSRrCamLCg==",
       "dev": true,
       "requires": {
-        "fluent": "^0.4.0 || ^0.6.0",
+        "cached-iterable": "^0.2.1",
+        "fluent-sequence": "^0.2.0",
         "prop-types": "^15.6.0"
       }
     },
+    "fluent-sequence": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/fluent-sequence/-/fluent-sequence-0.2.0.tgz",
+      "integrity": "sha512-t8fc4rHvzO9Yk8otP8LkTqWo6mzjdemooQcnHlDrNzrYAnwsSbVFIlthnkzK2pLsRnO9Ybmw4lXOYUx+fAIyJw==",
+      "dev": true
+    },
     "flush-write-stream": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz",
@@ -10167,24 +10180,24 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
           "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
         "aproba": {
           "version": "1.2.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
           "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
           "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
           "optional": true,
           "requires": {
@@ -10194,12 +10207,12 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "requires": {
             "balanced-match": "^1.0.0",
@@ -10208,34 +10221,34 @@
         },
         "chownr": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz",
           "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=",
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
         },
         "concat-map": {
           "version": "0.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
         },
         "core-util-is": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
           "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "optional": true
         },
         "debug": {
           "version": "2.6.9",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "optional": true,
           "requires": {
@@ -10244,25 +10257,25 @@
         },
         "deep-extend": {
           "version": "0.5.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz",
           "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==",
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
           "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
           "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
           "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "optional": true,
           "requires": {
@@ -10271,13 +10284,13 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
           "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
           "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "optional": true,
           "requires": {
@@ -10293,7 +10306,7 @@
         },
         "glob": {
           "version": "7.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
           "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
           "optional": true,
           "requires": {
@@ -10307,13 +10320,13 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
           "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.21",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.21.tgz",
           "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==",
           "optional": true,
           "requires": {
@@ -10322,7 +10335,7 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
           "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "optional": true,
           "requires": {
@@ -10331,7 +10344,7 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
           "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "optional": true,
           "requires": {
@@ -10341,18 +10354,18 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
         },
         "ini": {
           "version": "1.3.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
           "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "requires": {
             "number-is-nan": "^1.0.0"
@@ -10360,13 +10373,13 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
           "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -10374,12 +10387,12 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         },
         "minipass": {
           "version": "2.2.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
           "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "requires": {
             "safe-buffer": "^5.1.1",
@@ -10388,7 +10401,7 @@
         },
         "minizlib": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.0.tgz",
           "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
           "optional": true,
           "requires": {
@@ -10397,7 +10410,7 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "requires": {
             "minimist": "0.0.8"
@@ -10405,13 +10418,13 @@
         },
         "ms": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "optional": true
         },
         "needle": {
           "version": "2.2.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.2.0.tgz",
           "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==",
           "optional": true,
           "requires": {
@@ -10422,7 +10435,7 @@
         },
         "node-pre-gyp": {
           "version": "0.10.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.10.0.tgz",
           "integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==",
           "optional": true,
           "requires": {
@@ -10440,7 +10453,7 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
           "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "optional": true,
           "requires": {
@@ -10450,13 +10463,13 @@
         },
         "npm-bundled": {
           "version": "1.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.3.tgz",
           "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==",
           "optional": true
         },
         "npm-packlist": {
           "version": "1.1.10",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.1.10.tgz",
           "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==",
           "optional": true,
           "requires": {
@@ -10466,7 +10479,7 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
           "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "optional": true,
           "requires": {
@@ -10478,18 +10491,18 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
         },
         "object-assign": {
           "version": "4.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
           "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "requires": {
             "wrappy": "1"
@@ -10497,19 +10510,19 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
           "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
           "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
           "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "optional": true,
           "requires": {
@@ -10519,19 +10532,19 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
           "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
           "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "optional": true
         },
         "rc": {
           "version": "1.2.7",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.7.tgz",
           "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==",
           "optional": true,
           "requires": {
@@ -10543,7 +10556,7 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "resolved": false,
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
               "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "optional": true
             }
@@ -10551,7 +10564,7 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
           "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "optional": true,
           "requires": {
@@ -10566,7 +10579,7 @@
         },
         "rimraf": {
           "version": "2.6.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
           "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
           "optional": true,
           "requires": {
@@ -10575,42 +10588,42 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
           "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
           "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
           "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "optional": true
         },
         "semver": {
           "version": "5.5.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
           "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
           "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
           "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
@@ -10620,7 +10633,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "optional": true,
           "requires": {
@@ -10629,7 +10642,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "requires": {
             "ansi-regex": "^2.0.0"
@@ -10637,13 +10650,13 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
           "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "optional": true
         },
         "tar": {
           "version": "4.4.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.1.tgz",
           "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==",
           "optional": true,
           "requires": {
@@ -10658,13 +10671,13 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
           "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "optional": true
         },
         "wide-align": {
           "version": "1.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
           "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
           "optional": true,
           "requires": {
@@ -10673,12 +10686,12 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
         },
         "yallist": {
           "version": "3.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
           "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k="
         }
       }
diff --git a/package.json b/package.json
index 5c2f34d7d..32146395e 100644
--- a/package.json
+++ b/package.json
@@ -151,10 +151,10 @@
     "eventemitter2": "^5.0.1",
     "final-form": "^4.8.1",
     "flat": "^4.1.0",
-    "fluent": "^0.6.4",
+    "fluent": "^0.8.0",
     "fluent-intl-polyfill": "^0.1.0",
     "fluent-langneg": "^0.1.0",
-    "fluent-react": "^0.7.0",
+    "fluent-react": "^0.8.0",
     "graphql-playground-middleware-express": "^1.7.2",
     "graphql-schema-typescript": "^1.2.1",
     "gulp": "^4.0.0",
diff --git a/src/core/build/paths.ts b/src/core/build/paths.ts
index a0e495514..bebff0969 100644
--- a/src/core/build/paths.ts
+++ b/src/core/build/paths.ts
@@ -20,12 +20,15 @@ export default {
   appLocales: resolveSrc("locales"),
   appThemeVariables: resolveSrc("core/client/ui/theme/variables.ts"),
   appThemeVariablesCSS: resolveSrc("core/client/ui/theme/variables.css"),
+
   appStreamHTML: resolveSrc("core/client/stream/index.html"),
   appStreamLocalesTemplate: resolveSrc("core/client/stream/locales.ts"),
   appStreamIndex: resolveSrc("core/client/stream/index.tsx"),
+
   appAuthHTML: resolveSrc("core/client/auth/index.html"),
   appAuthLocalesTemplate: resolveSrc("core/client/auth/locales.ts"),
   appAuthIndex: resolveSrc("core/client/auth/index.tsx"),
+
   appEmbedIndex: resolveSrc("core/client/embed/index.ts"),
   appEmbedHTML: resolveSrc("core/client/embed/index.html"),
 
diff --git a/src/core/client/auth/components/App.css b/src/core/client/auth/components/App.css
index 3f61a7cae..c36dceb31 100644
--- a/src/core/client/auth/components/App.css
+++ b/src/core/client/auth/components/App.css
@@ -1,7 +1,7 @@
 /* Here we add global stylings for body and document */
 :global {
   body {
-    margin: "0";
+    margin: 0;
 
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
@@ -12,4 +12,7 @@
 
 .root {
   width: 100%;
+  padding: var(--spacing-unit) var(--spacing-unit) calc(2 * var(--spacing-unit))
+    var(--spacing-unit);
+  box-sizing: border-box;
 }
diff --git a/src/core/client/auth/components/App.spec.tsx b/src/core/client/auth/components/App.spec.tsx
new file mode 100644
index 000000000..ec7dd130d
--- /dev/null
+++ b/src/core/client/auth/components/App.spec.tsx
@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import App from "./App";
+
+it("renders sign in", () => {
+  const props: PropTypesOf<typeof App> = {
+    view: "SIGN_IN",
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx
index 368c6d716..103bf95dc 100644
--- a/src/core/client/auth/components/App.tsx
+++ b/src/core/client/auth/components/App.tsx
@@ -1,22 +1,41 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-
-import { Flex } from "talk-ui/components";
-
+import React, { StatelessComponent } from "react";
 import * as styles from "./App.css";
 
+import ForgotPasswordContainer from "../containers/ForgotPasswordContainer";
+import ResetPasswordContainer from "../containers/ResetPasswordContainer";
+import SignInContainer from "../containers/SignInContainer";
+import SignUpContainer from "../containers/SignUpContainer";
+
+// TODO: (cvle) Remove %future added value when we have Relay 1.6
+// https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2
+export type View =
+  | "SIGN_UP"
+  | "SIGN_IN"
+  | "FORGOT_PASSWORD"
+  | "RESET_PASSWORD"
+  | "%future added value";
+
 export interface AppProps {
-  // TODO: (cvle) Remove %future added value when we have Relay 1.6
-  // https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2
-  view: "SIGN_UP" | "SIGN_IN" | "FORGOT_PASSWORD" | "%future added value";
+  view: View;
 }
 
-const App: StatelessComponent<AppProps> = props => {
-  return (
-    <Flex justifyContent="center" className={styles.root}>
-      Current View: {props.view}
-    </Flex>
-  );
+const renderView = (view: View) => {
+  switch (view) {
+    case "SIGN_UP":
+      return <SignUpContainer />;
+    case "SIGN_IN":
+      return <SignInContainer />;
+    case "FORGOT_PASSWORD":
+      return <ForgotPasswordContainer />;
+    case "RESET_PASSWORD":
+      return <ResetPasswordContainer />;
+    default:
+      throw new Error(`Unknown view ${view}`);
+  }
 };
 
+const App: StatelessComponent<AppProps> = ({ view }) => (
+  <div className={styles.root}>{renderView(view)}</div>
+);
+
 export default App;
diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
new file mode 100644
index 000000000..53a13b76a
--- /dev/null
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -0,0 +1,110 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
+
+import {
+  composeValidators,
+  required,
+  validateEmail,
+} from "talk-framework/lib/validation";
+
+import {
+  Button,
+  CallOut,
+  FormField,
+  HorizontalGutter,
+  InputLabel,
+  TextField,
+  Typography,
+  ValidationMessage,
+} from "talk-ui/components";
+
+import AutoHeightContainer from "../containers/AutoHeightContainer";
+
+interface FormProps {
+  email: string;
+}
+
+export interface ForgotPasswordForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
+  return (
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit, submitting, submitError }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <AutoHeightContainer />
+          <HorizontalGutter size="double">
+            <Localized id="forgotPassword-forgotPasswordHeader">
+              <Typography variant="heading1" align="center">
+                Forgot Password
+              </Typography>
+            </Localized>
+            <Localized id="forgotPassword-enterEmailAndGetALink">
+              <Typography variant="bodyCopy">
+                Enter your email address below and we will send you a link to
+                reset your password.
+              </Typography>
+            </Localized>
+            {submitError && (
+              <CallOut color="error" fullWidth>
+                {submitError}
+              </CallOut>
+            )}
+            <Field
+              name="email"
+              validate={composeValidators(required, validateEmail)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="forgotPassword-emailAddressLabel">
+                    <InputLabel>Email Address</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="forgotPassword-emailAddressTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Email Address"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      fullWidth
+                      disabled={submitting}
+                    />
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <Localized id="forgotPassword-sendEmailButton">
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                disabled={submitting}
+              >
+                Send Email
+              </Button>
+            </Localized>
+          </HorizontalGutter>
+        </form>
+      )}
+    </Form>
+  );
+};
+
+export default ForgotPassword;
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
new file mode 100644
index 000000000..fd75246fb
--- /dev/null
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -0,0 +1,154 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
+
+import {
+  composeValidators,
+  required,
+  validateEqualPasswords,
+  validatePassword,
+} from "talk-framework/lib/validation";
+
+import {
+  Button,
+  CallOut,
+  FormField,
+  HorizontalGutter,
+  InputDescription,
+  InputLabel,
+  TextField,
+  Typography,
+  ValidationMessage,
+} from "talk-ui/components";
+
+import AutoHeightContainer from "../containers/AutoHeightContainer";
+
+interface FormProps {
+  password: string;
+  confirmPassword: string;
+}
+
+export interface ResetPasswordForm {
+  onSubmit: OnSubmit<FormProps>;
+}
+
+const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
+  return (
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit, submitting, submitError }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <AutoHeightContainer />
+          <HorizontalGutter size="double">
+            <Localized id="resetPassword-resetPasswordHeader">
+              <Typography variant="heading1" align="center">
+                Reset Password
+              </Typography>
+            </Localized>
+            {submitError && (
+              <CallOut color="error" fullWidth>
+                {submitError}
+              </CallOut>
+            )}
+            <Field
+              name="password"
+              validate={composeValidators(required, validatePassword)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="resetPassword-passwordLabel">
+                    <InputLabel>Password</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="resetPassword-passwordDescription"
+                    $minLength={8}
+                  >
+                    <InputDescription>
+                      {"Must be at least {$minLength} characters"}
+                    </InputDescription>
+                  </Localized>
+                  <Localized
+                    id="resetPassword-passwordTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Password"
+                      type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
+                      fullWidth
+                    />
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+
+            <Field
+              name="confirmPassword"
+              validate={composeValidators(required, validateEqualPasswords)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="resetPassword-confirmPasswordLabel">
+                    <InputLabel>Confirm Password</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="resetPassword-confirmPasswordTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Confirm Password"
+                      type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
+                      fullWidth
+                    />
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <Localized id="resetPassword-resetPasswordButton">
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                disabled={submitting}
+              >
+                Reset Password
+              </Button>
+            </Localized>
+          </HorizontalGutter>
+        </form>
+      )}
+    </Form>
+  );
+};
+
+export default ResetPassword;
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
new file mode 100644
index 000000000..fb973eba3
--- /dev/null
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -0,0 +1,179 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
+
+import {
+  composeValidators,
+  required,
+  validateEmail,
+} from "talk-framework/lib/validation";
+
+import {
+  Button,
+  CallOut,
+  Flex,
+  FormField,
+  HorizontalGutter,
+  InputLabel,
+  TextField,
+  Typography,
+  ValidationMessage,
+} from "talk-ui/components";
+
+import AutoHeightContainer from "../containers/AutoHeightContainer";
+
+interface FormProps {
+  email: string;
+  password: string;
+}
+
+export interface SignInForm {
+  onSubmit: OnSubmit<FormProps>;
+  onGotoSignUp: () => void;
+  onGotoForgotPassword: () => void;
+}
+
+const SignIn: StatelessComponent<SignInForm> = props => {
+  return (
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit, submitting, submitError }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <AutoHeightContainer />
+          <HorizontalGutter size="double">
+            <Localized id="signIn-signInToJoinHeader">
+              <Typography variant="heading1" align="center">
+                Sign in to join the conversation
+              </Typography>
+            </Localized>
+
+            {submitError && (
+              <CallOut color="error" fullWidth>
+                {submitError}
+              </CallOut>
+            )}
+
+            <Field
+              name="email"
+              validate={composeValidators(required, validateEmail)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="signIn-emailAddressLabel">
+                    <InputLabel>Email Address</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="signIn-emailAddressTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Email Address"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
+                      fullWidth
+                    />
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage fullWidth>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+
+            <Field name="password" validate={composeValidators(required)}>
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="signIn-passwordLabel">
+                    <InputLabel>Password</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="signIn-passwordTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Password"
+                      type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
+                      fullWidth
+                    />
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage fullWidth>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                  <Flex justifyContent="flex-end">
+                    <Localized id="signIn-forgotYourPassword">
+                      <Button
+                        id="signIn-gotoForgotPasswordButton"
+                        variant="underlined"
+                        color="primary"
+                        size="small"
+                        disabled={submitting}
+                        onClick={props.onGotoForgotPassword}
+                      >
+                        Forgot your password?
+                      </Button>
+                    </Localized>
+                  </Flex>
+                </FormField>
+              )}
+            </Field>
+            <Localized id="signIn-signInAndJoinButton">
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                type="submit"
+                disabled={submitting}
+                fullWidth
+              >
+                Sign in and join the conversation
+              </Button>
+            </Localized>
+            <Flex justifyContent="center">
+              <Localized
+                id="signIn-noAccountSignUp"
+                button={
+                  <Button
+                    id="signIn-gotoSignUpButton"
+                    variant="underlined"
+                    size="small"
+                    color="primary"
+                    disabled={submitting}
+                    onClick={props.onGotoSignUp}
+                  />
+                }
+              >
+                <Typography variant="bodyCopy" container={Flex}>
+                  {"Don't have an account? <button>Sign Up</button>"}
+                </Typography>
+              </Localized>
+            </Flex>
+          </HorizontalGutter>
+        </form>
+      )}
+    </Form>
+  );
+};
+
+export default SignIn;
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
new file mode 100644
index 000000000..eee0abd6f
--- /dev/null
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -0,0 +1,253 @@
+import { Localized } from "fluent-react/compat";
+import * as React from "react";
+import { StatelessComponent } from "react";
+import { Field, Form } from "react-final-form";
+import { OnSubmit } from "talk-framework/lib/form";
+import {
+  composeValidators,
+  required,
+  validateEmail,
+  validateEqualPasswords,
+  validatePassword,
+  validateUsername,
+} from "talk-framework/lib/validation";
+import {
+  Button,
+  CallOut,
+  Flex,
+  FormField,
+  HorizontalGutter,
+  InputDescription,
+  InputLabel,
+  TextField,
+  Typography,
+  ValidationMessage,
+} from "talk-ui/components";
+
+import AutoHeightContainer from "../containers/AutoHeightContainer";
+
+interface FormProps {
+  email: string;
+  username: string;
+  password: string;
+  confirmPassword: string;
+}
+
+export interface SignUpForm {
+  onSubmit: OnSubmit<FormProps>;
+  onGotoSignIn: () => void;
+}
+
+const SignUp: StatelessComponent<SignUpForm> = props => {
+  return (
+    <Form onSubmit={props.onSubmit}>
+      {({ handleSubmit, submitting, submitError }) => (
+        <form autoComplete="off" onSubmit={handleSubmit}>
+          <AutoHeightContainer />
+          <HorizontalGutter size="double">
+            <Localized id="signUp-signUpToJoinHeader">
+              <Typography variant="heading1" align="center">
+                Sign up to join the conversation
+              </Typography>
+            </Localized>
+            {submitError && (
+              <CallOut color="error" fullWidth>
+                {submitError}
+              </CallOut>
+            )}
+            <Field
+              name="email"
+              validate={composeValidators(required, validateEmail)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="signUp-emailAddressLabel">
+                    <InputLabel>Email Address</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="signUp-emailAddressTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Email Address"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
+                      fullWidth
+                    />
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage fullWidth>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <Field
+              name="username"
+              validate={composeValidators(required, validateUsername)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="signUp-usernameLabel">
+                    <InputLabel>Username</InputLabel>
+                  </Localized>
+                  <Localized id="signUp-usernameDescription">
+                    <InputDescription>
+                      A unique identifier displayed on your comments. You may
+                      use “_” and “.”
+                    </InputDescription>
+                  </Localized>
+                  <Localized
+                    id="signUp-usernameTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Username"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
+                      fullWidth
+                    />
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage fullWidth>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <Field
+              name="password"
+              validate={composeValidators(required, validatePassword)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="signUp-passwordLabel">
+                    <InputLabel>Password</InputLabel>
+                  </Localized>
+                  <Localized id="signUp-passwordDescription" $minLength={8}>
+                    <InputDescription>
+                      {"Must be at least {$minLength} characters"}
+                    </InputDescription>
+                  </Localized>
+                  <Localized
+                    id="signUp-passwordTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Password"
+                      type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
+                      fullWidth
+                    />
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage fullWidth>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <Field
+              name="confirmPassword"
+              validate={composeValidators(required, validateEqualPasswords)}
+            >
+              {({ input, meta }) => (
+                <FormField>
+                  <Localized id="signUp-confirmPasswordLabel">
+                    <InputLabel>Confirm Password</InputLabel>
+                  </Localized>
+                  <Localized
+                    id="signUp-confirmPasswordTextField"
+                    attrs={{ placeholder: true }}
+                  >
+                    <TextField
+                      name={input.name}
+                      onChange={input.onChange}
+                      value={input.value}
+                      placeholder="Confirm Password"
+                      type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
+                      fullWidth
+                    />
+                  </Localized>
+                  {meta.touched &&
+                    (meta.error || meta.submitError) && (
+                      <ValidationMessage fullWidth>
+                        {meta.error || meta.submitError}
+                      </ValidationMessage>
+                    )}
+                </FormField>
+              )}
+            </Field>
+            <Localized id="signUp-signUpAndJoinButton">
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                type="submit"
+                disabled={submitting}
+                fullWidth
+              >
+                Sign up and join the conversation
+              </Button>
+            </Localized>
+            <Flex justifyContent="center">
+              <Localized
+                id="signUp-accountAvailableSignIn"
+                button={
+                  <Button
+                    id="signUp-gotoSignInButton"
+                    variant="underlined"
+                    size="small"
+                    color="primary"
+                    onClick={props.onGotoSignIn}
+                    disabled={submitting}
+                  />
+                }
+              >
+                <Typography variant="bodyCopy" container={Flex}>
+                  {"Already have an account? <button>Sign In </button>"}
+                </Typography>
+              </Localized>
+            </Flex>
+          </HorizontalGutter>
+        </form>
+      )}
+    </Form>
+  );
+};
+
+export default SignUp;
diff --git a/src/core/client/auth/components/__snapshots__/App.spec.tsx.snap b/src/core/client/auth/components/__snapshots__/App.spec.tsx.snap
new file mode 100644
index 000000000..449ec1ce6
--- /dev/null
+++ b/src/core/client/auth/components/__snapshots__/App.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders sign in 1`] = `
+<div
+  className="App-root"
+>
+  <withContext(createMutationContainer(withContext(createMutationContainer(SignInContainer)))) />
+</div>
+`;
diff --git a/src/core/client/auth/containers/AutoHeightContainer.tsx b/src/core/client/auth/containers/AutoHeightContainer.tsx
new file mode 100644
index 000000000..309c89901
--- /dev/null
+++ b/src/core/client/auth/containers/AutoHeightContainer.tsx
@@ -0,0 +1,25 @@
+import { Component } from "react";
+
+import resizePopup from "../dom/resizePopup";
+
+/**
+ * A container that adapts the window height to the current body size
+ * when this is mounted or updated.
+ */
+export default class AutoHeightContainer extends Component {
+  private updateWindowSize() {
+    window.requestAnimationFrame(() => setTimeout(resizePopup, 0));
+  }
+
+  public componentDidMount() {
+    this.updateWindowSize();
+  }
+
+  public componentDidUpdate() {
+    this.updateWindowSize();
+  }
+
+  public render() {
+    return null;
+  }
+}
diff --git a/src/core/client/auth/containers/ForgotPasswordContainer.tsx b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
new file mode 100644
index 000000000..37b842160
--- /dev/null
+++ b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
@@ -0,0 +1,11 @@
+import React, { Component } from "react";
+import ForgotPassword from "../components/ForgotPassword";
+
+class ForgotPasswordContainer extends Component {
+  public render() {
+    // tslint:disable-next-line:no-empty
+    return <ForgotPassword onSubmit={() => {}} />;
+  }
+}
+
+export default ForgotPasswordContainer;
diff --git a/src/core/client/auth/containers/ResetPasswordContainer.tsx b/src/core/client/auth/containers/ResetPasswordContainer.tsx
new file mode 100644
index 000000000..cfca96d9d
--- /dev/null
+++ b/src/core/client/auth/containers/ResetPasswordContainer.tsx
@@ -0,0 +1,11 @@
+import React, { Component } from "react";
+import ResetPassword from "../components/ResetPassword";
+
+class ResetPasswordContainer extends Component {
+  public render() {
+    // tslint:disable-next-line:no-empty
+    return <ResetPassword onSubmit={() => {}} />;
+  }
+}
+
+export default ResetPasswordContainer;
diff --git a/src/core/client/auth/containers/SignInContainer.tsx b/src/core/client/auth/containers/SignInContainer.tsx
new file mode 100644
index 000000000..fe2b87949
--- /dev/null
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -0,0 +1,40 @@
+import { FORM_ERROR } from "final-form";
+import React, { Component } from "react";
+import SignIn, { SignInForm } from "../components/SignIn";
+import {
+  SetViewMutation,
+  SignInMutation,
+  withSetViewMutation,
+  withSignInMutation,
+} from "../mutations";
+
+interface SignInContainerProps {
+  signIn: SignInMutation;
+  setView: SetViewMutation;
+}
+
+class SignInContainer extends Component<SignInContainerProps> {
+  private onSubmit: SignInForm["onSubmit"] = async (input, form) => {
+    try {
+      await this.props.signIn(input);
+      return form.reset();
+    } catch (error) {
+      return { [FORM_ERROR]: error.message };
+    }
+  };
+  private goToForgotPassword = () =>
+    this.props.setView({ view: "FORGOT_PASSWORD" });
+  private goToSignUp = () => this.props.setView({ view: "SIGN_UP" });
+  public render() {
+    return (
+      <SignIn
+        onSubmit={this.onSubmit}
+        onGotoForgotPassword={this.goToForgotPassword}
+        onGotoSignUp={this.goToSignUp}
+      />
+    );
+  }
+}
+
+const enhanced = withSetViewMutation(withSignInMutation(SignInContainer));
+export default enhanced;
diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
new file mode 100644
index 000000000..8be2d84ed
--- /dev/null
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -0,0 +1,33 @@
+import { FORM_ERROR } from "final-form";
+import React, { Component } from "react";
+import SignUp, { SignUpForm } from "../components/SignUp";
+
+import {
+  SetViewMutation,
+  SignUpMutation,
+  withSetViewMutation,
+  withSignUpMutation,
+} from "../mutations";
+
+interface SignUpContainerProps {
+  signUp: SignUpMutation;
+  setView: SetViewMutation;
+}
+
+class SignUpContainer extends Component<SignUpContainerProps> {
+  private onSubmit: SignUpForm["onSubmit"] = async (input, form) => {
+    try {
+      return await this.props.signUp(input);
+      form.reset();
+    } catch (error) {
+      return { [FORM_ERROR]: error.message };
+    }
+  };
+  private goToSignIn = () => this.props.setView({ view: "SIGN_IN" });
+  public render() {
+    return <SignUp onSubmit={this.onSubmit} onGotoSignIn={this.goToSignIn} />;
+  }
+}
+
+const enhanced = withSetViewMutation(withSignUpMutation(SignUpContainer));
+export default enhanced;
diff --git a/src/core/client/auth/dom/resizePopup.ts b/src/core/client/auth/dom/resizePopup.ts
new file mode 100644
index 000000000..d9fc1ce6d
--- /dev/null
+++ b/src/core/client/auth/dom/resizePopup.ts
@@ -0,0 +1,17 @@
+function resizePopup() {
+  const innerHeight = window.document.body.offsetHeight;
+  window.resizeTo(
+    window.outerWidth,
+    innerHeight + window.outerHeight - window.innerHeight
+  );
+}
+
+let resizedAlready = false;
+export default function resizeOncePerFrame() {
+  if (resizedAlready) {
+    return;
+  }
+  resizedAlready = true;
+  requestAnimationFrame(() => setTimeout(() => (resizedAlready = false), 0));
+  resizePopup();
+}
diff --git a/src/core/client/auth/index.tsx b/src/core/client/auth/index.tsx
index 44970a3fa..b30487719 100644
--- a/src/core/client/auth/index.tsx
+++ b/src/core/client/auth/index.tsx
@@ -9,9 +9,29 @@ import {
 } from "talk-framework/lib/bootstrap";
 
 import AppContainer from "./containers/AppContainer";
+import resizePopup from "./dom/resizePopup";
 import { initLocalState } from "./local";
 import localesData from "./locales";
 
+/**
+ * Adapt popup height to current content every 100ms.
+ *
+ * The goal is to smooth out height inconsistensies  e.g. when fonts
+ * are switched out or other resources being loaded that React has no influence
+ * over.
+ *
+ * This works in addition to <AutoHeightContainer /> which
+ * adapt popup height when React does an update.
+ */
+function pollPopupHeight(interval: number = 100) {
+  setTimeout(() => {
+    window.requestAnimationFrame(() => {
+      resizePopup();
+      pollPopupHeight(interval);
+    });
+  }, interval);
+}
+
 // This is called when the context is first initialized.
 async function init({ relayEnvironment }: TalkContext) {
   await initLocalState(relayEnvironment);
@@ -32,6 +52,7 @@ async function main() {
   );
 
   ReactDOM.render(<Index />, document.getElementById("app"));
+  pollPopupHeight();
 }
 
 main();
diff --git a/src/core/client/auth/local/local.graphql b/src/core/client/auth/local/local.graphql
index c536037d3..54c52fb90 100644
--- a/src/core/client/auth/local/local.graphql
+++ b/src/core/client/auth/local/local.graphql
@@ -2,6 +2,7 @@ enum View {
   SIGN_UP
   SIGN_IN
   FORGOT_PASSWORD
+  RESET_PASSWORD
 }
 
 type Local {
diff --git a/src/core/client/auth/mutations/SetViewMutation.ts b/src/core/client/auth/mutations/SetViewMutation.ts
index c5bb851fd..df95f18e1 100644
--- a/src/core/client/auth/mutations/SetViewMutation.ts
+++ b/src/core/client/auth/mutations/SetViewMutation.ts
@@ -6,7 +6,7 @@ import { LOCAL_ID } from "talk-framework/lib/relay/withLocalStateContainer";
 
 export interface SetViewInput {
   // TODO: replace with generated typescript types.
-  view: "SIGN_IN" | "SIGN_UP" | "FORGOT_PASSWORD";
+  view: "SIGN_IN" | "SIGN_UP" | "FORGOT_PASSWORD" | "RESET_PASSWORD";
 }
 
 export type SetViewMutation = (input: SetViewInput) => Promise<void>;
diff --git a/src/core/client/auth/mutations/SignInMutation.ts b/src/core/client/auth/mutations/SignInMutation.ts
index 6a88b9313..de02a33f5 100644
--- a/src/core/client/auth/mutations/SignInMutation.ts
+++ b/src/core/client/auth/mutations/SignInMutation.ts
@@ -17,6 +17,7 @@ export async function commit(
     window.close();
   } catch (err) {
     postMessage.send("authError", err.toString(), window.opener);
+    throw err;
   }
 }
 
diff --git a/src/core/client/auth/mutations/SignUpMutation.ts b/src/core/client/auth/mutations/SignUpMutation.ts
index 68beaeae2..dc66aff31 100644
--- a/src/core/client/auth/mutations/SignUpMutation.ts
+++ b/src/core/client/auth/mutations/SignUpMutation.ts
@@ -1,3 +1,4 @@
+import { pick } from "lodash";
 import { Environment } from "relay-runtime";
 
 import { TalkContext } from "talk-framework/lib/bootstrap";
@@ -12,11 +13,15 @@ export async function commit(
   { rest, postMessage }: TalkContext
 ) {
   try {
-    const result = await signUp(rest, input);
+    const result = await signUp(
+      rest,
+      pick(input, "email", "password", "username")
+    );
     postMessage.send("setAuthToken", result.token, window.opener);
     window.close();
   } catch (err) {
     postMessage.send("authError", err.toString(), window.opener);
+    throw err;
   }
 }
 
diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
new file mode 100644
index 000000000..33a6f001a
--- /dev/null
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -0,0 +1,971 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`accepts correct password 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`accepts valid email 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for invalid email 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="invalid-email"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Please enter a valid email address.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`renders sign in form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows error when submitting empty form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows server error 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined Button-disabled"
+            disabled={true}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge 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
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows server error 2`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="CallOut-root CallOut-colorError CallOut-fullWidth"
+      >
+        Server Error
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`submits form successfully 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="CallOut-root CallOut-colorError CallOut-fullWidth"
+      >
+        Server Error
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined Button-disabled"
+            disabled={true}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge 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
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`submits form successfully 2`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
new file mode 100644
index 000000000..0d13ca1bc
--- /dev/null
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -0,0 +1,2355 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`accepts correct password 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`accepts correct password confirmation 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`accepts valid email 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`accepts valid username 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for invalid characters in username 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="$%$§$%$§%"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Invalid characters. Try again.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for invalid email 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="invalid-email"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Please enter a valid email address.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for too long username 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Usernames cannot be longer than {$maxLength} characters.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for too short password 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="pass"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Password must contain at least {$minLength} characters.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for too short username 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="u"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Usernames must contain at least {$minLength} characters.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`checks for wrong password confirmation 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="not-matching"
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            Passwords do not match. Try again.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`renders sign up form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows error when submitting empty form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorError TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
+        >
+          <span
+            className="Icon-root ValidationMessage-icon Icon-sm"
+          >
+            warning
+          </span>
+          <span>
+            This field is required.
+          </span>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows server error 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge 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 up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`shows server error 2`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="CallOut-root CallOut-colorError CallOut-fullWidth"
+      >
+        Server Error
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`submits form successfully 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="CallOut-root CallOut-colorError CallOut-fullWidth"
+      >
+        Server Error
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={true}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge 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 up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`submits form successfully 2`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value="hans@test.com"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value="hans"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least {$minLength} characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value="testtest"
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+          </span>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
diff --git a/src/core/client/auth/test/createEnvironment.ts b/src/core/client/auth/test/createEnvironment.ts
new file mode 100644
index 000000000..700b354c9
--- /dev/null
+++ b/src/core/client/auth/test/createEnvironment.ts
@@ -0,0 +1,28 @@
+import { IResolvers } from "graphql-tools";
+import { Environment, RecordProxy, RecordSourceProxy } from "relay-runtime";
+import { createRelayEnvironment } from "talk-framework/testHelpers";
+
+interface CreateEnvironmentParams {
+  logNetwork?: boolean;
+  resolvers?: IResolvers<any, any>;
+  initLocalState?: (
+    local: RecordProxy,
+    source: RecordSourceProxy,
+    environment: Environment
+  ) => void;
+}
+
+export default function createEnvironment(params: CreateEnvironmentParams) {
+  return createRelayEnvironment({
+    network: {
+      logNetwork: params.logNetwork,
+      resolvers: params.resolvers || {},
+      projectName: "tenant",
+    },
+    initLocalState: (localRecord, source, environment) => {
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+}
diff --git a/src/core/client/auth/test/navigation.disabledspec.tsx b/src/core/client/auth/test/navigation.disabledspec.tsx
new file mode 100644
index 000000000..0abf24548
--- /dev/null
+++ b/src/core/client/auth/test/navigation.disabledspec.tsx
@@ -0,0 +1,59 @@
+// Enable after this is solved: https://github.com/projectfluent/fluent.js/issues/280
+
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+
+import AppContainer from "talk-auth/containers/AppContainer";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
+
+import createEnvironment from "./createEnvironment";
+
+const environment = createEnvironment({
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue("SIGN_IN", "view");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+it("renders sign in form", async () => {
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("navigates to sign up form", async () => {
+  testRenderer.root
+    .findByProps({ id: "signIn-gotoSignUpButton" })
+    .props.onClick();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("navigates to sign in form", async () => {
+  testRenderer.root
+    .findByProps({ id: "signUp-gotoSignInButton" })
+    .props.onClick();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("navigates to forgot password form", async () => {
+  testRenderer.root
+    .findByProps({ id: "signIn-gotoForgotPasswordButton" })
+    .props.onClick();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/auth/test/signIn.spec.tsx b/src/core/client/auth/test/signIn.spec.tsx
new file mode 100644
index 000000000..90447438a
--- /dev/null
+++ b/src/core/client/auth/test/signIn.spec.tsx
@@ -0,0 +1,140 @@
+import React from "react";
+import TestRenderer, { ReactTestInstance } from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import AppContainer from "talk-auth/containers/AppContainer";
+import { animationFrame, timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
+
+import createEnvironment from "./createEnvironment";
+
+const environment = createEnvironment({
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue("SIGN_IN", "view");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+const inputPredicate = (name: string) => (n: ReactTestInstance) => {
+  return n.props.name === name && n.props.onChange;
+};
+
+const form = testRenderer.root.findByType("form");
+
+it("renders sign in form", async () => {
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("shows error when submitting empty form", async () => {
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for invalid email", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "invalid-email" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts valid email", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "hans@test.com" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts correct password", async () => {
+  form
+    .find(inputPredicate("password"))
+    .props.onChange({ target: { value: "testtest" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("shows server error", async () => {
+  const windowMock = sinon.mock(window);
+  windowMock.expects("resizeTo");
+
+  const error = new Error("Server Error");
+  const restMock = sinon.mock(context.rest);
+  restMock
+    .expects("fetch")
+    .withArgs("/tenant/auth/local", {
+      method: "POST",
+      body: {
+        email: "hans@test.com",
+        password: "testtest",
+      },
+    })
+    .once()
+    .throws(error);
+
+  const postMessageMock = sinon.mock(context.postMessage);
+  postMessageMock
+    .expects("send")
+    .withArgs("authError", error.toString(), window.opener)
+    .once();
+
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  // popup resize will be triggered if we wait for the animation frame first.
+  await animationFrame();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  restMock.verify();
+  postMessageMock.verify();
+  windowMock.verify();
+});
+
+it("submits form successfully", async () => {
+  const windowMock = sinon.mock(window);
+  windowMock.expects("close").once();
+  windowMock.expects("resizeTo");
+
+  const restMock = sinon.mock(context.rest);
+  restMock
+    .expects("fetch")
+    .withArgs("/tenant/auth/local", {
+      method: "POST",
+      body: {
+        email: "hans@test.com",
+        password: "testtest",
+      },
+    })
+    .once()
+    .returns({ token: "auth-token" });
+
+  const postMessageMock = sinon.mock(context.postMessage);
+  postMessageMock
+    .expects("send")
+    .withArgs("setAuthToken", "auth-token", window.opener)
+    .once();
+
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  // popup resize will be triggered if we wait for the animation frame first.
+  await animationFrame();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  restMock.verify();
+  postMessageMock.verify();
+  windowMock.verify();
+});
diff --git a/src/core/client/auth/test/signUp.spec.tsx b/src/core/client/auth/test/signUp.spec.tsx
new file mode 100644
index 000000000..307f2c4b2
--- /dev/null
+++ b/src/core/client/auth/test/signUp.spec.tsx
@@ -0,0 +1,191 @@
+import React from "react";
+import TestRenderer, { ReactTestInstance } from "react-test-renderer";
+import { RecordProxy } from "relay-runtime";
+import sinon from "sinon";
+
+import AppContainer from "talk-auth/containers/AppContainer";
+import { animationFrame, timeout } from "talk-common/utils";
+import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
+
+import createEnvironment from "./createEnvironment";
+
+const environment = createEnvironment({
+  initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue("SIGN_UP", "view");
+  },
+});
+
+const context: TalkContext = {
+  relayEnvironment: environment,
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
+};
+
+const testRenderer = TestRenderer.create(
+  <TalkContextProvider value={context}>
+    <AppContainer />
+  </TalkContextProvider>
+);
+
+const inputPredicate = (name: string) => (n: ReactTestInstance) => {
+  return n.props.name === name && n.props.onChange;
+};
+
+const form = testRenderer.root.findByType("form");
+
+it("renders sign up form", async () => {
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("shows error when submitting empty form", async () => {
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for invalid email", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "invalid-email" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts valid email", async () => {
+  form
+    .find(inputPredicate("email"))
+    .props.onChange({ target: { value: "hans@test.com" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for too short username", async () => {
+  form
+    .find(inputPredicate("username"))
+    .props.onChange({ target: { value: "u" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for too long username", async () => {
+  form
+    .find(inputPredicate("username"))
+    .props.onChange({ target: { value: "a".repeat(100) } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for invalid characters in username", async () => {
+  form
+    .find(inputPredicate("username"))
+    .props.onChange({ target: { value: "$%$§$%$§%" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts valid username", async () => {
+  form
+    .find(inputPredicate("username"))
+    .props.onChange({ target: { value: "hans" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for too short password", async () => {
+  form
+    .find(inputPredicate("password"))
+    .props.onChange({ target: { value: "pass" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts correct password", async () => {
+  form
+    .find(inputPredicate("password"))
+    .props.onChange({ target: { value: "testtest" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("checks for wrong password confirmation", async () => {
+  form
+    .find(inputPredicate("confirmPassword"))
+    .props.onChange({ target: { value: "not-matching" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("accepts correct password confirmation", async () => {
+  form
+    .find(inputPredicate("confirmPassword"))
+    .props.onChange({ target: { value: "testtest" } });
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("shows server error", async () => {
+  const windowMock = sinon.mock(window);
+  windowMock.expects("resizeTo");
+
+  const error = new Error("Server Error");
+  const restMock = sinon.mock(context.rest);
+  restMock
+    .expects("fetch")
+    .withArgs("/tenant/auth/local/signup", {
+      method: "POST",
+      body: {
+        username: "hans",
+        email: "hans@test.com",
+        password: "testtest",
+      },
+    })
+    .once()
+    .throws(error);
+
+  const postMessageMock = sinon.mock(context.postMessage);
+  postMessageMock
+    .expects("send")
+    .withArgs("authError", error.toString(), window.opener)
+    .once();
+
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  // popup resize will be triggered if we wait for the animation frame first.
+  await animationFrame();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  restMock.verify();
+  postMessageMock.verify();
+  windowMock.verify();
+});
+
+it("submits form successfully", async () => {
+  const windowMock = sinon.mock(window);
+  windowMock.expects("close").once();
+  windowMock.expects("resizeTo");
+
+  const restMock = sinon.mock(context.rest);
+  restMock
+    .expects("fetch")
+    .withArgs("/tenant/auth/local/signup", {
+      method: "POST",
+      body: {
+        username: "hans",
+        email: "hans@test.com",
+        password: "testtest",
+      },
+    })
+    .once()
+    .returns({ token: "auth-token" });
+
+  const postMessageMock = sinon.mock(context.postMessage);
+  postMessageMock
+    .expects("send")
+    .withArgs("setAuthToken", "auth-token", window.opener)
+    .once();
+
+  form.props.onSubmit();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  // popup resize will be triggered if we wait for the animation frame first.
+  await animationFrame();
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+  restMock.verify();
+  postMessageMock.verify();
+  windowMock.verify();
+});
diff --git a/src/core/client/framework/lib/bootstrap/TalkContext.tsx b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
index 6c0d8f41d..a77a14576 100644
--- a/src/core/client/framework/lib/bootstrap/TalkContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
@@ -1,5 +1,5 @@
 import { LocalizationProvider } from "fluent-react/compat";
-import { MessageContext } from "fluent/compat";
+import { FluentBundle } from "fluent/compat";
 import { Child as PymChild } from "pym.js";
 import React, { StatelessComponent } from "react";
 import { MediaQueryMatchers } from "react-responsive";
@@ -15,8 +15,8 @@ export interface TalkContext {
   /** relayEnvironment for our relay framework. */
   relayEnvironment: Environment;
 
-  /** localMessages for our i18n framework. */
-  localeMessages: MessageContext[];
+  /** localeBundles for our i18n framework. */
+  localeBundles: FluentBundle[];
 
   /** formatter for timeago. */
   timeagoFormatter?: Formatter;
@@ -61,7 +61,7 @@ export const TalkContextProvider: StatelessComponent<{
   value: TalkContext;
 }> = ({ value, children }) => (
   <Provider value={value}>
-    <LocalizationProvider messages={value.localeMessages}>
+    <LocalizationProvider bundles={value.localeBundles}>
       <UIContext.Provider
         value={{
           timeagoFormatter: value.timeagoFormatter,
diff --git a/src/core/client/framework/lib/bootstrap/createContext.tsx b/src/core/client/framework/lib/bootstrap/createContext.tsx
index 07b69d945..325c2e54e 100644
--- a/src/core/client/framework/lib/bootstrap/createContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/createContext.tsx
@@ -14,7 +14,7 @@ import {
 import { RestClient } from "talk-framework/lib/rest";
 import { ClickFarAwayRegister } from "talk-ui/components/ClickOutside";
 
-import { generateMessages, LocalesData, negotiateLanguages } from "../i18n";
+import { generateBundles, LocalesData, negotiateLanguages } from "../i18n";
 import { createFetch, TokenGetter } from "../network";
 import { PostMessageService } from "../postMessage";
 import { TalkContext } from "./TalkContext";
@@ -104,17 +104,17 @@ export default async function createContext({
     console.log(`Negotiated locales ${JSON.stringify(locales)}`);
   }
 
-  const localeMessages = await generateMessages(locales, localesData);
+  const localeBundles = await generateBundles(locales, localesData);
 
   // Assemble context.
   const context = {
     relayEnvironment,
-    localeMessages,
+    localeBundles,
     timeagoFormatter,
     pym,
     eventEmitter,
     registerClickFarAway,
-    rest: new RestClient("/api"),
+    rest: new RestClient("/api", tokenGetter),
     postMessage: new PostMessageService(),
     localStorage: createLocalStorage(),
     sessionStorage: createSessionStorage(),
diff --git a/src/core/client/framework/lib/errors/badUserInputError.ts b/src/core/client/framework/lib/errors/badUserInputError.ts
index aa5d127af..e1674ae06 100644
--- a/src/core/client/framework/lib/errors/badUserInputError.ts
+++ b/src/core/client/framework/lib/errors/badUserInputError.ts
@@ -1,12 +1,12 @@
 import { mapValues, once } from "lodash";
 import { ReactNode } from "react";
-import { VALIDATION_REQUIRED, VALIDATION_TOO_SHORT } from "../messages";
+import { VALIDATION_REQUIRED } from "../messages";
 
 /**
  * ValidationError represents all possible string values
  * that is responded by the server.
  */
-type ValidationError = "TOO_SHORT";
+type ValidationError = "REQUIRED";
 
 /**
  * InvalidArgsMap as responded by the server.
@@ -36,7 +36,6 @@ interface BadUserInputExtension {
  * Map server `ValidationError` to a translation message.
  */
 const validationMap = {
-  TOO_SHORT: VALIDATION_TOO_SHORT,
   REQUIRED: VALIDATION_REQUIRED,
 };
 
diff --git a/src/core/client/framework/lib/errors/index.ts b/src/core/client/framework/lib/errors/index.ts
index 85539f649..8372f3429 100644
--- a/src/core/client/framework/lib/errors/index.ts
+++ b/src/core/client/framework/lib/errors/index.ts
@@ -2,4 +2,5 @@ export { default as NetworkError } from "./networkError";
 export { default as UnknownServerError } from "./unknownServerError";
 export { default as BadUserInputError } from "./badUserInputError";
 export { default as GraphQLError } from "./graphqlError";
+
 export * from "./graphqlError";
diff --git a/src/core/client/framework/lib/i18n.ts b/src/core/client/framework/lib/i18n.ts
index d5afcd0b6..de76266d4 100644
--- a/src/core/client/framework/lib/i18n.ts
+++ b/src/core/client/framework/lib/i18n.ts
@@ -1,6 +1,6 @@
 import "fluent-intl-polyfill/compat";
 import { negotiateLanguages as negotiate } from "fluent-langneg/compat";
-import { MessageContext } from "fluent/compat";
+import { FluentBundle } from "fluent/compat";
 
 export interface BundledLocales {
   [locale: string]: string;
@@ -47,18 +47,20 @@ export function negotiateLanguages(
 }
 
 // Don't warn in production.
-let decorateWarnMissing = (cx: MessageContext) => cx;
+let decorateWarnMissing = (bundle: FluentBundle) => bundle;
 
 // Warn about missing locales if we are not in production.
 if (process.env.NODE_ENV !== "production") {
   decorateWarnMissing = (() => {
     const warnings: string[] = [];
-    return (cx: MessageContext) => {
-      const original = cx.hasMessage;
-      cx.hasMessage = (id: string) => {
-        const result = original.apply(cx, [id]);
+    return (bundle: FluentBundle) => {
+      const original = bundle.hasMessage;
+      bundle.hasMessage = (id: string) => {
+        const result = original.apply(bundle, [id]);
         if (!result) {
-          const warn = `${cx.locales} translation for key "${id}" not found`;
+          const warn = `${
+            bundle.locales
+          } translation for key "${id}" not found`;
           if (!warnings.includes(warn)) {
             // tslint:disable:next-line: no-console
             console.warn(warn);
@@ -67,7 +69,7 @@ if (process.env.NODE_ENV !== "production") {
         }
         return result;
       };
-      return cx;
+      return bundle;
     };
   })();
 }
@@ -79,21 +81,21 @@ if (process.env.NODE_ENV !== "production") {
  *
  * Use it in conjunction with `negotiateLanguages`.
  */
-export async function generateMessages(
+export async function generateBundles(
   locales: ReadonlyArray<string>,
   data: LocalesData
-): Promise<MessageContext[]> {
+): Promise<FluentBundle[]> {
   const promises = [];
 
   for (const locale of locales) {
-    const cx = new MessageContext(locale);
+    const bundle = new FluentBundle(locale);
     if (locale in data.bundled) {
-      cx.addMessages(data.bundled[locale]);
-      promises.push(decorateWarnMissing(cx));
+      bundle.addMessages(data.bundled[locale]);
+      promises.push(decorateWarnMissing(bundle));
     } else if (locale in data.loadables) {
       const content = await data.loadables[locale]();
-      cx.addMessages(content);
-      promises.push(decorateWarnMissing(cx));
+      bundle.addMessages(content);
+      promises.push(decorateWarnMissing(bundle));
     } else {
       throw Error(`Locale ${locale} not available`);
     }
diff --git a/src/core/client/framework/lib/messages.tsx b/src/core/client/framework/lib/messages.tsx
index 316cd6e8a..28beed2f4 100644
--- a/src/core/client/framework/lib/messages.tsx
+++ b/src/core/client/framework/lib/messages.tsx
@@ -12,8 +12,44 @@ export const VALIDATION_REQUIRED = () => (
   </Localized>
 );
 
-export const VALIDATION_TOO_SHORT = () => (
+export const VALIDATION_TOO_SHORT = (minLength: number) => (
   <Localized id="framework-validation-tooShort">
-    <span>This field is too short.</span>
+    <span>{"This field must contain at least {$minLength} characters."}</span>
+  </Localized>
+);
+
+export const INVALID_EMAIL = () => (
+  <Localized id="framework-validation-invalidEmail">
+    <span>Please enter a valid email address.</span>
+  </Localized>
+);
+
+export const INVALID_CHARACTERS = () => (
+  <Localized id="framework-validation-invalidCharacters">
+    <span>Invalid characters. Try again.</span>
+  </Localized>
+);
+
+export const USERNAME_TOO_SHORT = (minLength: number) => (
+  <Localized id="framework-validation-usernameTooShort" $minLength={minLength}>
+    <span>{"Usernames must contain at least {$minLength} characters."}</span>
+  </Localized>
+);
+
+export const USERNAME_TOO_LONG = (maxLength: number) => (
+  <Localized id="framework-validation-usernameTooLong" $maxLength={maxLength}>
+    <span>{"Usernames cannot be longer than {$maxLength} characters."}</span>
+  </Localized>
+);
+
+export const PASSWORD_TOO_SHORT = (minLength: number) => (
+  <Localized id="framework-validation-passwordTooShort" $minLength={minLength}>
+    <span>{"Password must contain at least {$minLength} characters."}</span>
+  </Localized>
+);
+
+export const PASSWORDS_DO_NOT_MATCH = () => (
+  <Localized id="framework-validation-passwordsDoNotMatch">
+    <span>Passwords do not match. Try again.</span>
   </Localized>
 );
diff --git a/src/core/client/framework/lib/rest.ts b/src/core/client/framework/lib/rest.ts
index 6ba52b958..c08e3c995 100644
--- a/src/core/client/framework/lib/rest.ts
+++ b/src/core/client/framework/lib/rest.ts
@@ -17,22 +17,27 @@ const buildOptions = (inputOptions: RequestInit = {}) => {
   return options;
 };
 
-const handleResp = (res: Response) => {
-  if (res.status > 399) {
-    return res.json().then((err: any) => {
-      // TODO: sync error handling with server.
-      const message = err.message || err.error || res.status;
-      const error = new Error(message);
-      throw error;
-    });
-  } else if (res.status === 204) {
-    return res.text();
-  } else {
-    return res.json();
+// TODO (bc): Wrap response errors into error objects once server errors have been defined
+
+const handleResp = async (res: Response) => {
+  if (res.status === 404) {
+    const response = await res.text();
+    throw new Error(response);
   }
+
+  if (!res.ok) {
+    const response = await res.json();
+    throw new Error(response.error);
+  }
+
+  if (res.status === 204) {
+    return res.text();
+  }
+
+  return res.json();
 };
 
-type PartialRequestInit = Overwrite<Partial<RequestInit>, { body: any }>;
+type PartialRequestInit = Overwrite<Partial<RequestInit>, { body?: any }>;
 
 export class RestClient {
   public readonly uri: string;
@@ -43,7 +48,10 @@ export class RestClient {
     this.tokenGetter = tokenGetter;
   }
 
-  public fetch<T>(path: string, options: PartialRequestInit): Promise<T> {
+  public async fetch<T = {}>(
+    path: string,
+    options: PartialRequestInit
+  ): Promise<T> {
     let opts = options;
     if (this.tokenGetter) {
       opts = merge({}, options, {
@@ -52,6 +60,7 @@ export class RestClient {
         },
       });
     }
-    return fetch(`${this.uri}${path}`, buildOptions(opts)).then(handleResp);
+    const response = await fetch(`${this.uri}${path}`, buildOptions(opts));
+    return handleResp(response);
   }
 }
diff --git a/src/core/client/framework/lib/validation.tsx b/src/core/client/framework/lib/validation.tsx
index 54f75a01c..6634e9fde 100644
--- a/src/core/client/framework/lib/validation.tsx
+++ b/src/core/client/framework/lib/validation.tsx
@@ -1,5 +1,13 @@
 import { ReactNode } from "react";
-import { VALIDATION_REQUIRED } from "./messages";
+import {
+  INVALID_CHARACTERS,
+  INVALID_EMAIL,
+  PASSWORD_TOO_SHORT,
+  PASSWORDS_DO_NOT_MATCH,
+  USERNAME_TOO_LONG,
+  USERNAME_TOO_SHORT,
+  VALIDATION_REQUIRED,
+} from "./messages";
 
 type Validator<T, V> = (v: T, values: V) => ReactNode;
 
@@ -31,3 +39,60 @@ export function composeValidators<T = any, V = any>(
  * required is a Validator that checks that the value is truthy.
  */
 export const required = createValidator(v => !!v, VALIDATION_REQUIRED());
+
+/**
+ * validateEmail is a Validator that checks that the value is an email.
+ */
+export const validateEmail = createValidator(
+  v => /^.+@.+\..+$/.test(v),
+  INVALID_EMAIL()
+);
+
+/**
+ * validateUsernameCharacters is a Validator that checks that the username only contains valid characters.
+ */
+export const validateUsernameCharacters = createValidator(
+  v => /^[a-zA-Z0-9_.]+$/.test(v),
+  INVALID_CHARACTERS()
+);
+
+/**
+ * validateUsernameMinLength is a Validator that checks that the username has a min length of characters
+ */
+export const validateUsernameMinLength = createValidator(
+  v => v.length >= 3,
+  USERNAME_TOO_SHORT(3)
+);
+
+/**
+ * validateUsernameMaxLength is a Validator that checks that the username has a max length of characters
+ */
+export const validateUsernameMaxLength = createValidator(
+  v => v.length <= 20,
+  USERNAME_TOO_LONG(20)
+);
+
+/**
+ * validateUsername is a Validator that checks that the username is valid.
+ */
+export const validateUsername = composeValidators(
+  validateUsernameCharacters,
+  validateUsernameMinLength,
+  validateUsernameMaxLength
+);
+
+/**
+ * validateUsername is a Validator that checks that the value is a valid username.
+ */
+export const validatePassword = createValidator(
+  v => v.length >= 8,
+  PASSWORD_TOO_SHORT(8)
+);
+
+/**s
+ * validateUsername is a Validator that checks that the value is a valid username.
+ */
+export const validateEqualPasswords = createValidator(
+  (v, values) => v === values.password,
+  PASSWORDS_DO_NOT_MATCH()
+);
diff --git a/src/core/client/framework/mutations/SetAuthTokenMutation.ts b/src/core/client/framework/mutations/SetAuthTokenMutation.ts
index 223bc4054..90e520155 100644
--- a/src/core/client/framework/mutations/SetAuthTokenMutation.ts
+++ b/src/core/client/framework/mutations/SetAuthTokenMutation.ts
@@ -23,6 +23,8 @@ export async function commit(
     } else {
       localStorage.removeItem("authToken");
     }
+    // Increment auth revision to indicate a change in auth state.
+    record.setValue(record.getValue("authRevision") + 1, "authRevision");
 
     // Force gc to trigger.
     environment
diff --git a/src/core/client/framework/mutations/SignOutMutation.ts b/src/core/client/framework/mutations/SignOutMutation.ts
new file mode 100644
index 000000000..2f170e32e
--- /dev/null
+++ b/src/core/client/framework/mutations/SignOutMutation.ts
@@ -0,0 +1,18 @@
+import { Environment } from "relay-runtime";
+import { TalkContext } from "talk-framework/lib/bootstrap";
+import { createMutationContainer } from "talk-framework/lib/relay";
+import signOut from "../rest/signOut";
+import { commit as setAuthToken } from "./SetAuthTokenMutation";
+
+export type SignOutMutation = () => Promise<void>;
+
+export async function commit(
+  environment: Environment,
+  input: undefined,
+  ctx: TalkContext
+) {
+  await signOut(ctx.rest);
+  await setAuthToken(environment, { authToken: "" }, ctx);
+}
+
+export const withSignOutMutation = createMutationContainer("signOut", commit);
diff --git a/src/core/client/framework/mutations/index.ts b/src/core/client/framework/mutations/index.ts
index 21875e6d8..b128402e6 100644
--- a/src/core/client/framework/mutations/index.ts
+++ b/src/core/client/framework/mutations/index.ts
@@ -3,3 +3,4 @@ export {
   SetAuthTokenMutation,
   SetAuthTokenInput,
 } from "./SetAuthTokenMutation";
+export { withSignOutMutation, SignOutMutation } from "./SignOutMutation";
diff --git a/src/core/client/framework/rest/index.ts b/src/core/client/framework/rest/index.ts
index 0b3032bb5..b50cbdbe9 100644
--- a/src/core/client/framework/rest/index.ts
+++ b/src/core/client/framework/rest/index.ts
@@ -1,2 +1,3 @@
 export { default as signIn, SignInInput } from "./signIn";
 export { default as signUp, SignUpInput } from "./signUp";
+export { default as signOut } from "./signOut";
diff --git a/src/core/client/framework/rest/signOut.ts b/src/core/client/framework/rest/signOut.ts
new file mode 100644
index 000000000..0df1be920
--- /dev/null
+++ b/src/core/client/framework/rest/signOut.ts
@@ -0,0 +1,7 @@
+import { RestClient } from "../lib/rest";
+
+export default function signOut(rest: RestClient) {
+  return rest.fetch("/tenant/auth", {
+    method: "DELETE",
+  });
+}
diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index 39272cb17..a09c49149 100644
--- a/src/core/client/stream/components/App.tsx
+++ b/src/core/client/stream/components/App.tsx
@@ -2,7 +2,6 @@ import * as React from "react";
 import { StatelessComponent } from "react";
 
 import { Flex } from "talk-ui/components";
-
 import PermalinkViewQuery from "../queries/PermalinkViewQuery";
 import StreamQuery from "../queries/StreamQuery";
 
diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css
index 5c0f67095..821be5613 100644
--- a/src/core/client/stream/components/Comment/Comment.css
+++ b/src/core/client/stream/components/Comment/Comment.css
@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
 }
 .footer {
   margin-top: var(--spacing-unit);
diff --git a/src/core/client/stream/components/Comment/Username.tsx b/src/core/client/stream/components/Comment/Username.tsx
index f19c23024..728944ea2 100644
--- a/src/core/client/stream/components/Comment/Username.tsx
+++ b/src/core/client/stream/components/Comment/Username.tsx
@@ -16,7 +16,7 @@ const Username: StatelessComponent<UsernameProps> = props => {
         <Typography
           variant={matches ? "heading2" : "heading3"}
           className={styles.root}
-          component="span"
+          container="span"
         >
           {props.children}
         </Typography>
diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
index 2e6694137..9ce1f79c5 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
@@ -2,28 +2,20 @@
 
 exports[`renders correctly on big screens 1`] = `
 <div
-  className="Flex-root TopBar-root"
+  className="Flex-root TopBar-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
 >
-  <div
-    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders correctly on small screens 1`] = `
 <div
-  className="Flex-root TopBar-root"
+  className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
 >
-  <div
-    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
index c2afa31b2..3fad6d3be 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
 }
 
 .textField {
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx
index 4d3035b8d..362efa562 100644
--- a/src/core/client/stream/components/PermalinkView.tsx
+++ b/src/core/client/stream/components/PermalinkView.tsx
@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { MouseEvent, StatelessComponent } from "react";
 
-import { Button, Flex, Typography } from "talk-ui/components";
+import { Button, Typography } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import * as styles from "./PermalinkView.css";
@@ -41,11 +41,7 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
           <Typography>Comment not found</Typography>
         </Localized>
       )}
-      {comment && (
-        <Flex direction="column">
-          <CommentContainer data={comment} />
-        </Flex>
-      )}
+      {comment && <CommentContainer data={comment} />}
     </div>
   );
 };
diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css
index e813f4ea7..8c35347ff 100644
--- a/src/core/client/stream/components/PostCommentForm.css
+++ b/src/core/client/stream/components/PostCommentForm.css
@@ -1,18 +1,17 @@
 .root {
-  width: 100%;
 }
 
 .textarea {
   composes: bodyCopy from "talk-ui/shared/typography.css";
-
   display: block;
-  height: 100px;
+  height: 150px;
   width: 100%;
   box-sizing: border-box;
-  margin-bottom: var(--spacing-unit);
+  padding: var(--spacing-unit);
+  border-radius: var(--round-corners);
+  resize: vertical;
 }
 
-.postButtonContainer {
-  display: flex;
-  justify-content: flex-end;
+.poweredBy {
+  margin-top: calc(-0.5 * var(--spacing-unit));
 }
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 72bc0ad70..3eab2ddd8 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -1,13 +1,11 @@
 import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
 import { Field, Form } from "react-final-form";
-
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
-import { Button, Typography } from "talk-ui/components";
-
+import { Button, Flex, HorizontalGutter, Typography } from "talk-ui/components";
 import * as styles from "./PostCommentForm.css";
+import PoweredBy from "./PoweredBy";
 
 interface FormProps {
   body: string;
@@ -21,31 +19,44 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
   <Form onSubmit={props.onSubmit}>
     {({ handleSubmit, submitting }) => (
       <form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
-        <Field name="body" validate={required}>
-          {({ input, meta }) => (
-            <div>
-              <textarea
-                className={styles.textarea}
-                name={input.name}
-                onChange={input.onChange}
-                value={input.value}
-              />
-              {meta.touched &&
-                (meta.error || meta.submitError) && (
-                  <Typography align="right" color="error" gutterBottom>
-                    {meta.error || meta.submitError}
-                  </Typography>
-                )}
-            </div>
-          )}
-        </Field>
-        <div className={styles.postButtonContainer}>
-          <Localized id="comments-postCommentForm-post">
-            <Button color="primary" variant="filled" disabled={submitting}>
-              Post
-            </Button>
-          </Localized>
-        </div>
+        <HorizontalGutter>
+          <Field name="body" validate={required}>
+            {({ input, meta }) => (
+              <div>
+                <textarea
+                  className={styles.textarea}
+                  name={input.name}
+                  onChange={input.onChange}
+                  value={input.value}
+                  placeholder="Post a comment"
+                />
+                {meta.touched &&
+                  (meta.error || meta.submitError) && (
+                    <Typography align="right" color="error" gutterBottom>
+                      {meta.error || meta.submitError}
+                    </Typography>
+                  )}
+              </div>
+            )}
+          </Field>
+          <Flex
+            direction="row"
+            justifyContent="space-between"
+            alignItems="flex-start"
+          >
+            <PoweredBy className={styles.poweredBy} />
+            <Localized id="comments-postCommentForm-submit">
+              <Button
+                color="primary"
+                variant="filled"
+                disabled={submitting}
+                type="submit"
+              >
+                Submit
+              </Button>
+            </Localized>
+          </Flex>
+        </HorizontalGutter>
       </form>
     )}
   </Form>
diff --git a/src/core/client/stream/components/PostCommentFormFake.css b/src/core/client/stream/components/PostCommentFormFake.css
new file mode 100644
index 000000000..775481fb4
--- /dev/null
+++ b/src/core/client/stream/components/PostCommentFormFake.css
@@ -0,0 +1,13 @@
+.root {
+}
+
+.textarea {
+  composes: bodyCopy from "talk-ui/shared/typography.css";
+  display: block;
+  height: 150px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-unit);
+  border-radius: var(--round-corners);
+  resize: vertical;
+}
diff --git a/src/core/client/stream/components/PostCommentFormFake.spec.tsx b/src/core/client/stream/components/PostCommentFormFake.spec.tsx
new file mode 100644
index 000000000..0721cd6fe
--- /dev/null
+++ b/src/core/client/stream/components/PostCommentFormFake.spec.tsx
@@ -0,0 +1,9 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import PostCommentFormFake from "./PostCommentFormFake";
+
+it("renders correctly", () => {
+  const wrapper = shallow(<PostCommentFormFake />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/PostCommentFormFake.tsx b/src/core/client/stream/components/PostCommentFormFake.tsx
new file mode 100644
index 000000000..923955708
--- /dev/null
+++ b/src/core/client/stream/components/PostCommentFormFake.tsx
@@ -0,0 +1,21 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+import { Button, HorizontalGutter } from "talk-ui/components";
+import * as styles from "./PostCommentFormFake.css";
+
+const PostCommentFormFake: StatelessComponent = props => (
+  <HorizontalGutter className={styles.root}>
+    <textarea
+      className={styles.textarea}
+      placeholder="Post a comment"
+      disabled
+    />
+    <Localized id="comments-PostCommentFormFake-signInAndJoin">
+      <Button color="primary" variant="filled" disabled type="submit" fullWidth>
+        Sign in and join the conversation
+      </Button>
+    </Localized>
+  </HorizontalGutter>
+);
+
+export default PostCommentFormFake;
diff --git a/src/core/client/stream/components/PoweredBy.spec.tsx b/src/core/client/stream/components/PoweredBy.spec.tsx
new file mode 100644
index 000000000..f31db2f20
--- /dev/null
+++ b/src/core/client/stream/components/PoweredBy.spec.tsx
@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import PoweredBy from "./PoweredBy";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof PoweredBy> = {
+    className: "custom",
+  };
+  const wrapper = shallow(<PoweredBy {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/components/PoweredBy.tsx
new file mode 100644
index 000000000..b507bc61b
--- /dev/null
+++ b/src/core/client/stream/components/PoweredBy.tsx
@@ -0,0 +1,26 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import { Typography } from "talk-ui/components";
+
+interface Props {
+  className: string;
+}
+
+const PoweredBy: StatelessComponent<Props> = props => {
+  return (
+    <div className={cn(props.className)}>
+      <Typography
+        variant="inputDescription"
+        container="span"
+        color="textSecondary"
+      >
+        Powered by
+      </Typography>{" "}
+      <Typography variant="heading4" container="span">
+        The Coral Project
+      </Typography>
+    </div>
+  );
+};
+
+export default PoweredBy;
diff --git a/src/core/client/stream/components/ReplyList.tsx b/src/core/client/stream/components/ReplyList.tsx
index 6f4380769..c35e0c32c 100644
--- a/src/core/client/stream/components/ReplyList.tsx
+++ b/src/core/client/stream/components/ReplyList.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Button, Flex } from "talk-ui/components";
+import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import Indent from "./Indent";
@@ -18,11 +18,9 @@ export interface ReplyListProps {
 const ReplyList: StatelessComponent<ReplyListProps> = props => {
   return (
     <Indent>
-      <Flex
-        direction="column"
+      <HorizontalGutter
         id={`talk-comments-replyList-log--${props.commentID}`}
         role="log"
-        itemGutter
       >
         {props.comments.map(comment => (
           <CommentContainer key={comment.id} data={comment} />
@@ -41,7 +39,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
             </Button>
           </Localized>
         )}
-      </Flex>
+      </HorizontalGutter>
     </Indent>
   );
 };
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index 7f1ea183c..884157e36 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -2,12 +2,13 @@ import { Localized } from "fluent-react/compat";
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Button, Flex } from "talk-ui/components";
+import { Button, HorizontalGutter } from "talk-ui/components";
 
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
 import UserBoxContainer from "../containers/UserBoxContainer";
+import PostCommentFormFake from "./PostCommentFormFake";
 import * as styles from "./Stream.css";
 
 export interface StreamProps {
@@ -17,25 +18,30 @@ export interface StreamProps {
   onLoadMore?: () => void;
   hasMore?: boolean;
   disableLoadMore?: boolean;
+  user: {} | null;
 }
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <Flex className={styles.root} direction="column" itemGutter>
-      <UserBoxContainer />
-      <PostCommentFormContainer assetID={props.assetID} />
-      <Flex
-        direction="column"
+    <HorizontalGutter className={styles.root} size="double">
+      <HorizontalGutter size="half">
+        <UserBoxContainer user={props.user} />
+        {props.user ? (
+          <PostCommentFormContainer assetID={props.assetID} />
+        ) : (
+          <PostCommentFormFake />
+        )}
+      </HorizontalGutter>
+      <HorizontalGutter
         id="talk-comments-stream-log"
         role="log"
         aria-live="polite"
-        itemGutter
       >
         {props.comments.map(comment => (
-          <Flex direction="column" key={comment.id} itemGutter>
+          <HorizontalGutter key={comment.id}>
             <CommentContainer data={comment} />
             <ReplyListContainer comment={comment} />
-          </Flex>
+          </HorizontalGutter>
         ))}
         {props.hasMore && (
           <Localized id="comments-stream-loadMore">
@@ -51,8 +57,8 @@ const Stream: StatelessComponent<StreamProps> = props => {
             </Button>
           </Localized>
         )}
-      </Flex>
-    </Flex>
+      </HorizontalGutter>
+    </HorizontalGutter>
   );
 };
 
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.css b/src/core/client/stream/components/UserBoxAuthenticated.css
new file mode 100644
index 000000000..a98581e23
--- /dev/null
+++ b/src/core/client/stream/components/UserBoxAuthenticated.css
@@ -0,0 +1,3 @@
+.child {
+  width: initial;
+}
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.spec.tsx b/src/core/client/stream/components/UserBoxAuthenticated.spec.tsx
new file mode 100644
index 000000000..5e658f287
--- /dev/null
+++ b/src/core/client/stream/components/UserBoxAuthenticated.spec.tsx
@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import UserBoxAuthenticated from "./UserBoxAuthenticated";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof UserBoxAuthenticated> = {
+    onSignOut: noop,
+    username: "Username",
+  };
+  const wrapper = shallow(<UserBoxAuthenticated {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
new file mode 100644
index 000000000..94ed90ac6
--- /dev/null
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -0,0 +1,49 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+
+import { Button, Flex, Typography } from "talk-ui/components";
+
+export interface UserBoxAuthenticatedProps {
+  onSignOut: () => void;
+  username: string;
+}
+
+const UserBoxAuthenticated: StatelessComponent<
+  UserBoxAuthenticatedProps
+> = props => {
+  const Username = () => (
+    <Typography variant="bodyCopyBold" container="span">
+      {props.username}
+    </Typography>
+  );
+
+  return (
+    <Flex itemGutter="half" wrap>
+      <Localized
+        id="comments-userBoxAuthenticated-signedInAs"
+        username={<Username />}
+      >
+        <Typography variant="bodyCopy" container="div">
+          {"Signed in as <username></username>."}
+        </Typography>
+      </Localized>
+      <Localized
+        id="comments-userBoxAuthenticated-notYou"
+        button={
+          <Button
+            color="primary"
+            size="small"
+            variant="underlined"
+            onClick={props.onSignOut}
+          />
+        }
+      >
+        <Typography variant="bodyCopy" container={Flex}>
+          {"Not you? <button>Sign Out</button>"}
+        </Typography>
+      </Localized>
+    </Flex>
+  );
+};
+
+export default UserBoxAuthenticated;
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index 9d838a510..8eec09e9e 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -15,23 +15,28 @@ const UserBoxUnauthenticated: StatelessComponent<
   UserBoxUnauthenticatedProps
 > = props => {
   return (
-    <Flex>
+    <Flex itemGutter alignItems="center">
       <MatchMedia gteWidth="sm">
         <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
           <Typography
             className={styles.joinText}
             variant="bodyCopyBold"
-            component="span"
+            container="span"
           >
             Join the conversation
           </Typography>
         </Localized>
-        <Typography variant="bodyCopyBold" component="span">
+        <Typography variant="bodyCopyBold" container="span">
           |
         </Typography>
       </MatchMedia>
       <Localized id="comments-userBoxUnauthenticated-signIn">
-        <Button color="primary" size="small" onClick={props.onSignIn}>
+        <Button
+          color="primary"
+          size="small"
+          variant="underlined"
+          onClick={props.onSignIn}
+        >
           Sign in
         </Button>
       </Localized>
diff --git a/src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
new file mode 100644
index 000000000..2f29d6793
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(HorizontalGutter)
+  className="PostCommentFormFake-root"
+>
+  <textarea
+    className="PostCommentFormFake-textarea"
+    disabled={true}
+    placeholder="Post a comment"
+  />
+  <Localized
+    id="comments-PostCommentFormFake-signInAndJoin"
+  >
+    <withPropsOnChange(Button)
+      color="primary"
+      disabled={true}
+      fullWidth={true}
+      type="submit"
+      variant="filled"
+    >
+      Sign in and join the conversation
+    </withPropsOnChange(Button)>
+  </Localized>
+</withPropsOnChange(HorizontalGutter)>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
new file mode 100644
index 000000000..5c043b8db
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="custom"
+>
+  <withPropsOnChange(Typography)
+    color="textSecondary"
+    container="span"
+    variant="inputDescription"
+  >
+    Powered by
+  </withPropsOnChange(Typography)>
+   
+  <withPropsOnChange(Typography)
+    container="span"
+    variant="heading4"
+  >
+    The Coral Project
+  </withPropsOnChange(Typography)>
+</div>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
index 3ff2461f0..8e8929149 100644
--- a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
@@ -2,10 +2,8 @@
 
 exports[`renders correctly 1`] = `
 <Indent>
-  <withPropsOnChange(Flex)
-    direction="column"
+  <withPropsOnChange(HorizontalGutter)
     id="talk-comments-replyList-log--comment-id"
-    itemGutter={true}
     role="log"
   >
     <Relay(CommentContainer)
@@ -24,16 +22,14 @@ exports[`renders correctly 1`] = `
       }
       key="comment-2"
     />
-  </withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
 </Indent>
 `;
 
 exports[`when there is more disables load more button 1`] = `
 <Indent>
-  <withPropsOnChange(Flex)
-    direction="column"
+  <withPropsOnChange(HorizontalGutter)
     id="talk-comments-replyList-log--comment-id"
-    itemGutter={true}
     role="log"
   >
     <Relay(CommentContainer)
@@ -66,16 +62,14 @@ exports[`when there is more disables load more button 1`] = `
         Show All Replies
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
 </Indent>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
 <Indent>
-  <withPropsOnChange(Flex)
-    direction="column"
+  <withPropsOnChange(HorizontalGutter)
     id="talk-comments-replyList-log--comment-id"
-    itemGutter={true}
     role="log"
   >
     <Relay(CommentContainer)
@@ -108,6 +102,6 @@ exports[`when there is more renders a load more button 1`] = `
         Show All Replies
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
 </Indent>
 `;
diff --git a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
index 84cb64ea1..c7b0d358f 100644
--- a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
@@ -1,25 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<withPropsOnChange(Flex)
+<withPropsOnChange(HorizontalGutter)
   className="Stream-root"
-  direction="column"
-  itemGutter={true}
+  size="double"
 >
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
-  <withContext(createMutationContainer(PostCommentFormContainer))
-    assetID="asset-id"
-  />
-  <withPropsOnChange(Flex)
+  <withPropsOnChange(HorizontalGutter)
+    size="half"
+  >
+    <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer))))))))) />
+    <PostCommentFormFake />
+  </withPropsOnChange(HorizontalGutter)>
+  <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
-    direction="column"
     id="talk-comments-stream-log"
-    itemGutter={true}
     role="log"
   >
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -36,10 +33,8 @@ exports[`renders correctly 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    </withPropsOnChange(HorizontalGutter)>
+    <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -56,31 +51,28 @@ exports[`renders correctly 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-  </withPropsOnChange(Flex)>
-</withPropsOnChange(Flex)>
+    </withPropsOnChange(HorizontalGutter)>
+  </withPropsOnChange(HorizontalGutter)>
+</withPropsOnChange(HorizontalGutter)>
 `;
 
 exports[`when there is more disables load more button 1`] = `
-<withPropsOnChange(Flex)
+<withPropsOnChange(HorizontalGutter)
   className="Stream-root"
-  direction="column"
-  itemGutter={true}
+  size="double"
 >
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
-  <withContext(createMutationContainer(PostCommentFormContainer))
-    assetID="asset-id"
-  />
-  <withPropsOnChange(Flex)
+  <withPropsOnChange(HorizontalGutter)
+    size="half"
+  >
+    <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer))))))))) />
+    <PostCommentFormFake />
+  </withPropsOnChange(HorizontalGutter)>
+  <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
-    direction="column"
     id="talk-comments-stream-log"
-    itemGutter={true}
     role="log"
   >
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -97,10 +89,8 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    </withPropsOnChange(HorizontalGutter)>
+    <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -117,7 +107,7 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
+    </withPropsOnChange(HorizontalGutter)>
     <Localized
       id="comments-stream-loadMore"
     >
@@ -132,30 +122,27 @@ exports[`when there is more disables load more button 1`] = `
         Load More
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
-</withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
+</withPropsOnChange(HorizontalGutter)>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
-<withPropsOnChange(Flex)
+<withPropsOnChange(HorizontalGutter)
   className="Stream-root"
-  direction="column"
-  itemGutter={true}
+  size="double"
 >
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
-  <withContext(createMutationContainer(PostCommentFormContainer))
-    assetID="asset-id"
-  />
-  <withPropsOnChange(Flex)
+  <withPropsOnChange(HorizontalGutter)
+    size="half"
+  >
+    <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer))))))))) />
+    <PostCommentFormFake />
+  </withPropsOnChange(HorizontalGutter)>
+  <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
-    direction="column"
     id="talk-comments-stream-log"
-    itemGutter={true}
     role="log"
   >
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -172,10 +159,8 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    </withPropsOnChange(HorizontalGutter)>
+    <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -192,7 +177,7 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
+    </withPropsOnChange(HorizontalGutter)>
     <Localized
       id="comments-stream-loadMore"
     >
@@ -207,6 +192,6 @@ exports[`when there is more renders a load more button 1`] = `
         Load More
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
-</withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
+</withPropsOnChange(HorizontalGutter)>
 `;
diff --git a/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
new file mode 100644
index 000000000..80f20f2b3
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Flex)
+  itemGutter="half"
+  wrap={true}
+>
+  <Localized
+    id="comments-userBoxAuthenticated-signedInAs"
+    username={<Username />}
+  >
+    <withPropsOnChange(Typography)
+      container="div"
+      variant="bodyCopy"
+    >
+      Signed in as &lt;username&gt;&lt;/username&gt;.
+    </withPropsOnChange(Typography)>
+  </Localized>
+  <Localized
+    button={
+      <withPropsOnChange(Button)
+        color="primary"
+        onClick={[Function]}
+        size="small"
+        variant="underlined"
+      />
+    }
+    id="comments-userBoxAuthenticated-notYou"
+  >
+    <withPropsOnChange(Typography)
+      container={[Function]}
+      variant="bodyCopy"
+    >
+      Not you? &lt;button&gt;Sign Out&lt;/button&gt;
+    </withPropsOnChange(Typography)>
+  </Localized>
+</withPropsOnChange(Flex)>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
index 9cf950ec6..492657d72 100644
--- a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<withPropsOnChange(Flex)>
+<withPropsOnChange(Flex)
+  alignItems="center"
+  itemGutter={true}
+>
   <MatchMediaWithContext
     gteWidth="sm"
   >
@@ -10,14 +13,14 @@ exports[`renders correctly 1`] = `
     >
       <withPropsOnChange(Typography)
         className="UserBoxUnauthenticated-joinText"
-        component="span"
+        container="span"
         variant="bodyCopyBold"
       >
         Join the conversation
       </withPropsOnChange(Typography)>
     </Localized>
     <withPropsOnChange(Typography)
-      component="span"
+      container="span"
       variant="bodyCopyBold"
     >
       |
@@ -30,6 +33,7 @@ exports[`renders correctly 1`] = `
       color="primary"
       onClick={[Function]}
       size="small"
+      variant="underlined"
     >
       Sign in
     </withPropsOnChange(Button)>
diff --git a/src/core/client/stream/containers/StreamContainer.tsx b/src/core/client/stream/containers/StreamContainer.tsx
index d81319deb..d629c35d1 100644
--- a/src/core/client/stream/containers/StreamContainer.tsx
+++ b/src/core/client/stream/containers/StreamContainer.tsx
@@ -3,7 +3,8 @@ import { graphql, RelayPaginationProp } from "react-relay";
 
 import { withPaginationContainer } from "talk-framework/lib/relay";
 import { PropTypesOf } from "talk-framework/types";
-import { StreamContainer_asset as Data } from "talk-stream/__generated__/StreamContainer_asset.graphql";
+import { StreamContainer_asset as AssetData } from "talk-stream/__generated__/StreamContainer_asset.graphql";
+import { StreamContainer_user as UserData } from "talk-stream/__generated__/StreamContainer_user.graphql";
 import {
   COMMENT_SORT,
   StreamContainerPaginationQueryVariables,
@@ -12,7 +13,8 @@ import {
 import Stream from "../components/Stream";
 
 interface InnerProps {
-  asset: Data;
+  asset: AssetData;
+  user: UserData | null;
   relay: RelayPaginationProp;
 }
 
@@ -31,6 +33,7 @@ export class StreamContainer extends React.Component<InnerProps> {
         onLoadMore={this.loadMore}
         hasMore={this.props.relay.hasMore()}
         disableLoadMore={this.state.disableLoadMore}
+        user={this.props.user}
       />
     );
   }
@@ -61,7 +64,7 @@ interface FragmentVariables {
 }
 
 const enhanced = withPaginationContainer<
-  { asset: Data },
+  { asset: AssetData; user: UserData | null },
   InnerProps,
   FragmentVariables,
   StreamContainerPaginationQueryVariables
@@ -88,6 +91,11 @@ const enhanced = withPaginationContainer<
         }
       }
     `,
+    user: graphql`
+      fragment StreamContainer_user on User {
+        ...UserBoxContainer_user
+      }
+    `,
   },
   {
     direction: "forward",
diff --git a/src/core/client/stream/containers/UserBoxContainer.spec.tsx b/src/core/client/stream/containers/UserBoxContainer.spec.tsx
index 122b4e987..d40d0878a 100644
--- a/src/core/client/stream/containers/UserBoxContainer.spec.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.spec.tsx
@@ -14,10 +14,13 @@ it("renders correctly", () => {
         view: "SIGN_IN",
       },
     },
+    user: null,
     // tslint:disable-next-line:no-empty
     showAuthPopup: async () => {},
     // tslint:disable-next-line:no-empty
     setAuthPopupState: async () => {},
+    // tslint:disable-next-line:no-empty
+    signOut: async () => {},
   };
   const wrapper = shallow(<UserBoxContainer {...props} />);
   expect(wrapper).toMatchSnapshot();
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index 359c93d97..cc05e3872 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -1,8 +1,15 @@
 import * as React from "react";
 import { Component } from "react";
 
-import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
+import {
+  graphql,
+  withFragmentContainer,
+  withLocalStateContainer,
+} from "talk-framework/lib/relay";
+import { SignOutMutation, withSignOutMutation } from "talk-framework/mutations";
+import { UserBoxContainer_user as UserData } from "talk-stream/__generated__/UserBoxContainer_user.graphql";
 import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql";
+import UserBoxUnauthenticated from "talk-stream/components/UserBoxUnauthenticated";
 import {
   SetAuthPopupStateMutation,
   ShowAuthPopupMutation,
@@ -11,12 +18,14 @@ import {
 } from "talk-stream/mutations";
 import { Popup } from "talk-ui/components";
 
-import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
+import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
 
 interface InnerProps {
   local: Local;
+  user: UserData | null;
   showAuthPopup: ShowAuthPopupMutation;
   setAuthPopupState: SetAuthPopupStateMutation;
+  signOut: SignOutMutation;
 }
 
 export class UserBoxContainer extends Component<InnerProps> {
@@ -31,13 +40,26 @@ export class UserBoxContainer extends Component<InnerProps> {
       local: {
         authPopup: { open, focus, view },
       },
+      user,
+      signOut,
     } = this.props;
+
+    if (user) {
+      return (
+        <UserBoxAuthenticated
+          onSignOut={signOut}
+          // TODO: why nullable?
+          username={user.username!}
+        />
+      );
+    }
+
     return (
       <>
         <Popup
           href={`/auth.html?view=${view}`}
           title="Talk Auth"
-          features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
+          features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
           open={open}
           focus={focus}
           onFocus={this.handleFocus}
@@ -53,19 +75,29 @@ export class UserBoxContainer extends Component<InnerProps> {
   }
 }
 
-const enhanced = withSetAuthPopupStateMutation(
-  withShowAuthPopupMutation(
-    withLocalStateContainer<Local>(
-      graphql`
-        fragment UserBoxContainerLocal on Local {
-          authPopup {
-            open
-            focus
-            view
+const enhanced = withSignOutMutation(
+  withSetAuthPopupStateMutation(
+    withShowAuthPopupMutation(
+      withLocalStateContainer<Local>(
+        graphql`
+          fragment UserBoxContainerLocal on Local {
+            authPopup {
+              open
+              focus
+              view
+            }
           }
-        }
-      `
-    )(UserBoxContainer)
+        `
+      )(
+        withFragmentContainer<{ user: UserData | null }>({
+          user: graphql`
+            fragment UserBoxContainer_user on User {
+              username
+            }
+          `,
+        })(UserBoxContainer)
+      )
+    )
   )
 );
 
diff --git a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
index c1fdd3d4c..3c650a5af 100644
--- a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
     focus={false}
     href="/auth.html?view=SIGN_IN"
     onBlur={[Function]}
diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx
index 0f88bdf08..31fade961 100644
--- a/src/core/client/stream/index.tsx
+++ b/src/core/client/stream/index.tsx
@@ -40,9 +40,7 @@ async function main() {
   });
 
   const Index: StatelessComponent = () => (
-    <TalkContextProvider
-      value={{ ...context, mediaQueryValues: { width: 640 } }}
-    >
+    <TalkContextProvider value={context}>
       <AppContainer />
     </TalkContextProvider>
   );
diff --git a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
index c8dda11c7..b95cc19ce 100644
--- a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
+++ b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
@@ -13,6 +13,7 @@ exports[`init local state 1`] = `
     \\"__id\\": \\"client:root.local\\",
     \\"__typename\\": \\"Local\\",
     \\"authToken\\": \\"\\",
+    \\"authRevision\\": 0,
     \\"network\\": {
       \\"__ref\\": \\"client:root.local.network\\"
     },
diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts
index 171c52294..81ba25702 100644
--- a/src/core/client/stream/local/initLocalState.ts
+++ b/src/core/client/stream/local/initLocalState.ts
@@ -33,6 +33,9 @@ export default async function initLocalState(
     // Set auth token
     localRecord.setValue(localStorage.getItem("authToken") || "", "authToken");
 
+    // Set initial auth revision, this is increment whenenver auth state might have changed.
+    localRecord.setValue(0, "authRevision");
+
     // Parse query params
     const query = qs.parse(location.search);
 
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index 37426b867..9c2585ebf 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -22,6 +22,10 @@ type Local {
   commentID: String
   authPopup: AuthPopup!
   authToken: String
+  # Used to invalidate the `me` endpoint.
+  # This is incremented whenever the auth status
+  # might have changed.
+  authRevision: Int!
 }
 
 extend type Query {
diff --git a/src/core/client/stream/queries/PermalinkViewQuery.tsx b/src/core/client/stream/queries/PermalinkViewQuery.tsx
index 854bd5e73..3a9b22f71 100644
--- a/src/core/client/stream/queries/PermalinkViewQuery.tsx
+++ b/src/core/client/stream/queries/PermalinkViewQuery.tsx
@@ -13,6 +13,7 @@ import {
 } from "talk-stream/__generated__/PermalinkViewQuery.graphql";
 import { PermalinkViewQueryLocal as Local } from "talk-stream/__generated__/PermalinkViewQueryLocal.graphql";
 
+import { Spinner } from "talk-ui/components";
 import PermalinkViewContainer from "../containers/PermalinkViewContainer";
 
 interface InnerProps {
@@ -29,7 +30,7 @@ export const render = ({
   if (props) {
     return <PermalinkViewContainer comment={props.comment} />;
   }
-  return <div>Loading</div>;
+  return <Spinner />;
 };
 
 const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
diff --git a/src/core/client/stream/queries/StreamQuery.tsx b/src/core/client/stream/queries/StreamQuery.tsx
index 40d57387e..41d262428 100644
--- a/src/core/client/stream/queries/StreamQuery.tsx
+++ b/src/core/client/stream/queries/StreamQuery.tsx
@@ -1,7 +1,5 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
+import React, { StatelessComponent } from "react";
 import { ReadyState } from "react-relay";
-
 import {
   graphql,
   QueryRenderer,
@@ -12,7 +10,7 @@ import {
   StreamQueryVariables,
 } from "talk-stream/__generated__/StreamQuery.graphql";
 import { StreamQueryLocal as Local } from "talk-stream/__generated__/StreamQueryLocal.graphql";
-
+import { Spinner } from "talk-ui/components";
 import StreamContainer from "../containers/StreamContainer";
 
 interface InnerProps {
@@ -23,25 +21,34 @@ export const render = ({ error, props }: ReadyState<StreamQueryResponse>) => {
   if (error) {
     return <div>{error.message}</div>;
   }
+
   if (props) {
-    return <StreamContainer asset={props.asset} />;
+    return <StreamContainer asset={props.asset} user={props.me} />;
   }
-  return <div>Loading</div>;
+
+  return <Spinner />;
 };
 
 const StreamQuery: StatelessComponent<InnerProps> = ({
-  local: { assetID },
+  local: { assetID, authRevision },
 }) => (
   <QueryRenderer<StreamQueryVariables, StreamQueryResponse>
     query={graphql`
-      query StreamQuery($assetID: ID!) {
+      query StreamQuery($assetID: ID!, $authRevision: Int!) {
         asset(id: $assetID) {
           ...StreamContainer_asset
         }
+        # authRevision is increment every time auth state has changed.
+        # This is basically a cache invalidation and causes relay
+        # to automatically update this query.
+        me(clientAuthRevision: $authRevision) {
+          ...StreamContainer_user
+        }
       }
     `}
     variables={{
       assetID,
+      authRevision,
     }}
     render={render}
   />
@@ -51,6 +58,7 @@ const enhanced = withLocalStateContainer<Local>(
   graphql`
     fragment StreamQueryLocal on Local {
       assetID
+      authRevision
     }
   `
 )(StreamQuery);
diff --git a/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
index ef1057221..b7d371bd9 100644
--- a/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
+++ b/src/core/client/stream/queries/__snapshots__/PermalinkViewQuery.spec.tsx.snap
@@ -6,11 +6,7 @@ exports[`renders error 1`] = `
 </div>
 `;
 
-exports[`renders loading 1`] = `
-<div>
-  Loading
-</div>
-`;
+exports[`renders loading 1`] = `<withPropsOnChange(Spinner) />`;
 
 exports[`renders permalink view container 1`] = `
 <withContext(withContext(createMutationContainer(Relay(PermalinkViewContainer))))
diff --git a/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap b/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap
index 317eb3f4a..cd2a53005 100644
--- a/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap
+++ b/src/core/client/stream/queries/__snapshots__/StreamQuery.spec.tsx.snap
@@ -6,11 +6,7 @@ exports[`renders error 1`] = `
 </div>
 `;
 
-exports[`renders loading 1`] = `
-<div>
-  Loading
-</div>
-`;
+exports[`renders loading 1`] = `<withPropsOnChange(Spinner) />`;
 
 exports[`renders stream container 1`] = `
 <Relay(StreamContainer)
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 d3310dc45..4c5ee4a94 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -2,212 +2,170 @@
 
 exports[`loads more comments 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        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"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <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="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              value=""
-            />
-          </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
-        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <div
-              className="Flex-root"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root"
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    What's up?
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <span
-                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                      >
-                        Isabelle
-                      </span>
-                      <time
-                        className="Timestamp-root RelativeTime-root"
-                        dateTime="2018-07-06T18:14:00.000Z"
-                        title="2018-07-06T18:14:00.000Z"
-                      >
-                        2018-07-06T18:14:00.000Z
-                      </time>
-                    </div>
-                  </div>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Hey!
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
+              2018-07-06T18:20:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            What's up?
+          </p>
+          <div
+            className="Comment-footer"
+          />
+        </div>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            >
+              Isabelle
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:14:00.000Z"
+              title="2018-07-06T18:14:00.000Z"
+            >
+              2018-07-06T18:14:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Hey!
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
     </div>
@@ -217,188 +175,155 @@ exports[`loads more comments 1`] = `
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        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"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <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="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              value=""
-            />
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
           <div
-            className="PostCommentForm-postButtonContainer"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
-        </form>
-        <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
-        >
-          <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-          >
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    What's up?
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </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]}
-            >
-              Load More
-            </button>
-          </div>
+            className="Comment-footer"
+          />
         </div>
       </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            >
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
+            >
+              2018-07-06T18:20:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            What's up?
+          </p>
+          <div
+            className="Comment-footer"
+          />
+        </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>
 </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 38f7f0b8f..524244383 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -2,70 +2,55 @@
 
 exports[`renders permalink view 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="PermalinkView-root"
   >
-    <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="Comment-root"
+      role="article"
     >
-      <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"
-      >
-        Show all Comments
-      </a>
       <div
-        className="Flex-root"
+        className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
       >
-        <div
-          className="Flex-flex Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        <span
+          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
         >
-          <div
-            className="Comment-root"
-            role="article"
-          >
-            <div
-              className="Flex-root TopBar-root"
-            >
-              <div
-                className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-            <p
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-            >
-              Joining Too
-            </p>
-            <div
-              className="Comment-footer"
-            />
-          </div>
-        </div>
+          Markus
+        </span>
+        <time
+          className="Timestamp-root RelativeTime-root"
+          dateTime="2018-07-06T18:24:00.000Z"
+          title="2018-07-06T18:24:00.000Z"
+        >
+          2018-07-06T18:24:00.000Z
+        </time>
       </div>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        Joining Too
+      </p>
+      <div
+        className="Comment-footer"
+      />
     </div>
   </div>
 </div>
@@ -73,130 +58,104 @@ exports[`renders permalink view 1`] = `
 
 exports[`show all comments 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        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"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <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="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              value=""
-            />
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
           <div
-            className="PostCommentForm-postButtonContainer"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
-        </form>
-        <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
-        >
-          <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-          >
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+            className="Comment-footer"
+          />
         </div>
       </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 949a40e0c..d3485ab1c 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -2,35 +2,32 @@
 
 exports[`renders permalink view with unknown asset 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="PermalinkView-root"
   >
-    <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"
     >
-      <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"
-      >
-        Show all Comments
-      </a>
-      <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-      >
-        Comment not found
-      </p>
-    </div>
+      Show all Comments
+    </a>
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
   </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 20124a5e6..b211d8810 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -2,165 +2,136 @@
 
 exports[`renders permalink view with unknown comment 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="PermalinkView-root"
   >
-    <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"
     >
-      <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"
-      >
-        Show all Comments
-      </a>
-      <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-      >
-        Comment not found
-      </p>
-    </div>
+      Show all Comments
+    </a>
+    <p
+      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+    >
+      Comment not found
+    </p>
   </div>
 </div>
 `;
 
 exports[`show all comments 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        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"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <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="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
-          </div>
-        </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              value=""
-            />
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
           <div
-            className="PostCommentForm-postButtonContainer"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
-        </form>
-        <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
-        >
-          <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-          >
-            <div
-              className="Flex-root"
-            >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+            className="Comment-footer"
+          />
         </div>
       </div>
     </div>
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 009bbce70..a55ba40a0 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -2,249 +2,203 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        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"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <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="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              value=""
-            />
-          </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
-        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          >
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+            >
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
+            >
+              2018-07-06T18:24:00.000Z
+            </time>
+          </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            I like yoghurt
+          </p>
+          <div
+            className="Comment-footer"
+          />
+        </div>
+        <div
+          className="Indent-root Indent-level0"
+        >
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+            id="talk-comments-replyList-log--comment-with-replies"
+            role="log"
           >
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
+                  Markus
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
               </div>
+              <p
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                Joining Too
+              </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    I like yoghurt
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-                <div
-                  className="Indent-root Indent-level0"
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
                 >
-                  <div
-                    className="Flex-root"
-                    id="talk-comments-replyList-log--comment-with-replies"
-                    role="log"
-                  >
-                    <div
-                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                    >
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                        <p
-                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                        >
-                          Joining Too
-                        </p>
-                        <div
-                          className="Comment-footer"
-                        />
-                      </div>
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                        <p
-                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                        >
-                          What's up?
-                        </p>
-                        <div
-                          className="Comment-footer"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                  2018-07-06T18:20:00.000Z
+                </time>
               </div>
+              <p
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                What's up?
+              </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
           </div>
         </div>
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index f46ff9b5e..33f8dcf13 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -2,171 +2,137 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        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"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <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="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              value=""
-            />
-          </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
-        </form>
+      </div>
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <div
-              className="Flex-root"
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              className="Flex-root"
+              Lukas
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:20:00.000Z"
+              title="2018-07-06T18:20:00.000Z"
             >
-              <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    What's up?
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-              </div>
-            </div>
+              2018-07-06T18:20:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            What's up?
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
       </div>
     </div>
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index d010daaf3..8d5418b63 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -2,191 +2,158 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        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"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <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="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              value=""
-            />
-          </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
-        </form>
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="HorizontalGutter-root HorizontalGutter-full"
+            id="talk-comments-replyList-log--comment-0"
+            role="log"
           >
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-                <div
-                  className="Indent-root Indent-level0"
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
                 >
-                  <div
-                    className="Flex-root"
-                    id="talk-comments-replyList-log--comment-0"
-                    role="log"
-                  >
-                    <div
-                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                    >
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                        <p
-                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                        >
-                          What's up?
-                        </p>
-                        <div
-                          className="Comment-footer"
-                        />
-                      </div>
-                      <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]}
-                      >
-                        Show All Replies
-                      </button>
-                    </div>
-                  </div>
-                </div>
+                  2018-07-06T18:20:00.000Z
+                </time>
               </div>
+              <p
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                What's up?
+              </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
+            <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 Replies
+            </button>
           </div>
         </div>
       </div>
@@ -197,208 +164,170 @@ exports[`renders comment stream 1`] = `
 
 exports[`show all replies 1`] = `
 <div
-  className="Flex-root App-root"
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
 >
   <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Stream-root"
+      className="HorizontalGutter-root HorizontalGutter-half"
     >
       <div
-        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        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"
+      >
+        <textarea
+          className="PostCommentFormFake-textarea"
+          disabled={true}
+          placeholder="Post a comment"
+        />
+        <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="Flex-root"
+          className="Comment-root"
+          role="article"
         >
           <div
-            className="Flex-flex Flex-wrap Flex-alignCenter"
+            className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
+            <span
+              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
-              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]}
+              Markus
+            </span>
+            <time
+              className="Timestamp-root RelativeTime-root"
+              dateTime="2018-07-06T18:24:00.000Z"
+              title="2018-07-06T18:24:00.000Z"
             >
-              Register
-            </button>
+              2018-07-06T18:24:00.000Z
+            </time>
           </div>
+          <p
+            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          >
+            Joining Too
+          </p>
+          <div
+            className="Comment-footer"
+          />
         </div>
-        <form
-          autoComplete="off"
-          className="PostCommentForm-root"
-          onSubmit={[Function]}
-        >
-          <div>
-            <textarea
-              className="PostCommentForm-textarea"
-              name="body"
-              onChange={[Function]}
-              value=""
-            />
-          </div>
-          <div
-            className="PostCommentForm-postButtonContainer"
-          >
-            <button
-              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-              disabled={false}
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-            >
-              Post
-            </button>
-          </div>
-        </form>
         <div
-          aria-live="polite"
-          className="Flex-root"
-          id="talk-comments-stream-log"
-          role="log"
+          className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+            className="HorizontalGutter-root HorizontalGutter-full"
+            id="talk-comments-replyList-log--comment-0"
+            role="log"
           >
             <div
-              className="Flex-root"
+              className="Comment-root"
+              role="article"
             >
               <div
-                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
               >
-                <div
-                  className="Comment-root"
-                  role="article"
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                 >
-                  <div
-                    className="Flex-root TopBar-root"
-                  >
-                    <div
-                      className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                  <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                  >
-                    Joining Too
-                  </p>
-                  <div
-                    className="Comment-footer"
-                  />
-                </div>
-                <div
-                  className="Indent-root Indent-level0"
+                  Lukas
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:20:00.000Z"
+                  title="2018-07-06T18:20:00.000Z"
                 >
-                  <div
-                    className="Flex-root"
-                    id="talk-comments-replyList-log--comment-0"
-                    role="log"
-                  >
-                    <div
-                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                    >
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex Flex-halfItemGutter Flex-wrap 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>
-                        <p
-                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                        >
-                          What's up?
-                        </p>
-                        <div
-                          className="Comment-footer"
-                        />
-                      </div>
-                      <div
-                        className="Comment-root"
-                        role="article"
-                      >
-                        <div
-                          className="Flex-root TopBar-root"
-                        >
-                          <div
-                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-                          >
-                            <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                            >
-                              Isabelle
-                            </span>
-                            <time
-                              className="Timestamp-root RelativeTime-root"
-                              dateTime="2018-07-06T18:14:00.000Z"
-                              title="2018-07-06T18:14:00.000Z"
-                            >
-                              2018-07-06T18:14:00.000Z
-                            </time>
-                          </div>
-                        </div>
-                        <p
-                          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                        >
-                          Hey!
-                        </p>
-                        <div
-                          className="Comment-footer"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                  2018-07-06T18:20:00.000Z
+                </time>
               </div>
+              <p
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                What's up?
+              </p>
+              <div
+                className="Comment-footer"
+              />
+            </div>
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              >
+                <span
+                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                >
+                  Isabelle
+                </span>
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:14:00.000Z"
+                  title="2018-07-06T18:14:00.000Z"
+                >
+                  2018-07-06T18:14:00.000Z
+                </time>
+              </div>
+              <p
+                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              >
+                Hey!
+              </p>
+              <div
+                className="Comment-footer"
+              />
             </div>
           </div>
         </div>
diff --git a/src/core/client/stream/test/loadMore.spec.tsx b/src/core/client/stream/test/loadMore.spec.tsx
index afe07b39f..1a162a572 100644
--- a/src/core/client/stream/test/loadMore.spec.tsx
+++ b/src/core/client/stream/test/loadMore.spec.tsx
@@ -4,6 +4,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -65,13 +68,18 @@ const environment = createEnvironment({
   logNetwork: false,
   resolvers,
   initLocalState: (localRecord, source) => {
+    localRecord.setValue(0, "authRevision");
     localRecord.setValue(assetStub.id, "assetID");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/permalinkView.spec.tsx b/src/core/client/stream/test/permalinkView.spec.tsx
index 1d1dc7843..03e5dfcff 100644
--- a/src/core/client/stream/test/permalinkView.spec.tsx
+++ b/src/core/client/stream/test/permalinkView.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -49,6 +52,7 @@ const environment = createEnvironment({
   logNetwork: false,
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(0, "authRevision");
     localRecord.setValue(assetStub.id, "assetID");
     localRecord.setValue(commentStub.id, "commentID");
   },
@@ -56,7 +60,11 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
index 17be1416e..d87f62d1e 100644
--- a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
+++ b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
@@ -4,6 +4,9 @@ import { RecordProxy } from "relay-runtime";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -20,6 +23,7 @@ const environment = createEnvironment({
   logNetwork: false,
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
+    localRecord.setValue(0, "authRevision");
     localRecord.setValue("unknown-asset-id", "assetID");
     localRecord.setValue("unknown-comment-id", "commentID");
   },
@@ -27,7 +31,11 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
index 0375a9803..4c115b5bd 100644
--- a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
+++ b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -47,12 +50,17 @@ const environment = createEnvironment({
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
     localRecord.setValue("unknown-comment-id", "commentID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/renderReplies.spec.tsx b/src/core/client/stream/test/renderReplies.spec.tsx
index 468317624..da5f138c2 100644
--- a/src/core/client/stream/test/renderReplies.spec.tsx
+++ b/src/core/client/stream/test/renderReplies.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -26,12 +29,17 @@ const environment = createEnvironment({
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetWithReplies.id, "assetID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/renderStream.spec.tsx b/src/core/client/stream/test/renderStream.spec.tsx
index 361f6e2c2..9a1eb8da7 100644
--- a/src/core/client/stream/test/renderStream.spec.tsx
+++ b/src/core/client/stream/test/renderStream.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -26,12 +29,17 @@ const environment = createEnvironment({
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assets[0].id, "assetID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/stream/test/showAllReplies.spec.tsx b/src/core/client/stream/test/showAllReplies.spec.tsx
index 7bf111990..632cf4c90 100644
--- a/src/core/client/stream/test/showAllReplies.spec.tsx
+++ b/src/core/client/stream/test/showAllReplies.spec.tsx
@@ -5,6 +5,9 @@ import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { TalkContext, TalkContextProvider } from "talk-framework/lib/bootstrap";
+import { PostMessageService } from "talk-framework/lib/postMessage";
+import { RestClient } from "talk-framework/lib/rest";
+import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
@@ -83,12 +86,17 @@ const environment = createEnvironment({
   resolvers,
   initLocalState: (localRecord: RecordProxy) => {
     localRecord.setValue(assetStub.id, "assetID");
+    localRecord.setValue(0, "authRevision");
   },
 });
 
 const context: TalkContext = {
   relayEnvironment: environment,
-  localeMessages: [],
+  localeBundles: [],
+  localStorage: createInMemoryStorage(),
+  sessionStorage: createInMemoryStorage(),
+  rest: new RestClient("http://localhost/api"),
+  postMessage: new PostMessageService(),
 };
 
 const testRenderer = TestRenderer.create(
diff --git a/src/core/client/ui/components/BaseButton/BaseButton.css b/src/core/client/ui/components/BaseButton/BaseButton.css
index 14b111258..a20ff333a 100644
--- a/src/core/client/ui/components/BaseButton/BaseButton.css
+++ b/src/core/client/ui/components/BaseButton/BaseButton.css
@@ -1,5 +1,6 @@
 .root {
   composes: buttonReset from "talk-ui/shared/buttonReset.css";
+  text-transform: capitalize;
 }
 
 .keyboardFocus {
diff --git a/src/core/client/ui/components/BaseButton/BaseButton.tsx b/src/core/client/ui/components/BaseButton/BaseButton.tsx
index a92a28d50..8dfa8575b 100644
--- a/src/core/client/ui/components/BaseButton/BaseButton.tsx
+++ b/src/core/client/ui/components/BaseButton/BaseButton.tsx
@@ -32,6 +32,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLButtonElement>;
+
+  type?: "submit" | "reset" | "button";
 }
 
 /**
@@ -45,15 +47,15 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   keyboardFocus,
   mouseHover,
   forwardRef,
-  type: typeProp,
+  type,
   ...rest
 }) => {
   let Element = "button";
+
   if (anchor) {
     Element = "a";
   }
 
-  let type = typeProp;
   if (anchor && type) {
     // tslint:disable:next-line: no-console
     console.warn(
@@ -69,7 +71,9 @@ const BaseButton: StatelessComponent<InnerProps> = ({
     [classes.mouseHover]: mouseHover,
   });
 
-  return <Element {...rest} className={rootClassName} ref={forwardRef} />;
+  return (
+    <Element {...rest} className={rootClassName} ref={forwardRef} type={type} />
+  );
 };
 
 const enhanced = withForwardRef(
diff --git a/src/core/client/ui/components/BaseButton/__snapshots__/BaseButton.spec.tsx.snap b/src/core/client/ui/components/BaseButton/__snapshots__/BaseButton.spec.tsx.snap
index c6fd97a78..84b67f69c 100644
--- a/src/core/client/ui/components/BaseButton/__snapshots__/BaseButton.spec.tsx.snap
+++ b/src/core/client/ui/components/BaseButton/__snapshots__/BaseButton.spec.tsx.snap
@@ -9,6 +9,7 @@ exports[`renders as anchor 1`] = `
   onMouseOut={[Function]}
   onMouseOver={[Function]}
   onTouchEnd={[Function]}
+  type="button"
 >
   Push Me
 </a>
@@ -23,6 +24,7 @@ exports[`renders correctly 1`] = `
   onMouseOut={[Function]}
   onMouseOver={[Function]}
   onTouchEnd={[Function]}
+  type="button"
 >
   Push Me
 </button>
diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css
index 9345a33b6..bf569174f 100644
--- a/src/core/client/ui/components/Button/Button.css
+++ b/src/core/client/ui/components/Button/Button.css
@@ -282,3 +282,63 @@
     }
   }
 }
+
+.variantUnderlined {
+  padding-right: 0;
+  padding-left: 0;
+  border-radius: 0;
+  border-bottom: 1px solid currentColor;
+  padding: 0;
+
+  &.colorRegular {
+    color: var(--palette-grey-main);
+  }
+  &.colorPrimary {
+    color: var(--palette-primary-main);
+  }
+  &.colorError {
+    color: var(--palette-error-main);
+  }
+  &.colorSuccess {
+    color: var(--palette-success-main);
+  }
+
+  &:not(.disabled) {
+    &.colorRegular {
+      &.mouseHover {
+        color: var(--palette-grey-light);
+      }
+      &:active,
+      &.active {
+        color: var(--palette-grey-lighter);
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        color: var(--palette-primary-light);
+      }
+      &:active,
+      &.active {
+        color: var(--palette-primary-lighter);
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        color: var(--palette-error-light);
+      }
+      &:active,
+      &.active {
+        color: var(--palette-error-lighter);
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        color: var(--palette-success-light);
+      }
+      &:active,
+      &.active {
+        color: var(--palette-success-lighter);
+      }
+    }
+  }
+}
diff --git a/src/core/client/ui/components/Button/Button.mdx b/src/core/client/ui/components/Button/Button.mdx
index 4c4a15659..f6d85b6fc 100644
--- a/src/core/client/ui/components/Button/Button.mdx
+++ b/src/core/client/ui/components/Button/Button.mdx
@@ -13,7 +13,7 @@ import Flex from '../Flex'
 
 ## Regular Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button>Push Me</Button>
     <Button size="small">Push Me</Button>
     <Button size="large">Push Me</Button>
@@ -29,7 +29,7 @@ import Flex from '../Flex'
 
 ## Filled Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button variant="filled">Push Me</Button>
     <Button variant="filled" size="small">Push Me</Button>
     <Button variant="filled" size="large">Push Me</Button>
@@ -45,7 +45,7 @@ import Flex from '../Flex'
 
 ## Outlined Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button variant="outlined">Push Me</Button>
     <Button variant="outlined" size="small">Push Me</Button>
     <Button variant="outlined" size="large">Push Me</Button>
@@ -61,7 +61,7 @@ import Flex from '../Flex'
 
 ## Ghost Button
 <Playground>
-  <Flex itemGutter>
+  <Flex itemGutter wrap>
     <Button variant="ghost">Push Me</Button>
     <Button variant="ghost" size="small">Push Me</Button>
     <Button variant="ghost" size="large">Push Me</Button>
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index fe11b0dfc..424b8bbe5 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -28,7 +28,7 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   color?: "regular" | "primary" | "error" | "success";
 
   /** Variant of the button */
-  variant?: "regular" | "filled" | "outlined" | "ghost";
+  variant?: "regular" | "filled" | "outlined" | "ghost" | "underlined";
 
   /** If set renders a full width button */
   fullWidth?: boolean;
@@ -36,6 +36,8 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** If set renders active state e.g. to implement toggle buttons */
   active?: boolean;
 
+  type?: "submit" | "reset" | "button";
+
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLButtonElement>;
 }
@@ -57,6 +59,7 @@ export class Button extends React.Component<InnerProps> {
       disabled,
       forwardRef,
       variant,
+      type,
       ...rest
     } = this.props;
 
@@ -72,6 +75,7 @@ export class Button extends React.Component<InnerProps> {
       [classes.variantFilled]: variant === "filled",
       [classes.variantOutlined]: variant === "outlined",
       [classes.variantGhost]: variant === "ghost",
+      [classes.variantUnderlined]: variant === "underlined",
       [classes.fullWidth]: fullWidth,
       [classes.active]: active,
       [classes.disabled]: disabled,
@@ -83,6 +87,7 @@ export class Button extends React.Component<InnerProps> {
         classes={pick(classes, "keyboardFocus", "mouseHover")}
         disabled={disabled}
         forwardRef={forwardRef}
+        type={type}
         {...rest}
       />
     );
diff --git a/src/core/client/ui/components/CallOut/CallOut.mdx b/src/core/client/ui/components/CallOut/CallOut.mdx
index b3977a56a..fb71ea7ee 100644
--- a/src/core/client/ui/components/CallOut/CallOut.mdx
+++ b/src/core/client/ui/components/CallOut/CallOut.mdx
@@ -5,19 +5,19 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import CallOut from './CallOut'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # CallOut
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <CallOut>This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
     <CallOut color="primary">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
     <CallOut color="error">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
     <CallOut color="error">The email address or password you entered is incorrect. Try again</CallOut>
     <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 2e6914c7f..9f20d8414 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -1,10 +1,8 @@
 .root {
-  width: 100%;
 }
 
 .flex {
   display: flex;
-  width: 100%;
 }
 
 .halfItemGutter {
diff --git a/src/core/client/ui/components/Flex/Flex.spec.tsx b/src/core/client/ui/components/Flex/Flex.spec.tsx
index 5c68f0de0..eaa7cf0b6 100644
--- a/src/core/client/ui/components/Flex/Flex.spec.tsx
+++ b/src/core/client/ui/components/Flex/Flex.spec.tsx
@@ -55,7 +55,7 @@ it("renders with item gutter", () => {
   expect(renderer.toJSON()).toMatchSnapshot();
 });
 
-it("renders with halfe item gutter", () => {
+it("renders with half item gutter", () => {
   const props: PropTypesOf<typeof Flex> = {
     itemGutter: "half",
   };
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index bf66f9084..1d2dd932a 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -47,12 +47,6 @@ const Flex: StatelessComponent<InnerProps> = props => {
     ...rest
   } = props;
 
-  let alignItemsWithDefault = alignItems;
-  if (!alignItems) {
-    alignItemsWithDefault =
-      direction && direction.startsWith("column") ? "flex-start" : "center";
-  }
-
   const classObject: Record<string, boolean> = {
     [classes.itemGutter]: itemGutter === true,
     [classes.halfItemGutter]: itemGutter === "half",
@@ -67,10 +61,8 @@ const Flex: StatelessComponent<InnerProps> = props => {
     ] = true;
   }
 
-  if (alignItemsWithDefault) {
-    classObject[
-      (classes as any)[`align${pascalCase(alignItemsWithDefault)}`]
-    ] = true;
+  if (alignItems) {
+    classObject[(classes as any)[`align${pascalCase(alignItems)}`]] = true;
   }
 
   if (direction) {
@@ -80,18 +72,35 @@ const Flex: StatelessComponent<InnerProps> = props => {
   const rootClassNames: string = cn(classes.root, className);
   const flexClassNames: string = cn(classes.flex, classObject);
 
-  // The first div is required to support nested `Flex` components with itemGutters.
+  // text nodes can't be modified with css, so replace them with spans.
+  // Readd spaces at the beginning or end of text nodes because
+  // flex removes it.
+  const content = React.Children.map(children, child => {
+    if (typeof child === "string") {
+      return <span>{child.replace(/^ +| +$/g, "\xa0")}</span>;
+    }
+    return child;
+  });
+
+  if (wrap && itemGutter) {
+    // The first div is required to support nested `Flex` components with itemGutters.
+    return (
+      <div ref={forwardRef} className={rootClassNames} {...rest}>
+        <div className={flexClassNames}>{content}</div>
+      </div>
+    );
+  }
   return (
-    <div ref={forwardRef} className={rootClassNames} {...rest}>
-      <div className={flexClassNames}>{children}</div>
+    <div
+      ref={forwardRef}
+      className={cn(rootClassNames, flexClassNames)}
+      {...rest}
+    >
+      {content}
     </div>
   );
 };
 
-Flex.defaultProps = {
-  wrap: true,
-};
-
 const enhanced = withForwardRef(withStyles(styles)(Flex));
 export default enhanced;
 export type FlexProps = PropTypesOf<typeof enhanced>;
diff --git a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
index d96f60ebd..826ae9de6 100644
--- a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
+++ b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
@@ -2,70 +2,50 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionRow"
 >
-  <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
-exports[`renders with halfe item gutter 1`] = `
+exports[`renders with half item gutter 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-halfItemGutter"
 >
-  <div
-    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders with item gutter 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-itemGutter"
 >
-  <div
-    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders with wrap 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-wrap"
 >
-  <div
-    className="Flex-flex Flex-wrap Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders with wrap reverse 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-wrapReverse"
 >
-  <div
-    className="Flex-flex Flex-wrapReverse Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
diff --git a/src/core/client/ui/components/FormField/FormField.css b/src/core/client/ui/components/FormField/FormField.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/src/core/client/ui/components/FormField/FormField.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/src/core/client/ui/components/FormField/FormField.mdx b/src/core/client/ui/components/FormField/FormField.mdx
new file mode 100644
index 000000000..6005da178
--- /dev/null
+++ b/src/core/client/ui/components/FormField/FormField.mdx
@@ -0,0 +1,22 @@
+---
+name: FormField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import { InputLabel, ValidationMessage, TextField, InputDescription, FormField } from '../'
+
+# FormField
+
+`FormField` is to be used with Form Components: `InputLabel`, `InputDescription`, `TextField`, `ValidationMessage`, etc.
+FormField manages the gutters between inner elements. It's a form field wrapper of the `Flex` Component.
+
+## Justify content
+<Playground>
+    <FormField>
+      <InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
+      <TextField fullWidth />
+      <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
+    </FormField>
+</Playground>
diff --git a/src/core/client/ui/components/FormField/FormField.spec.tsx b/src/core/client/ui/components/FormField/FormField.spec.tsx
new file mode 100644
index 000000000..ec94aa250
--- /dev/null
+++ b/src/core/client/ui/components/FormField/FormField.spec.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import FormField from "../FormField";
+
+import { InputDescription, InputLabel, TextField } from "../../components";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <FormField>Form Components should go here</FormField>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("works with multiple form components", () => {
+  const renderer = TestRenderer.create(
+    <FormField>
+      <InputLabel>Username</InputLabel>
+      <InputDescription>
+        A unique identifier displayed on your comments. You may use “_” and “.”
+      </InputDescription>
+      <TextField />
+    </FormField>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/FormField/FormField.tsx b/src/core/client/ui/components/FormField/FormField.tsx
new file mode 100644
index 000000000..64dab3140
--- /dev/null
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -0,0 +1,32 @@
+import cn from "classnames";
+import React, { ReactNode } from "react";
+import { StatelessComponent } from "react";
+
+import { withStyles } from "talk-ui/hocs";
+
+import HorizontalGutter from "../HorizontalGutter";
+import * as styles from "./FormField.css";
+
+interface InnerProps {
+  children: ReactNode;
+  classes: typeof styles;
+  id?: string;
+  className?: string;
+}
+
+const FormField: StatelessComponent<InnerProps> = props => {
+  const { classes, className, children, ...rest } = props;
+
+  return (
+    <HorizontalGutter
+      className={cn(classes.root, className)}
+      size="half"
+      {...rest}
+    >
+      {children}
+    </HorizontalGutter>
+  );
+};
+
+const enhanced = withStyles(styles)(FormField);
+export default enhanced;
diff --git a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
new file mode 100644
index 000000000..874adc015
--- /dev/null
+++ b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+>
+  Form Components should go here
+</div>
+`;
+
+exports[`works with multiple form components 1`] = `
+<div
+  className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+>
+  <label
+    className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+  >
+    Username
+  </label>
+  <p
+    className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+  >
+    A unique identifier displayed on your comments. You may use “_” and “.”
+  </p>
+  <input
+    className="TextField-root TextField-colorRegular"
+    placeholder=""
+    type="text"
+  />
+</div>
+`;
diff --git a/src/core/client/ui/components/FormField/index.ts b/src/core/client/ui/components/FormField/index.ts
new file mode 100644
index 000000000..e2d6f74d4
--- /dev/null
+++ b/src/core/client/ui/components/FormField/index.ts
@@ -0,0 +1 @@
+export { default } from "./FormField";
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css
new file mode 100644
index 000000000..aa588d983
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css
@@ -0,0 +1,27 @@
+.root {
+}
+
+.half {
+  & > * {
+    margin: 0 0 calc(0.5 * var(--spacing-unit)) 0 !important;
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+.full {
+  & > * {
+    margin: 0 0 var(--spacing-unit) 0 !important;
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+.double {
+  & > * {
+    margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
new file mode 100644
index 000000000..0ce220c50
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
@@ -0,0 +1,42 @@
+---
+name: HorizontalGutter
+menu: UI Kit
+---
+
+import { Playground } from "docz"
+import HorizontalGutter from "./HorizontalGutter"
+import Button from "../Button"
+
+# Spinner
+
+## Usage
+
+### Full gutter
+
+<Playground>
+  <HorizontalGutter>
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+  </HorizontalGutter>
+</Playground>
+
+### Half gutter
+
+<Playground>
+  <HorizontalGutter size="half">
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+  </HorizontalGutter>
+</Playground>
+
+### Double gutter
+
+<Playground>
+  <HorizontalGutter size="double">
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+    <div style={{backgroundColor: "grey", height: "30px"}} />
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx
new file mode 100644
index 000000000..2518a0e5f
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import HorizontalGutter from "./HorizontalGutter";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof HorizontalGutter> = {
+    className: "custom",
+  };
+  const renderer = TestRenderer.create(<HorizontalGutter {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders double size", () => {
+  const props: PropTypesOf<typeof HorizontalGutter> = {
+    size: "double",
+  };
+  const renderer = TestRenderer.create(<HorizontalGutter {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
new file mode 100644
index 000000000..5594bd415
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
@@ -0,0 +1,37 @@
+import cn from "classnames";
+import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
+
+import { withForwardRef, withStyles } from "talk-ui/hocs";
+import { PropTypesOf } from "talk-ui/types";
+
+import * as styles from "./HorizontalGutter.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;
+
+  size?: "half" | "full" | "double";
+
+  /** The name of the HorizontalGutter to render */
+  children?: React.ReactNode;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLDivElement>;
+}
+
+const HorizontalGutter: StatelessComponent<InnerProps> = props => {
+  const { classes, className, size, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className, classes[size!]);
+  return <div className={rootClassName} {...rest} ref={forwardRef} />;
+};
+
+HorizontalGutter.defaultProps = {
+  size: "full",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(HorizontalGutter));
+export type HorizontalGutterProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap b/src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap
new file mode 100644
index 000000000..15c0915ed
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="HorizontalGutter-root custom HorizontalGutter-full"
+/>
+`;
+
+exports[`renders double size 1`] = `
+<div
+  className="HorizontalGutter-root HorizontalGutter-double"
+/>
+`;
diff --git a/src/core/client/ui/components/HorizontalGutter/index.ts b/src/core/client/ui/components/HorizontalGutter/index.ts
new file mode 100644
index 000000000..74ebbbd3c
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/index.ts
@@ -0,0 +1 @@
+export { default, HorizontalGutterProps } from "./HorizontalGutter";
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.css b/src/core/client/ui/components/InputDescription/InputDescription.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/InputDescription.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.mdx b/src/core/client/ui/components/InputDescription/InputDescription.mdx
new file mode 100644
index 000000000..7a68cc49f
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/InputDescription.mdx
@@ -0,0 +1,16 @@
+---
+name: InputDescription
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import InputDescription from './InputDescription'
+
+# Flex
+
+`InputDescription` is to be used with Form Components.
+
+## Align items
+<Playground>
+  <InputDescription>This is a description</InputDescription>
+</Playground>
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.spec.tsx b/src/core/client/ui/components/InputDescription/InputDescription.spec.tsx
new file mode 100644
index 000000000..25987bf3d
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/InputDescription.spec.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import InputDescription from "../InputDescription";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <InputDescription>Form Components should go here</InputDescription>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.tsx b/src/core/client/ui/components/InputDescription/InputDescription.tsx
new file mode 100644
index 000000000..d36d5fe7a
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/InputDescription.tsx
@@ -0,0 +1,24 @@
+import React, { ReactNode, StatelessComponent } from "react";
+import { Typography } from "talk-ui/components";
+
+interface InputDescriptionProps {
+  children: ReactNode;
+  id?: string;
+  className?: string;
+}
+
+const InputDescription: StatelessComponent<InputDescriptionProps> = props => {
+  const { className, children, ...rest } = props;
+  return (
+    <Typography
+      variant="inputDescription"
+      color="textSecondary"
+      className={className}
+      {...rest}
+    >
+      {children}
+    </Typography>
+  );
+};
+
+export default InputDescription;
diff --git a/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap b/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
new file mode 100644
index 000000000..90078c59e
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<p
+  className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+>
+  Form Components should go here
+</p>
+`;
diff --git a/src/core/client/ui/components/InputDescription/index.ts b/src/core/client/ui/components/InputDescription/index.ts
new file mode 100644
index 000000000..6fd0949a5
--- /dev/null
+++ b/src/core/client/ui/components/InputDescription/index.ts
@@ -0,0 +1 @@
+export { default } from "./InputDescription";
diff --git a/src/core/client/ui/components/InputLabel/InputLabel.mdx b/src/core/client/ui/components/InputLabel/InputLabel.mdx
index 8d7721ba7..57b5156cb 100644
--- a/src/core/client/ui/components/InputLabel/InputLabel.mdx
+++ b/src/core/client/ui/components/InputLabel/InputLabel.mdx
@@ -5,15 +5,15 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import InputLabel from './InputLabel.tsx'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # InputLabel
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <InputLabel>Well... Hello there.</InputLabel>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 
diff --git a/src/core/client/ui/components/Spinner/Spinner.css b/src/core/client/ui/components/Spinner/Spinner.css
new file mode 100644
index 000000000..4115e48a1
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/Spinner.css
@@ -0,0 +1,63 @@
+.spinner {
+  animation: rotator 1.4s linear infinite;
+}
+
+@keyframes rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+.path {
+  stroke: var(--palette-primary-main);
+  stroke-dasharray: 187;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
+}
+
+@keyframes colors {
+  0% {
+    stroke: var(--palette-primary-main);
+  }
+  100% {
+    stroke: var(--palette-primary-light);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 187;
+  }
+  50% {
+    stroke-dashoffset: 46.75;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: 187;
+    transform: rotate(450deg);
+  }
+}
+
+@keyframes fullRotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Hack for IE and Edge as they don't support css animations on SVG elements. */
+_:-ms-lang(x),
+.path {
+  stroke-dasharray: 160;
+}
+
+_:-ms-lang(x),
+.spinner {
+  animation: fullRotator 1.4s linear infinite;
+}
diff --git a/src/core/client/ui/components/Spinner/Spinner.mdx b/src/core/client/ui/components/Spinner/Spinner.mdx
new file mode 100644
index 000000000..66ef80309
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/Spinner.mdx
@@ -0,0 +1,15 @@
+---
+name: Spinner
+menu: UI Kit
+---
+
+import { Playground } from "docz"
+import Spinner from "./Spinner"
+
+# Spinner
+
+## Basic usage
+
+<Playground>
+  <Spinner />
+</Playground>
diff --git a/src/core/client/ui/components/Spinner/Spinner.spec.tsx b/src/core/client/ui/components/Spinner/Spinner.spec.tsx
new file mode 100644
index 000000000..05521bf86
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/Spinner.spec.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import Spinner from "../Spinner";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(<Spinner />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/Spinner/Spinner.tsx b/src/core/client/ui/components/Spinner/Spinner.tsx
new file mode 100644
index 000000000..1531a8caf
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/Spinner.tsx
@@ -0,0 +1,44 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./Spinner.css";
+
+export interface SpinnerProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+}
+
+const Spinner: StatelessComponent<SpinnerProps> = props => {
+  const { className, classes } = props;
+
+  const rootClassName = cn(classes.spinner, className);
+
+  return (
+    <svg
+      className={rootClassName}
+      width="40px"
+      height="40px"
+      viewBox="0 0 66 66"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        className={styles.path}
+        fill="none"
+        strokeWidth="6"
+        strokeLinecap="round"
+        cx="33"
+        cy="33"
+        r="30"
+      />
+    </svg>
+  );
+};
+
+const enhanced = withStyles(styles)(Spinner);
+export default enhanced;
diff --git a/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap b/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
new file mode 100644
index 000000000..cd6f511b5
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<svg
+  className="Spinner-spinner"
+  height="40px"
+  viewBox="0 0 66 66"
+  width="40px"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <circle
+    className="Spinner-path"
+    cx="33"
+    cy="33"
+    fill="none"
+    r="30"
+    strokeLinecap="round"
+    strokeWidth="6"
+  />
+</svg>
+`;
diff --git a/src/core/client/ui/components/Spinner/index.ts b/src/core/client/ui/components/Spinner/index.ts
new file mode 100644
index 000000000..66d1096a0
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/index.ts
@@ -0,0 +1 @@
+export { default } from "./Spinner";
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index 970a4ce29..49d6bdee4 100644
--- a/src/core/client/ui/components/TextField/TextField.css
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -5,6 +5,8 @@
   padding: calc(0.5 * var(--spacing-unit));
   box-sizing: border-box;
   border-radius: var(--round-corners);
+  height: 36px;
+  line-height: 36px;
 }
 
 .colorRegular {
diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx
index 7fee8bea9..9f19747f4 100644
--- a/src/core/client/ui/components/TextField/TextField.mdx
+++ b/src/core/client/ui/components/TextField/TextField.mdx
@@ -5,16 +5,16 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import TextField from './TextField.tsx'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # TextField
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <TextField placeholder="This is a placeholder" />
     <TextField defaultValue="This is an input field" />
     <TextField color="error" defaultValue="A TextField with an error" />
     <TextField color="error" defaultValue="A TextField with an error" fullWidth/>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index 1c7089c4a..2e4fe448b 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -1,10 +1,11 @@
 import cn from "classnames";
-import React from "react";
+import React, { ChangeEvent, EventHandler } from "react";
 import { StatelessComponent } from "react";
 import { withStyles } from "talk-ui/hocs";
 import * as styles from "./TextField.css";
 
 export interface TextFieldProps {
+  id?: string;
   /**
    * The content value of the component.
    */
@@ -37,6 +38,20 @@ export interface TextFieldProps {
    * Mark as readonly
    */
   readOnly?: boolean;
+  /**
+   * Name
+   */
+  name?: string;
+  /**
+   * type: Here we only allow text type values
+   */
+  type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url";
+  /**
+   * onChange
+   */
+  onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
+
+  disabled?: boolean;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {
@@ -72,8 +87,8 @@ const TextField: StatelessComponent<TextFieldProps> = props => {
 
 TextField.defaultProps = {
   color: "regular",
-  fullWidth: false,
   placeholder: "",
+  type: "text",
 };
 
 const enhanced = withStyles(styles)(TextField);
diff --git a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
index a277de918..59ea7abbe 100644
--- a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
+++ b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
@@ -5,5 +5,6 @@ exports[`renders correctly 1`] = `
   className="TextField-root TextField-colorRegular custom"
   defaultValue="Hello World"
   placeholder=""
+  type="text"
 />
 `;
diff --git a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
index 05ab31e56..3a7fcdbda 100644
--- a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
+++ b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
@@ -6,7 +6,7 @@ menu: UI Kit
 import { Playground } from 'docz'
 import ToggleShow from './ToggleShow'
 import Button from '../Button'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # ToggleShow
 A render props component to manage visible state.
@@ -15,12 +15,12 @@ A render props component to manage visible state.
 <Playground>
   <ToggleShow>
     {({ toggleShow, show }) => (
-      <Flex itemGutter direction="column">
+      <HorizontalGutter>
         {show && <div>Hello World!</div>}
         <Button onClick={toggleShow} variant="filled" color="primary">
           Toggle Show
         </Button>
-      </Flex>
+      </HorizontalGutter>
     )}
   </ToggleShow>
 </Playground>
diff --git a/src/core/client/ui/components/Typography/Typography.css b/src/core/client/ui/components/Typography/Typography.css
index 22d06c2ed..ec86f3c9f 100644
--- a/src/core/client/ui/components/Typography/Typography.css
+++ b/src/core/client/ui/components/Typography/Typography.css
@@ -39,6 +39,10 @@
   composes: inputLabel from "talk-ui/shared/typography.css";
 }
 
+.inputDescription {
+  composes: inputDescription from "talk-ui/shared/typography.css";
+}
+
 .timestamp {
   composes: timestamp from "talk-ui/shared/typography.css";
 }
diff --git a/src/core/client/ui/components/Typography/Typography.mdx b/src/core/client/ui/components/Typography/Typography.mdx
index f30f8e6c2..8f265fdfa 100644
--- a/src/core/client/ui/components/Typography/Typography.mdx
+++ b/src/core/client/ui/components/Typography/Typography.mdx
@@ -5,13 +5,13 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import Typography from './Typography'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # Typography
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <Typography variant="heading1">Heading1</Typography>
     <Typography variant="heading2">Heading2</Typography>
     <Typography variant="heading3">Heading3</Typography>
@@ -19,28 +19,28 @@ import Flex from '../Flex'
     <Typography variant="bodyCopy">BodyCopy</Typography>
     <Typography variant="bodyCopyBold">bodyCopyBold</Typography>
     <Typography variant="timestamp">timestamp</Typography>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 ## Using different colors
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <Typography color="textPrimary">textPrimary</Typography>
     <Typography color="textSecondary">textSecondary</Typography>
     <Typography color="success">success</Typography>
     <Typography color="error">error</Typography>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 ## Set align
 <Playground>
-  <Flex itemGutter direction="column" alignItems="stretch" style={{width: "200px"}}>
+  <HorizontalGutter style={{width: "200px"}}>
     <Typography align="left">left</Typography>
     <Typography align="center">center</Typography>
     <Typography align="right">right</Typography>
     <Typography align="justify"> No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo
   quiera, simplemente porque es el dolor.</Typography>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 ## Cut off long text
diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx
index 5eeb3b8ee..a6912f04c 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/Typography/Typography.tsx
@@ -15,6 +15,7 @@ type Variant =
   | "bodyCopy"
   | "bodyCopyBold"
   | "inputLabel"
+  | "inputDescription"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -28,7 +29,7 @@ interface InnerProps extends HTMLAttributes<any> {
   /**
    * The content of the component.
    */
-  children: ReactNode;
+  children?: ReactNode;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -48,11 +49,11 @@ interface InnerProps extends HTMLAttributes<any> {
     | "error"
     | "success";
   /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
+   * The container used for the root node.
+   * Either a string to use a DOM element, a component, or an element.
    * By default, it maps the variant to a good default headline component.
    */
-  component?: React.ComponentType<any> | string;
+  container?: React.ReactElement<any> | React.ComponentType<any> | string;
   /**
    * If `true`, the text will have a bottom margin.
    */
@@ -86,7 +87,7 @@ const Typography: StatelessComponent<InnerProps> = props => {
     classes,
     className,
     color,
-    component,
+    container,
     gutterBottom,
     headlineMapping,
     noWrap,
@@ -116,10 +117,20 @@ const Typography: StatelessComponent<InnerProps> = props => {
     className
   );
 
-  const Component =
-    component || (paragraph ? "p" : headlineMapping![variant!]) || "span";
+  const Container =
+    container || (paragraph ? "p" : headlineMapping![variant!]) || "span";
 
-  return <Component ref={forwardRef} className={rootClassName} {...rest} />;
+  const innerProps = {
+    ref: forwardRef,
+    className: rootClassName,
+    ...rest,
+  };
+
+  if (React.isValidElement<any>(Container)) {
+    return React.cloneElement(Container, innerProps);
+  } else {
+    return <Container {...innerProps} />;
+  }
 };
 
 Typography.defaultProps = {
@@ -133,8 +144,9 @@ Typography.defaultProps = {
     heading4: "h1",
     bodyCopy: "p",
     bodyCopyBold: "p",
-    inputLabel: "label",
     timestamp: "span",
+    inputLabel: "label",
+    inputDescription: "p",
   },
   noWrap: false,
   paragraph: false,
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
index 35537e098..c8e7b11ad 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
@@ -5,16 +5,16 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import ValidationMessage from './ValidationMessage.tsx'
-import Flex from '../Flex'
+import HorizontalGutter from '../HorizontalGutter'
 
 # ValidationMessage
 
 ## Basic Use
 <Playground>
-  <Flex itemGutter direction="column">
+  <HorizontalGutter>
     <ValidationMessage>Invalid characters. Try again</ValidationMessage>
     <ValidationMessage fullWidth>Account with this email address already exists. Try another email. </ValidationMessage>
-  </Flex>
+  </HorizontalGutter>
 </Playground>
 
 
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
index f4c5406f7..0cc781560 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
@@ -1,7 +1,8 @@
 import cn from "classnames";
-import React from "react";
-import { ReactNode, StatelessComponent } from "react";
+import React, { ReactNode, StatelessComponent } from "react";
+
 import { withStyles } from "talk-ui/hocs";
+
 import Icon from "../Icon";
 import * as styles from "./ValidationMessage.css";
 
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 81d32ebf7..5c29b3f1a 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -14,3 +14,7 @@ export { default as TextField } from "./TextField";
 export { default as CallOut } from "./CallOut";
 export { default as ClickOutside } from "./ClickOutside";
 export { default as Popup } from "./Popup";
+export { default as FormField } from "./FormField";
+export { default as InputDescription } from "./InputDescription";
+export { default as Spinner } from "./Spinner";
+export { default as HorizontalGutter } from "./HorizontalGutter";
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 677b168d2..3cd3a2c01 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -1,7 +1,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 300;
   src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
     url("typeface-source-sans-pro/files/source-sans-pro-latin-300.woff2")
@@ -13,7 +13,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 400;
   src: local("Source Sans Pro Regular italic"),
     local("Source Sans Pro-Regularitalic"),
@@ -26,7 +26,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 600;
   src: local("Source Sans Pro SemiBold italic"),
     local("Source Sans Pro-SemiBolditalic"),
@@ -39,7 +39,7 @@
 @font-face {
   font-family: "Manuale";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 400;
   src: local("Manuale Regular "), local("Manuale-Regular"),
     url("typeface-manuale/files/manuale-latin-400.woff2") format("woff2"),
@@ -49,7 +49,7 @@
 @font-face {
   font-family: "Manuale";
   font-style: normal;
-  font-display: swap;
+  font-display: block;
   font-weight: 600;
   src: local("Manuale SemiBold "), local("Manuale-SemiBold"),
     url("typeface-manuale/files/manuale-latin-600.woff2") format("woff2"),
@@ -60,7 +60,7 @@
   font-size: calc(24rem / var(--rem-base));
   font-weight: var(--font-weight-medium);
   font-family: var(--font-family-serif);
-  line-height: calc(32em / 24);
+  line-height: calc(26em / 24);
   letter-spacing: calc(0.2em / 24);
   color: var(--palette-text-primary);
 }
@@ -69,7 +69,7 @@
   font-size: calc(20rem / var(--rem-base));
   font-weight: var(--font-weight-medium);
   font-family: var(--font-family-serif);
-  line-height: calc(24em / 20);
+  line-height: calc(22em / 20);
   letter-spacing: calc(0.2em / 20);
   color: var(--palette-text-primary);
 }
@@ -160,6 +160,15 @@
   color: var(--palette-text-primary);
 }
 
+.inputDescription {
+  font-size: calc(14rem / var(--rem-base));
+  font-weight: var(--font-weight-regular);
+  font-family: var(--font-family-sans-serif);
+  line-height: calc(18em / 16);
+  letter-spacing: calc(0.2em / 16);
+  color: var(--palette-text-secondary);
+}
+
 .placeholder {
   font-family: var(--font-family-sans-serif);
   font-weight: var(--font-weight-regular);
diff --git a/src/core/common/utils/animationFrame.ts b/src/core/common/utils/animationFrame.ts
new file mode 100644
index 000000000..8ef6f152c
--- /dev/null
+++ b/src/core/common/utils/animationFrame.ts
@@ -0,0 +1,4 @@
+/** A promisified animation frame. */
+export default function animationFrame() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
diff --git a/src/core/common/utils/index.ts b/src/core/common/utils/index.ts
index b5b0a0be6..28435047e 100644
--- a/src/core/common/utils/index.ts
+++ b/src/core/common/utils/index.ts
@@ -1,3 +1,4 @@
 export { default as timeout } from "./timeout";
+export { default as animationFrame } from "./animationFrame";
 export { default as pascalCase } from "./pascalCase";
 export { default as oncePerFrame } from "./oncePerFrame";
diff --git a/src/core/server/app/handlers/auth/local.ts b/src/core/server/app/handlers/auth/local.ts
index 48daf4c32..25688d25a 100644
--- a/src/core/server/app/handlers/auth/local.ts
+++ b/src/core/server/app/handlers/auth/local.ts
@@ -1,8 +1,12 @@
 import { RequestHandler } from "express";
+import { Redis } from "ioredis";
 import Joi from "joi";
 import { Db } from "mongodb";
 
-import { handleSuccessfulLogin } from "talk-server/app/middleware/passport";
+import {
+  handleLogout,
+  handleSuccessfulLogin,
+} from "talk-server/app/middleware/passport";
 import { JWTSigningConfig } from "talk-server/app/middleware/passport/jwt";
 import { validate } from "talk-server/app/request/body";
 import { GQLUSER_ROLE } from "talk-server/graph/tenant/schema/__generated__/types";
@@ -74,3 +78,39 @@ export const signupHandler = (options: SignupOptions): RequestHandler => async (
     return next(err);
   }
 };
+
+export interface LogoutOptions {
+  redis: Redis;
+}
+
+export const logoutHandler = (options: LogoutOptions): RequestHandler => async (
+  req: Request,
+  res,
+  next
+) => {
+  try {
+    // TODO: rate limit based on the IP address and user agent.
+
+    // Tenant is guaranteed at this point.
+    const tenant = req.tenant!;
+
+    // Check to ensure that the local integration has been enabled.
+    if (!tenant.auth.integrations.local.enabled) {
+      // TODO: replace with better error.
+      return next(new Error("integration is disabled"));
+    }
+
+    // Get the user on the request.
+    const user = req.user;
+    if (!user) {
+      return next(
+        new Error("cannot logout when there is no user on the request")
+      );
+    }
+
+    // Delegate to the logout handler.
+    return handleLogout(options.redis, req, res);
+  } catch (err) {
+    return next(err);
+  }
+};
diff --git a/src/core/server/app/middleware/passport/index.ts b/src/core/server/app/middleware/passport/index.ts
index ae1a3406f..b5f06ba03 100644
--- a/src/core/server/app/middleware/passport/index.ts
+++ b/src/core/server/app/middleware/passport/index.ts
@@ -1,10 +1,15 @@
 import { NextFunction, RequestHandler, Response } from "express";
+import { Redis } from "ioredis";
+import Joi from "joi";
+import jwt from "jsonwebtoken";
 import { Db } from "mongodb";
 import passport, { Authenticator } from "passport";
 
 import { Config } from "talk-common/config";
 import {
+  blacklistJWT,
   createJWTStrategy,
+  extractJWTFromRequest,
   JWTSigningConfig,
   SigningTokenOptions,
   signTokenString,
@@ -12,6 +17,7 @@ import {
 import { createLocalStrategy } from "talk-server/app/middleware/passport/local";
 import { createOIDCStrategy } from "talk-server/app/middleware/passport/oidc";
 import { createSSOStrategy } from "talk-server/app/middleware/passport/sso";
+import { validate } from "talk-server/app/request/body";
 import { User } from "talk-server/models/user";
 import TenantCache from "talk-server/services/tenant/cache";
 import { Request } from "talk-server/types/express";
@@ -25,6 +31,7 @@ export type VerifyCallback = (
 export interface PassportOptions {
   config: Config;
   mongo: Db;
+  redis: Redis;
   signingConfig: JWTSigningConfig;
   tenantCache: TenantCache;
 }
@@ -50,6 +57,47 @@ export function createPassport(
   return auth;
 }
 
+interface LogoutToken {
+  jti: string;
+  exp: number;
+}
+
+const LogoutTokenSchema = Joi.object().keys({
+  jti: Joi.string(),
+  exp: Joi.number(),
+});
+
+export async function handleLogout(redis: Redis, req: Request, res: Response) {
+  // Extract the token from the request.
+  const token = extractJWTFromRequest(req);
+  if (!token) {
+    // TODO: (wyattjoh) return a better error.
+    throw new Error("logout requires a token on the request, none was found");
+  }
+
+  // Decode the token.
+  const decoded = jwt.decode(token, {});
+  if (!decoded) {
+    // TODO: (wyattjoh) return a better error.
+    throw new Error(
+      "logout requires a token on the request, token was invalid"
+    );
+  }
+
+  // Grab the JTI from the decoded token.
+  const { jti, exp }: LogoutToken = validate(LogoutTokenSchema, decoded);
+
+  // Compute the number of seconds that the token will be valid for.
+  const validFor = exp - Date.now() / 1000;
+  if (validFor > 0) {
+    // Invalidate the token, the expiry is in the future and it needs to be
+    // blacklisted.
+    await blacklistJWT(redis, jti, validFor);
+  }
+
+  return res.sendStatus(204);
+}
+
 export async function handleSuccessfulLogin(
   user: User,
   signingConfig: JWTSigningConfig,
diff --git a/src/core/server/app/middleware/passport/jwt.ts b/src/core/server/app/middleware/passport/jwt.ts
index da4d0be11..257b67d1c 100644
--- a/src/core/server/app/middleware/passport/jwt.ts
+++ b/src/core/server/app/middleware/passport/jwt.ts
@@ -1,8 +1,9 @@
+import { Redis } from "ioredis";
 import jwt, { SignOptions } from "jsonwebtoken";
-import uuid from "uuid";
-
 import { Db } from "mongodb";
 import { Strategy } from "passport-strategy";
+import uuid from "uuid";
+
 import { Config } from "talk-common/config";
 import { retrieveUser, User } from "talk-server/models/user";
 import { Request } from "talk-server/types/express";
@@ -38,6 +39,31 @@ export function extractJWTFromRequest(req: Request) {
   return null;
 }
 
+function generateJTIBlacklistKey(jti: string) {
+  // jtib: JTI Blacklist namespace.
+  return `jtib:${jti}`;
+}
+
+export async function blacklistJWT(
+  redis: Redis,
+  jti: string,
+  validFor: number
+) {
+  await redis.setex(
+    generateJTIBlacklistKey(jti),
+    Math.ceil(validFor),
+    Date.now()
+  );
+}
+
+export async function checkBlacklistJWT(redis: Redis, jti: string) {
+  const expiredAtString = await redis.get(generateJTIBlacklistKey(jti));
+  if (expiredAtString) {
+    // TODO: (wyattjoh) return a better error.
+    throw new Error("JWT exists in blacklist");
+  }
+}
+
 export enum AsymmetricSigningAlgorithm {
   RS256 = "RS256",
   RS384 = "RS384",
@@ -139,6 +165,7 @@ export interface JWTToken {
 export interface JWTStrategyOptions {
   signingConfig: JWTSigningConfig;
   mongo: Db;
+  redis: Redis;
 }
 
 export class JWTStrategy extends Strategy {
@@ -146,12 +173,14 @@ export class JWTStrategy extends Strategy {
 
   private signingConfig: JWTSigningConfig;
   private mongo: Db;
+  private redis: Redis;
 
-  constructor({ signingConfig, mongo }: JWTStrategyOptions) {
+  constructor({ signingConfig, mongo, redis }: JWTStrategyOptions) {
     super();
 
     this.signingConfig = signingConfig;
     this.mongo = mongo;
+    this.redis = redis;
   }
 
   public authenticate(req: Request) {
@@ -179,13 +208,16 @@ export class JWTStrategy extends Strategy {
         // Use the algorithm specified in the configuration.
         algorithms: [this.signingConfig.algorithm],
       },
-      async (err: Error | undefined, { sub }: JWTToken) => {
+      async (err: Error | undefined, { jti, sub }: JWTToken) => {
         if (err) {
           return this.fail(err, 401);
         }
 
         try {
-          // Find the user.
+          // Check to see if the token has been blacklisted.
+          await checkBlacklistJWT(this.redis, jti);
+
+          // Find the user referenced by the token.
           const user = await retrieveUser(this.mongo, tenant.id, sub);
 
           // Return them! The user may be null, but that's ok here.
diff --git a/src/core/server/app/router.ts b/src/core/server/app/router.ts
index 6c06f8848..c298a40aa 100644
--- a/src/core/server/app/router.ts
+++ b/src/core/server/app/router.ts
@@ -1,7 +1,10 @@
 import express from "express";
 import passport from "passport";
 
-import { signupHandler } from "talk-server/app/handlers/auth/local";
+import {
+  logoutHandler,
+  signupHandler,
+} from "talk-server/app/handlers/auth/local";
 import { streamHandler } from "talk-server/app/handlers/embed/stream";
 import { apiErrorHandler } from "talk-server/app/middleware/error";
 import { errorLogger } from "talk-server/app/middleware/logging";
@@ -64,6 +67,12 @@ function createNewAuthRouter(app: AppOptions, options: RouterOptions) {
   const router = express.Router();
 
   // Mount the passport routes.
+  router.delete(
+    "/",
+    options.passport.authenticate("jwt", { session: false }),
+    logoutHandler({ redis: app.redis })
+  );
+
   router.post(
     "/local",
     express.json(),
@@ -74,6 +83,7 @@ function createNewAuthRouter(app: AppOptions, options: RouterOptions) {
     express.json(),
     signupHandler({ db: app.mongo, signingConfig: app.signingConfig })
   );
+
   router.post("/sso", wrapAuthn(options.passport, app.signingConfig, "sso"));
   router.get("/oidc", wrapAuthn(options.passport, app.signingConfig, "oidc"));
   router.get(
diff --git a/src/core/server/graph/tenant/schema/schema.graphql b/src/core/server/graph/tenant/schema/schema.graphql
index 1c96051bd..d51f4be16 100644
--- a/src/core/server/graph/tenant/schema/schema.graphql
+++ b/src/core/server/graph/tenant/schema/schema.graphql
@@ -769,8 +769,12 @@ type Query {
 
   """
   me is the current logged in User.
+
+  clientAuthRevision is an implementation detail that is only
+  used on the client to invalidate the cache.
+  TODO: This should move to a client side directive if this becomes possible.
   """
-  me: User
+  me(clientAuthRevision: Int): User
 
   """
   settings is the Settings for a given Tenant.
diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx
index 5667d6f78..4edcf0d7a 100644
--- a/src/docs/forms.mdx
+++ b/src/docs/forms.mdx
@@ -10,43 +10,102 @@ Let's build some forms! We will use the following compoenents `InputLabel`, `Typ
 ### Examples
 
 import { Playground, PropsTable } from 'docz'
-import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
-
-# InputLabel
+import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'
 
 ## Simple Form
 <Playground>
-  <Flex itemGutter direction="column" style={{width:330}}>
+  <Flex itemGutter="double" direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
-    <InputLabel>Email Address</InputLabel>
-    <TextField fullWidth/>
-    <InputLabel>Username</InputLabel>
-    <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
-    <TextField fullWidth/>
-    <InputLabel>Password</InputLabel>
-    <Typography>Must be at least 8 characters</Typography>
-    <TextField fullWidth/>
-    <InputLabel>Confirm Password</InputLabel>
-    <TextField fullWidth/>
+
+    <FormField>
+      <InputLabel>Email Address</InputLabel>
+      <TextField fullWidth />
+    </FormField>
+
+    <FormField>
+      <InputLabel>Username</InputLabel>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
+      <TextField fullWidth />
+    </FormField>
+
+    <FormField>
+      <InputLabel>Password</InputLabel>
+      <InputDescription>Must be at least 8 characters</InputDescription>
+      <TextField fullWidth />
+    </FormField>
+
+    <FormField>
+      <InputLabel>Confirm Password</InputLabel>
+      <TextField fullWidth />
+    </FormField>
+
     <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
   </Flex>
 </Playground>
 
 ## Simple Form with error
+
 <Playground>
-  <Flex itemGutter direction="column" style={{width:330}}>
+  <Flex itemGutter="double" direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
-    <InputLabel>Email Address</InputLabel>
-    <TextField fullWidth />
-    <InputLabel>Username</InputLabel>
-    <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
-    <TextField defaultValue="something.com" color="error" fullWidth/>
-    <ValidationMessage color="error" fullWidth>Invalid characters. Try again.</ValidationMessage>
-    <InputLabel>Password</InputLabel>
-    <Typography>Must be at least 8 characters</Typography>
-    <TextField fullWidth/>
-    <InputLabel>Confirm Password</InputLabel>
-    <TextField fullWidth/>
+
+    <FormField>
+      <InputLabel>Email Address</InputLabel>
+      <TextField fullWidth />
+    </FormField>
+
+    <FormField>
+      <InputLabel defaultValue="something.com">Username</InputLabel>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
+      <TextField color="error" fullWidth />
+      <ValidationMessage fullWidth>Invalid characters. Try again.</ValidationMessage>
+    </FormField>
+
+
+    <FormField>
+      <InputLabel>Password</InputLabel>
+      <InputDescription>Must be at least 8 characters</InputDescription>
+      <TextField fullWidth/>
+    </FormField>
+
+    <FormField>
+      <InputLabel>Confirm Password</InputLabel>
+      <TextField fullWidth/>
+    </FormField>
+
+    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
+  </Flex>
+</Playground>
+
+## Simple Form with CallOut
+
+<Playground>
+  <Flex itemGutter="double" direction="column">
+    <Typography variant="heading1">Sign up to join the conversation</Typography>
+    <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
+    <FormField>
+      <InputLabel>Email Address</InputLabel>
+      <TextField fullWidth/>
+    </FormField>
+
+    <FormField>
+      <InputLabel defaultValue="something.com">Username</InputLabel>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
+      <TextField fullWidth/>
+    </FormField>
+
+
+    <FormField>
+      <InputLabel>Password</InputLabel>
+      <InputDescription>Must be at least 8 characters</InputDescription>
+      <TextField fullWidth/>
+    </FormField>
+
+    <FormField>
+      <InputLabel>Confirm Password</InputLabel>
+      <TextField fullWidth/>
+    </FormField>
+
     <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
   </Flex>
 </Playground>
diff --git a/src/locales/de/stream.ftl b/src/locales/de/stream.ftl
index c4eb3040a..6031e6c5d 100644
--- a/src/locales/de/stream.ftl
+++ b/src/locales/de/stream.ftl
@@ -2,6 +2,6 @@
 
 ## Comments Tab
 
-comments-postCommentForm-post = Posten
+comments-postCommentForm-submit = Posten
 comments-stream-loadMore = Mehr laden
 comments-replyList-showAll = Alle anzeigen
diff --git a/src/locales/en-US/auth.ftl b/src/locales/en-US/auth.ftl
new file mode 100644
index 000000000..236530dd6
--- /dev/null
+++ b/src/locales/en-US/auth.ftl
@@ -0,0 +1,72 @@
+### Localization for the Auth Popup
+
+## Sign In
+
+signIn-signInToJoinHeader = Sign in to join the conversation
+
+signIn-signInAndJoinButton = Sign in and join the conversation
+
+signIn-emailAddressLabel = Email Address
+signIn-emailAddressTextField =
+  .placeholder = Email Address
+
+signIn-passwordLabel = Password
+signIn-passwordTextField =
+  .placeholder = Password
+
+signIn-forgotYourPassword = Forgot your password?
+
+signIn-noAccountSignUp = Don't have an account? <button>Sign Up</button>
+
+## Sign Up
+
+signUp-signUpToJoinHeader = Sign up to join the conversation
+
+signUp-signUpAndJoinButton = Sign up and join the conversation
+
+signUp-emailAddressLabel = Email Address
+signUp-emailAddressTextField =
+  .placeholder = Email Address
+
+signUp-usernameLabel = Username
+signUp-usernameDescription = A unique identifier displayed on your comments. You may use “_” and “.”
+signUp-usernameTextField =
+  .placeholder = Username
+
+signUp-passwordLabel = Password
+signUp-passwordDescription = Must be at least {$minLength} characters
+signUp-passwordTextField =
+  .placeholder = Password
+
+signUp-confirmPasswordLabel = Confirm Password
+signUp-confirmPasswordTextField =
+  .placeholder = Confirm Password
+
+signUp-accountAvailableSignIn = Already have an account? <button>Sign In</button>
+
+## Forgot Password
+
+forgotPassword-forgotPasswordHeader = Forgot Password
+forgotPassword-enterEmailAndGetALink =
+  Enter your email address below and we will send you a link to
+  reset your password.
+
+forgotPassword-sendEmailButton = Send Email
+
+forgotPassword-emailAddressLabel = Email Address
+forgotPassword-emailAddressTextField =
+  .placeholder = Email Address
+
+## Reset Password
+
+resetPassword-resetPasswordHeader = Reset Password
+resetPassword-resetPasswordButton = Reset Password
+
+resetPassword-passwordLabel = Password
+resetPassword-passwordDescription = Must be at least {$minLength} characters
+resetPassword-passwordTextField =
+  .placeholder = Password
+
+resetPassword-confirmPasswordLabel = Confirm Password
+resetPassword-confirmPasswordTextField =
+  .placeholder = Confirm Password
diff --git a/src/locales/en-US/framework.ftl b/src/locales/en-US/framework.ftl
index 555637497..f03b2a50a 100644
--- a/src/locales/en-US/framework.ftl
+++ b/src/locales/en-US/framework.ftl
@@ -5,6 +5,13 @@
 ## Validation
 
 framework-validation-required = This field is required.
+framework-validation-tooShort = The field must contain at least {$minLength} characters.
+framework-validation-usernameTooShort = Username must contain at least {$minLength} characters.
+framework-validation-usernameTooLong = Usernames cannot be longer than {$maxLength} characters.
+framework-validation-invalidCharacters = Invalid characters. Try again.
+framework-validation-invalidEmail = Please enter a valid email address.
+framework-validation-passwordTooShort = Password must contain at least {$minLength} characters.
+framework-validation-passwordsDoNotMatch = Passwords do not match. Try again.
 
 framework-timeago-time =
   { $value }
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 01a2ed331..a6aed78a7 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -2,7 +2,7 @@
 
 ## Comments Tab
 
-comments-postCommentForm-post = Post
+comments-postCommentForm-submit = Submit
 comments-stream-loadMore = Load more
 comments-replyList-showAll = Show all
 
@@ -15,3 +15,9 @@ comments-permalinkView-commentNotFound = Comment not found
 comments-userBoxUnauthenticated-joinTheConversation = Join the conversation
 comments-userBoxUnauthenticated-signIn = Sign in
 comments-userBoxUnauthenticated-register = Register
+
+comments-userBoxAuthenticated-signedInAs =
+  Signed in as <username></username>.
+
+comments-userBoxAuthenticated-notYou =
+  Not you? <button>Sign Out</button>
diff --git a/src/types/fluent.d.ts b/src/types/fluent.d.ts
index 4e41c3fae..b64509258 100644
--- a/src/types/fluent.d.ts
+++ b/src/types/fluent.d.ts
@@ -2,11 +2,11 @@
 declare module "*.ftl";
 
 declare module "fluent-react/compat" {
-  import { MessageContext } from "fluent/compat";
+  import { FluentBundle } from "fluent/compat";
   import { ComponentType } from "react";
 
   export interface LocalizationProviderProps {
-    messages: MessageContext[];
+    bundles: FluentBundle[];
   }
   export const LocalizationProvider: ComponentType<LocalizationProviderProps>;
 
@@ -30,14 +30,14 @@ declare module "fluent-langneg/compat" {
 }
 
 declare module "fluent/compat" {
-  export interface MessageContextOptions {
+  export interface FluentBundleOptions {
     functions: { [key: string]: (...args: any[]) => string };
     useIsolating: boolean;
     transform: ((s: string) => string);
   }
 
-  export class MessageContext {
-    constructor(locales: string, options?: MessageContext);
+  export class FluentBundle {
+    constructor(locales: string, options?: FluentBundleOptions);
     public locales: string[];
     public readonly messages: Iterator<[string, any]>;
     public hasMessage(id: string): boolean;