diff --git a/package-lock.json b/package-lock.json
index a95a25b4e..f89274a76 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15001,9 +15001,9 @@
       "dev": true
     },
     "matchmediaquery": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.2.1.tgz",
-      "integrity": "sha1-IjxwBXk94D5HzpKxMoWnLEStos8=",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.0.tgz",
+      "integrity": "sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==",
       "dev": true,
       "requires": {
         "css-mediaquery": "^0.1.2"
@@ -19584,13 +19584,13 @@
       }
     },
     "react-responsive": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-4.1.0.tgz",
-      "integrity": "sha512-ZuDraf0qsJlyiTwzeva+foHx83IP6SIhru9o7BvMwQ4ZHjRIL5WjdgVNNrKSRbmeWO9rEJoMpabei/5lJn8KaA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-5.0.0.tgz",
+      "integrity": "sha512-oEimZ0FTCC3/pjGDEBHOz06nWbBNDIbMGOdRYp6K9SBUmrqgNAX77hTiqvmRQeLyI97zz4F4kiaFRxFspDxE+w==",
       "dev": true,
       "requires": {
         "hyphenate-style-name": "^1.0.0",
-        "matchmediaquery": "^0.2.1",
+        "matchmediaquery": "^0.3.0",
         "prop-types": "^15.6.1"
       }
     },
diff --git a/package.json b/package.json
index b697e4f15..9283410b5 100644
--- a/package.json
+++ b/package.json
@@ -176,7 +176,7 @@
     "react-final-form": "^3.6.4",
     "react-popper": "^1.0.0",
     "react-relay": "github:coralproject/patched#react-relay",
-    "react-responsive": "^4.1.0",
+    "react-responsive": "^5.0.0",
     "react-test-renderer": "^16.4.1",
     "react-timeago": "^4.1.9",
     "react-with-state-props": "^2.0.4",
diff --git a/src/core/build/createWebpackConfig.ts b/src/core/build/createWebpackConfig.ts
index f90042dd3..ea6d4b196 100644
--- a/src/core/build/createWebpackConfig.ts
+++ b/src/core/build/createWebpackConfig.ts
@@ -488,42 +488,5 @@ export default function createWebpackConfig({
         }),
       ],
     },
-    /* Webpack config for our auth */
-    {
-      ...baseConfig,
-      entry: [
-        // No polyfills for the embed.
-        (isProduction && "") ||
-          require.resolve("react-dev-utils/webpackHotDevClient"),
-        paths.appAuthIndex,
-        // Remove deactivated entries.
-      ].filter(s => s),
-      output: {
-        ...baseConfig.output,
-        library: "Talk",
-        filename: "assets/js/auth.js",
-      },
-      plugins: [
-        ...baseConfig.plugins!,
-        // Generates an `stream.html` file with the <script> injected.
-        new HtmlWebpackPlugin({
-          filename: "auth.html",
-          template: paths.appAuthHTML,
-          inject: "head",
-          ...htmlWebpackConfig,
-        }),
-        // Makes some environment variables available in index.html.
-        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-        // In development, this will be an empty string.
-        new InterpolateHtmlPlugin(env),
-        // Generate a manifest file which contains a mapping of all asset filenames
-        // to their corresponding output file so that tools can pick it up without
-        // having to parse `index.html`.
-        new ManifestPlugin({
-          fileName: "auth-manifest.json",
-        }),
-      ],
-    },
   ];
 }
diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx
index 368c6d716..4fe34d3a1 100644
--- a/src/core/client/auth/components/App.tsx
+++ b/src/core/client/auth/components/App.tsx
@@ -1,22 +1,35 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Flex } from "talk-ui/components";
-
-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";
 
 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:
+    | "SIGN_UP"
+    | "SIGN_IN"
+    | "FORGOT_PASSWORD"
+    | "RESET_PASSWORD"
+    | "%future added value";
 }
 
-const App: StatelessComponent<AppProps> = props => {
-  return (
-    <Flex justifyContent="center" className={styles.root}>
-      Current View: {props.view}
-    </Flex>
-  );
+const App: StatelessComponent<AppProps> = ({ view }) => {
+  switch (view) {
+    case "SIGN_UP":
+      return <SignUpContainer />;
+    case "SIGN_IN":
+      return <SignInContainer />;
+    case "FORGOT_PASSWORD":
+      return <ForgotPasswordContainer />;
+    case "RESET_PASSWORD":
+      return <ResetPasswordContainer />;
+    default:
+      return <SignInContainer />;
+  }
 };
 
 export default App;
diff --git a/src/core/client/auth/components/ForgotPassword.css b/src/core/client/auth/components/ForgotPassword.css
new file mode 100644
index 000000000..8489081c1
--- /dev/null
+++ b/src/core/client/auth/components/ForgotPassword.css
@@ -0,0 +1,9 @@
+.root {
+  width: 330px;
+  padding-top: calc(5 * var(--spacing-unit));
+}
+
+.footer {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
new file mode 100644
index 000000000..4c06dcbc4
--- /dev/null
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import * as styles from "./SignIn.css";
+
+import {
+  Button,
+  Flex,
+  FormField,
+  InputLabel,
+  TextField,
+  Typography,
+} from "talk-ui/components";
+
+const ForgotPassword: StatelessComponent = props => {
+  return (
+    <Flex itemGutter direction="column" className={styles.root}>
+      <Typography variant="heading1" align="center">
+        Forgot Password
+      </Typography>
+      <Typography variant="bodyCopy">
+        Enter your email address below and we will send you a link to reset your
+        password.
+      </Typography>
+      <FormField>
+        <InputLabel>Email Address</InputLabel>
+        <TextField />
+      </FormField>
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Send Email
+        </Button>
+      </div>
+    </Flex>
+  );
+};
+
+export default ForgotPassword;
diff --git a/src/core/client/auth/components/ResetPassword.css b/src/core/client/auth/components/ResetPassword.css
new file mode 100644
index 000000000..8489081c1
--- /dev/null
+++ b/src/core/client/auth/components/ResetPassword.css
@@ -0,0 +1,9 @@
+.root {
+  width: 330px;
+  padding-top: calc(5 * var(--spacing-unit));
+}
+
+.footer {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
new file mode 100644
index 000000000..5f000d091
--- /dev/null
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import * as styles from "./SignIn.css";
+
+import {
+  Button,
+  Flex,
+  FormField,
+  InputLabel,
+  TextField,
+  Typography,
+} from "talk-ui/components";
+
+const ResetPassword: StatelessComponent = props => {
+  return (
+    <Flex itemGutter direction="column" className={styles.root}>
+      <Typography variant="heading1" align="center">
+        Reset Password
+      </Typography>
+      <FormField>
+        <InputLabel>Password</InputLabel>
+        <Typography>Must be at least 8 characters</Typography>
+        <TextField />
+      </FormField>
+      <FormField>
+        <InputLabel>Confirm Password</InputLabel>
+        <TextField />
+      </FormField>
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Reset Password
+        </Button>
+      </div>
+    </Flex>
+  );
+};
+
+export default ResetPassword;
diff --git a/src/core/client/auth/components/SignIn.css b/src/core/client/auth/components/SignIn.css
new file mode 100644
index 000000000..8110981fc
--- /dev/null
+++ b/src/core/client/auth/components/SignIn.css
@@ -0,0 +1,14 @@
+.root {
+  width: 330px;
+  padding-top: calc(5 * var(--spacing-unit));
+}
+
+.forgotPassword {
+  text-align: right;
+}
+
+.footer,
+.subFooter {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
new file mode 100644
index 000000000..9244aa2af
--- /dev/null
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import * as styles from "./SignIn.css";
+
+import {
+  Button,
+  Flex,
+  FormField,
+  InputLabel,
+  TextField,
+  Typography,
+} from "talk-ui/components";
+
+const SignIn: StatelessComponent = props => {
+  return (
+    <Flex itemGutter direction="column" className={styles.root}>
+      <Typography variant="heading1" align="center">
+        Sign in to join the conversation
+      </Typography>
+      <FormField>
+        <InputLabel>Email Address</InputLabel>
+        <TextField />
+      </FormField>
+      <FormField>
+        <InputLabel>Password</InputLabel>
+        <TextField />
+        <span className={styles.forgotPassword}>
+          <Button variant="underlined" color="primary" size="small">
+            Forgot your password?
+          </Button>
+        </span>
+      </FormField>
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Sign in and join the conversation
+        </Button>
+        <Flex
+          itemGutter="half"
+          justifyContent="center"
+          className={styles.subFooter}
+        >
+          <Typography>Don't have an account?</Typography>
+          <Button variant="underlined" size="small" color="primary">
+            Sign Up
+          </Button>
+        </Flex>
+      </div>
+    </Flex>
+  );
+};
+
+export default SignIn;
diff --git a/src/core/client/auth/components/SignUp.css b/src/core/client/auth/components/SignUp.css
new file mode 100644
index 000000000..2b939d10f
--- /dev/null
+++ b/src/core/client/auth/components/SignUp.css
@@ -0,0 +1,9 @@
+.root {
+  width: 330px;
+}
+
+.footer,
+.subFooter {
+  padding-top: var(--spacing-unit);
+  width: 100%;
+}
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
new file mode 100644
index 000000000..44eaaf70f
--- /dev/null
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+import * as styles from "./SignUp.css";
+
+import {
+  Button,
+  Flex,
+  FormField,
+  InputLabel,
+  TextField,
+  Typography,
+} from "talk-ui/components";
+
+const SignUp: StatelessComponent = props => {
+  return (
+    <Flex itemGutter direction="column" className={styles.root}>
+      <Flex direction="column">
+        <Typography variant="heading1" align="center">
+          Sign up to join the conversation
+        </Typography>
+        <FormField>
+          <InputLabel>Email Address</InputLabel>
+          <TextField />
+        </FormField>
+        <FormField>
+          <InputLabel>Username</InputLabel>
+          <Typography variant="inputDescription">
+            A unique identifier displayed on your comments. You may use “_” and
+            “.”
+          </Typography>
+          <TextField />
+        </FormField>
+        <FormField>
+          <InputLabel>Password</InputLabel>
+          <Typography>Must be at least 8 characters</Typography>
+          <TextField />
+        </FormField>
+        <FormField>
+          <InputLabel>Confirm Password</InputLabel>
+          <TextField />
+        </FormField>
+      </Flex>
+      <div className={styles.footer}>
+        <Button variant="filled" color="primary" size="large" fullWidth>
+          Sign up and join the conversation
+        </Button>
+        <Flex
+          itemGutter="half"
+          justifyContent="center"
+          className={styles.subFooter}
+        >
+          <Typography>Already have an account?</Typography>
+          <Button variant="underlined" size="small" color="primary">
+            Sign In
+          </Button>
+        </Flex>
+      </div>
+    </Flex>
+  );
+};
+
+export default SignUp;
diff --git a/src/core/client/auth/containers/ForgotPasswordContainer.tsx b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
new file mode 100644
index 000000000..b364e7e9e
--- /dev/null
+++ b/src/core/client/auth/containers/ForgotPasswordContainer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import ForgotPassword from "../components/ForgotPassword";
+
+const ForgotPasswordContainer: StatelessComponent = () => {
+  return <ForgotPassword />;
+};
+
+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..6dab0eef1
--- /dev/null
+++ b/src/core/client/auth/containers/ResetPasswordContainer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import ResetPassword from "../components/ResetPassword";
+
+const ResetPasswordContainer: StatelessComponent = () => {
+  return <ResetPassword />;
+};
+
+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..aabf4641d
--- /dev/null
+++ b/src/core/client/auth/containers/SignInContainer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import SignIn from "../components/SignIn";
+
+const SignInContainer: StatelessComponent = () => {
+  return <SignIn />;
+};
+
+export default SignInContainer;
diff --git a/src/core/client/auth/containers/SignUpContainer.tsx b/src/core/client/auth/containers/SignUpContainer.tsx
new file mode 100644
index 000000000..9db82383a
--- /dev/null
+++ b/src/core/client/auth/containers/SignUpContainer.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import SignUp from "../components/SignUp";
+
+const SignUpContainer: StatelessComponent = () => {
+  return <SignUp />;
+};
+
+export default SignUpContainer;
diff --git a/src/core/client/embed/index.html b/src/core/client/embed/index.html
index 10106ff8c..b579dab8f 100644
--- a/src/core/client/embed/index.html
+++ b/src/core/client/embed/index.html
@@ -16,7 +16,7 @@
 
 <body>
   <h1 style="text-align: center" }>Talk 5.0 – Embed Stream</h1>
-  <div id="coralStreamEmbed" style="max-width: 600px; margin: 0 auto"></div>
+  <div id="coralStreamEmbed" style="max-width: 640px; margin: 0 auto"></div>
   <script>
     window.TalkEmbed = Talk.render(document.getElementById('coralStreamEmbed'));
   </script>
diff --git a/src/core/client/framework/lib/bootstrap/TalkContext.tsx b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
index 90ed10530..75ddc974c 100644
--- a/src/core/client/framework/lib/bootstrap/TalkContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
@@ -2,6 +2,7 @@ import { LocalizationProvider } from "fluent-react/compat";
 import { MessageContext } from "fluent/compat";
 import { Child as PymChild } from "pym.js";
 import React, { StatelessComponent } from "react";
+import { MediaQueryMatchers } from "react-responsive";
 import { Formatter } from "react-timeago";
 import { Environment } from "relay-runtime";
 
@@ -18,6 +19,9 @@ export interface TalkContext {
   /** formatter for timeago. */
   timeagoFormatter?: Formatter;
 
+  /** media query values for testing purposes */
+  mediaQueryValues?: MediaQueryMatchers;
+
   /**
    * A way to listen for clicks that are e.g. outside of the
    * current frame for `ClickOutside`
@@ -48,6 +52,7 @@ export const TalkContextProvider: StatelessComponent<{
         value={{
           timeagoFormatter: value.timeagoFormatter,
           registerClickFarAway: value.registerClickFarAway,
+          mediaQueryValues: value.mediaQueryValues,
         }}
       >
         {children}
diff --git a/src/core/client/stream/components/App.tsx b/src/core/client/stream/components/App.tsx
index 39272cb17..f5f4262f7 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";
 
@@ -23,6 +22,7 @@ const App: StatelessComponent<AppProps> = props => {
       {view}
     </Flex>
   );
+  // return <div className={styles.root}>{view}</div>;
 };
 
 export default App;
diff --git a/src/core/client/stream/components/Auth.tsx b/src/core/client/stream/components/Auth.tsx
deleted file mode 100644
index 04284be43..000000000
--- a/src/core/client/stream/components/Auth.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from "react";
-import { StatelessComponent } from "react";
-
-import { Flex, Button, Popup, Typography } from "talk-ui/components";
-
-interface AuthProps {
-  open: boolean;
-  focus: boolean;
-  openPopup: () => void;
-  closePopup: () => void;
-  setFocus: (focus: boolean) => void;
-}
-
-const Auth: StatelessComponent<AuthProps> = props => {
-  return (
-    <div>
-      <Popup
-        href={"/static/js/src-core-client-ui-components-popup-popup.js"}
-        title="Coral Project"
-        features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
-        open={props.open}
-        focus={props.focus}
-        onFocus={() => props.setFocus(true)}
-        onBlur={() => props.setFocus(false)}
-        onClose={props.closePopup}
-      />
-      <Flex justifyContent="center">
-        <Typography>Join the conversation </Typography> |
-        <Button color="primary" onClick={props.openPopup} disabled={props.open}>
-          Sign In
-        </Button>
-        <Button
-          color="primary"
-          variant="outlined"
-          onClick={props.openPopup}
-          disabled={props.open}
-        >
-          Register
-        </Button>
-      </Flex>
-    </div>
-  );
-};
-
-export default Auth;
diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css
index c4bf8c532..5c0f67095 100644
--- a/src/core/client/stream/components/Comment/Comment.css
+++ b/src/core/client/stream/components/Comment/Comment.css
@@ -1,3 +1,6 @@
+.root {
+  width: 100%;
+}
 .footer {
   margin-top: var(--spacing-unit);
 }
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 932cd7155..b47c8ac02 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -20,7 +20,7 @@ export interface CommentProps {
 
 const Comment: StatelessComponent<CommentProps> = props => {
   return (
-    <div role="article">
+    <div role="article" className={styles.root}>
       <TopBar>
         {props.author &&
           props.author.username && <Username>{props.author.username}</Username>}
diff --git a/src/core/client/stream/components/Comment/TopBar.tsx b/src/core/client/stream/components/Comment/TopBar.tsx
index 2dfe6419d..a82dd0a28 100644
--- a/src/core/client/stream/components/Comment/TopBar.tsx
+++ b/src/core/client/stream/components/Comment/TopBar.tsx
@@ -14,7 +14,7 @@ export interface TopBarProps {
 const TopBar: StatelessComponent<TopBarProps> = props => {
   const rootClassName = cn(styles.root, props.className);
   return (
-    <MatchMedia minWidth="xs">
+    <MatchMedia gtWidth="xs">
       {matches => (
         <Flex
           className={rootClassName}
diff --git a/src/core/client/stream/components/Comment/Username.tsx b/src/core/client/stream/components/Comment/Username.tsx
index ada04c8ec..f19c23024 100644
--- a/src/core/client/stream/components/Comment/Username.tsx
+++ b/src/core/client/stream/components/Comment/Username.tsx
@@ -11,7 +11,7 @@ export interface UsernameProps {
 
 const Username: StatelessComponent<UsernameProps> = props => {
   return (
-    <MatchMedia minWidth="xs">
+    <MatchMedia gtWidth="xs">
       {matches => (
         <Typography
           variant={matches ? "heading2" : "heading3"}
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
index c86fc9284..d9a3e46f0 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`renders username and body 1`] = `
 <div
+  className="Comment-root"
   role="article"
 >
   <TopBar>
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 6c5348d0b..2e6694137 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
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly on big screens 1`] = `
-<div>
+<div
+  className="Flex-root TopBar-root"
+>
   <div
-    className="Flex-root TopBar-root Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
+    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
   >
     <div>
       Hello World
@@ -13,9 +15,11 @@ exports[`renders correctly on big screens 1`] = `
 `;
 
 exports[`renders correctly on small screens 1`] = `
-<div>
+<div
+  className="Flex-root TopBar-root"
+>
   <div
-    className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
   >
     <div>
       Hello World
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
index 493625e2b..ec1be799f 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
@@ -57,10 +57,10 @@ class Permalink extends React.Component<PermalinkProps> {
             active={visible}
             size="small"
           >
-            <MatchMedia minWidth="xs">
+            <MatchMedia gtWidth="xs">
               <ButtonIcon>share</ButtonIcon>
             </MatchMedia>
-            <Localized id="comments-permalink-share">
+            <Localized id="comments-permalinkButton-share">
               <span>Share</span>
             </Localized>
           </Button>
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx
index 218bd78f6..9e7afcc9d 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx
@@ -38,15 +38,19 @@ class PermalinkPopover extends React.Component<InnerProps> {
     const { copied } = this.state;
     return (
       <Flex itemGutter="half" className={styles.root}>
-        <TextField defaultValue={permalinkURL} className={styles.textField} />
+        <TextField
+          defaultValue={permalinkURL}
+          className={styles.textField}
+          readOnly
+        />
         <CopyToClipboard text={permalinkURL} onCopy={this.onCopy}>
           <Button color="primary" variant="filled" size="small">
             {copied ? (
-              <Localized id="comments-permalink-copied">
+              <Localized id="comments-permalinkPopover-copied">
                 <span>Copied!</span>
               </Localized>
             ) : (
-              <Localized id="comments-permalink-copy">
+              <Localized id="comments-permalinkPopover-copy">
                 <span>Copy</span>
               </Localized>
             )}
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx
index 1bf209143..4d3035b8d 100644
--- a/src/core/client/stream/components/PermalinkView.tsx
+++ b/src/core/client/stream/components/PermalinkView.tsx
@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import React, { MouseEvent, StatelessComponent } from "react";
 
 import { Button, Flex, Typography } from "talk-ui/components";
@@ -19,21 +20,27 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
   return (
     <div className={styles.root}>
       {showAllCommentsHref && (
-        <Button
-          id="talk-comments-permalinkView-showAllComments"
-          variant="outlined"
-          color="primary"
-          onClick={onShowAllComments}
-          className={styles.button}
-          href={showAllCommentsHref}
-          target="_parent"
-          fullWidth
-          anchor
-        >
-          Show all Comments
-        </Button>
+        <Localized id="comments-permalinkView-showAllComments">
+          <Button
+            id="talk-comments-permalinkView-showAllComments"
+            variant="outlined"
+            color="primary"
+            onClick={onShowAllComments}
+            className={styles.button}
+            href={showAllCommentsHref}
+            target="_parent"
+            fullWidth
+            anchor
+          >
+            Show all Comments
+          </Button>
+        </Localized>
+      )}
+      {!comment && (
+        <Localized id="comments-permalinkView-commentNotFound">
+          <Typography>Comment not found</Typography>
+        </Localized>
       )}
-      {!comment && <Typography>Comment not found</Typography>}
       {comment && (
         <Flex direction="column">
           <CommentContainer data={comment} />
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index 37a22ee0f..323b0acf5 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -3,6 +3,7 @@ import React, { StatelessComponent } from "react";
 
 import { Button, Flex, Typography } from "talk-ui/components";
 
+import MatchMedia from "talk-ui/components/MatchMedia";
 import * as styles from "./UserBoxUnauthenticated.css";
 
 export interface UserBoxUnauthenticatedProps {
@@ -15,20 +16,27 @@ const UserBoxUnauthenticated: StatelessComponent<
 > = props => {
   return (
     <Flex>
-      <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
-        <Typography
-          className={styles.joinText}
-          variant="bodyCopyBold"
-          component="span"
-        >
-          Join the conversation
+      <MatchMedia gteWidth="sm">
+        <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
+          <Typography
+            className={styles.joinText}
+            variant="bodyCopyBold"
+            component="span"
+          >
+            Join the conversation
+          </Typography>
+        </Localized>
+        <Typography variant="bodyCopyBold" component="span">
+          |
         </Typography>
-      </Localized>
-      <Typography variant="bodyCopyBold" component="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__/UserBoxUnauthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
index e5b84fc16..9cf950ec6 100644
--- a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
@@ -2,23 +2,27 @@
 
 exports[`renders correctly 1`] = `
 <withPropsOnChange(Flex)>
-  <Localized
-    id="comments-userBoxUnauthenticated-joinTheConversation"
+  <MatchMediaWithContext
+    gteWidth="sm"
   >
+    <Localized
+      id="comments-userBoxUnauthenticated-joinTheConversation"
+    >
+      <withPropsOnChange(Typography)
+        className="UserBoxUnauthenticated-joinText"
+        component="span"
+        variant="bodyCopyBold"
+      >
+        Join the conversation
+      </withPropsOnChange(Typography)>
+    </Localized>
     <withPropsOnChange(Typography)
-      className="UserBoxUnauthenticated-joinText"
       component="span"
       variant="bodyCopyBold"
     >
-      Join the conversation
+      |
     </withPropsOnChange(Typography)>
-  </Localized>
-  <withPropsOnChange(Typography)
-    component="span"
-    variant="bodyCopyBold"
-  >
-    |
-  </withPropsOnChange(Typography)>
+  </MatchMediaWithContext>
   <Localized
     id="comments-userBoxUnauthenticated-signIn"
   >
diff --git a/src/core/client/stream/containers/AuthContainer.tsx b/src/core/client/stream/containers/AuthContainer.tsx
deleted file mode 100644
index 688d6627e..000000000
--- a/src/core/client/stream/containers/AuthContainer.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react";
-
-import Auth from "../components/Auth";
-
-class AuthContainer extends React.Component {
-  state = {
-    open: false,
-    focus: false,
-  };
-
-  openPopup = () => {
-    this.setState({
-      open: true,
-    });
-  };
-
-  closePopup = () => {
-    this.setState({
-      open: false,
-    });
-  };
-
-  setFocus = (focus: boolean) => {
-    this.setState({
-      focus,
-    });
-  };
-
-  render() {
-    const { open, focus } = this.state;
-    return (
-      <Auth
-        open={open}
-        focus={focus}
-        openPopup={this.openPopup}
-        closePopup={this.closePopup}
-        setFocus={this.setFocus}
-      />
-    );
-  }
-}
-
-export default AuthContainer;
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index 359c93d97..fca219660 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/src/core/client/stream/containers/UserBoxContainer.tsx
@@ -37,7 +37,7 @@ export class UserBoxContainer extends Component<InnerProps> {
         <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=600,top=200,left=500"
           open={open}
           focus={focus}
           onFocus={this.handleFocus}
diff --git a/src/core/client/stream/index.tsx b/src/core/client/stream/index.tsx
index 6d622216e..4ac024d6d 100644
--- a/src/core/client/stream/index.tsx
+++ b/src/core/client/stream/index.tsx
@@ -32,7 +32,9 @@ async function main() {
   });
 
   const Index: StatelessComponent = () => (
-    <TalkContextProvider value={context}>
+    <TalkContextProvider
+      value={{ ...context, mediaQueryValues: { width: 640 } }}
+    >
       <AppContainer />
     </TalkContextProvider>
   );
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 16b8d5fb6..d3310dc45 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -1,28 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loads more comments 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
@@ -79,23 +75,30 @@ exports[`loads more comments 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +125,21 @@ exports[`loads more comments 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -158,16 +166,21 @@ exports[`loads more comments 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -203,28 +216,24 @@ exports[`loads more comments 1`] = `
 `;
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
@@ -281,23 +290,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -324,16 +340,21 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
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 372894bc7..38f7f0b8f 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
     <div
       className="PermalinkView-root"
@@ -23,16 +25,21 @@ exports[`renders permalink view 1`] = `
       >
         Show all Comments
       </a>
-      <div>
+      <div
+        className="Flex-root"
+      >
         <div
-          className="Flex-root Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+          className="Flex-flex Flex-wrap Flex-alignFlexStart Flex-directionColumn"
         >
           <div
+            className="Comment-root"
             role="article"
           >
-            <div>
+            <div
+              className="Flex-root TopBar-root"
+            >
               <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
               >
                 <span
                   className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -65,28 +72,24 @@ exports[`renders permalink view 1`] = `
 `;
 
 exports[`show all comments 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
@@ -143,23 +146,30 @@ exports[`show all comments 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
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 63933cb3e..949a40e0c 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown asset 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
     <div
       className="PermalinkView-root"
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 c9a2bcea8..20124a5e6 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown comment 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
     <div
       className="PermalinkView-root"
@@ -34,28 +36,24 @@ exports[`renders permalink view with unknown comment 1`] = `
 `;
 
 exports[`show all comments 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
@@ -112,23 +110,30 @@ exports[`show all comments 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
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 f4050b20a..009bbce70 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -1,28 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
@@ -79,23 +75,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +125,21 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -159,18 +167,23 @@ exports[`renders comment stream 1`] = `
                 <div
                   className="Indent-root Indent-level0"
                 >
-                  <div>
+                  <div
+                    className="Flex-root"
+                    id="talk-comments-replyList-log--comment-with-replies"
+                    role="log"
+                  >
                     <div
-                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                      id="talk-comments-replyList-log--comment-with-replies"
-                      role="log"
+                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
                     >
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -196,11 +209,14 @@ exports[`renders comment stream 1`] = `
                         />
                       </div>
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
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 7b636050d..f46ff9b5e 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -1,28 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
@@ -79,23 +75,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +125,21 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
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 2ecc359f7..d010daaf3 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -1,28 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
@@ -79,23 +75,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -123,18 +126,23 @@ exports[`renders comment stream 1`] = `
                 <div
                   className="Indent-root Indent-level0"
                 >
-                  <div>
+                  <div
+                    className="Flex-root"
+                    id="talk-comments-replyList-log--comment-0"
+                    role="log"
+                  >
                     <div
-                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                      id="talk-comments-replyList-log--comment-0"
-                      role="log"
+                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
                     >
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -188,28 +196,24 @@ exports[`renders comment stream 1`] = `
 `;
 
 exports[`show all replies 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
-            >
-              Join the conversation
-            </span>
-            <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-            >
-              |
-            </span>
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
               onBlur={[Function]}
@@ -266,23 +270,30 @@ exports[`show all replies 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -310,18 +321,23 @@ exports[`show all replies 1`] = `
                 <div
                   className="Indent-root Indent-level0"
                 >
-                  <div>
+                  <div
+                    className="Flex-root"
+                    id="talk-comments-replyList-log--comment-0"
+                    role="log"
+                  >
                     <div
-                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                      id="talk-comments-replyList-log--comment-0"
-                      role="log"
+                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
                     >
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -347,11 +363,14 @@ exports[`show all replies 1`] = `
                         />
                       </div>
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css
index 9345a33b6..5ab16bc6d 100644
--- a/src/core/client/ui/components/Button/Button.css
+++ b/src/core/client/ui/components/Button/Button.css
@@ -282,3 +282,73 @@
     }
   }
 }
+
+.variantUnderlined {
+  padding-right: 0;
+  padding-left: 0;
+  border-radius: 0;
+
+  &.colorRegular {
+    color: var(--palette-grey-main);
+    border-bottom: 1px solid currentColor;
+  }
+  &.colorPrimary {
+    color: var(--palette-primary-main);
+    border-bottom: 1px solid currentColor;
+  }
+  &.colorError {
+    color: var(--palette-error-main);
+    border-bottom: 1px solid currentColor;
+  }
+  &.colorSuccess {
+    color: var(--palette-success-main);
+    border-bottom: 1px solid currentColor;
+  }
+
+  &:not(.disabled) {
+    &.colorRegular {
+      &.mouseHover {
+        color: var(--palette-grey-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-grey-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+    &.colorPrimary {
+      &.mouseHover {
+        color: var(--palette-primary-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-primary-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+    &.colorError {
+      &.mouseHover {
+        color: var(--palette-error-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-error-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+    &.colorSuccess {
+      &.mouseHover {
+        color: var(--palette-success-light);
+        border-bottom: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        color: var(--palette-success-lighter);
+        border-bottom: 1px solid currentColor;
+      }
+    }
+  }
+}
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index fe11b0dfc..c984c2c5e 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;
@@ -72,6 +72,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,
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 378b4e9ba..2e6914c7f 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -1,5 +1,10 @@
 .root {
+  width: 100%;
+}
+
+.flex {
   display: flex;
+  width: 100%;
 }
 
 .halfItemGutter {
@@ -26,6 +31,30 @@
   }
 }
 
+.doubleItemGutter {
+  & > * {
+    margin: 0 calc(2 * var(--spacing-unit)) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 calc(2 * var(--spacing-unit)) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
+    }
+  }
+  &.directionColumnReverese {
+    & > * {
+      margin: calc(2 * var(--spacing-unit)) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
 .itemGutter {
   & > * {
     margin: 0 var(--spacing-unit) 0 0 !important;
@@ -93,6 +122,23 @@
       margin-left: calc(0.5 * var(--spacing-unit)) !important;
     }
   }
+
+  &:not(.directionColumn).doubleItemGutter {
+    &:not(:empty) {
+      margin-top: calc(-2 * var(--spacing-unit)) !important;
+    }
+    & > * {
+      margin-top: calc(2 * var(--spacing-unit)) !important;
+    }
+  }
+  &.directionColumn.doubleItemGutter {
+    &:not(:empty) {
+      margin-left: calc(-2 * var(--spacing-unit)) !important;
+    }
+    &.doubleItemGutter > * {
+      margin-left: calc(2 * var(--spacing-unit)) !important;
+    }
+  }
 }
 
 .justifyFlexStart {
diff --git a/src/core/client/ui/components/Flex/Flex.mdx b/src/core/client/ui/components/Flex/Flex.mdx
index 84eeb8240..7ca59bb54 100644
--- a/src/core/client/ui/components/Flex/Flex.mdx
+++ b/src/core/client/ui/components/Flex/Flex.mdx
@@ -33,3 +33,29 @@ import Button from '../Button'
     <Button variant="filled">Push Me</Button>
   </Flex>
 </Playground>
+
+## Item Gutter
+
+<Playground>
+  <Flex direction="column" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
+
+<Playground>
+  <Flex direction="column" itemGutter="half">
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
+
+<Playground>
+  <Flex direction="column" itemGutter="double">
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index c29bd814c..bf66f9084 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -25,7 +25,7 @@ interface InnerProps {
     | "space-evenly";
   alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
   direction?: "row" | "column" | "row-reverse" | "column-reverse";
-  itemGutter?: boolean | "half";
+  itemGutter?: boolean | "half" | "double";
   className?: string;
   wrap?: boolean | "reverse";
 
@@ -43,6 +43,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
     itemGutter,
     wrap,
     forwardRef,
+    children,
     ...rest
   } = props;
 
@@ -55,6 +56,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
   const classObject: Record<string, boolean> = {
     [classes.itemGutter]: itemGutter === true,
     [classes.halfItemGutter]: itemGutter === "half",
+    [classes.doubleItemGutter]: itemGutter === "double",
     [classes.wrap]: wrap === true,
     [classes.wrapReverse]: wrap === "reverse",
   };
@@ -75,12 +77,13 @@ const Flex: StatelessComponent<InnerProps> = props => {
     classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
   }
 
-  const classNames: string = cn(classes.root, className, classObject);
+  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.
   return (
-    <div>
-      <div ref={forwardRef} className={classNames} {...rest} />
+    <div ref={forwardRef} className={rootClassNames} {...rest}>
+      <div className={flexClassNames}>{children}</div>
     </div>
   );
 };
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 b1f72d74b..d96f60ebd 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
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
   >
     <div>
       Hello World
@@ -13,9 +15,11 @@ exports[`renders correctly 1`] = `
 `;
 
 exports[`renders with halfe item gutter 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-halfItemGutter Flex-wrap Flex-alignCenter"
+    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignCenter"
   >
     <div>
       Hello World
@@ -25,9 +29,11 @@ exports[`renders with halfe item gutter 1`] = `
 `;
 
 exports[`renders with item gutter 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-itemGutter Flex-wrap Flex-alignCenter"
+    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
   >
     <div>
       Hello World
@@ -37,9 +43,11 @@ exports[`renders with item gutter 1`] = `
 `;
 
 exports[`renders with wrap 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-wrap Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-alignCenter"
   >
     <div>
       Hello World
@@ -49,9 +57,11 @@ exports[`renders with wrap 1`] = `
 `;
 
 exports[`renders with wrap reverse 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-wrapReverse Flex-alignCenter"
+    className="Flex-flex Flex-wrapReverse Flex-alignCenter"
   >
     <div>
       Hello World
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..b1521ed5d
--- /dev/null
+++ b/src/core/client/ui/components/FormField/FormField.css
@@ -0,0 +1,14 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: space-between;
+
+  &.halfItemGutter > * {
+    margin-left: calc(0.5 * var(--spacing-unit)) !important;
+  }
+
+  &.itemGutter > * {
+    margin-top: var(--spacing-unit) !important;
+  }
+}
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..3dc055085
--- /dev/null
+++ b/src/core/client/ui/components/FormField/FormField.mdx
@@ -0,0 +1,36 @@
+---
+name: FormField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import FormField from './FormField'
+import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+
+# Flex
+
+`FormField` is to be used with Form Components `flexbox`.
+
+## Justify content
+<Playground>
+  <FormField>
+  </FormField>
+</Playground>
+
+## Align items
+<Playground>
+  <Flex alignItems="center" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled" size="small">Push Me</Button>
+    <Button variant="filled" size="large">Push Me</Button>
+  </Flex>
+</Playground>
+
+## Direction
+<Playground>
+  <Flex direction="column" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
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..fe5b6dd7b
--- /dev/null
+++ b/src/core/client/ui/components/FormField/FormField.tsx
@@ -0,0 +1,43 @@
+import cn from "classnames";
+import React, { ReactNode } from "react";
+import { StatelessComponent } from "react";
+
+import { withStyles } from "talk-ui/hocs";
+
+import * as styles from "./FormField.css";
+
+interface InnerProps {
+  children: ReactNode;
+  classes: typeof styles;
+  id?: string;
+  className?: string;
+  itemGutter?: boolean | "half";
+}
+
+const FormField: StatelessComponent<InnerProps> = props => {
+  const { classes, className, children, itemGutter, ...rest } = props;
+
+  // TODO (bc): Use flex component once the extra div issue is solved.
+  return (
+    <div
+      className={cn(
+        classes.root,
+        {
+          [classes.itemGutter]: itemGutter === true,
+          [classes.halfItemGutter]: itemGutter === "half",
+        },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+FormField.defaultProps = {
+  itemGutter: true,
+};
+
+const enhanced = withStyles(styles)(FormField);
+export default enhanced;
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/MatchMedia/MatchMedia.mdx b/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
index 3f3186bb6..b9a64a328 100644
--- a/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
@@ -12,29 +12,29 @@ import MatchMedia from './MatchMedia'
 
 ## Basic usage
 <Playground>
-  <MatchMedia maxWidth="xs">
+  <MatchMedia lteWidth="xs">
     I'm a very small screen
   </MatchMedia>
-  <MatchMedia minWidth="xs" maxWidth="sm">
+  <MatchMedia gtWidth="xs" lteWidth="sm">
     I'm a small screen
   </MatchMedia>
-  <MatchMedia minWidth="sm" maxWidth="md">
+  <MatchMedia gtWidth="sm" lteWidth="md">
     I'm a medium screen
   </MatchMedia>
-  <MatchMedia minWidth="md" maxWidth="lg">
+  <MatchMedia gtWidth="md" lteWidth="lg">
     I'm a large screen
   </MatchMedia>
-  <MatchMedia minWidth="lg" maxWidth="xl">
+  <MatchMedia gtWidth="lg" lteWidth="xl">
     I'm a very large screen
   </MatchMedia>
-  <MatchMedia minWidth="xl">
+  <MatchMedia gtWidth="xl">
     I'm a super large screen
   </MatchMedia>
 </Playground>
 
 ## Using render props
 <Playground>
-  <MatchMedia minWidth="lg">
+  <MatchMedia lteWidth="lg">
     {matches => <span>{matches ? "I'm big" : "I'm small"}</span>}
   </MatchMedia>
 </Playground>
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
index 6f53df511..1b4ded65e 100644
--- a/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
@@ -9,8 +9,8 @@ import { default as MatchMediaWithContext, MatchMedia } from "./MatchMedia";
 
 it("renders correctly", () => {
   const props: PropTypesOf<typeof MatchMedia> = {
-    minWidth: "xs",
-    maxWidth: "sm",
+    lteWidth: "xs",
+    gteWidth: "sm",
     component: "div",
     screen: true,
     children: <div>Hello World</div>,
@@ -19,6 +19,16 @@ it("renders correctly", () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+it("renders less than and great than correctly", () => {
+  const props: PropTypesOf<typeof MatchMedia> = {
+    ltWidth: "xs",
+    gtWidth: "sm",
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<MatchMedia {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
 it("map new speech prop to older aural prop", () => {
   const props: PropTypesOf<typeof MatchMedia> = {
     speech: true,
@@ -37,7 +47,7 @@ it("should get mediaQueryValues from context", () => {
   };
   const wrapper = mount(
     <UIContext.Provider value={context}>
-      <MatchMediaWithContext maxWidth="xs">
+      <MatchMediaWithContext lteWidth="xs">
         <span>Hello World</span>
       </MatchMediaWithContext>
     </UIContext.Provider>
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
index 8df6cff34..677e558bc 100644
--- a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
@@ -10,8 +10,17 @@ import UIContext from "../UIContext";
 type Breakpoints = keyof typeof theme.breakpoints;
 
 interface InnerProps {
-  minWidth?: Breakpoints;
-  maxWidth?: Breakpoints;
+  /** greater than or equal width. */
+  gteWidth?: Breakpoints;
+
+  /** greater than width. */
+  gtWidth?: Breakpoints;
+
+  /** less than equals width. */
+  lteWidth?: Breakpoints;
+
+  /** less than equals width. */
+  ltWidth?: Breakpoints;
   children: ReactNode | ((matches: boolean) => React.ReactNode);
   className?: string;
   component?:
@@ -27,13 +36,21 @@ interface InnerProps {
 }
 
 export const MatchMedia: StatelessComponent<InnerProps> = props => {
-  const { speech, minWidth, maxWidth, ...rest } = props;
+  const { speech, gteWidth, gtWidth, lteWidth, ltWidth, ...rest } = props;
   const mapped = {
     // TODO: Temporarily map newer speech to older aural type until
     // react-responsive supports the speech prop.
     aural: speech,
-    minWidth: minWidth ? theme.breakpoints[minWidth] + 1 : undefined,
-    maxWidth: maxWidth ? theme.breakpoints[maxWidth] : undefined,
+    minWidth: gtWidth
+      ? theme.breakpoints[gtWidth] + 1
+      : gteWidth
+        ? theme.breakpoints[gteWidth]
+        : undefined,
+    maxWidth: ltWidth
+      ? theme.breakpoints[ltWidth] - 1
+      : lteWidth
+        ? theme.breakpoints[lteWidth]
+        : undefined,
   };
   return <Responsive {...rest} {...mapped} />;
 };
diff --git a/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap b/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
index a128d4ba0..88670e33f 100644
--- a/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
+++ b/src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
@@ -14,8 +14,8 @@ exports[`map new speech prop to older aural prop 1`] = `
 exports[`renders correctly 1`] = `
 <MediaQuery
   component="div"
-  maxWidth={640}
-  minWidth={321}
+  maxWidth={320}
+  minWidth={640}
   screen={true}
   values={Object {}}
 >
@@ -24,3 +24,15 @@ exports[`renders correctly 1`] = `
   </div>
 </MediaQuery>
 `;
+
+exports[`renders less than and great than correctly 1`] = `
+<MediaQuery
+  maxWidth={319}
+  minWidth={641}
+  values={Object {}}
+>
+  <div>
+    Hello World
+  </div>
+</MediaQuery>
+`;
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index 924d6483a..954ce577e 100644
--- a/src/core/client/ui/components/TextField/TextField.css
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -5,10 +5,12 @@
   padding: calc(0.5 * var(--spacing-unit));
   box-sizing: border-box;
   border-radius: var(--round-corners);
+  height: 36px;
+  line-height: 36px;
 }
 
 .colorRegular {
-  backgroun-color: var(--palette-common-white);
+  background-color: var(--palette-common-white);
   color: var(--palette-common-black);
   border: 1px solid var(--palette-grey-light);
 }
@@ -16,10 +18,18 @@
 .colorError {
   background-color: var(--palette-common-white);
   border-color: var(--palette-error-main);
-  border: 2px solid #FA4643;
+  border: 2px solid var(--palette-error-darkest);
 }
 
 .fullWidth {
   width: 100%;
 }
 
+::placeholder {
+  font-family: var(--font-family);
+  font-style: normal;
+  font-weight: normal;
+  line-height: calc(16rem / var(--rem-base));
+  font-size: calc(16rem / var(--rem-base));
+  color: var(--palette-grey-lighter);
+}
diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx
index 82196c778..bbfceb20d 100644
--- a/src/core/client/ui/components/TextField/TextField.mdx
+++ b/src/core/client/ui/components/TextField/TextField.mdx
@@ -12,6 +12,7 @@ import Flex from '../Flex'
 ## Basic Use
 <Playground>
   <Flex itemGutter direction="column">
+    <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/>
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index 0383192ce..e3771b2b6 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -33,6 +33,10 @@ export interface TextFieldProps {
    * Placeholder
    */
   placeholder?: string;
+  /**
+   * readOnly
+   */
+  readOnly?: boolean;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {
@@ -68,7 +72,7 @@ const TextField: StatelessComponent<TextFieldProps> = props => {
 
 TextField.defaultProps = {
   color: "regular",
-  fullWidth: false,
+  fullWidth: true,
   placeholder: "",
 };
 
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.tsx b/src/core/client/ui/components/Typography/Typography.tsx
index 86adf7a54..92474adec 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/Typography/Typography.tsx
@@ -14,6 +14,8 @@ type Variant =
   | "heading4"
   | "bodyCopy"
   | "bodyCopyBold"
+  | "inputLabel"
+  | "inputDescription"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -131,12 +133,10 @@ Typography.defaultProps = {
     heading3: "h1",
     heading4: "h1",
     bodyCopy: "p",
-<<<<<<< HEAD
-    inputLabel: "label",
-=======
     bodyCopyBold: "p",
->>>>>>> ff62dc4ecc00cdcef1a742bc23db032271511f91
     timestamp: "span",
+    inputLabel: "label",
+    inputDescription: "p",
   },
   noWrap: false,
   paragraph: false,
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css b/src/core/client/ui/components/ValidationMessage/ValidationMessage.css
index 330281ad4..b3d6a6290 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.css
@@ -1,5 +1,5 @@
 .root {
-  composes: validationMessage from "talk-ui/shared/typography.css";
+  composes: alertMessage from "talk-ui/shared/typography.css";
   position: relative;
   display: inline-flex;
   justify-content: flex-start;
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx
index ddd3d343e..f336fb06e 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx
@@ -8,7 +8,6 @@ import ValidationMessage from "./ValidationMessage";
 it("renders correctly", () => {
   const props: PropTypesOf<typeof ValidationMessage> = {
     className: "custom",
-    color: "error",
     children: "Hello World",
   };
   const renderer = TestRenderer.create(<ValidationMessage {...props} />);
diff --git a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
index b26303e81..2a80be622 100644
--- a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
+++ b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
@@ -3,7 +3,6 @@
 exports[`renders correctly 1`] = `
 <div
   className="ValidationMessage-root ValidationMessage-colorError custom"
-  color="error"
 >
   <span
     className="Icon-root ValidationMessage-icon Icon-sm"
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 81d32ebf7..6b8e15d7f 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -14,3 +14,4 @@ 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";
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 9f59d5abe..a4abd6426 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -132,7 +132,7 @@
   letter-spacing: calc(0.2em / 16);
 }
 
-.validationMessage {
+.alertMessage {
   color: var(--palette-common-black);
   font-family: var(--font-family);
   font-weight: var(--font-weight-medium);
@@ -158,3 +158,21 @@
   letter-spacing: calc(0.2em / 16);
   color: var(--palette-text-primary);
 }
+
+.inputDescription {
+  font-size: calc(14rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family);
+  line-height: calc(18em / 16);
+  letter-spacing: calc(0.2em / 16);
+  color: var(--palette-text-secondary);
+}
+
+.placeholder {
+  font-family: var(--font-family);
+  font-style: normal;
+  font-weight: normal;
+  line-height: calc(16rem / var(--rem-base));
+  font-size: calc(16rem / var(--rem-base));
+  color: var(--palette-grey-lighter);
+}
diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx
index 5667d6f78..b114cf7e1 100644
--- a/src/docs/forms.mdx
+++ b/src/docs/forms.mdx
@@ -16,37 +16,66 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
 
 ## Simple Form
 <Playground>
-  <Flex itemGutter direction="column" style={{width:330}}>
+  <Flex>
     <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/>
-    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
+
+    <FormField>
+      <InputLabel>Email Address</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel>Username</InputLabel>
+      <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+      <TextField/>
+    </FormField>
+
+
+    <FormField>
+      <InputLabel>Password</InputLabel>
+      <Typography>Must be at least 8 characters</Typography>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel>Confirm Password</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
   </Flex>
 </Playground>
 
 ## Simple Form with error
+
 <Playground>
-  <Flex itemGutter direction="column" style={{width:330}}>
+  <Flex>
     <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/>
-    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
+
+    <FormField>
+      <InputLabel>Email Address</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
+      <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+      <TextField/>
+      <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
+    </FormField>
+
+
+    <FormField>
+      <InputLabel>Password</InputLabel>
+      <Typography>Must be at least 8 characters</Typography>
+      <TextField/>
+    </FormField>
+
+    <FormField>
+      <InputLabel>Confirm Password</InputLabel>
+      <TextField/>
+    </FormField>
+
+    <Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
   </Flex>
 </Playground>
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 7d018f80f..01a2ed331 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -6,9 +6,11 @@ comments-postCommentForm-post = Post
 comments-stream-loadMore = Load more
 comments-replyList-showAll = Show all
 
-comments-permalink-share = Share
-comments-permalink-copy = Copy
-comments-permalink-copied = Copied
+comments-permalinkButton-share = Share
+comments-permalinkPopover-copy = Copy
+comments-permalinkPopover-copied = Copied
+comments-permalinkView-showAllComments = Show all comments
+comments-permalinkView-commentNotFound = Comment not found
 
 comments-userBoxUnauthenticated-joinTheConversation = Join the conversation
 comments-userBoxUnauthenticated-signIn = Sign in