diff --git a/src/core/client/auth/components/App.spec.tsx b/src/core/client/auth/components/App.spec.tsx
new file mode 100644
index 000000000..ec7dd130d
--- /dev/null
+++ b/src/core/client/auth/components/App.spec.tsx
@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import App from "./App";
+
+it("renders sign in", () => {
+  const props: PropTypesOf<typeof App> = {
+    view: "SIGN_IN",
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/auth/components/App.tsx b/src/core/client/auth/components/App.tsx
index f2537db83..103bf95dc 100644
--- a/src/core/client/auth/components/App.tsx
+++ b/src/core/client/auth/components/App.tsx
@@ -30,7 +30,7 @@ const renderView = (view: View) => {
     case "RESET_PASSWORD":
       return <ResetPasswordContainer />;
     default:
-      return <SignInContainer />;
+      throw new Error(`Unknown view ${view}`);
   }
 };
 
diff --git a/src/core/client/auth/components/ForgotPassword.tsx b/src/core/client/auth/components/ForgotPassword.tsx
index 794acebfa..53a13b76a 100644
--- a/src/core/client/auth/components/ForgotPassword.tsx
+++ b/src/core/client/auth/components/ForgotPassword.tsx
@@ -33,7 +33,7 @@ export interface ForgotPasswordForm {
 const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitError }) => (
+      {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
           <HorizontalGutter size="double">
@@ -71,7 +71,13 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Email Address"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
                       fullWidth
+                      disabled={submitting}
                     />
                   </Localized>
                   {meta.touched &&
@@ -84,7 +90,13 @@ const ForgotPassword: StatelessComponent<ForgotPasswordForm> = props => {
               )}
             </Field>
             <Localized id="forgotPassword-sendEmailButton">
-              <Button variant="filled" color="primary" size="large" fullWidth>
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                disabled={submitting}
+              >
                 Send Email
               </Button>
             </Localized>
diff --git a/src/core/client/auth/components/ResetPassword.tsx b/src/core/client/auth/components/ResetPassword.tsx
index dadf210db..fd75246fb 100644
--- a/src/core/client/auth/components/ResetPassword.tsx
+++ b/src/core/client/auth/components/ResetPassword.tsx
@@ -36,7 +36,7 @@ export interface ResetPasswordForm {
 const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitError }) => (
+      {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
           <HorizontalGutter size="double">
@@ -77,6 +77,12 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
                       value={input.value}
                       placeholder="Password"
                       type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -109,6 +115,12 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
                       value={input.value}
                       placeholder="Confirm Password"
                       type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -122,7 +134,13 @@ const ResetPassword: StatelessComponent<ResetPasswordForm> = props => {
               )}
             </Field>
             <Localized id="resetPassword-resetPasswordButton">
-              <Button variant="filled" color="primary" size="large" fullWidth>
+              <Button
+                variant="filled"
+                color="primary"
+                size="large"
+                fullWidth
+                disabled={submitting}
+              >
                 Reset Password
               </Button>
             </Localized>
diff --git a/src/core/client/auth/components/SignIn.tsx b/src/core/client/auth/components/SignIn.tsx
index c1058365e..b1bbe514a 100644
--- a/src/core/client/auth/components/SignIn.tsx
+++ b/src/core/client/auth/components/SignIn.tsx
@@ -71,6 +71,12 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Email Address"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -100,6 +106,12 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                       value={input.value}
                       placeholder="Password"
                       type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -115,6 +127,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                         variant="underlined"
                         color="primary"
                         size="small"
+                        disabled={submitting}
                         onClick={props.onGotoForgotPassword}
                       >
                         Forgot your password?
@@ -130,6 +143,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                 color="primary"
                 size="large"
                 type="submit"
+                disabled={submitting}
                 fullWidth
               >
                 Sign in and join the conversation
@@ -143,6 +157,7 @@ const SignIn: StatelessComponent<SignInForm> = props => {
                     variant="underlined"
                     size="small"
                     color="primary"
+                    disabled={submitting}
                     onClick={props.onGotoSignUp}
                   />
                 }
diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx
index cd511dd42..a5ea25c62 100644
--- a/src/core/client/auth/components/SignUp.tsx
+++ b/src/core/client/auth/components/SignUp.tsx
@@ -41,7 +41,7 @@ export interface SignUpForm {
 const SignUp: StatelessComponent<SignUpForm> = props => {
   return (
     <Form onSubmit={props.onSubmit}>
-      {({ handleSubmit, submitError }) => (
+      {({ handleSubmit, submitting, submitError }) => (
         <form autoComplete="off" onSubmit={handleSubmit}>
           <AutoHeightContainer />
           <HorizontalGutter size="double">
@@ -73,6 +73,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Email Address"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -109,6 +115,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                       onChange={input.onChange}
                       value={input.value}
                       placeholder="Username"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -145,6 +157,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                       value={input.value}
                       placeholder="Password"
                       type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -176,6 +194,12 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                       value={input.value}
                       placeholder="Confirm Password"
                       type="password"
+                      color={
+                        meta.touched && (meta.error || meta.submitError)
+                          ? "error"
+                          : "regular"
+                      }
+                      disabled={submitting}
                       fullWidth
                     />
                   </Localized>
@@ -193,8 +217,9 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                 variant="filled"
                 color="primary"
                 size="large"
-                fullWidth
                 type="submit"
+                disabled={submitting}
+                fullWidth
               >
                 Sign up and join the conversation
               </Button>
@@ -208,6 +233,7 @@ const SignUp: StatelessComponent<SignUpForm> = props => {
                     size="small"
                     color="primary"
                     onClick={props.onGotoSignIn}
+                    disabled={submitting}
                   />
                 }
               >
diff --git a/src/core/client/auth/components/__snapshots__/App.spec.tsx.snap b/src/core/client/auth/components/__snapshots__/App.spec.tsx.snap
new file mode 100644
index 000000000..449ec1ce6
--- /dev/null
+++ b/src/core/client/auth/components/__snapshots__/App.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders sign in 1`] = `
+<div
+  className="App-root"
+>
+  <withContext(createMutationContainer(withContext(createMutationContainer(SignInContainer)))) />
+</div>
+`;
diff --git a/src/core/client/stream/components/PostCommentFormFake.spec.tsx b/src/core/client/stream/components/PostCommentFormFake.spec.tsx
new file mode 100644
index 000000000..0721cd6fe
--- /dev/null
+++ b/src/core/client/stream/components/PostCommentFormFake.spec.tsx
@@ -0,0 +1,9 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import PostCommentFormFake from "./PostCommentFormFake";
+
+it("renders correctly", () => {
+  const wrapper = shallow(<PostCommentFormFake />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/PoweredBy.spec.tsx b/src/core/client/stream/components/PoweredBy.spec.tsx
new file mode 100644
index 000000000..f0f754745
--- /dev/null
+++ b/src/core/client/stream/components/PoweredBy.spec.tsx
@@ -0,0 +1,15 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import PoweredBy from "./PoweredBy";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof PoweredBy> = {
+    className: "custom",
+  };
+  const wrapper = shallow(<PoweredBy {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.spec.tsx b/src/core/client/stream/components/UserBoxAuthenticated.spec.tsx
new file mode 100644
index 000000000..5e658f287
--- /dev/null
+++ b/src/core/client/stream/components/UserBoxAuthenticated.spec.tsx
@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import UserBoxAuthenticated from "./UserBoxAuthenticated";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof UserBoxAuthenticated> = {
+    onSignOut: noop,
+    username: "Username",
+  };
+  const wrapper = shallow(<UserBoxAuthenticated {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
new file mode 100644
index 000000000..2f29d6793
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/PostCommentFormFake.spec.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(HorizontalGutter)
+  className="PostCommentFormFake-root"
+>
+  <textarea
+    className="PostCommentFormFake-textarea"
+    disabled={true}
+    placeholder="Post a comment"
+  />
+  <Localized
+    id="comments-PostCommentFormFake-signInAndJoin"
+  >
+    <withPropsOnChange(Button)
+      color="primary"
+      disabled={true}
+      fullWidth={true}
+      type="submit"
+      variant="filled"
+    >
+      Sign in and join the conversation
+    </withPropsOnChange(Button)>
+  </Localized>
+</withPropsOnChange(HorizontalGutter)>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
new file mode 100644
index 000000000..5c043b8db
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/PoweredBy.spec.tsx.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="custom"
+>
+  <withPropsOnChange(Typography)
+    color="textSecondary"
+    container="span"
+    variant="inputDescription"
+  >
+    Powered by
+  </withPropsOnChange(Typography)>
+   
+  <withPropsOnChange(Typography)
+    container="span"
+    variant="heading4"
+  >
+    The Coral Project
+  </withPropsOnChange(Typography)>
+</div>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
new file mode 100644
index 000000000..80f20f2b3
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/UserBoxAuthenticated.spec.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Flex)
+  itemGutter="half"
+  wrap={true}
+>
+  <Localized
+    id="comments-userBoxAuthenticated-signedInAs"
+    username={<Username />}
+  >
+    <withPropsOnChange(Typography)
+      container="div"
+      variant="bodyCopy"
+    >
+      Signed in as &lt;username&gt;&lt;/username&gt;.
+    </withPropsOnChange(Typography)>
+  </Localized>
+  <Localized
+    button={
+      <withPropsOnChange(Button)
+        color="primary"
+        onClick={[Function]}
+        size="small"
+        variant="underlined"
+      />
+    }
+    id="comments-userBoxAuthenticated-notYou"
+  >
+    <withPropsOnChange(Typography)
+      container={[Function]}
+      variant="bodyCopy"
+    >
+      Not you? &lt;button&gt;Sign Out&lt;/button&gt;
+    </withPropsOnChange(Typography)>
+  </Localized>
+</withPropsOnChange(Flex)>
+`;
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx
new file mode 100644
index 000000000..2518a0e5f
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "talk-ui/types";
+
+import HorizontalGutter from "./HorizontalGutter";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof HorizontalGutter> = {
+    className: "custom",
+  };
+  const renderer = TestRenderer.create(<HorizontalGutter {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders double size", () => {
+  const props: PropTypesOf<typeof HorizontalGutter> = {
+    size: "double",
+  };
+  const renderer = TestRenderer.create(<HorizontalGutter {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap b/src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap
new file mode 100644
index 000000000..15c0915ed
--- /dev/null
+++ b/src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="HorizontalGutter-root custom HorizontalGutter-full"
+/>
+`;
+
+exports[`renders double size 1`] = `
+<div
+  className="HorizontalGutter-root HorizontalGutter-double"
+/>
+`;
diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx
index 46d223ff3..9da45ef58 100644
--- a/src/core/client/ui/components/TextField/TextField.tsx
+++ b/src/core/client/ui/components/TextField/TextField.tsx
@@ -49,6 +49,8 @@ export interface TextFieldProps {
    * onChange
    */
   onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
+
+  disabled?: boolean;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {
diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx
index cfd1ab523..4edcf0d7a 100644
--- a/src/docs/forms.mdx
+++ b/src/docs/forms.mdx
@@ -57,7 +57,7 @@ import { InputLabel, CallOut, ValidationMessage, TextField, InputDescription, Fl
     <FormField>
       <InputLabel defaultValue="something.com">Username</InputLabel>
       <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
-      <TextField fullWidth/>
+      <TextField color="error" fullWidth />
       <ValidationMessage fullWidth>Invalid characters. Try again.</ValidationMessage>
     </FormField>