diff --git a/src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap
new file mode 100644
index 000000000..c3c5fe4ed
--- /dev/null
+++ b/src/core/client/auth/test/__snapshots__/navigation.spec.tsx.snap
@@ -0,0 +1,431 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`navigates to forgot password form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Forgot Password
+      </h1>
+      <p
+        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      >
+        Enter your email address below and we will send you a link to
+reset your password.
+      </p>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="button"
+      >
+        Send Email
+      </button>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`navigates to sign in form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? 
+          </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoSignUpButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign Up
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`navigates to sign up form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign up to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Username
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          A unique identifier displayed on your comments. You may use “_” and “.”
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="username"
+          onChange={[Function]}
+          placeholder="Username"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <p
+          className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
+        >
+          Must be at least ⁨8⁩ characters
+        </p>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Confirm Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="confirmPassword"
+          onChange={[Function]}
+          placeholder="Confirm Password"
+          type="password"
+          value=""
+        />
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign up and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Already have an account? 
+          </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`renders sign in form 1`] = `
+<div
+  className="App-root"
+>
+  <form
+    autoComplete="off"
+    onSubmit={[Function]}
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-double"
+    >
+      <h1
+        className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+      >
+        Sign in to join the conversation
+      </h1>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Email Address
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="email"
+          onChange={[Function]}
+          placeholder="Email Address"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      >
+        <label
+          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        >
+          Password
+        </label>
+        <input
+          className="TextField-root TextField-colorRegular TextField-fullWidth"
+          disabled={false}
+          name="password"
+          onChange={[Function]}
+          placeholder="Password"
+          type="password"
+          value=""
+        />
+        <div
+          className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        >
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoForgotPasswordButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Forgot your password?
+          </button>
+        </div>
+      </div>
+      <button
+        className="BaseButton-root Button-root Button-sizeLarge Button-colorPrimary Button-variantFilled Button-fullWidth"
+        disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        type="submit"
+      >
+        Sign in and join the conversation
+      </button>
+      <div
+        className="Flex-root Flex-flex Flex-justifyCenter"
+      >
+        <div
+          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        >
+          <span>
+            Don't have an account? 
+          </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoSignUpButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign Up
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
index 2f6fa4225..cb01d2c1b 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -104,8 +104,23 @@ exports[`accepts correct password 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+            Don't have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoSignUpButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign Up
+          </button>
         </div>
       </div>
     </div>
@@ -217,8 +232,23 @@ exports[`accepts valid email 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+            Don't have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoSignUpButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign Up
+          </button>
         </div>
       </div>
     </div>
@@ -343,8 +373,23 @@ exports[`checks for invalid email 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+            Don't have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoSignUpButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign Up
+          </button>
         </div>
       </div>
     </div>
@@ -443,8 +488,23 @@ exports[`renders sign in form 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+            Don't have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoSignUpButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign Up
+          </button>
         </div>
       </div>
     </div>
@@ -569,8 +629,23 @@ exports[`shows error when submitting empty form 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+            Don't have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoSignUpButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign Up
+          </button>
         </div>
       </div>
     </div>
@@ -669,8 +744,23 @@ exports[`shows server error 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+            Don't have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined Button-disabled"
+            disabled={true}
+            id="signIn-gotoSignUpButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign Up
+          </button>
         </div>
       </div>
     </div>
@@ -774,8 +864,23 @@ exports[`shows server error 2`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+            Don't have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoSignUpButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign Up
+          </button>
         </div>
       </div>
     </div>
@@ -874,8 +979,23 @@ exports[`submits form successfully 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+            Don't have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined Button-disabled"
+            disabled={true}
+            id="signIn-gotoSignUpButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign Up
+          </button>
         </div>
       </div>
     </div>
@@ -974,8 +1094,23 @@ exports[`submits form successfully 2`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Don't have an account? &lt;button&gt;Sign Up&lt;/button&gt;
+            Don't have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signIn-gotoSignUpButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign Up
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
index 5a54d6e21..6293da7d8 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -94,7 +94,7 @@ exports[`accepts correct password 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorRegular TextField-fullWidth"
@@ -157,8 +157,23 @@ exports[`accepts correct password 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -260,7 +275,7 @@ exports[`accepts correct password confirmation 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorError TextField-fullWidth"
@@ -336,8 +351,23 @@ exports[`accepts correct password confirmation 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -426,7 +456,7 @@ exports[`accepts valid email 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorError TextField-fullWidth"
@@ -502,8 +532,23 @@ exports[`accepts valid email 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -592,7 +637,7 @@ exports[`accepts valid username 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorError TextField-fullWidth"
@@ -668,8 +713,23 @@ exports[`accepts valid username 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -771,7 +831,7 @@ exports[`checks for invalid characters in username 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorError TextField-fullWidth"
@@ -847,8 +907,23 @@ exports[`checks for invalid characters in username 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -950,7 +1025,7 @@ exports[`checks for invalid email 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorError TextField-fullWidth"
@@ -1026,8 +1101,23 @@ exports[`checks for invalid email 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -1114,7 +1204,7 @@ exports[`checks for too long username 1`] = `
             warning
           </span>
           <span>
-            Usernames cannot be longer than {$maxLength} characters.
+            Usernames cannot be longer than ⁨20⁩ characters.
           </span>
         </div>
       </div>
@@ -1129,7 +1219,7 @@ exports[`checks for too long username 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorError TextField-fullWidth"
@@ -1205,8 +1295,23 @@ exports[`checks for too long username 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -1308,7 +1413,7 @@ exports[`checks for too short password 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorError TextField-fullWidth"
@@ -1329,7 +1434,7 @@ exports[`checks for too short password 1`] = `
             warning
           </span>
           <span>
-            Password must contain at least {$minLength} characters.
+            Password must contain at least ⁨8⁩ characters.
           </span>
         </div>
       </div>
@@ -1384,8 +1489,23 @@ exports[`checks for too short password 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -1472,7 +1592,7 @@ exports[`checks for too short username 1`] = `
             warning
           </span>
           <span>
-            Usernames must contain at least {$minLength} characters.
+            Username must contain at least ⁨3⁩ characters.
           </span>
         </div>
       </div>
@@ -1487,7 +1607,7 @@ exports[`checks for too short username 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorError TextField-fullWidth"
@@ -1563,8 +1683,23 @@ exports[`checks for too short username 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -1666,7 +1801,7 @@ exports[`checks for wrong password confirmation 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorError TextField-fullWidth"
@@ -1742,8 +1877,23 @@ exports[`checks for wrong password confirmation 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -1819,7 +1969,7 @@ exports[`renders sign up form 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorRegular TextField-fullWidth"
@@ -1869,8 +2019,23 @@ exports[`renders sign up form 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -1972,7 +2137,7 @@ exports[`shows error when submitting empty form 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorError TextField-fullWidth"
@@ -2048,8 +2213,23 @@ exports[`shows error when submitting empty form 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -2125,7 +2305,7 @@ exports[`shows server error 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorRegular TextField-fullWidth"
@@ -2175,8 +2355,23 @@ exports[`shows server error 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined Button-disabled"
+            disabled={true}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -2257,7 +2452,7 @@ exports[`shows server error 2`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorRegular TextField-fullWidth"
@@ -2307,8 +2502,23 @@ exports[`shows server error 2`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -2384,7 +2594,7 @@ exports[`submits form successfully 1`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorRegular TextField-fullWidth"
@@ -2434,8 +2644,23 @@ exports[`submits form successfully 1`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined Button-disabled"
+            disabled={true}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
@@ -2511,7 +2736,7 @@ exports[`submits form successfully 2`] = `
         <p
           className="Typography-root Typography-inputDescription Typography-colorTextSecondary"
         >
-          Must be at least {$minLength} characters
+          Must be at least ⁨8⁩ characters
         </p>
         <input
           className="TextField-root TextField-colorRegular TextField-fullWidth"
@@ -2561,8 +2786,23 @@ exports[`submits form successfully 2`] = `
           className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
-            Already have an account? &lt;button&gt;Sign In &lt;/button&gt;
+            Already have an account? 
           </span>
+          <button
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+            disabled={false}
+            id="signUp-gotoSignInButton"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="button"
+          >
+            Sign In
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/core/client/auth/test/createFluentBundle.ts b/src/core/client/auth/test/createFluentBundle.ts
new file mode 100644
index 000000000..93f9a400d
--- /dev/null
+++ b/src/core/client/auth/test/createFluentBundle.ts
@@ -0,0 +1,10 @@
+import path from "path";
+
+import { createFluentBundle } from "talk-framework/testHelpers";
+
+export default function create() {
+  return createFluentBundle(
+    "auth",
+    path.resolve(__dirname, "../../../../locales/en-US")
+  );
+}
diff --git a/src/core/client/auth/test/navigation.disabledspec.tsx b/src/core/client/auth/test/navigation.spec.tsx
similarity index 55%
rename from src/core/client/auth/test/navigation.disabledspec.tsx
rename to src/core/client/auth/test/navigation.spec.tsx
index 0abf24548..36ba888d8 100644
--- a/src/core/client/auth/test/navigation.disabledspec.tsx
+++ b/src/core/client/auth/test/navigation.spec.tsx
@@ -1,7 +1,7 @@
 // Enable after this is solved: https://github.com/projectfluent/fluent.js/issues/280
 
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
 import { RecordProxy } from "relay-runtime";
 
 import AppContainer from "talk-auth/containers/AppContainer";
@@ -11,33 +11,37 @@ import { RestClient } from "talk-framework/lib/rest";
 import { createInMemoryStorage } from "talk-framework/lib/storage";
 
 import createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
 
-const environment = createEnvironment({
-  initLocalState: (localRecord: RecordProxy) => {
-    localRecord.setValue("SIGN_IN", "view");
-  },
-});
+function createTestRenderer(initialView: string): ReactTestRenderer {
+  const environment = createEnvironment({
+    initLocalState: (localRecord: RecordProxy) => {
+      localRecord.setValue(initialView, "view");
+    },
+  });
 
-const context: TalkContext = {
-  relayEnvironment: environment,
-  localeBundles: [],
-  localStorage: createInMemoryStorage(),
-  sessionStorage: createInMemoryStorage(),
-  rest: new RestClient("http://localhost/api"),
-  postMessage: new PostMessageService(),
-};
-
-const testRenderer = TestRenderer.create(
-  <TalkContextProvider value={context}>
-    <AppContainer />
-  </TalkContextProvider>
-);
+  const context: TalkContext = {
+    relayEnvironment: environment,
+    localeBundles: [createFluentBundle()],
+    localStorage: createInMemoryStorage(),
+    sessionStorage: createInMemoryStorage(),
+    rest: new RestClient("http://localhost/api"),
+    postMessage: new PostMessageService(),
+  };
+  return TestRenderer.create(
+    <TalkContextProvider value={context}>
+      <AppContainer />
+    </TalkContextProvider>
+  );
+}
 
 it("renders sign in form", async () => {
+  const testRenderer = createTestRenderer("SIGN_IN");
   expect(testRenderer.toJSON()).toMatchSnapshot();
 });
 
 it("navigates to sign up form", async () => {
+  const testRenderer = createTestRenderer("SIGN_IN");
   testRenderer.root
     .findByProps({ id: "signIn-gotoSignUpButton" })
     .props.onClick();
@@ -45,6 +49,7 @@ it("navigates to sign up form", async () => {
 });
 
 it("navigates to sign in form", async () => {
+  const testRenderer = createTestRenderer("SIGN_UP");
   testRenderer.root
     .findByProps({ id: "signUp-gotoSignInButton" })
     .props.onClick();
@@ -52,6 +57,7 @@ it("navigates to sign in form", async () => {
 });
 
 it("navigates to forgot password form", async () => {
+  const testRenderer = createTestRenderer("SIGN_IN");
   testRenderer.root
     .findByProps({ id: "signIn-gotoForgotPasswordButton" })
     .props.onClick();
diff --git a/src/core/client/auth/test/signIn.spec.tsx b/src/core/client/auth/test/signIn.spec.tsx
index cef7a1574..848a05934 100644
--- a/src/core/client/auth/test/signIn.spec.tsx
+++ b/src/core/client/auth/test/signIn.spec.tsx
@@ -14,6 +14,7 @@ import { RestClient } from "talk-framework/lib/rest";
 import { createInMemoryStorage } from "talk-framework/lib/storage";
 
 import createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
 
 const inputPredicate = (name: string) => (n: ReactTestInstance) => {
   return n.props.name === name && n.props.onChange;
@@ -31,7 +32,7 @@ beforeEach(() => {
 
   context = {
     relayEnvironment: environment,
-    localeBundles: [],
+    localeBundles: [createFluentBundle()],
     localStorage: createInMemoryStorage(),
     sessionStorage: createInMemoryStorage(),
     rest: new RestClient("http://localhost/api"),
diff --git a/src/core/client/auth/test/signUp.spec.tsx b/src/core/client/auth/test/signUp.spec.tsx
index 3626dba34..a4b36e3d4 100644
--- a/src/core/client/auth/test/signUp.spec.tsx
+++ b/src/core/client/auth/test/signUp.spec.tsx
@@ -14,6 +14,7 @@ import { RestClient } from "talk-framework/lib/rest";
 import { createInMemoryStorage } from "talk-framework/lib/storage";
 
 import createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
 
 const inputPredicate = (name: string) => (n: ReactTestInstance) => {
   return n.props.name === name && n.props.onChange;
@@ -31,7 +32,7 @@ beforeEach(() => {
 
   context = {
     relayEnvironment: environment,
-    localeBundles: [],
+    localeBundles: [createFluentBundle()],
     localStorage: createInMemoryStorage(),
     sessionStorage: createInMemoryStorage(),
     rest: new RestClient("http://localhost/api"),
diff --git a/src/core/client/framework/testHelpers/createFluentBundle.ts b/src/core/client/framework/testHelpers/createFluentBundle.ts
new file mode 100644
index 000000000..a937b2b76
--- /dev/null
+++ b/src/core/client/framework/testHelpers/createFluentBundle.ts
@@ -0,0 +1,27 @@
+import { FluentBundle } from "fluent/compat";
+import fs from "fs";
+import path from "path";
+
+// These locale prefixes are always loaded.
+const commonPrefixes = ["common", "framework"];
+
+function createFluentBundle(
+  target: string,
+  pathToLocale: string
+): FluentBundle {
+  const bundle = new FluentBundle("en-US");
+  const files = fs.readdirSync(pathToLocale);
+  const prefixes = commonPrefixes.concat(target);
+  files.forEach(f => {
+    prefixes.forEach(prefix => {
+      if (f.startsWith(prefix)) {
+        bundle.addMessages(
+          fs.readFileSync(path.resolve(pathToLocale, f)).toString()
+        );
+      }
+    });
+  });
+  return bundle;
+}
+
+export default createFluentBundle;
diff --git a/src/core/client/framework/testHelpers/index.ts b/src/core/client/framework/testHelpers/index.ts
index 9cbc97018..182ba19fb 100644
--- a/src/core/client/framework/testHelpers/index.ts
+++ b/src/core/client/framework/testHelpers/index.ts
@@ -2,3 +2,5 @@ export {
   default as createRelayEnvironment,
   CreateRelayEnvironmentParams,
 } from "./createRelayEnvironment";
+
+export { default as createFluentBundle } from "./createFluentBundle";
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 abb73f02b..82c6ceccb 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -57,6 +57,7 @@ exports[`loads more comments 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Bold"
                   type="button"
                 >
                   <span
@@ -70,6 +71,7 @@ exports[`loads more comments 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Italic"
                   type="button"
                 >
                   <span
@@ -83,6 +85,7 @@ exports[`loads more comments 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Blockquote"
                   type="button"
                 >
                   <span
@@ -312,6 +315,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Bold"
                   type="button"
                 >
                   <span
@@ -325,6 +329,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Italic"
                   type="button"
                 >
                   <span
@@ -338,6 +343,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Blockquote"
                   type="button"
                 >
                   <span
@@ -483,7 +489,7 @@ exports[`renders comment stream 1`] = `
         onTouchEnd={[Function]}
         type="button"
       >
-        Load More
+        Load more
       </button>
     </div>
   </div>
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index eded6b041..39d567d2b 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`renders permalink view 1`] = `
       target="_parent"
       type="button"
     >
-      Show all Comments
+      Show all comments
     </a>
     <div
       className="Comment-root"
@@ -116,6 +116,7 @@ exports[`show all comments 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Bold"
                   type="button"
                 >
                   <span
@@ -129,6 +130,7 @@ exports[`show all comments 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Italic"
                   type="button"
                 >
                   <span
@@ -142,6 +144,7 @@ exports[`show all comments 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Blockquote"
                   type="button"
                 >
                   <span
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 d3485ab1c..cfaa83d0e 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`renders permalink view with unknown asset 1`] = `
       target="_parent"
       type="button"
     >
-      Show all Comments
+      Show all comments
     </a>
     <p
       className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
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 060292bd6..62871c5d1 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`renders permalink view with unknown comment 1`] = `
       target="_parent"
       type="button"
     >
-      Show all Comments
+      Show all comments
     </a>
     <p
       className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
@@ -89,6 +89,7 @@ exports[`show all comments 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Bold"
                   type="button"
                 >
                   <span
@@ -102,6 +103,7 @@ exports[`show all comments 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Italic"
                   type="button"
                 >
                   <span
@@ -115,6 +117,7 @@ exports[`show all comments 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Blockquote"
                   type="button"
                 >
                   <span
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 4ef60a22b..56c8f0963 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -57,6 +57,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Bold"
                   type="button"
                 >
                   <span
@@ -70,6 +71,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Italic"
                   type="button"
                 >
                   <span
@@ -83,6 +85,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Blockquote"
                   type="button"
                 >
                   <span
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 facbf659f..65c26f837 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -57,6 +57,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Bold"
                   type="button"
                 >
                   <span
@@ -70,6 +71,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Italic"
                   type="button"
                 >
                   <span
@@ -83,6 +85,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Blockquote"
                   type="button"
                 >
                   <span
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 0dcc1af0c..cfb9bbaa1 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -57,6 +57,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Bold"
                   type="button"
                 >
                   <span
@@ -70,6 +71,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Italic"
                   type="button"
                 >
                   <span
@@ -83,6 +85,7 @@ exports[`renders comment stream 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Blockquote"
                   type="button"
                 >
                   <span
@@ -231,7 +234,7 @@ exports[`renders comment stream 1`] = `
               onTouchEnd={[Function]}
               type="button"
             >
-              Show All Replies
+              Show all
             </button>
           </div>
         </div>
@@ -298,6 +301,7 @@ exports[`show all replies 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Bold"
                   type="button"
                 >
                   <span
@@ -311,6 +315,7 @@ exports[`show all replies 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Italic"
                   type="button"
                 >
                   <span
@@ -324,6 +329,7 @@ exports[`show all replies 1`] = `
                   className="Button-button"
                   disabled={false}
                   onClick={[Function]}
+                  title="Blockquote"
                   type="button"
                 >
                   <span
diff --git a/src/core/client/stream/test/createFluentBundle.ts b/src/core/client/stream/test/createFluentBundle.ts
new file mode 100644
index 000000000..c2ba0e589
--- /dev/null
+++ b/src/core/client/stream/test/createFluentBundle.ts
@@ -0,0 +1,10 @@
+import path from "path";
+
+import { createFluentBundle } from "talk-framework/testHelpers";
+
+export default function create() {
+  return createFluentBundle(
+    "stream",
+    path.resolve(__dirname, "../../../../locales/en-US")
+  );
+}
diff --git a/src/core/client/stream/test/loadMore.spec.tsx b/src/core/client/stream/test/loadMore.spec.tsx
index 50c60423d..5341b39ee 100644
--- a/src/core/client/stream/test/loadMore.spec.tsx
+++ b/src/core/client/stream/test/loadMore.spec.tsx
@@ -10,6 +10,7 @@ import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
 import createNodeMock from "./createNodeMock";
 import { assets, comments } from "./fixtures";
 
@@ -78,7 +79,7 @@ beforeEach(() => {
 
   const context: TalkContext = {
     relayEnvironment: environment,
-    localeBundles: [],
+    localeBundles: [createFluentBundle()],
     localStorage: createInMemoryStorage(),
     sessionStorage: createInMemoryStorage(),
     rest: new RestClient("http://localhost/api"),
diff --git a/src/core/client/stream/test/permalinkView.spec.tsx b/src/core/client/stream/test/permalinkView.spec.tsx
index ae1c3fbda..666f4af5e 100644
--- a/src/core/client/stream/test/permalinkView.spec.tsx
+++ b/src/core/client/stream/test/permalinkView.spec.tsx
@@ -11,6 +11,7 @@ import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
 import createNodeMock from "./createNodeMock";
 import { assets, comments } from "./fixtures";
 
@@ -63,7 +64,7 @@ beforeEach(() => {
 
   const context: TalkContext = {
     relayEnvironment: environment,
-    localeBundles: [],
+    localeBundles: [createFluentBundle()],
     localStorage: createInMemoryStorage(),
     sessionStorage: createInMemoryStorage(),
     rest: new RestClient("http://localhost/api"),
diff --git a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
index 4bcff6c5f..17b23b670 100644
--- a/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
+++ b/src/core/client/stream/test/permalinkViewAssetNotFound.spec.tsx
@@ -10,6 +10,7 @@ import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
 import createNodeMock from "./createNodeMock";
 
 let testRenderer: ReactTestRenderer;
@@ -34,7 +35,7 @@ beforeEach(() => {
 
   const context: TalkContext = {
     relayEnvironment: environment,
-    localeBundles: [],
+    localeBundles: [createFluentBundle()],
     localStorage: createInMemoryStorage(),
     sessionStorage: createInMemoryStorage(),
     rest: new RestClient("http://localhost/api"),
diff --git a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
index 647f33829..368e29bc3 100644
--- a/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
+++ b/src/core/client/stream/test/permalinkViewCommentNotFound.spec.tsx
@@ -11,6 +11,7 @@ import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
 import createNodeMock from "./createNodeMock";
 import { assets, comments } from "./fixtures";
 
@@ -59,7 +60,7 @@ beforeEach(() => {
 
   const context: TalkContext = {
     relayEnvironment: environment,
-    localeBundles: [],
+    localeBundles: [createFluentBundle()],
     localStorage: createInMemoryStorage(),
     sessionStorage: createInMemoryStorage(),
     rest: new RestClient("http://localhost/api"),
diff --git a/src/core/client/stream/test/renderReplies.spec.tsx b/src/core/client/stream/test/renderReplies.spec.tsx
index f3ceecf10..673f6da60 100644
--- a/src/core/client/stream/test/renderReplies.spec.tsx
+++ b/src/core/client/stream/test/renderReplies.spec.tsx
@@ -11,6 +11,7 @@ import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
 import createNodeMock from "./createNodeMock";
 import { assetWithReplies } from "./fixtures";
 
@@ -38,7 +39,7 @@ beforeEach(() => {
 
   const context: TalkContext = {
     relayEnvironment: environment,
-    localeBundles: [],
+    localeBundles: [createFluentBundle()],
     localStorage: createInMemoryStorage(),
     sessionStorage: createInMemoryStorage(),
     rest: new RestClient("http://localhost/api"),
diff --git a/src/core/client/stream/test/renderStream.spec.tsx b/src/core/client/stream/test/renderStream.spec.tsx
index ed0a4aba0..3e95fbc25 100644
--- a/src/core/client/stream/test/renderStream.spec.tsx
+++ b/src/core/client/stream/test/renderStream.spec.tsx
@@ -11,6 +11,7 @@ import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
 import createNodeMock from "./createNodeMock";
 import { assets } from "./fixtures";
 
@@ -38,7 +39,7 @@ beforeEach(() => {
 
   const context: TalkContext = {
     relayEnvironment: environment,
-    localeBundles: [],
+    localeBundles: [createFluentBundle()],
     localStorage: createInMemoryStorage(),
     sessionStorage: createInMemoryStorage(),
     rest: new RestClient("http://localhost/api"),
diff --git a/src/core/client/stream/test/showAllReplies.spec.tsx b/src/core/client/stream/test/showAllReplies.spec.tsx
index c54805b95..052e38792 100644
--- a/src/core/client/stream/test/showAllReplies.spec.tsx
+++ b/src/core/client/stream/test/showAllReplies.spec.tsx
@@ -11,6 +11,7 @@ import { createInMemoryStorage } from "talk-framework/lib/storage";
 import AppContainer from "talk-stream/containers/AppContainer";
 
 import createEnvironment from "./createEnvironment";
+import createFluentBundle from "./createFluentBundle";
 import createNodeMock from "./createNodeMock";
 import { assets, comments } from "./fixtures";
 
@@ -95,7 +96,7 @@ beforeEach(() => {
 
   const context: TalkContext = {
     relayEnvironment: environment,
-    localeBundles: [],
+    localeBundles: [createFluentBundle()],
     localStorage: createInMemoryStorage(),
     sessionStorage: createInMemoryStorage(),
     rest: new RestClient("http://localhost/api"),