diff --git a/doczrc.js b/doczrc.js
index 45cfc59f8..5ed9a64f4 100644
--- a/doczrc.js
+++ b/doczrc.js
@@ -32,7 +32,7 @@ export default {
     config.module.rules.push({
       test: /\.css\.ts$/,
       use: [
-        isProduction ? MiniCssExtractPlugin.loader : styleLoader,
+        styleLoader,
         {
           loader: require.resolve("css-loader"),
           options: {
diff --git a/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap b/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap
index f877b4620..2250b6180 100644
--- a/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap
+++ b/src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap
@@ -16,24 +16,24 @@ exports[`renders form 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <h1
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
             >
               Email Confirmation
             </h1>
             <p
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
             >
               Click below to confirm your email address.
             </p>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <button
               className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
@@ -66,19 +66,21 @@ exports[`renders missing confirm token 1`] = `
     className="MainLayout-centered"
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <h1
-        className="Typography-root Typography-heading1 Typography-colorTextPrimary"
+        className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
       >
         Oops Sorry!
       </h1>
       <div
         className="CallOut-root CallOut-colorError CallOut-fullWidth"
       >
-        <span>
-          The Confirm Token seems to be missing.
-        </span>
+        <div>
+          <span>
+            The Confirm Token seems to be missing.
+          </span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap b/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
index 65daa478f..834696f42 100644
--- a/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
+++ b/src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
@@ -16,37 +16,37 @@ exports[`renders form 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <h1
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
             >
               Reset your password
             </h1>
             <p
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
             >
               Please enter a new password to use to sign in to your account.
 Make sure it is unique and be sure to keep it secure.
             </p>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="password"
               >
                 Password
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextSecondary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Must be at least 8 characters
               </p>
@@ -113,19 +113,21 @@ exports[`renders missing reset token 1`] = `
     className="MainLayout-centered"
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <h1
-        className="Typography-root Typography-heading1 Typography-colorTextPrimary"
+        className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
       >
         Oops Sorry!
       </h1>
       <div
         className="CallOut-root CallOut-colorError CallOut-fullWidth"
       >
-        <span>
-          The Reset Token seems to be missing.
-        </span>
+        <div>
+          <span>
+            The Reset Token seems to be missing.
+          </span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/core/client/admin/routes/Moderate/ModerateCard/__snapshots__/Username.spec.tsx.snap b/src/core/client/admin/routes/Moderate/ModerateCard/__snapshots__/Username.spec.tsx.snap
index c844793c9..d994d2a07 100644
--- a/src/core/client/admin/routes/Moderate/ModerateCard/__snapshots__/Username.spec.tsx.snap
+++ b/src/core/client/admin/routes/Moderate/ModerateCard/__snapshots__/Username.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <span
-  className="Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+  className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
 >
   Marvin
 </span>
diff --git a/src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap
index 8303e34e9..c37f91301 100644
--- a/src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap
+++ b/src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap
@@ -6,18 +6,18 @@ exports[`accepts valid email 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       For your added security, we require users to add an email address to their accounts.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -38,10 +38,10 @@ exports[`accepts valid email 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="confirmEmail"
       >
         Confirm Email Address
@@ -96,18 +96,18 @@ exports[`checks for invalid email 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       For your added security, we require users to add an email address to their accounts.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -141,10 +141,10 @@ exports[`checks for invalid email 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="confirmEmail"
       >
         Confirm Email Address
@@ -199,7 +199,7 @@ exports[`renders addEmailAddress view 1`] = `
     data-testid="completeAccountBox"
   >
     <div
-      className="Flex-root Flex-flex Flex-justifyCenter"
+      className="Box-root Flex-root Flex-flex Flex-justifyCenter"
     >
       <div
         className="CompleteAccountBox-container"
@@ -208,12 +208,12 @@ exports[`renders addEmailAddress view 1`] = `
           className="CompleteAccountBox-header"
         >
           <h1
-            className="Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
+            className="Box-root Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
           >
             Finish Setting Up Your Account
           </h1>
           <h1
-            className="Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
+            className="Box-root Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
           >
             <span>
               Add Email Address
@@ -228,18 +228,18 @@ exports[`renders addEmailAddress view 1`] = `
             onSubmit={[Function]}
           >
             <div
-              className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+              className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
             >
               <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
               >
                 For your added security, we require users to add an email address to their accounts.
               </p>
               <div
-                className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
               >
                 <label
-                  className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                   htmlFor="email"
                 >
                   Email Address
@@ -260,10 +260,10 @@ exports[`renders addEmailAddress view 1`] = `
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
               >
                 <label
-                  className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                   htmlFor="confirmEmail"
                 >
                   Confirm Email Address
@@ -310,18 +310,18 @@ exports[`shows error when submitting empty form 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       For your added security, we require users to add an email address to their accounts.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -355,10 +355,10 @@ exports[`shows error when submitting empty form 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="confirmEmail"
       >
         Confirm Email Address
@@ -413,17 +413,18 @@ exports[`shows server error 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       For your added security, we require users to add an email address to their accounts.
     </p>
     <div
       className="CallOut-root CallOut-colorError CallOut-fullWidth"
     >
-      server error
+      <div>
+        server error
 
 GraphQL request (4:3)
 3: ) {
@@ -431,12 +432,13 @@ GraphQL request (4:3)
      ^
 5:     user {
 
+      </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -457,10 +459,10 @@ GraphQL request (4:3)
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="confirmEmail"
       >
         Confirm Email Address
@@ -502,18 +504,18 @@ exports[`successfully sets email 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       For your added security, we require users to add an email address to their accounts.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -534,10 +536,10 @@ exports[`successfully sets email 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="confirmEmail"
       >
         Confirm Email Address
diff --git a/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap
index 44e2e7b7a..2ab0a4d93 100644
--- a/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap
+++ b/src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap
@@ -6,25 +6,25 @@ exports[`checks for invalid password 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       To protect against unauthorized changes to your account,
 we require users to create a password.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         Must be at least 8 characters
       </p>
@@ -96,7 +96,7 @@ exports[`renders createPassword view 1`] = `
     data-testid="completeAccountBox"
   >
     <div
-      className="Flex-root Flex-flex Flex-justifyCenter"
+      className="Box-root Flex-root Flex-flex Flex-justifyCenter"
     >
       <div
         className="CompleteAccountBox-container"
@@ -105,12 +105,12 @@ exports[`renders createPassword view 1`] = `
           className="CompleteAccountBox-header"
         >
           <h1
-            className="Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
+            className="Box-root Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
           >
             Finish Setting Up Your Account
           </h1>
           <h1
-            className="Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
+            className="Box-root Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
           >
             <span>
               Create Password
@@ -125,25 +125,25 @@ exports[`renders createPassword view 1`] = `
             onSubmit={[Function]}
           >
             <div
-              className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+              className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
             >
               <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
               >
                 To protect against unauthorized changes to your account,
 we require users to create a password.
               </p>
               <div
-                className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
               >
                 <label
-                  className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                   htmlFor="password"
                 >
                   Password
                 </label>
                 <p
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
+                  className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
                 >
                   Must be at least 8 characters
                 </p>
@@ -207,25 +207,25 @@ exports[`shows error when submitting empty form 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       To protect against unauthorized changes to your account,
 we require users to create a password.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         Must be at least 8 characters
       </p>
@@ -297,10 +297,10 @@ exports[`shows server error 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       To protect against unauthorized changes to your account,
 we require users to create a password.
@@ -308,7 +308,8 @@ we require users to create a password.
     <div
       className="CallOut-root CallOut-colorError CallOut-fullWidth"
     >
-      server error
+      <div>
+        server error
 
 GraphQL request (4:3)
 3: ) {
@@ -316,18 +317,19 @@ GraphQL request (4:3)
      ^
 5:     user {
 
+      </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         Must be at least 8 characters
       </p>
@@ -386,25 +388,25 @@ exports[`successfully sets password 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       To protect against unauthorized changes to your account,
 we require users to create a password.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         Must be at least 8 characters
       </p>
diff --git a/src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap
index 461413223..fd3f2b114 100644
--- a/src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap
+++ b/src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap
@@ -6,24 +6,24 @@ exports[`checks for invalid username 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       Your username is an identifier that will appear on all of your comments.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="username"
       >
         Username
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         You may use “_” and “.” Spaces not permitted.
       </p>
@@ -77,7 +77,7 @@ exports[`renders createUsername view 1`] = `
     data-testid="completeAccountBox"
   >
     <div
-      className="Flex-root Flex-flex Flex-justifyCenter"
+      className="Box-root Flex-root Flex-flex Flex-justifyCenter"
     >
       <div
         className="CompleteAccountBox-container"
@@ -86,12 +86,12 @@ exports[`renders createUsername view 1`] = `
           className="CompleteAccountBox-header"
         >
           <h1
-            className="Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
+            className="Box-root Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
           >
             Finish Setting Up Your Account
           </h1>
           <h1
-            className="Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
+            className="Box-root Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
           >
             <span>
               Create Username
@@ -106,24 +106,24 @@ exports[`renders createUsername view 1`] = `
             onSubmit={[Function]}
           >
             <div
-              className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+              className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
             >
               <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
               >
                 Your username is an identifier that will appear on all of your comments.
               </p>
               <div
-                className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
               >
                 <label
-                  className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                   htmlFor="username"
                 >
                   Username
                 </label>
                 <p
-                  className="Typography-root Typography-detail Typography-colorTextSecondary"
+                  className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
                 >
                   You may use “_” and “.” Spaces not permitted.
                 </p>
@@ -169,24 +169,24 @@ exports[`shows error when submitting empty form 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       Your username is an identifier that will appear on all of your comments.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="username"
       >
         Username
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         You may use “_” and “.” Spaces not permitted.
       </p>
@@ -240,17 +240,18 @@ exports[`shows server error 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       Your username is an identifier that will appear on all of your comments.
     </p>
     <div
       className="CallOut-root CallOut-colorError CallOut-fullWidth"
     >
-      server error
+      <div>
+        server error
 
 GraphQL request (4:3)
 3: ) {
@@ -258,18 +259,19 @@ GraphQL request (4:3)
      ^
 5:     user {
 
+      </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="username"
       >
         Username
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         You may use “_” and “.” Spaces not permitted.
       </p>
@@ -310,24 +312,24 @@ exports[`successfully sets username 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       Your username is an identifier that will appear on all of your comments.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="username"
       >
         Username
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         You may use “_” and “.” Spaces not permitted.
       </p>
diff --git a/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap
index e8310e6a5..13ce50e0e 100644
--- a/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap
+++ b/src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap
@@ -5,13 +5,13 @@ exports[`show restricted screen for commenters and staff 1`] = `
   data-testid="authBox"
 >
   <div
-    className="Flex-root Flex-flex Flex-justifyCenter"
+    className="Box-root Flex-root Flex-flex Flex-justifyCenter"
   >
     <div
-      className="HorizontalGutter-root AuthBox-container HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root AuthBox-container HorizontalGutter-double"
     >
       <div
-        className="Flex-root Flex-flex Flex-justifyCenter"
+        className="Box-root Flex-root Flex-flex Flex-justifyCenter"
       >
         <div
           className="AuthBox-brandIcon"
@@ -62,24 +62,24 @@ exports[`show restricted screen for commenters and staff 1`] = `
       </div>
       <div>
         <h1
-          className="Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
+          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
         >
           <span>
             Currently signed in to
           </span>
         </h1>
         <h1
-          className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
+          className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
         >
           Coral
         </h1>
       </div>
       <div
-        className="HorizontalGutter-root HorizontalGutter-double"
+        className="Box-root HorizontalGutter-root HorizontalGutter-double"
       >
         <div>
           <div
-            className="Flex-root Flex-flex Flex-justifyCenter"
+            className="Box-root Flex-root Flex-flex Flex-justifyCenter"
           >
             <span
               aria-hidden="true"
@@ -89,25 +89,25 @@ exports[`show restricted screen for commenters and staff 1`] = `
             </span>
           </div>
           <h1
-            className="Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
+            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
           >
             You do not have permission to access this page.
           </h1>
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
           >
             You are signed in as: 
             <h1
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
             >
               Markus
             </h1>
           </div>
         </div>
         <div
-          className="Flex-root Flex-flex Flex-justifyCenter"
+          className="Box-root Flex-root Flex-flex Flex-justifyCenter"
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
@@ -123,7 +123,7 @@ exports[`show restricted screen for commenters and staff 1`] = `
           </button>
         </div>
         <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
         >
           If you think this is an error, please contact your administrator for assistance.
         </p>
@@ -138,13 +138,13 @@ exports[`show restricted screen for commenters and staff 2`] = `
   data-testid="authBox"
 >
   <div
-    className="Flex-root Flex-flex Flex-justifyCenter"
+    className="Box-root Flex-root Flex-flex Flex-justifyCenter"
   >
     <div
-      className="HorizontalGutter-root AuthBox-container HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root AuthBox-container HorizontalGutter-double"
     >
       <div
-        className="Flex-root Flex-flex Flex-justifyCenter"
+        className="Box-root Flex-root Flex-flex Flex-justifyCenter"
       >
         <div
           className="AuthBox-brandIcon"
@@ -195,24 +195,24 @@ exports[`show restricted screen for commenters and staff 2`] = `
       </div>
       <div>
         <h1
-          className="Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
+          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
         >
           <span>
             Currently signed in to
           </span>
         </h1>
         <h1
-          className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
+          className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
         >
           Coral
         </h1>
       </div>
       <div
-        className="HorizontalGutter-root HorizontalGutter-double"
+        className="Box-root HorizontalGutter-root HorizontalGutter-double"
       >
         <div>
           <div
-            className="Flex-root Flex-flex Flex-justifyCenter"
+            className="Box-root Flex-root Flex-flex Flex-justifyCenter"
           >
             <span
               aria-hidden="true"
@@ -222,25 +222,25 @@ exports[`show restricted screen for commenters and staff 2`] = `
             </span>
           </div>
           <h1
-            className="Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
+            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
           >
             You do not have permission to access this page.
           </h1>
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
           >
             You are signed in as: 
             <h1
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
             >
               Markus
             </h1>
           </div>
         </div>
         <div
-          className="Flex-root Flex-flex Flex-justifyCenter"
+          className="Box-root Flex-root Flex-flex Flex-justifyCenter"
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
@@ -256,7 +256,7 @@ exports[`show restricted screen for commenters and staff 2`] = `
           </button>
         </div>
         <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
         >
           If you think this is an error, please contact your administrator for assistance.
         </p>
diff --git a/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap b/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
index 8af9e78fc..f9dc60369 100644
--- a/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
+++ b/src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
@@ -6,13 +6,13 @@ exports[`accepts correct password 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -46,10 +46,10 @@ exports[`accepts correct password 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
@@ -117,13 +117,13 @@ exports[`accepts valid email 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -144,10 +144,10 @@ exports[`accepts valid email 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
@@ -228,13 +228,13 @@ exports[`checks for invalid email 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -268,10 +268,10 @@ exports[`checks for invalid email 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
@@ -352,13 +352,13 @@ exports[`renders sign in form 1`] = `
     data-testid="authBox"
   >
     <div
-      className="Flex-root Flex-flex Flex-justifyCenter"
+      className="Box-root Flex-root Flex-flex Flex-justifyCenter"
     >
       <div
-        className="HorizontalGutter-root AuthBox-container HorizontalGutter-double"
+        className="Box-root HorizontalGutter-root AuthBox-container HorizontalGutter-double"
       >
         <div
-          className="Flex-root Flex-flex Flex-justifyCenter"
+          className="Box-root Flex-root Flex-flex Flex-justifyCenter"
         >
           <div
             className="AuthBox-brandIcon"
@@ -409,33 +409,33 @@ exports[`renders sign in form 1`] = `
         </div>
         <div>
           <h1
-            className="Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
+            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
           >
             <span>
               Sign in to
             </span>
           </h1>
           <h1
-            className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
+            className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
           >
             Coral
           </h1>
         </div>
         <div
-          className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
         >
           <form
             autoComplete="off"
             onSubmit={[Function]}
           >
             <div
-              className="HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
             >
               <div
-                className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
               >
                 <label
-                  className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                   htmlFor="email"
                 >
                   Email Address
@@ -456,10 +456,10 @@ exports[`renders sign in form 1`] = `
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
               >
                 <label
-                  className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                   htmlFor="password"
                 >
                   Password
@@ -524,10 +524,10 @@ exports[`renders sign in form 1`] = `
     </div>
   </div>
   <div
-    className="Flex-root Flex-flex Flex-justifyCenter"
+    className="Box-root Flex-root Flex-flex Flex-justifyCenter"
   >
     <p
-      className="Typography-root Typography-detail Typography-colorTextPrimary Typography-alignCenter Version-version"
+      className="Box-root Typography-root Typography-detail Typography-colorTextPrimary Typography-alignCenter Version-version"
     >
       vTest
     </p>
@@ -541,13 +541,13 @@ exports[`shows error when submitting empty form 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -581,10 +581,10 @@ exports[`shows error when submitting empty form 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
@@ -665,18 +665,20 @@ exports[`shows server error 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="CallOut-root CallOut-colorError CallOut-fullWidth"
     >
-      Server Error
+      <div>
+        Server Error
+      </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -697,10 +699,10 @@ exports[`shows server error 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
diff --git a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
index 5e1ef87b7..f17d5e619 100644
--- a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
+++ b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
@@ -40,13 +40,13 @@ exports[`ban user 1`] = `
       </span>
     </button>
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <h1
-          className="Typography-root Typography-header2 Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-header2 Typography-colorTextPrimary"
           id="banModal-title"
         >
           Are you sure you want to ban 
@@ -56,14 +56,14 @@ exports[`ban user 1`] = `
           ?
         </h1>
         <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
         >
           Once banned, this user will no longer be able to comment, use
 reactions, or report comments.
         </p>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd"
+        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd gutter"
       >
         <button
           className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
@@ -105,16 +105,16 @@ exports[`renders community 1`] = `
   data-testid="community-container"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-double"
+    className="Box-root HorizontalGutter-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Flex-flex Flex-doubleItemGutter"
+      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
     >
       <fieldset
         className="FieldSet-root"
       >
         <legend
-          className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
         >
           Search
         </legend>
@@ -163,12 +163,12 @@ exports[`renders community 1`] = `
         className="FieldSet-root"
       >
         <legend
-          className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
         >
           Show Me
         </legend>
         <div
-          className="Flex-root Flex-flex Flex-itemGutter"
+          className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
         >
           <span
             className="SelectField-root UserTableFilter-selectField"
@@ -275,7 +275,7 @@ exports[`renders community 1`] = `
       </fieldset>
     </div>
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <table
         className="Table-root Table-fullWidth"
@@ -359,10 +359,10 @@ exports[`renders community 1`] = `
                 className="ButtonPadding-root"
               >
                 <div
-                  className="Typography-root Typography-detail Typography-colorSuccess"
+                  className="Box-root Typography-root Typography-detail Typography-colorSuccess"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
                   >
                     <div
                       aria-hidden={true}
@@ -452,10 +452,10 @@ exports[`renders community 1`] = `
                 className="ButtonPadding-root"
               >
                 <div
-                  className="Typography-root Typography-detail Typography-colorSuccess"
+                  className="Box-root Typography-root Typography-detail Typography-colorSuccess"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
                   >
                     <div
                       aria-hidden={true}
@@ -545,10 +545,10 @@ exports[`renders community 1`] = `
                 className="ButtonPadding-root"
               >
                 <div
-                  className="Typography-root Typography-detail Typography-colorSuccess"
+                  className="Box-root Typography-root Typography-detail Typography-colorSuccess"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
                   >
                     <div
                       aria-hidden={true}
@@ -649,10 +649,10 @@ exports[`renders community 1`] = `
                   type="button"
                 >
                   <div
-                    className="Typography-root Typography-detail Typography-colorSuccess"
+                    className="Box-root Typography-root Typography-detail Typography-colorSuccess"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
                     >
                       <div
                         aria-hidden={true}
@@ -701,16 +701,16 @@ exports[`renders empty community 1`] = `
   data-testid="community-container"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-double"
+    className="Box-root HorizontalGutter-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Flex-flex Flex-doubleItemGutter"
+      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
     >
       <fieldset
         className="FieldSet-root"
       >
         <legend
-          className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
         >
           Search
         </legend>
@@ -759,12 +759,12 @@ exports[`renders empty community 1`] = `
         className="FieldSet-root"
       >
         <legend
-          className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
         >
           Show Me
         </legend>
         <div
-          className="Flex-root Flex-flex Flex-itemGutter"
+          className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
         >
           <span
             className="SelectField-root UserTableFilter-selectField"
@@ -871,7 +871,7 @@ exports[`renders empty community 1`] = `
       </fieldset>
     </div>
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <table
         className="Table-root Table-fullWidth"
@@ -914,7 +914,7 @@ exports[`renders empty community 1`] = `
         />
       </table>
       <p
-        className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary Typography-alignCenter EmptyMessage-root"
+        className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary Typography-alignCenter EmptyMessage-root"
       >
         We could not find anyone in your community matching your criteria.
       </p>
diff --git a/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
index 96613e39c..167f25e21 100644
--- a/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
@@ -11,13 +11,13 @@ exports[`renders configure advanced 1`] = `
     onSubmit={[Function]}
   >
     <div
-      className="Flex-root Layout-root Flex-flex"
+      className="Box-root Flex-root Layout-root Flex-flex"
     >
       <div
         className="SideBar-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <nav
             className="Navigation-root"
@@ -83,7 +83,7 @@ exports[`renders configure advanced 1`] = `
           </nav>
         </div>
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
@@ -104,23 +104,23 @@ exports[`renders configure advanced 1`] = `
         className="Main-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
           data-testid="configure-advancedContainer"
         >
           <div
-            className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >
             <div
-              className="HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
             >
               <label
-                className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
                 htmlFor="configure-advanced-customCSSURL"
               >
                 Custom CSS
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
               >
                 URL of a CSS stylesheet that will override default Embed Stream styles. Can be internal or external.
               </p>
@@ -145,19 +145,19 @@ exports[`renders configure advanced 1`] = `
             </div>
           </div>
           <div
-            className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >
             <div
-              className="HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
             >
               <label
-                className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
                 htmlFor="configure-advanced-allowedDomains"
               >
                 Permitted Domains
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
               >
                 Domains where your Coral instance is allowed to be embedded.
 Typical use is localhost, staging.yourdomain.com,
diff --git a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
index 1876bee69..6ffb6b33c 100644
--- a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`change settings: during submit: oidc without errors 1`] = `
   data-testid="configure-auth-oidc-container"
 >
   <div
-    className="Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+    className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
   >
     <div>
       <span>
@@ -15,7 +15,7 @@ exports[`change settings: during submit: oidc without errors 1`] = `
     </div>
     <div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <div
           className="CheckBox-root"
@@ -49,10 +49,10 @@ exports[`change settings: during submit: oidc without errors 1`] = `
     className="ConfigBox-content"
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
       >
         To learn more: 
         <a
@@ -73,15 +73,15 @@ exports[`change settings: during submit: oidc without errors 1`] = `
         className="HorizontalRule-root"
       />
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Redirect URI
         </label>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
         >
           <div
             className="TextField-root"
@@ -115,15 +115,15 @@ exports[`change settings: during submit: oidc without errors 1`] = `
         className="HorizontalRule-root"
       />
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Provider Name
         </label>
         <p
-          className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+          className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
         >
           The provider of the OpenID Connect integration. This will be used when the name of the provider
 needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
@@ -147,10 +147,10 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Client ID
         </label>
@@ -173,10 +173,10 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Client Secret
         </label>
@@ -199,21 +199,21 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Issuer
         </label>
         <p
-          className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+          className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
         >
           After entering your Issuer information, click the Discover button to have Coral complete
 the remaining fields. You may also enter the information manually.
         </p>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
         >
           <div
             className="TextField-root"
@@ -249,10 +249,10 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Authorization URL
         </label>
@@ -275,10 +275,10 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Token URL
         </label>
@@ -301,10 +301,10 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           JWKS URI
         </label>
@@ -327,17 +327,17 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           <span>
             Use OpenID Connect login on
           </span>
         </label>
         <div
-          className="Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
         >
           <div
             className="CheckBox-root"
@@ -392,21 +392,21 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Registration
         </label>
         <p
-          className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+          className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
         >
           Allow users that have not signed up before with this authentication
 integration to register for a new account.
         </p>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <div
             className="CheckBox-root"
@@ -446,7 +446,7 @@ exports[`change settings: enable facebook configure box 1`] = `
   data-testid="configure-auth-facebook-container"
 >
   <div
-    className="Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+    className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
   >
     <div>
       <span>
@@ -455,7 +455,7 @@ exports[`change settings: enable facebook configure box 1`] = `
     </div>
     <div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <div
           className="CheckBox-root"
@@ -489,10 +489,10 @@ exports[`change settings: enable facebook configure box 1`] = `
     className="ConfigBox-content"
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
       >
         To enable the integration with Facebook Authentication,
 you need to create and set up a web application.
@@ -516,15 +516,15 @@ For more information visit:
         className="HorizontalRule-root"
       />
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Redirect URI
         </label>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
         >
           <div
             className="TextField-root"
@@ -558,10 +558,10 @@ For more information visit:
         className="HorizontalRule-root"
       />
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Client ID
         </label>
@@ -584,10 +584,10 @@ For more information visit:
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Client Secret
         </label>
@@ -610,17 +610,17 @@ For more information visit:
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           <span>
             Use Facebook login on
           </span>
         </label>
         <div
-          className="Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
         >
           <div
             className="CheckBox-root"
@@ -675,21 +675,21 @@ For more information visit:
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Registration
         </label>
         <p
-          className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+          className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
         >
           Allow users that have not signed up before with this authentication
 integration to register for a new account.
         </p>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <div
             className="CheckBox-root"
@@ -729,7 +729,7 @@ exports[`change settings: enable oidc configure box 1`] = `
   data-testid="configure-auth-oidc-container"
 >
   <div
-    className="Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+    className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
   >
     <div>
       <span>
@@ -738,7 +738,7 @@ exports[`change settings: enable oidc configure box 1`] = `
     </div>
     <div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <div
           className="CheckBox-root"
@@ -772,10 +772,10 @@ exports[`change settings: enable oidc configure box 1`] = `
     className="ConfigBox-content"
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
       >
         To learn more: 
         <a
@@ -796,15 +796,15 @@ exports[`change settings: enable oidc configure box 1`] = `
         className="HorizontalRule-root"
       />
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Redirect URI
         </label>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
         >
           <div
             className="TextField-root"
@@ -838,15 +838,15 @@ exports[`change settings: enable oidc configure box 1`] = `
         className="HorizontalRule-root"
       />
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Provider Name
         </label>
         <p
-          className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+          className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
         >
           The provider of the OpenID Connect integration. This will be used when the name of the provider
 needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
@@ -870,10 +870,10 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Client ID
         </label>
@@ -896,10 +896,10 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Client Secret
         </label>
@@ -922,21 +922,21 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Issuer
         </label>
         <p
-          className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+          className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
         >
           After entering your Issuer information, click the Discover button to have Coral complete
 the remaining fields. You may also enter the information manually.
         </p>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
         >
           <div
             className="TextField-root"
@@ -972,10 +972,10 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Authorization URL
         </label>
@@ -998,10 +998,10 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Token URL
         </label>
@@ -1024,10 +1024,10 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           JWKS URI
         </label>
@@ -1050,17 +1050,17 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           <span>
             Use OpenID Connect login on
           </span>
         </label>
         <div
-          className="Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
         >
           <div
             className="CheckBox-root"
@@ -1115,21 +1115,21 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Registration
         </label>
         <p
-          className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+          className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
         >
           Allow users that have not signed up before with this authentication
 integration to register for a new account.
         </p>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <div
             className="CheckBox-root"
@@ -1169,7 +1169,7 @@ exports[`change settings: oidc validation errors 1`] = `
   data-testid="configure-auth-oidc-container"
 >
   <div
-    className="Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+    className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
   >
     <div>
       <span>
@@ -1178,7 +1178,7 @@ exports[`change settings: oidc validation errors 1`] = `
     </div>
     <div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <div
           className="CheckBox-root"
@@ -1212,10 +1212,10 @@ exports[`change settings: oidc validation errors 1`] = `
     className="ConfigBox-content"
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
       >
         To learn more: 
         <a
@@ -1236,15 +1236,15 @@ exports[`change settings: oidc validation errors 1`] = `
         className="HorizontalRule-root"
       />
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Redirect URI
         </label>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
         >
           <div
             className="TextField-root"
@@ -1278,15 +1278,15 @@ exports[`change settings: oidc validation errors 1`] = `
         className="HorizontalRule-root"
       />
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Provider Name
         </label>
         <p
-          className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+          className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
         >
           The provider of the OpenID Connect integration. This will be used when the name of the provider
 needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
@@ -1323,10 +1323,10 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Client ID
         </label>
@@ -1362,10 +1362,10 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Client Secret
         </label>
@@ -1401,21 +1401,21 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Issuer
         </label>
         <p
-          className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+          className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
         >
           After entering your Issuer information, click the Discover button to have Coral complete
 the remaining fields. You may also enter the information manually.
         </p>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
         >
           <div
             className="TextField-root"
@@ -1464,10 +1464,10 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Authorization URL
         </label>
@@ -1503,10 +1503,10 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Token URL
         </label>
@@ -1542,10 +1542,10 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           JWKS URI
         </label>
@@ -1581,17 +1581,17 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           <span>
             Use OpenID Connect login on
           </span>
         </label>
         <div
-          className="Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
         >
           <div
             className="CheckBox-root"
@@ -1646,21 +1646,21 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
       >
         <label
-          className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         >
           Registration
         </label>
         <p
-          className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+          className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
         >
           Allow users that have not signed up before with this authentication
 integration to register for a new account.
         </p>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <div
             className="CheckBox-root"
@@ -1699,24 +1699,26 @@ exports[`prevents admin lock out 1`] = `
   className="CallOut-root CallOut-colorError CallOut-fullWidth"
   data-testid="configure-auth-submitError"
 >
-  <span>
-    Please enable at least one authentication integration for Coral Admin
-  </span>
+  <div>
+    <span>
+      Please enable at least one authentication integration for Coral Admin
+    </span>
+  </div>
 </div>
 `;
 
 exports[`regenerate sso key 1`] = `
 <div
-  className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
   data-testid="configure-auth-sso-key"
 >
   <label
-    className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+    className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
   >
     Key
   </label>
   <div
-    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
   >
     <div
       className="TextField-root"
@@ -1746,10 +1748,10 @@ exports[`regenerate sso key 1`] = `
     </button>
   </div>
   <div
-    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-keyGenerated"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-keyGenerated"
     >
       KEY GENERATED AT:
 11/12/2018, 11:26 PM
@@ -1761,7 +1763,7 @@ exports[`regenerate sso key 1`] = `
       warning
     </span>
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-warn"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-warn"
     >
       Regenerating a key will invalidate any existing user sessions,
 and all signed-in users will be signed out.
@@ -1781,13 +1783,13 @@ exports[`renders configure auth 1`] = `
     onSubmit={[Function]}
   >
     <div
-      className="Flex-root Layout-root Flex-flex"
+      className="Box-root Flex-root Layout-root Flex-flex"
     >
       <div
         className="SideBar-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <nav
             className="Navigation-root"
@@ -1853,7 +1855,7 @@ exports[`renders configure auth 1`] = `
           </nav>
         </div>
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
@@ -1874,14 +1876,14 @@ exports[`renders configure auth 1`] = `
         className="Main-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
           data-testid="configure-authContainer"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-double"
+            className="Box-root HorizontalGutter-root HorizontalGutter-double"
           >
             <h1
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
             >
               Authentication Integrations
             </h1>
@@ -1889,7 +1891,7 @@ exports[`renders configure auth 1`] = `
               className="ConfigBox-root"
             >
               <div
-                className="Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
               >
                 <div>
                   <span>
@@ -1898,7 +1900,7 @@ exports[`renders configure auth 1`] = `
                 </div>
                 <div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <div
                       className="CheckBox-root"
@@ -1932,20 +1934,20 @@ exports[`renders configure auth 1`] = `
                 className="ConfigBox-content"
               >
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-double"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
                 >
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       <span>
                         Use Email Authentication login on
                       </span>
                     </label>
                     <div
-                      className="Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
                     >
                       <div
                         className="CheckBox-root"
@@ -2000,21 +2002,21 @@ exports[`renders configure auth 1`] = `
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Registration
                     </label>
                     <p
-                      className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+                      className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
                     >
                       Allow users that have not signed up before with this authentication
 integration to register for a new account.
                     </p>
                     <div
-                      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                     >
                       <div
                         className="CheckBox-root"
@@ -2051,7 +2053,7 @@ integration to register for a new account.
               data-testid="configure-auth-oidc-container"
             >
               <div
-                className="Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
               >
                 <div>
                   <span>
@@ -2060,7 +2062,7 @@ integration to register for a new account.
                 </div>
                 <div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <div
                       className="CheckBox-root"
@@ -2094,10 +2096,10 @@ integration to register for a new account.
                 className="ConfigBox-content"
               >
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-double"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
                 >
                   <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                   >
                     To learn more: 
                     <a
@@ -2118,15 +2120,15 @@ integration to register for a new account.
                     className="HorizontalRule-root"
                   />
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Redirect URI
                     </label>
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <div
                         className="TextField-root"
@@ -2160,15 +2162,15 @@ integration to register for a new account.
                     className="HorizontalRule-root"
                   />
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Provider Name
                     </label>
                     <p
-                      className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+                      className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
                     >
                       The provider of the OpenID Connect integration. This will be used when the name of the provider
 needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
@@ -2192,10 +2194,10 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Client ID
                     </label>
@@ -2218,10 +2220,10 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Client Secret
                     </label>
@@ -2244,21 +2246,21 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Issuer
                     </label>
                     <p
-                      className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+                      className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
                     >
                       After entering your Issuer information, click the Discover button to have Coral complete
 the remaining fields. You may also enter the information manually.
                     </p>
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <div
                         className="TextField-root"
@@ -2294,10 +2296,10 @@ the remaining fields. You may also enter the information manually.
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Authorization URL
                     </label>
@@ -2320,10 +2322,10 @@ the remaining fields. You may also enter the information manually.
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Token URL
                     </label>
@@ -2346,10 +2348,10 @@ the remaining fields. You may also enter the information manually.
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       JWKS URI
                     </label>
@@ -2372,17 +2374,17 @@ the remaining fields. You may also enter the information manually.
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       <span>
                         Use OpenID Connect login on
                       </span>
                     </label>
                     <div
-                      className="Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
                     >
                       <div
                         className="CheckBox-root"
@@ -2437,21 +2439,21 @@ the remaining fields. You may also enter the information manually.
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Registration
                     </label>
                     <p
-                      className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+                      className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
                     >
                       Allow users that have not signed up before with this authentication
 integration to register for a new account.
                     </p>
                     <div
-                      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                     >
                       <div
                         className="CheckBox-root"
@@ -2487,7 +2489,7 @@ integration to register for a new account.
               className="ConfigBox-root"
             >
               <div
-                className="Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
               >
                 <div>
                   <span>
@@ -2496,7 +2498,7 @@ integration to register for a new account.
                 </div>
                 <div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <div
                       className="CheckBox-root"
@@ -2530,19 +2532,19 @@ integration to register for a new account.
                 className="ConfigBox-content"
               >
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-double"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
                 >
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                     data-testid="configure-auth-sso-key"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Key
                     </label>
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <div
                         className="TextField-root"
@@ -2571,10 +2573,10 @@ integration to register for a new account.
                       </button>
                     </div>
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                     >
                       <p
-                        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-keyGenerated"
+                        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-keyGenerated"
                       >
                         KEY GENERATED AT:
 Invalid Date
@@ -2586,7 +2588,7 @@ Invalid Date
                         warning
                       </span>
                       <p
-                        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-warn"
+                        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-warn"
                       >
                         Regenerating a key will invalidate any existing user sessions,
 and all signed-in users will be signed out.
@@ -2594,17 +2596,17 @@ and all signed-in users will be signed out.
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       <span>
                         Use Single Sign On login on
                       </span>
                     </label>
                     <div
-                      className="Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
                     >
                       <div
                         className="CheckBox-root"
@@ -2659,21 +2661,21 @@ and all signed-in users will be signed out.
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Registration
                     </label>
                     <p
-                      className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+                      className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
                     >
                       Allow users that have not signed up before with this authentication
 integration to register for a new account.
                     </p>
                     <div
-                      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                     >
                       <div
                         className="CheckBox-root"
@@ -2709,7 +2711,7 @@ integration to register for a new account.
               className="ConfigBox-root"
             >
               <div
-                className="Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
               >
                 <div>
                   <span>
@@ -2718,7 +2720,7 @@ integration to register for a new account.
                 </div>
                 <div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <div
                       className="CheckBox-root"
@@ -2752,10 +2754,10 @@ integration to register for a new account.
                 className="ConfigBox-content"
               >
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-double"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
                 >
                   <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                   >
                     To enable the integration with Google Authentication you need
 to create and set up a web application. For more information visit:
@@ -2779,15 +2781,15 @@ to create and set up a web application. For more information visit:
                     className="HorizontalRule-root"
                   />
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Redirect URI
                     </label>
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <div
                         className="TextField-root"
@@ -2821,10 +2823,10 @@ to create and set up a web application. For more information visit:
                     className="HorizontalRule-root"
                   />
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Client ID
                     </label>
@@ -2847,10 +2849,10 @@ to create and set up a web application. For more information visit:
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Client Secret
                     </label>
@@ -2873,17 +2875,17 @@ to create and set up a web application. For more information visit:
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       <span>
                         Use Google login on
                       </span>
                     </label>
                     <div
-                      className="Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
                     >
                       <div
                         className="CheckBox-root"
@@ -2938,21 +2940,21 @@ to create and set up a web application. For more information visit:
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Registration
                     </label>
                     <p
-                      className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+                      className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
                     >
                       Allow users that have not signed up before with this authentication
 integration to register for a new account.
                     </p>
                     <div
-                      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                     >
                       <div
                         className="CheckBox-root"
@@ -2989,7 +2991,7 @@ integration to register for a new account.
               data-testid="configure-auth-facebook-container"
             >
               <div
-                className="Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
               >
                 <div>
                   <span>
@@ -2998,7 +3000,7 @@ integration to register for a new account.
                 </div>
                 <div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <div
                       className="CheckBox-root"
@@ -3032,10 +3034,10 @@ integration to register for a new account.
                 className="ConfigBox-content"
               >
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-double"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
                 >
                   <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                   >
                     To enable the integration with Facebook Authentication,
 you need to create and set up a web application.
@@ -3059,15 +3061,15 @@ For more information visit:
                     className="HorizontalRule-root"
                   />
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Redirect URI
                     </label>
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <div
                         className="TextField-root"
@@ -3101,10 +3103,10 @@ For more information visit:
                     className="HorizontalRule-root"
                   />
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Client ID
                     </label>
@@ -3127,10 +3129,10 @@ For more information visit:
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Client Secret
                     </label>
@@ -3153,17 +3155,17 @@ For more information visit:
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       <span>
                         Use Facebook login on
                       </span>
                     </label>
                     <div
-                      className="Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-directionRow gutter"
                     >
                       <div
                         className="CheckBox-root"
@@ -3218,21 +3220,21 @@ For more information visit:
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                   >
                     <label
-                      className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                     >
                       Registration
                     </label>
                     <p
-                      className="Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
+                      className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ConfigDescription-description"
                     >
                       Allow users that have not signed up before with this authentication
 integration to register for a new account.
                     </p>
                     <div
-                      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
                     >
                       <div
                         className="CheckBox-root"
diff --git a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
index d81f21139..2610bcec8 100644
--- a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
@@ -11,13 +11,13 @@ exports[`renders configure general 1`] = `
     onSubmit={[Function]}
   >
     <div
-      className="Flex-root Layout-root Flex-flex"
+      className="Box-root Flex-root Layout-root Flex-flex"
     >
       <div
         className="SideBar-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <nav
             className="Navigation-root"
@@ -83,7 +83,7 @@ exports[`renders configure general 1`] = `
           </nav>
         </div>
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
@@ -104,19 +104,19 @@ exports[`renders configure general 1`] = `
         className="Main-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
           data-testid="configure-generalContainer"
         >
           <fieldset
-            className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <legend
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
             >
               Sitewide Commenting
             </legend>
             <p
-              className="Typography-root Typography-detail Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
             >
               Open or close comment streams for new comments sitewide. When new comments
 are turned off sitewide, new comments cannot be submitted, but existing
@@ -124,16 +124,16 @@ comments can continue to receive “Respect” reactions, be reported, and be
 shared.
             </p>
             <fieldset
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <legend
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               >
                 Enable New Comments Sitewide
               </legend>
               <div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={true}
@@ -157,7 +157,7 @@ shared.
                   </label>
                 </div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -183,16 +183,16 @@ shared.
               </div>
             </fieldset>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="configure-general-sitewideCommenting-message"
               >
                 Sitewide Closed Comments Message
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextSecondary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Write a message that will be displayed when comment streams are closed sitewide
               </p>
@@ -209,24 +209,24 @@ shared.
             </div>
           </fieldset>
           <fieldset
-            className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <legend
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
             >
               Community Guidelines Summary
             </legend>
             <fieldset
-              className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <legend
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               >
                 Show Community Guidelines Summary
               </legend>
               <div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -250,7 +250,7 @@ shared.
                   </label>
                 </div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={true}
@@ -276,16 +276,16 @@ shared.
               </div>
             </fieldset>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="configure-general-guidelines-content"
               >
                 Community Guidelines Summary
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
               >
                 Write a summary of your community guidelines that will appear
 at the top of each comment stream sitewide. Your summary can be
@@ -313,29 +313,29 @@ Markdown can be found
             </div>
           </fieldset>
           <fieldset
-            className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <legend
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
             >
               Comment Length
             </legend>
             <p
-              className="Typography-root Typography-detail Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
             >
               Set a limit on the length of comments sitewide
             </p>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               >
                 Limit Comment Length
               </label>
               <div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -359,7 +359,7 @@ Markdown can be found
                   </label>
                 </div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={true}
@@ -385,10 +385,10 @@ Markdown can be found
               </div>
             </div>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="configure-general-commentLength-min"
               >
                 Minimum Comment Length
@@ -414,7 +414,7 @@ Markdown can be found
                   className="TextField-adornment"
                 >
                   <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                   >
                     Characters
                   </p>
@@ -422,10 +422,10 @@ Markdown can be found
               </div>
             </div>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="configure-general-commentLength-max"
               >
                 Maximum Comment Length
@@ -451,7 +451,7 @@ Markdown can be found
                   className="TextField-adornment"
                 >
                   <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                   >
                     Characters
                   </p>
@@ -460,30 +460,30 @@ Markdown can be found
             </div>
           </fieldset>
           <div
-            className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <h1
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
             >
               Comment Editing
             </h1>
             <p
-              className="Typography-root Typography-detail Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
             >
               Set a limit on how long commenters have to edit their comments sitewide.
 Edited comments are marked as (Edited) on the comment stream and the
 moderation panel.
             </p>
             <fieldset
-              className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <legend
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               >
                 Comment Edit Timeframe
               </legend>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
               >
                 <div
                   className="TextField-root DurationField-value"
@@ -548,29 +548,29 @@ moderation panel.
             </fieldset>
           </div>
           <fieldset
-            className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <legend
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
             >
               Closing Comment Streams
             </legend>
             <p
-              className="Typography-root Typography-detail Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
             >
               Set comment streams to close after a defined period of time after a story’s publication
             </p>
             <fieldset
-              className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <legend
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               >
                 Close Comments Automatically
               </legend>
               <div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -594,7 +594,7 @@ moderation panel.
                   </label>
                 </div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={true}
@@ -620,15 +620,15 @@ moderation panel.
               </div>
             </fieldset>
             <fieldset
-              className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <legend
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               >
                 Close Comments After
               </legend>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
               >
                 <div
                   className="TextField-root DurationField-value"
@@ -693,16 +693,16 @@ moderation panel.
             </fieldset>
           </fieldset>
           <div
-            className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <label
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
               htmlFor="configure-general-closedStreamMessage-content"
             >
               Closed Stream Message
             </label>
             <p
-              className="Typography-root Typography-detail Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
             >
               Write a message to appear after a story is closed for commenting.
             </p>
diff --git a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
index 6634835de..c6ec71ae3 100644
--- a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
@@ -11,13 +11,13 @@ exports[`renders configure moderation 1`] = `
     onSubmit={[Function]}
   >
     <div
-      className="Flex-root Layout-root Flex-flex"
+      className="Box-root Flex-root Layout-root Flex-flex"
     >
       <div
         className="SideBar-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <nav
             className="Navigation-root"
@@ -83,7 +83,7 @@ exports[`renders configure moderation 1`] = `
           </nav>
         </div>
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
@@ -104,19 +104,19 @@ exports[`renders configure moderation 1`] = `
         className="Main-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
           data-testid="configure-moderationContainer"
         >
           <fieldset
-            className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <legend
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
             >
               Perspective Toxic Comment Filter
             </legend>
             <p
-              className="Typography-root Typography-detail Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
             >
               Using the Perspective API, the Toxic Comment filter warns users when comments exceed the predefined toxicity
 threshold. Comments with a toxicity score above the threshold 
@@ -131,16 +131,16 @@ the
               . If approved by a moderator, the comment will be published.
             </p>
             <fieldset
-              className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <legend
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               >
                 Toxic Comment Filter
               </legend>
               <div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -164,7 +164,7 @@ the
                   </label>
                 </div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={true}
@@ -190,16 +190,16 @@ the
               </div>
             </fieldset>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="configure-moderation-perspective-threshold"
               >
                 Toxicity Threshold
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextSecondary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 This value can be set a percentage between 0 and 100. This number represents the likelihood that a
 comment is toxic, according to Perspective API. By default the treshold is set to 80.
@@ -225,7 +225,7 @@ comment is toxic, according to Perspective API. By default the treshold is set t
                   className="TextField-adornment"
                 >
                   <p
-                    className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                   >
                     %
                   </p>
@@ -233,15 +233,15 @@ comment is toxic, according to Perspective API. By default the treshold is set t
               </div>
             </div>
             <fieldset
-              className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <legend
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               >
                 Allow Google to Store Comment Data
               </legend>
               <p
-                className="Typography-root Typography-detail Typography-colorTextSecondary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Stored comments will be used for future research and community model building purposes to
 improve the API over time
@@ -249,7 +249,7 @@ improve the API over time
               <div>
                 <div>
                   <div
-                    className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                   >
                     <input
                       checked={false}
@@ -271,7 +271,7 @@ improve the API over time
                     </label>
                   </div>
                   <div
-                    className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                   >
                     <input
                       checked={false}
@@ -297,12 +297,12 @@ improve the API over time
             </fieldset>
             <div>
               <h1
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Subheader-root"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Subheader-root"
               >
                 Configuration
               </h1>
               <p
-                className="Typography-root Typography-detail Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
               >
                 For additional information on how to set up the Perspective Toxic Comment Filter please visit:
 
@@ -316,10 +316,10 @@ improve the API over time
               </p>
             </div>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="configure-moderation-integrations.perspective.key"
               >
                 API Key
@@ -344,16 +344,16 @@ improve the API over time
               </div>
             </div>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="configure-moderation-perspective-customEndpoint"
               >
                 Custom Endpoint
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextSecondary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 By default the endpoint is set to https://commentanalyzer.googleapis.com/v1alpha1. You may override this here.
               </p>
@@ -378,15 +378,15 @@ improve the API over time
             </div>
           </fieldset>
           <fieldset
-            className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <legend
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
             >
               Akismet Spam Detection Filter
             </legend>
             <p
-              className="Typography-root Typography-detail Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
             >
               Submitted comments are passed to the Akismet API for spam detection.
 If a comment is determined to be spam, it will prompt the user,
@@ -405,16 +405,16 @@ are placed in the
 the comment will be published.
             </p>
             <fieldset
-              className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <legend
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               >
                 Spam Detection Filter
               </legend>
               <div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -438,7 +438,7 @@ the comment will be published.
                   </label>
                 </div>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={true}
@@ -465,12 +465,12 @@ the comment will be published.
             </fieldset>
             <div>
               <h1
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Subheader-root"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Subheader-root"
               >
                 Configuration
               </h1>
               <p
-                className="Typography-root Typography-detail Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
               >
                 Note: You must add your active domain(s)
 in your Akismet account: 
@@ -484,10 +484,10 @@ in your Akismet account:
               </p>
             </div>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="configure-moderation-integrations.akismet.key"
               >
                 API Key
@@ -512,10 +512,10 @@ in your Akismet account:
               </div>
             </div>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="configure-moderation-akismet-site"
               >
                 Site URL
diff --git a/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap
index 4bcad43c0..b92314e75 100644
--- a/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap
@@ -11,13 +11,13 @@ exports[`renders configure organization 1`] = `
     onSubmit={[Function]}
   >
     <div
-      className="Flex-root Layout-root Flex-flex"
+      className="Box-root Flex-root Layout-root Flex-flex"
     >
       <div
         className="SideBar-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <nav
             className="Navigation-root"
@@ -83,7 +83,7 @@ exports[`renders configure organization 1`] = `
           </nav>
         </div>
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
@@ -104,23 +104,23 @@ exports[`renders configure organization 1`] = `
         className="Main-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
           data-testid="configure-organizationContainer"
         >
           <div
-            className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >
             <div
-              className="HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
             >
               <label
-                className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
                 htmlFor="configure-organization-organization.name"
               >
                 Organization Name
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
               >
                 Your organization name will appear on emails sent by Coral to your community and organization members.
               </p>
@@ -145,19 +145,19 @@ exports[`renders configure organization 1`] = `
             </div>
           </div>
           <div
-            className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >
             <div
-              className="HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
             >
               <label
-                className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
                 htmlFor="configure-organization-organization.contactEmail"
               >
                 Organization Email
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
               >
                 This email address will be used as in emails and across
 the platform for community members to get in touch with
diff --git a/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap
index 2a301e204..5fccbaaa0 100644
--- a/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap
@@ -11,13 +11,13 @@ exports[`renders configure wordList 1`] = `
     onSubmit={[Function]}
   >
     <div
-      className="Flex-root Layout-root Flex-flex"
+      className="Box-root Flex-root Layout-root Flex-flex"
     >
       <div
         className="SideBar-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <nav
             className="Navigation-root"
@@ -83,7 +83,7 @@ exports[`renders configure wordList 1`] = `
           </nav>
         </div>
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
@@ -104,19 +104,19 @@ exports[`renders configure wordList 1`] = `
         className="Main-root"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
           data-testid="configure-wordListContainer"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <h1
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
             >
               Banned Words and Phrases
             </h1>
             <p
-              className="Typography-root Typography-detail Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
             >
               Comments containing a word or phrase in the banned words list are 
               <strong>
@@ -125,16 +125,16 @@ exports[`renders configure wordList 1`] = `
               .
             </p>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="configure-wordlist-banned"
               >
                 Banned Word List
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextSecondary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Separate banned words or phrases with a new line. Attempting to copy
 and paste a comma separated list? 
@@ -164,15 +164,15 @@ to a new line separated list.
             </div>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >
             <h1
-              className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
             >
               Suspect Words and Phrases
             </h1>
             <p
-              className="Typography-root Typography-detail Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
             >
               Comments containing a word or phrase in the Suspect Words List
 are 
@@ -182,16 +182,16 @@ published (if comments are not pre-moderated).
               </strong>
             </p>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="configure-wordlist-suspect"
               >
                 Suspect Word List
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextSecondary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Separate suspect words or phrases with a new line. Attempting to copy
 and paste a comma separated list? 
diff --git a/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap b/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap
index 2234414dc..29fda8fbc 100644
--- a/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap
+++ b/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`loads more 1`] = `
   data-testid="decisionHistory-container"
 >
   <div
-    className="Flex-root Title-root Flex-flex Flex-alignCenter"
+    className="Box-root Flex-root Title-root Flex-flex Flex-alignCenter"
   >
     <span
       aria-hidden="true"
@@ -17,7 +17,7 @@ exports[`loads more 1`] = `
        
     </span>
     <span
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
     >
       Your Decision History
     </span>
@@ -32,7 +32,7 @@ exports[`loads more 1`] = `
         className="DecisionItem-root"
       >
         <div
-          className="Flex-root Flex-flex"
+          className="Box-root Flex-root Flex-flex"
         >
           <div
             className="DecisionItem-leftCol"
@@ -46,7 +46,7 @@ exports[`loads more 1`] = `
           </div>
           <div>
             <p
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
             >
               Approved comment by 
               <strong>
@@ -54,10 +54,10 @@ exports[`loads more 1`] = `
               </strong>
             </p>
             <div
-              className="Flex-root Footer-root Flex-flex Flex-alignBaseline"
+              className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
             >
               <span
-                className="Typography-root Typography-timestamp Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -96,7 +96,7 @@ exports[`loads more 1`] = `
         className="DecisionItem-root"
       >
         <div
-          className="Flex-root Flex-flex"
+          className="Box-root Flex-root Flex-flex"
         >
           <div
             className="DecisionItem-leftCol"
@@ -110,7 +110,7 @@ exports[`loads more 1`] = `
           </div>
           <div>
             <p
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
             >
               Rejected comment by 
               <strong>
@@ -118,10 +118,10 @@ exports[`loads more 1`] = `
               </strong>
             </p>
             <div
-              className="Flex-root Footer-root Flex-flex Flex-alignBaseline"
+              className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
             >
               <span
-                className="Typography-root Typography-timestamp Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -160,7 +160,7 @@ exports[`loads more 1`] = `
         className="DecisionItem-root"
       >
         <div
-          className="Flex-root Flex-flex"
+          className="Box-root Flex-root Flex-flex"
         >
           <div
             className="DecisionItem-leftCol"
@@ -174,7 +174,7 @@ exports[`loads more 1`] = `
           </div>
           <div>
             <p
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
             >
               Approved comment by 
               <strong>
@@ -182,10 +182,10 @@ exports[`loads more 1`] = `
               </strong>
             </p>
             <div
-              className="Flex-root Footer-root Flex-flex Flex-alignBaseline"
+              className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
             >
               <span
-                className="Typography-root Typography-timestamp Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -230,7 +230,7 @@ exports[`opens popover when clicked on button showing loading state 1`] = `
   data-testid="decisionHistory-loading-container"
 >
   <div
-    className="Flex-root Title-root Flex-flex Flex-alignCenter"
+    className="Box-root Flex-root Title-root Flex-flex Flex-alignCenter"
   >
     <span
       aria-hidden="true"
@@ -242,7 +242,7 @@ exports[`opens popover when clicked on button showing loading state 1`] = `
        
     </span>
     <span
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
     >
       Your Decision History
     </span>
@@ -251,7 +251,7 @@ exports[`opens popover when clicked on button showing loading state 1`] = `
     className="Main-root"
   >
     <div
-      className="Flex-root DecisionHistoryLoading-container Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root DecisionHistoryLoading-container Flex-flex Flex-justifyCenter Flex-alignCenter"
     />
   </div>
 </div>
@@ -262,7 +262,7 @@ exports[`render popover content 1`] = `
   data-testid="decisionHistory-container"
 >
   <div
-    className="Flex-root Title-root Flex-flex Flex-alignCenter"
+    className="Box-root Flex-root Title-root Flex-flex Flex-alignCenter"
   >
     <span
       aria-hidden="true"
@@ -274,7 +274,7 @@ exports[`render popover content 1`] = `
        
     </span>
     <span
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
     >
       Your Decision History
     </span>
@@ -289,7 +289,7 @@ exports[`render popover content 1`] = `
         className="DecisionItem-root"
       >
         <div
-          className="Flex-root Flex-flex"
+          className="Box-root Flex-root Flex-flex"
         >
           <div
             className="DecisionItem-leftCol"
@@ -303,7 +303,7 @@ exports[`render popover content 1`] = `
           </div>
           <div>
             <p
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
             >
               Approved comment by 
               <strong>
@@ -311,10 +311,10 @@ exports[`render popover content 1`] = `
               </strong>
             </p>
             <div
-              className="Flex-root Footer-root Flex-flex Flex-alignBaseline"
+              className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
             >
               <span
-                className="Typography-root Typography-timestamp Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -353,7 +353,7 @@ exports[`render popover content 1`] = `
         className="DecisionItem-root"
       >
         <div
-          className="Flex-root Flex-flex"
+          className="Box-root Flex-root Flex-flex"
         >
           <div
             className="DecisionItem-leftCol"
@@ -367,7 +367,7 @@ exports[`render popover content 1`] = `
           </div>
           <div>
             <p
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
             >
               Rejected comment by 
               <strong>
@@ -375,10 +375,10 @@ exports[`render popover content 1`] = `
               </strong>
             </p>
             <div
-              className="Flex-root Footer-root Flex-flex Flex-alignBaseline"
+              className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
             >
               <span
-                className="Typography-root Typography-timestamp Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
diff --git a/src/core/client/admin/test/moderate/__snapshots__/moderate.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/moderate.spec.tsx.snap
index 1da5240e6..04fdacedf 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/moderate.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/moderate.spec.tsx.snap
@@ -19,7 +19,7 @@ exports[`rejected queue approves comment in rejected queue: dangling 1`] = `
   data-testid="moderate-comment-comment-0"
 >
   <div
-    className="Flex-root Flex-flex"
+    className="Box-root Flex-root Flex-flex"
   >
     <div
       className="ModerateCard-mainContainer"
@@ -29,7 +29,7 @@ exports[`rejected queue approves comment in rejected queue: dangling 1`] = `
       >
         <div>
           <span
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+            className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
           >
             Isabelle
           </span>
@@ -43,7 +43,7 @@ exports[`rejected queue approves comment in rejected queue: dangling 1`] = `
         </div>
       </div>
       <div
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
         dangerouslySetInnerHTML={
           Object {
             "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
@@ -54,7 +54,7 @@ exports[`rejected queue approves comment in rejected queue: dangling 1`] = `
         className="ModerateCard-footer"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div>
             <a
@@ -93,13 +93,13 @@ exports[`rejected queue approves comment in rejected queue: dangling 1`] = `
             </a>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-double"
+            className="Box-root HorizontalGutter-root HorizontalGutter-double"
           >
             <div
-              className="Flex-root Flex-flex"
+              className="Box-root Flex-root Flex-flex"
             >
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
               >
                 <span
                   className="Marker-root Marker-colorError Marker-variantRegular"
@@ -148,7 +148,7 @@ exports[`rejected queue approves comment in rejected queue: dangling 1`] = `
       className="ModerateCard-separator"
     />
     <div
-      className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
       <div
         className="ModerateCard-decision"
@@ -156,7 +156,7 @@ exports[`rejected queue approves comment in rejected queue: dangling 1`] = `
         Decision
       </div>
       <div
-        className="Flex-root Flex-flex Flex-itemGutter"
+        className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
       >
         <button
           aria-label="Reject"
@@ -211,14 +211,14 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
     className="Moderate-main"
   >
     <div
-      className="HorizontalGutter-root Queue-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root Queue-root HorizontalGutter-double"
     >
       <div
         className="Card-root ModerateCard-root"
         data-testid="moderate-comment-comment-0"
       >
         <div
-          className="Flex-root Flex-flex"
+          className="Box-root Flex-root Flex-flex"
         >
           <div
             className="ModerateCard-mainContainer"
@@ -228,7 +228,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
             >
               <div>
                 <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+                  className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
                 >
                   Isabelle
                 </span>
@@ -242,7 +242,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
               </div>
             </div>
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
@@ -253,7 +253,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
               className="ModerateCard-footer"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div>
                   <a
@@ -292,13 +292,13 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
                   </a>
                 </div>
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-double"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
                 >
                   <div
-                    className="Flex-root Flex-flex"
+                    className="Box-root Flex-root Flex-flex"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                     >
                       <span
                         className="Marker-root Marker-colorError Marker-variantRegular"
@@ -347,7 +347,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
             className="ModerateCard-separator"
           />
           <div
-            className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+            className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
             <div
               className="ModerateCard-decision"
@@ -355,7 +355,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
               Decision
             </div>
             <div
-              className="Flex-root Flex-flex Flex-itemGutter"
+              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <button
                 aria-label="Reject"
@@ -404,7 +404,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
         data-testid="moderate-comment-comment-1"
       >
         <div
-          className="Flex-root Flex-flex"
+          className="Box-root Flex-root Flex-flex"
         >
           <div
             className="ModerateCard-mainContainer"
@@ -414,7 +414,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
             >
               <div>
                 <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+                  className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
                 >
                   Ngoc
                 </span>
@@ -428,7 +428,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
               </div>
             </div>
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "Don't fool with me",
@@ -439,7 +439,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
               className="ModerateCard-footer"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div>
                   <a
@@ -478,13 +478,13 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
                   </a>
                 </div>
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-double"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
                 >
                   <div
-                    className="Flex-root Flex-flex"
+                    className="Box-root Flex-root Flex-flex"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                     >
                       <span
                         className="Marker-root Marker-colorError Marker-variantRegular"
@@ -533,7 +533,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
             className="ModerateCard-separator"
           />
           <div
-            className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+            className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
             <div
               className="ModerateCard-decision"
@@ -541,7 +541,7 @@ exports[`rejected queue renders rejected queue with comments 1`] = `
               Decision
             </div>
             <div
-              className="Flex-root Flex-flex Flex-itemGutter"
+              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <button
                 aria-label="Reject"
@@ -596,7 +596,7 @@ exports[`rejected queue renders rejected queue with comments and load more 1`] =
   data-testid="moderate-comment-comment-2"
 >
   <div
-    className="Flex-root Flex-flex"
+    className="Box-root Flex-root Flex-flex"
   >
     <div
       className="ModerateCard-mainContainer"
@@ -606,7 +606,7 @@ exports[`rejected queue renders rejected queue with comments and load more 1`] =
       >
         <div>
           <span
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+            className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
           >
             Max
           </span>
@@ -620,7 +620,7 @@ exports[`rejected queue renders rejected queue with comments and load more 1`] =
         </div>
       </div>
       <div
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
         dangerouslySetInnerHTML={
           Object {
             "__html": "I think I deserve better",
@@ -631,7 +631,7 @@ exports[`rejected queue renders rejected queue with comments and load more 1`] =
         className="ModerateCard-footer"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div>
             <a
@@ -670,13 +670,13 @@ exports[`rejected queue renders rejected queue with comments and load more 1`] =
             </a>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-double"
+            className="Box-root HorizontalGutter-root HorizontalGutter-double"
           >
             <div
-              className="Flex-root Flex-flex"
+              className="Box-root Flex-root Flex-flex"
             >
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
               >
                 <span
                   className="Marker-root Marker-colorError Marker-variantRegular"
@@ -738,7 +738,7 @@ exports[`rejected queue renders rejected queue with comments and load more 1`] =
       className="ModerateCard-separator"
     />
     <div
-      className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
       <div
         className="ModerateCard-decision"
@@ -746,7 +746,7 @@ exports[`rejected queue renders rejected queue with comments and load more 1`] =
         Decision
       </div>
       <div
-        className="Flex-root Flex-flex Flex-itemGutter"
+        className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
       >
         <button
           aria-label="Reject"
@@ -811,7 +811,7 @@ exports[`reported queue approves comment in reported queue: dangling 1`] = `
   data-testid="moderate-comment-comment-0"
 >
   <div
-    className="Flex-root Flex-flex"
+    className="Box-root Flex-root Flex-flex"
   >
     <div
       className="ModerateCard-mainContainer"
@@ -821,7 +821,7 @@ exports[`reported queue approves comment in reported queue: dangling 1`] = `
       >
         <div>
           <span
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+            className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
           >
             Isabelle
           </span>
@@ -835,7 +835,7 @@ exports[`reported queue approves comment in reported queue: dangling 1`] = `
         </div>
       </div>
       <div
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
         dangerouslySetInnerHTML={
           Object {
             "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
@@ -846,7 +846,7 @@ exports[`reported queue approves comment in reported queue: dangling 1`] = `
         className="ModerateCard-footer"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div>
             <a
@@ -885,13 +885,13 @@ exports[`reported queue approves comment in reported queue: dangling 1`] = `
             </a>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-double"
+            className="Box-root HorizontalGutter-root HorizontalGutter-double"
           >
             <div
-              className="Flex-root Flex-flex"
+              className="Box-root Flex-root Flex-flex"
             >
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
               >
                 <span
                   className="Marker-root Marker-colorError Marker-variantRegular"
@@ -940,7 +940,7 @@ exports[`reported queue approves comment in reported queue: dangling 1`] = `
       className="ModerateCard-separator"
     />
     <div
-      className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
       <div
         className="ModerateCard-decision"
@@ -948,7 +948,7 @@ exports[`reported queue approves comment in reported queue: dangling 1`] = `
         Decision
       </div>
       <div
-        className="Flex-root Flex-flex Flex-itemGutter"
+        className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
       >
         <button
           aria-label="Reject"
@@ -1013,7 +1013,7 @@ exports[`reported queue rejects comment in reported queue: dangling 1`] = `
   data-testid="moderate-comment-comment-0"
 >
   <div
-    className="Flex-root Flex-flex"
+    className="Box-root Flex-root Flex-flex"
   >
     <div
       className="ModerateCard-mainContainer"
@@ -1023,7 +1023,7 @@ exports[`reported queue rejects comment in reported queue: dangling 1`] = `
       >
         <div>
           <span
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+            className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
           >
             Isabelle
           </span>
@@ -1037,7 +1037,7 @@ exports[`reported queue rejects comment in reported queue: dangling 1`] = `
         </div>
       </div>
       <div
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
         dangerouslySetInnerHTML={
           Object {
             "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
@@ -1048,7 +1048,7 @@ exports[`reported queue rejects comment in reported queue: dangling 1`] = `
         className="ModerateCard-footer"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div>
             <a
@@ -1087,13 +1087,13 @@ exports[`reported queue rejects comment in reported queue: dangling 1`] = `
             </a>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-double"
+            className="Box-root HorizontalGutter-root HorizontalGutter-double"
           >
             <div
-              className="Flex-root Flex-flex"
+              className="Box-root Flex-root Flex-flex"
             >
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
               >
                 <span
                   className="Marker-root Marker-colorError Marker-variantRegular"
@@ -1142,7 +1142,7 @@ exports[`reported queue rejects comment in reported queue: dangling 1`] = `
       className="ModerateCard-separator"
     />
     <div
-      className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
       <div
         className="ModerateCard-decision"
@@ -1150,7 +1150,7 @@ exports[`reported queue rejects comment in reported queue: dangling 1`] = `
         Decision
       </div>
       <div
-        className="Flex-root Flex-flex Flex-itemGutter"
+        className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
       >
         <button
           aria-label="Reject"
@@ -1205,14 +1205,14 @@ exports[`reported queue renders reported queue with comments 1`] = `
     className="Moderate-main"
   >
     <div
-      className="HorizontalGutter-root Queue-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root Queue-root HorizontalGutter-double"
     >
       <div
         className="Card-root ModerateCard-root"
         data-testid="moderate-comment-comment-0"
       >
         <div
-          className="Flex-root Flex-flex"
+          className="Box-root Flex-root Flex-flex"
         >
           <div
             className="ModerateCard-mainContainer"
@@ -1222,7 +1222,7 @@ exports[`reported queue renders reported queue with comments 1`] = `
             >
               <div>
                 <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+                  className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
                 >
                   Isabelle
                 </span>
@@ -1236,7 +1236,7 @@ exports[`reported queue renders reported queue with comments 1`] = `
               </div>
             </div>
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
@@ -1247,7 +1247,7 @@ exports[`reported queue renders reported queue with comments 1`] = `
               className="ModerateCard-footer"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div>
                   <a
@@ -1286,13 +1286,13 @@ exports[`reported queue renders reported queue with comments 1`] = `
                   </a>
                 </div>
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-double"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
                 >
                   <div
-                    className="Flex-root Flex-flex"
+                    className="Box-root Flex-root Flex-flex"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                     >
                       <span
                         className="Marker-root Marker-colorError Marker-variantRegular"
@@ -1341,7 +1341,7 @@ exports[`reported queue renders reported queue with comments 1`] = `
             className="ModerateCard-separator"
           />
           <div
-            className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+            className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
             <div
               className="ModerateCard-decision"
@@ -1349,7 +1349,7 @@ exports[`reported queue renders reported queue with comments 1`] = `
               Decision
             </div>
             <div
-              className="Flex-root Flex-flex Flex-itemGutter"
+              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <button
                 aria-label="Reject"
@@ -1398,7 +1398,7 @@ exports[`reported queue renders reported queue with comments 1`] = `
         data-testid="moderate-comment-comment-1"
       >
         <div
-          className="Flex-root Flex-flex"
+          className="Box-root Flex-root Flex-flex"
         >
           <div
             className="ModerateCard-mainContainer"
@@ -1408,7 +1408,7 @@ exports[`reported queue renders reported queue with comments 1`] = `
             >
               <div>
                 <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+                  className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
                 >
                   Ngoc
                 </span>
@@ -1422,7 +1422,7 @@ exports[`reported queue renders reported queue with comments 1`] = `
               </div>
             </div>
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "Don't fool with me",
@@ -1433,7 +1433,7 @@ exports[`reported queue renders reported queue with comments 1`] = `
               className="ModerateCard-footer"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div>
                   <a
@@ -1472,13 +1472,13 @@ exports[`reported queue renders reported queue with comments 1`] = `
                   </a>
                 </div>
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-double"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
                 >
                   <div
-                    className="Flex-root Flex-flex"
+                    className="Box-root Flex-root Flex-flex"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                     >
                       <span
                         className="Marker-root Marker-colorError Marker-variantRegular"
@@ -1527,7 +1527,7 @@ exports[`reported queue renders reported queue with comments 1`] = `
             className="ModerateCard-separator"
           />
           <div
-            className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+            className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
             <div
               className="ModerateCard-decision"
@@ -1535,7 +1535,7 @@ exports[`reported queue renders reported queue with comments 1`] = `
               Decision
             </div>
             <div
-              className="Flex-root Flex-flex Flex-itemGutter"
+              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <button
                 aria-label="Reject"
@@ -1593,14 +1593,14 @@ exports[`reported queue renders reported queue with comments 2`] = `
     className="Moderate-main"
   >
     <div
-      className="HorizontalGutter-root Queue-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root Queue-root HorizontalGutter-double"
     >
       <div
         className="Card-root ModerateCard-root"
         data-testid="moderate-comment-comment-0"
       >
         <div
-          className="Flex-root Flex-flex"
+          className="Box-root Flex-root Flex-flex"
         >
           <div
             className="ModerateCard-mainContainer"
@@ -1610,7 +1610,7 @@ exports[`reported queue renders reported queue with comments 2`] = `
             >
               <div>
                 <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+                  className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
                 >
                   Isabelle
                 </span>
@@ -1624,7 +1624,7 @@ exports[`reported queue renders reported queue with comments 2`] = `
               </div>
             </div>
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
@@ -1635,7 +1635,7 @@ exports[`reported queue renders reported queue with comments 2`] = `
               className="ModerateCard-footer"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div>
                   <a
@@ -1674,13 +1674,13 @@ exports[`reported queue renders reported queue with comments 2`] = `
                   </a>
                 </div>
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-double"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
                 >
                   <div
-                    className="Flex-root Flex-flex"
+                    className="Box-root Flex-root Flex-flex"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                     >
                       <span
                         className="Marker-root Marker-colorError Marker-variantRegular"
@@ -1729,7 +1729,7 @@ exports[`reported queue renders reported queue with comments 2`] = `
             className="ModerateCard-separator"
           />
           <div
-            className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+            className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
             <div
               className="ModerateCard-decision"
@@ -1737,7 +1737,7 @@ exports[`reported queue renders reported queue with comments 2`] = `
               Decision
             </div>
             <div
-              className="Flex-root Flex-flex Flex-itemGutter"
+              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <button
                 aria-label="Reject"
@@ -1786,7 +1786,7 @@ exports[`reported queue renders reported queue with comments 2`] = `
         data-testid="moderate-comment-comment-1"
       >
         <div
-          className="Flex-root Flex-flex"
+          className="Box-root Flex-root Flex-flex"
         >
           <div
             className="ModerateCard-mainContainer"
@@ -1796,7 +1796,7 @@ exports[`reported queue renders reported queue with comments 2`] = `
             >
               <div>
                 <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+                  className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
                 >
                   Ngoc
                 </span>
@@ -1810,7 +1810,7 @@ exports[`reported queue renders reported queue with comments 2`] = `
               </div>
             </div>
             <div
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "Don't fool with me",
@@ -1821,7 +1821,7 @@ exports[`reported queue renders reported queue with comments 2`] = `
               className="ModerateCard-footer"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div>
                   <a
@@ -1860,13 +1860,13 @@ exports[`reported queue renders reported queue with comments 2`] = `
                   </a>
                 </div>
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-double"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
                 >
                   <div
-                    className="Flex-root Flex-flex"
+                    className="Box-root Flex-root Flex-flex"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                     >
                       <span
                         className="Marker-root Marker-colorError Marker-variantRegular"
@@ -1915,7 +1915,7 @@ exports[`reported queue renders reported queue with comments 2`] = `
             className="ModerateCard-separator"
           />
           <div
-            className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+            className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
             <div
               className="ModerateCard-decision"
@@ -1923,7 +1923,7 @@ exports[`reported queue renders reported queue with comments 2`] = `
               Decision
             </div>
             <div
-              className="Flex-root Flex-flex Flex-itemGutter"
+              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <button
                 aria-label="Reject"
@@ -1978,7 +1978,7 @@ exports[`reported queue renders reported queue with comments and load more 1`] =
   data-testid="moderate-comment-comment-2"
 >
   <div
-    className="Flex-root Flex-flex"
+    className="Box-root Flex-root Flex-flex"
   >
     <div
       className="ModerateCard-mainContainer"
@@ -1988,7 +1988,7 @@ exports[`reported queue renders reported queue with comments and load more 1`] =
       >
         <div>
           <span
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+            className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
           >
             Max
           </span>
@@ -2002,7 +2002,7 @@ exports[`reported queue renders reported queue with comments and load more 1`] =
         </div>
       </div>
       <div
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
         dangerouslySetInnerHTML={
           Object {
             "__html": "I think I deserve better",
@@ -2013,7 +2013,7 @@ exports[`reported queue renders reported queue with comments and load more 1`] =
         className="ModerateCard-footer"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div>
             <a
@@ -2052,13 +2052,13 @@ exports[`reported queue renders reported queue with comments and load more 1`] =
             </a>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-double"
+            className="Box-root HorizontalGutter-root HorizontalGutter-double"
           >
             <div
-              className="Flex-root Flex-flex"
+              className="Box-root Flex-root Flex-flex"
             >
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
               >
                 <span
                   className="Marker-root Marker-colorPrimary Marker-variantRegular"
@@ -2125,7 +2125,7 @@ exports[`reported queue renders reported queue with comments and load more 1`] =
       className="ModerateCard-separator"
     />
     <div
-      className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
       <div
         className="ModerateCard-decision"
@@ -2133,7 +2133,7 @@ exports[`reported queue renders reported queue with comments and load more 1`] =
         Decision
       </div>
       <div
-        className="Flex-root Flex-flex Flex-itemGutter"
+        className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
       >
         <button
           aria-label="Reject"
@@ -2190,7 +2190,7 @@ exports[`search bar all stories active search with no results 1`] = `
   role="combobox"
 >
   <div
-    className="Flex-root SubBar-container Flex-flex Flex-justifyCenter Flex-alignCenter"
+    className="Box-root Flex-root SubBar-container Flex-flex Flex-justifyCenter Flex-alignCenter"
   >
     <div
       className="Backdrop-root Backdrop-active Bar-bumpZIndex"
@@ -2207,10 +2207,10 @@ exports[`search bar all stories active search with no results 1`] = `
       >
         <div>
           <div
-            className="Flex-root Field-root Flex-flex Flex-alignStretch"
+            className="Box-root Flex-root Field-root Flex-flex Flex-alignStretch"
           >
             <div
-              className="Flex-root Field-begin Flex-flex Flex-alignCenter"
+              className="Box-root Flex-root Field-begin Flex-flex Flex-alignCenter"
             >
               <span
                 aria-hidden="true"
@@ -2240,7 +2240,7 @@ exports[`search bar all stories active search with no results 1`] = `
               value=""
             />
             <div
-              className="Flex-root Field-end Flex-flex Flex-alignCenter"
+              className="Box-root Flex-root Field-end Flex-flex Flex-alignCenter"
             >
               <button
                 className="BaseButton-root Field-searchButton"
@@ -2372,7 +2372,7 @@ exports[`search bar all stories renders search bar 1`] = `
   role="combobox"
 >
   <div
-    className="Flex-root SubBar-container Flex-flex Flex-justifyCenter Flex-alignCenter"
+    className="Box-root Flex-root SubBar-container Flex-flex Flex-justifyCenter Flex-alignCenter"
   >
     <div
       className="Backdrop-root Bar-bumpZIndex"
@@ -2389,10 +2389,10 @@ exports[`search bar all stories renders search bar 1`] = `
       >
         <div>
           <div
-            className="Flex-root Field-root Flex-flex Flex-alignStretch"
+            className="Box-root Flex-root Field-root Flex-flex Flex-alignStretch"
           >
             <div
-              className="Flex-root Field-begin Flex-flex Flex-alignCenter"
+              className="Box-root Flex-root Field-begin Flex-flex Flex-alignCenter"
             >
               <span
                 aria-hidden="true"
@@ -2417,7 +2417,7 @@ exports[`search bar all stories renders search bar 1`] = `
               value=""
             />
             <div
-              className="Flex-root Field-end Flex-flex Flex-alignCenter"
+              className="Box-root Flex-root Field-end Flex-flex Flex-alignCenter"
             />
           </div>
         </div>
@@ -2439,7 +2439,7 @@ exports[`single comment view approves single comment 1`] = `
   data-testid="moderate-comment-comment-0"
 >
   <div
-    className="Flex-root Flex-flex"
+    className="Box-root Flex-root Flex-flex"
   >
     <div
       className="ModerateCard-mainContainer"
@@ -2449,7 +2449,7 @@ exports[`single comment view approves single comment 1`] = `
       >
         <div>
           <span
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+            className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
           >
             Isabelle
           </span>
@@ -2463,7 +2463,7 @@ exports[`single comment view approves single comment 1`] = `
         </div>
       </div>
       <div
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
         dangerouslySetInnerHTML={
           Object {
             "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
@@ -2474,7 +2474,7 @@ exports[`single comment view approves single comment 1`] = `
         className="ModerateCard-footer"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div>
             <a
@@ -2492,13 +2492,13 @@ exports[`single comment view approves single comment 1`] = `
             </a>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-double"
+            className="Box-root HorizontalGutter-root HorizontalGutter-double"
           >
             <div
-              className="Flex-root Flex-flex"
+              className="Box-root Flex-root Flex-flex"
             >
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
               >
                 <span
                   className="Marker-root Marker-colorError Marker-variantRegular"
@@ -2547,7 +2547,7 @@ exports[`single comment view approves single comment 1`] = `
       className="ModerateCard-separator"
     />
     <div
-      className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
       <div
         className="ModerateCard-decision"
@@ -2555,7 +2555,7 @@ exports[`single comment view approves single comment 1`] = `
         Decision
       </div>
       <div
-        className="Flex-root Flex-flex Flex-itemGutter"
+        className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
       >
         <button
           aria-label="Reject"
@@ -2607,7 +2607,7 @@ exports[`single comment view rejects single comment 1`] = `
   data-testid="moderate-comment-comment-0"
 >
   <div
-    className="Flex-root Flex-flex"
+    className="Box-root Flex-root Flex-flex"
   >
     <div
       className="ModerateCard-mainContainer"
@@ -2617,7 +2617,7 @@ exports[`single comment view rejects single comment 1`] = `
       >
         <div>
           <span
-            className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+            className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
           >
             Isabelle
           </span>
@@ -2631,7 +2631,7 @@ exports[`single comment view rejects single comment 1`] = `
         </div>
       </div>
       <div
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
         dangerouslySetInnerHTML={
           Object {
             "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
@@ -2642,7 +2642,7 @@ exports[`single comment view rejects single comment 1`] = `
         className="ModerateCard-footer"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div>
             <a
@@ -2660,13 +2660,13 @@ exports[`single comment view rejects single comment 1`] = `
             </a>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-double"
+            className="Box-root HorizontalGutter-root HorizontalGutter-double"
           >
             <div
-              className="Flex-root Flex-flex"
+              className="Box-root Flex-root Flex-flex"
             >
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
               >
                 <span
                   className="Marker-root Marker-colorError Marker-variantRegular"
@@ -2715,7 +2715,7 @@ exports[`single comment view rejects single comment 1`] = `
       className="ModerateCard-separator"
     />
     <div
-      className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+      className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
       <div
         className="ModerateCard-decision"
@@ -2723,7 +2723,7 @@ exports[`single comment view rejects single comment 1`] = `
         Decision
       </div>
       <div
-        className="Flex-root Flex-flex Flex-itemGutter"
+        className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
       >
         <button
           aria-label="Reject"
@@ -2777,7 +2777,7 @@ exports[`single comment view renders single comment view 1`] = `
     className="SubBar-root SingleModerate-subBar SubBar-gutterBegin SubBar-gutterEnd"
   >
     <div
-      className="Flex-root SubBar-container Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root SubBar-container Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <a
         className="SingleModerate-subBarBegin"
@@ -2803,14 +2803,14 @@ exports[`single comment view renders single comment view 1`] = `
       className="SingleModerate-main"
     >
       <div
-        className="HorizontalGutter-root Queue-root HorizontalGutter-double"
+        className="Box-root HorizontalGutter-root Queue-root HorizontalGutter-double"
       >
         <div
           className="Card-root ModerateCard-root"
           data-testid="moderate-comment-comment-0"
         >
           <div
-            className="Flex-root Flex-flex"
+            className="Box-root Flex-root Flex-flex"
           >
             <div
               className="ModerateCard-mainContainer"
@@ -2820,7 +2820,7 @@ exports[`single comment view renders single comment view 1`] = `
               >
                 <div>
                   <span
-                    className="Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
+                    className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ModerateCard-username Username-root"
                   >
                     Isabelle
                   </span>
@@ -2834,7 +2834,7 @@ exports[`single comment view renders single comment view 1`] = `
                 </div>
               </div>
               <div
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
+                className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
@@ -2845,7 +2845,7 @@ exports[`single comment view renders single comment view 1`] = `
                 className="ModerateCard-footer"
               >
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
                 >
                   <div>
                     <a
@@ -2863,13 +2863,13 @@ exports[`single comment view renders single comment view 1`] = `
                     </a>
                   </div>
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-double"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-double"
                   >
                     <div
-                      className="Flex-root Flex-flex"
+                      className="Box-root Flex-root Flex-flex"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-itemGutter"
+                        className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                       >
                         <span
                           className="Marker-root Marker-colorError Marker-variantRegular"
@@ -2918,7 +2918,7 @@ exports[`single comment view renders single comment view 1`] = `
               className="ModerateCard-separator"
             />
             <div
-              className="Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn"
+              className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
             >
               <div
                 className="ModerateCard-decision"
@@ -2926,7 +2926,7 @@ exports[`single comment view renders single comment view 1`] = `
                 Decision
               </div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
               >
                 <button
                   aria-label="Reject"
@@ -2982,7 +2982,7 @@ exports[`tab bar renders tab bar (empty queues) 1`] = `
   data-testid="moderate-tabBar-container"
 >
   <div
-    className="Flex-root SubBar-container Flex-flex Flex-justifyCenter Flex-alignCenter"
+    className="Box-root Flex-root SubBar-container Flex-flex Flex-justifyCenter Flex-alignCenter"
   >
     <nav
       className="Navigation-root"
diff --git a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
index 0feb8283a..c151d9c7d 100644
--- a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
+++ b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
@@ -6,16 +6,16 @@ exports[`renders empty stories 1`] = `
   data-testid="stories-container"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-double"
+    className="Box-root HorizontalGutter-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Flex-flex Flex-doubleItemGutter"
+      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
     >
       <fieldset
         className="FieldSet-root"
       >
         <legend
-          className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
         >
           Search
         </legend>
@@ -64,7 +64,7 @@ exports[`renders empty stories 1`] = `
         className="FieldSet-root"
       >
         <legend
-          className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
         >
           Show Me
         </legend>
@@ -110,7 +110,7 @@ exports[`renders empty stories 1`] = `
       </fieldset>
     </div>
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <table
         className="Table-root Table-fullWidth"
@@ -309,16 +309,16 @@ exports[`renders stories 1`] = `
   data-testid="stories-container"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-double"
+    className="Box-root HorizontalGutter-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Flex-flex Flex-doubleItemGutter"
+      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
     >
       <fieldset
         className="FieldSet-root"
       >
         <legend
-          className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
         >
           Search
         </legend>
@@ -367,7 +367,7 @@ exports[`renders stories 1`] = `
         className="FieldSet-root"
       >
         <legend
-          className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
         >
           Show Me
         </legend>
@@ -413,7 +413,7 @@ exports[`renders stories 1`] = `
       </fieldset>
     </div>
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <table
         className="Table-root Table-fullWidth"
diff --git a/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
index 9753531a0..27a0274d5 100644
--- a/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
@@ -6,10 +6,10 @@ exports[`accepts valid email 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       For your added security, we require users to add an email address to their accounts.
 Your email address will be used to:
@@ -32,7 +32,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Receive updates regarding any changes to your account
 (email address, username, password, etc.)
@@ -54,7 +54,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Allow you to download your comments.
           </div>
@@ -75,7 +75,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Send comment notifications that you have chosen to receive.
           </div>
@@ -83,10 +83,10 @@ Your email address will be used to:
       </li>
     </ul>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -107,10 +107,10 @@ Your email address will be used to:
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="confirmEmail"
       >
         Confirm Email Address
@@ -165,10 +165,10 @@ exports[`checks for invalid email 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       For your added security, we require users to add an email address to their accounts.
 Your email address will be used to:
@@ -191,7 +191,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Receive updates regarding any changes to your account
 (email address, username, password, etc.)
@@ -213,7 +213,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Allow you to download your comments.
           </div>
@@ -234,7 +234,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Send comment notifications that you have chosen to receive.
           </div>
@@ -242,10 +242,10 @@ Your email address will be used to:
       </li>
     </ul>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -279,10 +279,10 @@ Your email address will be used to:
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="confirmEmail"
       >
         Confirm Email Address
@@ -337,11 +337,11 @@ exports[`renders addEmailAddress view 1`] = `
     data-testid="addEmailAddress-container"
   >
     <div
-      className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <div>
         <h1
-          className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
+          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
         >
           Add Email Address
         </h1>
@@ -356,10 +356,10 @@ exports[`renders addEmailAddress view 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
         >
           <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             For your added security, we require users to add an email address to their accounts.
 Your email address will be used to:
@@ -382,7 +382,7 @@ Your email address will be used to:
               </div>
               <div>
                 <div
-                  className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                 >
                   Receive updates regarding any changes to your account
 (email address, username, password, etc.)
@@ -404,7 +404,7 @@ Your email address will be used to:
               </div>
               <div>
                 <div
-                  className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                 >
                   Allow you to download your comments.
                 </div>
@@ -425,7 +425,7 @@ Your email address will be used to:
               </div>
               <div>
                 <div
-                  className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                 >
                   Send comment notifications that you have chosen to receive.
                 </div>
@@ -433,10 +433,10 @@ Your email address will be used to:
             </li>
           </ul>
           <div
-            className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >
             <label
-              className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               htmlFor="email"
             >
               Email Address
@@ -457,10 +457,10 @@ Your email address will be used to:
             </div>
           </div>
           <div
-            className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >
             <label
-              className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               htmlFor="confirmEmail"
             >
               Confirm Email Address
@@ -505,10 +505,10 @@ exports[`shows error when submitting empty form 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       For your added security, we require users to add an email address to their accounts.
 Your email address will be used to:
@@ -531,7 +531,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Receive updates regarding any changes to your account
 (email address, username, password, etc.)
@@ -553,7 +553,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Allow you to download your comments.
           </div>
@@ -574,7 +574,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Send comment notifications that you have chosen to receive.
           </div>
@@ -582,10 +582,10 @@ Your email address will be used to:
       </li>
     </ul>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -619,10 +619,10 @@ Your email address will be used to:
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="confirmEmail"
       >
         Confirm Email Address
@@ -677,10 +677,10 @@ exports[`shows server error 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       For your added security, we require users to add an email address to their accounts.
 Your email address will be used to:
@@ -703,7 +703,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Receive updates regarding any changes to your account
 (email address, username, password, etc.)
@@ -725,7 +725,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Allow you to download your comments.
           </div>
@@ -746,7 +746,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Send comment notifications that you have chosen to receive.
           </div>
@@ -756,7 +756,8 @@ Your email address will be used to:
     <div
       className="CallOut-root CallOut-colorError CallOut-fullWidth"
     >
-      server error
+      <div>
+        server error
 
 GraphQL request (4:3)
 3: ) {
@@ -764,12 +765,13 @@ GraphQL request (4:3)
      ^
 5:     user {
 
+      </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -790,10 +792,10 @@ GraphQL request (4:3)
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="confirmEmail"
       >
         Confirm Email Address
@@ -835,10 +837,10 @@ exports[`successfully sets email 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       For your added security, we require users to add an email address to their accounts.
 Your email address will be used to:
@@ -861,7 +863,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Receive updates regarding any changes to your account
 (email address, username, password, etc.)
@@ -883,7 +885,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Allow you to download your comments.
           </div>
@@ -904,7 +906,7 @@ Your email address will be used to:
         </div>
         <div>
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Send comment notifications that you have chosen to receive.
           </div>
@@ -912,10 +914,10 @@ Your email address will be used to:
       </li>
     </ul>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -936,10 +938,10 @@ Your email address will be used to:
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="confirmEmail"
       >
         Confirm Email Address
diff --git a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
index 4fc29c659..83af2b489 100644
--- a/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
@@ -6,25 +6,25 @@ exports[`checks for invalid password 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       To protect against unauthorized changes to your account,
 we require users to create a password.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         Must be at least 8 characters
       </p>
@@ -96,11 +96,11 @@ exports[`renders createPassword view 1`] = `
     data-testid="createPassword-container"
   >
     <div
-      className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <div>
         <h1
-          className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
+          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
         >
           Create Password
         </h1>
@@ -115,25 +115,25 @@ exports[`renders createPassword view 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
         >
           <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             To protect against unauthorized changes to your account,
 we require users to create a password.
           </p>
           <div
-            className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >
             <label
-              className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               htmlFor="password"
             >
               Password
             </label>
             <p
-              className="Typography-root Typography-detail Typography-colorTextSecondary"
+              className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
             >
               Must be at least 8 characters
             </p>
@@ -195,25 +195,25 @@ exports[`shows error when submitting empty form 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       To protect against unauthorized changes to your account,
 we require users to create a password.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         Must be at least 8 characters
       </p>
@@ -285,10 +285,10 @@ exports[`shows server error 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       To protect against unauthorized changes to your account,
 we require users to create a password.
@@ -296,7 +296,8 @@ we require users to create a password.
     <div
       className="CallOut-root CallOut-colorError CallOut-fullWidth"
     >
-      server error
+      <div>
+        server error
 
 GraphQL request (4:3)
 3: ) {
@@ -304,18 +305,19 @@ GraphQL request (4:3)
      ^
 5:     user {
 
+      </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         Must be at least 8 characters
       </p>
@@ -374,25 +376,25 @@ exports[`successfully sets password 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       To protect against unauthorized changes to your account,
 we require users to create a password.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         Must be at least 8 characters
       </p>
diff --git a/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
index 90890378e..fa4afc08e 100644
--- a/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
@@ -6,24 +6,24 @@ exports[`checks for invalid username 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       Your username is an identifier that will appear on all of your comments.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="username"
       >
         Username
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         You may use “_” and “.” Spaces not permitted.
       </p>
@@ -77,11 +77,11 @@ exports[`renders createUsername view 1`] = `
     data-testid="createUsername-container"
   >
     <div
-      className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <div>
         <h1
-          className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
+          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
         >
           Create Username
         </h1>
@@ -96,24 +96,24 @@ exports[`renders createUsername view 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+          className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
         >
           <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Your username is an identifier that will appear on all of your comments.
           </p>
           <div
-            className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >
             <label
-              className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               htmlFor="username"
             >
               Username
             </label>
             <p
-              className="Typography-root Typography-detail Typography-colorTextSecondary"
+              className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
             >
               You may use “_” and “.” Spaces not permitted.
             </p>
@@ -157,24 +157,24 @@ exports[`shows error when submitting empty form 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       Your username is an identifier that will appear on all of your comments.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="username"
       >
         Username
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         You may use “_” and “.” Spaces not permitted.
       </p>
@@ -228,17 +228,18 @@ exports[`shows server error 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       Your username is an identifier that will appear on all of your comments.
     </p>
     <div
       className="CallOut-root CallOut-colorError CallOut-fullWidth"
     >
-      server error
+      <div>
+        server error
 
 GraphQL request (4:3)
 3: ) {
@@ -246,18 +247,19 @@ GraphQL request (4:3)
      ^
 5:     user {
 
+      </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="username"
       >
         Username
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         You may use “_” and “.” Spaces not permitted.
       </p>
@@ -298,24 +300,24 @@ exports[`successfully sets username 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <p
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       Your username is an identifier that will appear on all of your comments.
     </p>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="username"
       >
         Username
       </label>
       <p
-        className="Typography-root Typography-detail Typography-colorTextSecondary"
+        className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
       >
         You may use “_” and “.” Spaces not permitted.
       </p>
diff --git a/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
index 0758711d1..9fde83431 100644
--- a/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
@@ -6,22 +6,22 @@ exports[`renders forgot password view 1`] = `
     data-testid="forgotPassword-container"
   >
     <div
-      className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <div>
         <h1
-          className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
+          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
         >
           Forgot Password?
         </h1>
       </div>
     </div>
     <div
-      className="Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <div>
         <div
-          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <a
             className="TextLink-root"
@@ -42,19 +42,19 @@ exports[`renders forgot password view 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root 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"
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >
             <label
-              className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               htmlFor="email"
             >
               Email Address
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 8a05acb11..8b46af7b6 100644
--- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
@@ -6,13 +6,13 @@ exports[`accepts correct password 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -46,10 +46,10 @@ exports[`accepts correct password 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
@@ -87,10 +87,10 @@ exports[`accepts correct password 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
       >
         <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
         >
           <a
             className="TextLink-root"
@@ -132,13 +132,13 @@ exports[`accepts valid email 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -159,10 +159,10 @@ exports[`accepts valid email 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
@@ -213,10 +213,10 @@ exports[`accepts valid email 1`] = `
         </span>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
       >
         <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
         >
           <a
             className="TextLink-root"
@@ -258,20 +258,20 @@ exports[`auth configuration renders all auth enabled 1`] = `
   data-testid="signIn-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -292,10 +292,10 @@ exports[`auth configuration renders all auth enabled 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
@@ -333,10 +333,10 @@ exports[`auth configuration renders all auth enabled 1`] = `
             </div>
           </div>
           <div
-            className="Flex-root Flex-flex Flex-justifyFlexEnd"
+            className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
           >
             <p
-              className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
             >
               <a
                 className="TextLink-root"
@@ -371,7 +371,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
       </div>
     </form>
     <div
-      className="Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <hr
         className="HorizontalSeparator-hr"
@@ -383,7 +383,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
@@ -462,10 +462,10 @@ exports[`auth configuration renders only some social login enabled 1`] = `
   data-testid="signIn-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
@@ -530,13 +530,13 @@ exports[`checks for invalid email 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -570,10 +570,10 @@ exports[`checks for invalid email 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
@@ -624,10 +624,10 @@ exports[`checks for invalid email 1`] = `
         </span>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
       >
         <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
         >
           <a
             className="TextLink-root"
@@ -669,27 +669,27 @@ exports[`renders sign in view 1`] = `
     data-testid="signIn-container"
   >
     <div
-      className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <div>
         <h1
-          className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
+          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
         >
           Sign In
         </h1>
         <h1
-          className="Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
+          className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
         >
           to join the conversation
         </h1>
       </div>
     </div>
     <div
-      className="Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <div>
         <div
-          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
             Don't have an account? 
@@ -709,20 +709,20 @@ exports[`renders sign in view 1`] = `
       data-testid="signIn-main"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
       >
         <form
           autoComplete="off"
           onSubmit={[Function]}
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="email"
               >
                 Email Address
@@ -743,10 +743,10 @@ exports[`renders sign in view 1`] = `
               </div>
             </div>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="password"
               >
                 Password
@@ -784,10 +784,10 @@ exports[`renders sign in view 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-justifyFlexEnd"
+                className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
               >
                 <p
-                  className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                  className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                 >
                   <a
                     className="TextLink-root"
@@ -822,7 +822,7 @@ exports[`renders sign in view 1`] = `
           </div>
         </form>
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         />
       </div>
     </div>
@@ -835,27 +835,27 @@ exports[`renders sign in view with error 1`] = `
   data-testid="signIn-container"
 >
   <div
-    className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+    className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
   >
     <div>
       <h1
-        className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
+        className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
       >
         Sign In
       </h1>
       <h1
-        className="Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
+        className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
       >
         to join the conversation
       </h1>
     </div>
   </div>
   <div
-    className="Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+    className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
   >
     <div>
       <div
-        className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+        className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
       >
         <span>
           Don't have an account? 
@@ -875,25 +875,27 @@ exports[`renders sign in view with error 1`] = `
     data-testid="signIn-main"
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+      className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
     >
       <div
         className="CallOut-root CallOut-colorError CallOut-fullWidth"
       >
-        Social Login Error
+        <div>
+          Social Login Error
+        </div>
       </div>
       <form
         autoComplete="off"
         onSubmit={[Function]}
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >
             <label
-              className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               htmlFor="email"
             >
               Email Address
@@ -914,10 +916,10 @@ exports[`renders sign in view with error 1`] = `
             </div>
           </div>
           <div
-            className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
           >
             <label
-              className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+              className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
               htmlFor="password"
             >
               Password
@@ -955,10 +957,10 @@ exports[`renders sign in view with error 1`] = `
               </div>
             </div>
             <div
-              className="Flex-root Flex-flex Flex-justifyFlexEnd"
+              className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
             >
               <p
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
               >
                 <a
                   className="TextLink-root"
@@ -993,7 +995,7 @@ exports[`renders sign in view with error 1`] = `
         </div>
       </form>
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       />
     </div>
   </div>
@@ -1006,13 +1008,13 @@ exports[`shows error when submitting empty form 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -1046,10 +1048,10 @@ exports[`shows error when submitting empty form 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
@@ -1100,10 +1102,10 @@ exports[`shows error when submitting empty form 1`] = `
         </span>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
       >
         <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
         >
           <a
             className="TextLink-root"
@@ -1145,18 +1147,20 @@ exports[`shows server error 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="CallOut-root CallOut-colorError CallOut-fullWidth"
     >
-      Server Error
+      <div>
+        Server Error
+      </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -1177,10 +1181,10 @@ exports[`shows server error 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
@@ -1218,10 +1222,10 @@ exports[`shows server error 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
       >
         <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
         >
           <a
             className="TextLink-root"
@@ -1263,13 +1267,13 @@ exports[`submits form successfully 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="email"
       >
         Email Address
@@ -1290,10 +1294,10 @@ exports[`submits form successfully 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
     >
       <label
-        className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
         htmlFor="password"
       >
         Password
@@ -1331,10 +1335,10 @@ exports[`submits form successfully 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-justifyFlexEnd"
+        className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
       >
         <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
         >
           <a
             className="TextLink-root"
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 c3d7630f8..06f2ebcb7 100644
--- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
@@ -6,20 +6,20 @@ exports[`accepts correct password 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -53,16 +53,16 @@ exports[`accepts correct password 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -95,16 +95,16 @@ exports[`accepts correct password 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -164,7 +164,7 @@ exports[`accepts correct password 1`] = `
       </div>
     </form>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
 </div>
@@ -176,20 +176,20 @@ exports[`accepts valid email 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -210,16 +210,16 @@ exports[`accepts valid email 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -252,16 +252,16 @@ exports[`accepts valid email 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -334,7 +334,7 @@ exports[`accepts valid email 1`] = `
       </div>
     </form>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
 </div>
@@ -346,20 +346,20 @@ exports[`accepts valid username 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -393,16 +393,16 @@ exports[`accepts valid username 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -422,16 +422,16 @@ exports[`accepts valid username 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -504,7 +504,7 @@ exports[`accepts valid username 1`] = `
       </div>
     </form>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
 </div>
@@ -516,20 +516,20 @@ exports[`auth configuration renders all auth enabled 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -550,16 +550,16 @@ exports[`auth configuration renders all auth enabled 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -579,16 +579,16 @@ exports[`auth configuration renders all auth enabled 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -648,7 +648,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
       </div>
     </form>
     <div
-      className="Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <hr
         className="HorizontalSeparator-hr"
@@ -660,7 +660,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
@@ -739,10 +739,10 @@ exports[`auth configuration renders only some social login enabled 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <button
         className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
@@ -807,20 +807,20 @@ exports[`checks for invalid characters in username 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -854,16 +854,16 @@ exports[`checks for invalid characters in username 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -896,16 +896,16 @@ exports[`checks for invalid characters in username 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -978,7 +978,7 @@ exports[`checks for invalid characters in username 1`] = `
       </div>
     </form>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
 </div>
@@ -990,20 +990,20 @@ exports[`checks for invalid email 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -1037,16 +1037,16 @@ exports[`checks for invalid email 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -1079,16 +1079,16 @@ exports[`checks for invalid email 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -1161,7 +1161,7 @@ exports[`checks for invalid email 1`] = `
       </div>
     </form>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
 </div>
@@ -1173,20 +1173,20 @@ exports[`checks for too long username 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -1220,16 +1220,16 @@ exports[`checks for too long username 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -1262,16 +1262,16 @@ exports[`checks for too long username 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -1344,7 +1344,7 @@ exports[`checks for too long username 1`] = `
       </div>
     </form>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
 </div>
@@ -1356,20 +1356,20 @@ exports[`checks for too short password 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -1403,16 +1403,16 @@ exports[`checks for too short password 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -1445,16 +1445,16 @@ exports[`checks for too short password 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -1527,7 +1527,7 @@ exports[`checks for too short password 1`] = `
       </div>
     </form>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
 </div>
@@ -1539,20 +1539,20 @@ exports[`checks for too short username 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -1586,16 +1586,16 @@ exports[`checks for too short username 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -1628,16 +1628,16 @@ exports[`checks for too short username 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -1710,7 +1710,7 @@ exports[`checks for too short username 1`] = `
       </div>
     </form>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
 </div>
@@ -1722,27 +1722,27 @@ exports[`renders sign up form 1`] = `
     data-testid="signUp-container"
   >
     <div
-      className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <div>
         <h1
-          className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
+          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
         >
           Sign Up
         </h1>
         <h1
-          className="Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
+          className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
         >
           to join the conversation
         </h1>
       </div>
     </div>
     <div
-      className="Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
+      className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
     >
       <div>
         <div
-          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
             Already have an account? 
@@ -1762,20 +1762,20 @@ exports[`renders sign up form 1`] = `
       data-testid="signUp-main"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
       >
         <form
           autoComplete="off"
           onSubmit={[Function]}
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="email"
               >
                 Email Address
@@ -1796,16 +1796,16 @@ exports[`renders sign up form 1`] = `
               </div>
             </div>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="username"
               >
                 Username
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextSecondary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 You may use “_” and “.” Spaces not permitted.
               </p>
@@ -1825,16 +1825,16 @@ exports[`renders sign up form 1`] = `
               </div>
             </div>
             <div
-              className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+              className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
             >
               <label
-                className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
                 htmlFor="password"
               >
                 Password
               </label>
               <p
-                className="Typography-root Typography-detail Typography-colorTextSecondary"
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
               >
                 Must be at least 8 characters
               </p>
@@ -1894,7 +1894,7 @@ exports[`renders sign up form 1`] = `
           </div>
         </form>
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         />
       </div>
     </div>
@@ -1908,20 +1908,20 @@ exports[`shows error when submitting empty form 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -1955,16 +1955,16 @@ exports[`shows error when submitting empty form 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -1997,16 +1997,16 @@ exports[`shows error when submitting empty form 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -2079,7 +2079,7 @@ exports[`shows error when submitting empty form 1`] = `
       </div>
     </form>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
 </div>
@@ -2091,25 +2091,27 @@ exports[`shows server error 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           className="CallOut-root CallOut-colorError CallOut-fullWidth"
         >
-          Server Error
+          <div>
+            Server Error
+          </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -2130,16 +2132,16 @@ exports[`shows server error 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -2159,16 +2161,16 @@ exports[`shows server error 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -2228,7 +2230,7 @@ exports[`shows server error 1`] = `
       </div>
     </form>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
 </div>
@@ -2240,20 +2242,20 @@ exports[`submits form successfully 1`] = `
   data-testid="signUp-main"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+    className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
   >
     <form
       autoComplete="off"
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="email"
           >
             Email Address
@@ -2274,16 +2276,16 @@ exports[`submits form successfully 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="username"
           >
             Username
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             You may use “_” and “.” Spaces not permitted.
           </p>
@@ -2303,16 +2305,16 @@ exports[`submits form successfully 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
         >
           <label
-            className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+            className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
             htmlFor="password"
           >
             Password
           </label>
           <p
-            className="Typography-root Typography-detail Typography-colorTextSecondary"
+            className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
           >
             Must be at least 8 characters
           </p>
@@ -2372,7 +2374,7 @@ exports[`submits form successfully 1`] = `
       </div>
     </form>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     />
   </div>
 </div>
diff --git a/src/core/client/framework/lib/relay/createFetchContainer.tsx b/src/core/client/framework/lib/relay/createFetchContainer.tsx
index 3d9665c8e..b5f9fde1f 100644
--- a/src/core/client/framework/lib/relay/createFetchContainer.tsx
+++ b/src/core/client/framework/lib/relay/createFetchContainer.tsx
@@ -14,6 +14,8 @@ import { CoralContext, withContext } from "../bootstrap";
  * injects a property with the name specified in `propName`
  * and the signature (input: I) => Promise<R>. Calling
  * this will start a one off query.
+ *
+ * @deprecated use `createFetch` instead
  */
 function createFetchContainer<T extends string, V, R>(
   propName: T,
diff --git a/src/core/client/framework/lib/relay/createMutationContainer.tsx b/src/core/client/framework/lib/relay/createMutationContainer.tsx
index 9fe55d79a..265d80904 100644
--- a/src/core/client/framework/lib/relay/createMutationContainer.tsx
+++ b/src/core/client/framework/lib/relay/createMutationContainer.tsx
@@ -16,7 +16,7 @@ import { CoralContext, withContext } from "../bootstrap";
  * this will call the specified `commit` callback with
  * the Relay `environment` provided by the context.
  *
- * @deprecated
+ * @deprecated use `createMutation` instead
  */
 function createMutationContainer<T extends string, I, R>(
   propName: T,
diff --git a/src/core/client/framework/lib/relay/fetch.tsx b/src/core/client/framework/lib/relay/fetch.tsx
index 234a71f6e..d5a865edc 100644
--- a/src/core/client/framework/lib/relay/fetch.tsx
+++ b/src/core/client/framework/lib/relay/fetch.tsx
@@ -79,6 +79,8 @@ export function useFetch<V, R>(
 /**
  * withFetch creates a HOC that injects the fetch as
  * a property.
+ *
+ * @deprecated use `useFetch` instead
  */
 export function withFetch<N extends string, V, R>(
   fetch: Fetch<N, V, R>
diff --git a/src/core/client/framework/lib/relay/mutation.tsx b/src/core/client/framework/lib/relay/mutation.tsx
index 099b8d20e..8ff80b112 100644
--- a/src/core/client/framework/lib/relay/mutation.tsx
+++ b/src/core/client/framework/lib/relay/mutation.tsx
@@ -81,6 +81,8 @@ export function useMutation<I, R>(
 /**
  * withMutation creates a HOC that injects the mutation as
  * a property.
+ *
+ * @deprecated use `useMutation` instead
  */
 export function withMutation<N extends string, I, R>(
   mutation: Mutation<N, I, R>
diff --git a/src/core/client/framework/lib/relay/useRefetch.ts b/src/core/client/framework/lib/relay/useRefetch.ts
index a425416f1..ae2e13b25 100644
--- a/src/core/client/framework/lib/relay/useRefetch.ts
+++ b/src/core/client/framework/lib/relay/useRefetch.ts
@@ -4,6 +4,9 @@ import { Variables } from "relay-runtime";
 
 import { useEffectWhenChanged } from "coral-framework/hooks";
 
+type RefetchFunction = () => void;
+type IsRefetching = boolean;
+
 /**
  * useRefetch is a react hook that returns a `refetch` callback
  * and a `isRefetching` boolean. Any change to the variables
@@ -12,7 +15,7 @@ import { useEffectWhenChanged } from "coral-framework/hooks";
 export default function useRefetch<V = Variables>(
   relay: RelayPaginationProp,
   variables: V = {} as any
-): [() => void, boolean] {
+): [RefetchFunction, IsRefetching] {
   const [manualRefetchCount, setManualRefetchCount] = useState(0);
   const [refetching, setRefetching] = useState(false);
   useEffectWhenChanged(() => {
diff --git a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
index 62d64da4e..2afb7437a 100644
--- a/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
+++ b/src/core/client/framework/lib/relay/withLocalStateContainer.tsx
@@ -25,6 +25,8 @@ interface Props {
  * that has been added using Client-Side Schema Extensions.
  * The `fragmentSpec` must be a `Fragment` on the `LOCAL_TYPE` which
  * must have the `LOCAL_ID`.
+ *
+ * @deprecated use `useLocal` instead.
  */
 function withLocalStateContainer(
   fragmentSpec: GraphQLTaggedNode
diff --git a/src/core/client/framework/testHelpers/byText.ts b/src/core/client/framework/testHelpers/byText.ts
index b94359eae..417eaa75e 100644
--- a/src/core/client/framework/testHelpers/byText.ts
+++ b/src/core/client/framework/testHelpers/byText.ts
@@ -25,6 +25,9 @@ const matcher = (pattern: TextMatchPattern, options?: TextMatchOptions) => (
     if (typeof c === "string" && matchText(pattern, c, options)) {
       return true;
     }
+    if (typeof c === "number" && matchText(pattern, c.toString(), options)) {
+      return true;
+    }
   }
   return false;
 };
diff --git a/src/core/client/framework/testHelpers/denormalize.ts b/src/core/client/framework/testHelpers/denormalize.ts
index 4b97c292d..b442a1bf8 100644
--- a/src/core/client/framework/testHelpers/denormalize.ts
+++ b/src/core/client/framework/testHelpers/denormalize.ts
@@ -1,4 +1,10 @@
-import { GQLComment, GQLCommentEdge, GQLStory } from "coral-framework/schema";
+import {
+  GQLComment,
+  GQLCommentEdge,
+  GQLStory,
+  GQLTAG,
+  GQLTag,
+} from "coral-framework/schema";
 
 import createFixture, { Fixture } from "./createFixture";
 
@@ -52,11 +58,19 @@ export function denormalizeStory(story: Fixture<GQLStory>) {
     endCursor: null,
     hasNextPage: false,
   };
+  const featuredCommentsCount = commentNodes.filter(
+    n => n.tags && n.tags.some((t: GQLTag) => t.code === GQLTAG.FEATURED)
+  ).length;
   return createFixture<GQLStory>({
     ...story,
     comments: { edges: commentNodes, pageInfo: commentsPageInfo },
     commentCounts: {
+      ...story.commentCounts,
       totalVisible: commentNodes.length,
+      tags: {
+        ...(story.commentCounts && story.commentCounts.tags),
+        FEATURED: featuredCommentsCount,
+      },
     },
   });
 }
diff --git a/src/core/client/framework/testHelpers/index.ts b/src/core/client/framework/testHelpers/index.ts
index 62225877d..28f74e894 100644
--- a/src/core/client/framework/testHelpers/index.ts
+++ b/src/core/client/framework/testHelpers/index.ts
@@ -41,3 +41,7 @@ export {
   TransitionControlData,
   default as TransitionControl,
 } from "./TransitionControl";
+export {
+  default as overwriteQueryResolver,
+  createQueryResolverOverwrite,
+} from "./overwriteQueryResolver";
diff --git a/src/core/client/framework/testHelpers/overwriteQueryResolver.ts b/src/core/client/framework/testHelpers/overwriteQueryResolver.ts
new file mode 100644
index 000000000..dd5c95c4b
--- /dev/null
+++ b/src/core/client/framework/testHelpers/overwriteQueryResolver.ts
@@ -0,0 +1,116 @@
+import createQueryResolverStub, {
+  QueryResolverCallback,
+} from "./createQueryResolverStub";
+import { Resolver, Resolvers, TestResolvers } from "./createTestRenderer";
+
+type ValueOrCallbackRecursive<T> = {
+  [P in keyof T]?: ValueOrCallbackRecursive<T[P]> | (() => void)
+};
+
+type ResolverResult<T extends Resolver<any, any>> = T extends Resolver<
+  any,
+  infer R
+>
+  ? R
+  : never;
+
+type OverwriteQueryResolverTemplate<T extends Resolvers = any> = {
+  [P in keyof Required<T>["Query"]]: ValueOrCallbackRecursive<
+    ResolverResult<Required<T>["Query"][P]>
+  >
+};
+
+/**
+ * overwriteRecursive will loop over the original resolver object
+ * and creates a resolver function of each of its field. The returned
+ * value of the resolvers will bet the value returned by the overwrite
+ * or if undefined, the original value.
+ *
+ * @param original original resolver object
+ * @param overwrite overwrite resolver object or value
+ */
+function overwriteRecursive(original: any, overwrite: any) {
+  let ret = original;
+  Object.keys(overwrite).forEach(k => {
+    ret = {
+      ...original,
+      [k]: (...args: any[]) => {
+        // Only resolve original resolver when needed.
+        const resolve = () =>
+          typeof original[k] === "function"
+            ? original[k](...args)
+            : original[k];
+
+        // There is an overwrite defined!
+        if (overwrite[k]) {
+          // It's a resolver function, we reached a leaf.
+          if (typeof overwrite[k] === "function") {
+            // Resolve overwrite resolver and return it's value
+            // or if undefined the original resolved value.
+            const result = (overwrite as any)[k](...args);
+            return result !== undefined ? result : resolve();
+          }
+          // The overwrite is an Object, so we will recurse into it,
+          // until we find a leaf.
+          if (overwrite[k] instanceof Object && !Array.isArray(overwrite[k])) {
+            return overwriteRecursive(resolve(), overwrite[k]);
+          }
+          // The overwrite is a fixed value, we use that.
+          return overwrite[k];
+        }
+
+        // No overwrite defined, just resolve and return.
+        return resolve();
+      },
+    };
+  });
+  return ret;
+}
+
+/**
+ * `createQueryResolverOverwrite` is like `createQueryResolverStub`
+ * but allows you to return `void` which would then fallback to the original resolver.
+ *
+ * Given a `ResolverType` from the Schema it'll provide types as well!.
+ * @param callback resolver callback
+ */
+export function createQueryResolverOverwrite<T extends Resolver<any, any>>(
+  callback: QueryResolverCallback<Resolver<any, ResolverResult<T> | void>>
+) {
+  return createQueryResolverStub(callback);
+}
+
+/**
+ * overwriteQueryResolver allows you to conveniently overwrite the Query resolvers,
+ * even if you just want to overwrite a deeply nested field.
+ *
+ * When your overwrite resolver returns no value, it will fallback to the
+ * original resolver.
+ *
+ * Example usage:
+ * ```ts
+ * {
+ *   resolver: overwriteQueryResolver<GQLResolver>(params.resolvers || {}, {
+ *     story: {
+ *       comments: createQueryResolverOverwrite<StoryToCommentsResolver>(
+ *         ({ variables }) => {
+ *           if (variables.tag === "FEATURED") {
+ *             return storyWithNoComments.comments;
+ *           }
+ *           return;
+ *         }
+ *       ),
+ *     },
+ *   }),
+ * }
+ * ```
+ */
+export default function overwriteQueryResolver<T extends Resolvers<any, any>>(
+  original: TestResolvers<any>,
+  overwriteQuery: OverwriteQueryResolverTemplate<T>
+): TestResolvers<any> {
+  return {
+    ...original,
+    Query: overwriteRecursive(original.Query || {}, overwriteQuery),
+  };
+}
diff --git a/src/core/client/stream/App/TabBar.tsx b/src/core/client/stream/App/TabBar.tsx
index ce9b0156f..2a0e11d18 100644
--- a/src/core/client/stream/App/TabBar.tsx
+++ b/src/core/client/stream/App/TabBar.tsx
@@ -8,7 +8,6 @@ type TabValue = "COMMENTS" | "PROFILE" | "%future added value";
 export interface Props {
   activeTab: TabValue;
   onTabClick: (tab: TabValue) => void;
-  commentCount: number;
   showProfileTab: boolean;
   showConfigureTab: boolean;
 }
@@ -17,11 +16,8 @@ const AppTabBar: FunctionComponent<Props> = props => {
   return (
     <TabBar activeTab={props.activeTab} onTabClick={props.onTabClick}>
       <Tab tabID="COMMENTS">
-        <Localized
-          id="general-tabBar-commentsTab"
-          $commentCount={props.commentCount}
-        >
-          <span>{"{$commentCount} Comments"}</span>
+        <Localized id="general-tabBar-commentsTab">
+          <span>Comments</span>
         </Localized>
       </Tab>
       {props.showProfileTab && (
diff --git a/src/core/client/stream/App/TabBarContainer.tsx b/src/core/client/stream/App/TabBarContainer.tsx
index 75b72f09d..642e0e035 100644
--- a/src/core/client/stream/App/TabBarContainer.tsx
+++ b/src/core/client/stream/App/TabBarContainer.tsx
@@ -7,7 +7,6 @@ import {
   withLocalStateContainer,
 } from "coral-framework/lib/relay";
 
-import { TabBarContainer_story as StoryData } from "coral-stream/__generated__/TabBarContainer_story.graphql";
 import { TabBarContainer_viewer as ViewerData } from "coral-stream/__generated__/TabBarContainer_viewer.graphql";
 import { TabBarContainerLocal as Local } from "coral-stream/__generated__/TabBarContainerLocal.graphql";
 import { Ability, can } from "coral-stream/permissions";
@@ -20,7 +19,6 @@ import {
 import TabBar from "./TabBar";
 
 interface Props {
-  story: StoryData | null;
   viewer: ViewerData | null;
   local: Local;
   setActiveTab: SetActiveTabMutation;
@@ -34,14 +32,11 @@ export class TabBarContainer extends Component<Props> {
   public render() {
     const {
       local: { loggedIn, activeTab },
-      story,
     } = this.props;
 
-    const commentCount = (story && story.commentCounts.totalVisible) || -1;
     return (
       <TabBar
         activeTab={activeTab}
-        commentCount={commentCount}
         showProfileTab={loggedIn}
         showConfigureTab={
           !!this.props.viewer &&
@@ -68,13 +63,6 @@ const enhanced = withSetActiveTabMutation(
           role
         }
       `,
-      story: graphql`
-        fragment TabBarContainer_story on Story {
-          commentCounts {
-            totalVisible
-          }
-        }
-      `,
     })(TabBarContainer)
   )
 );
diff --git a/src/core/client/stream/App/TabBarQuery.tsx b/src/core/client/stream/App/TabBarQuery.tsx
index 9023a344e..6e8a2ee4a 100644
--- a/src/core/client/stream/App/TabBarQuery.tsx
+++ b/src/core/client/stream/App/TabBarQuery.tsx
@@ -20,13 +20,10 @@ class TabBarQuery extends Component<Props> {
     return (
       <QueryRenderer<QueryTypes>
         query={graphql`
-          query TabBarQuery($storyID: ID, $storyURL: String) {
+          query TabBarQuery {
             viewer {
               ...TabBarContainer_viewer
             }
-            story(id: $storyID, url: $storyURL) {
-              ...TabBarContainer_story
-            }
           }
         `}
         variables={{
@@ -38,12 +35,7 @@ class TabBarQuery extends Component<Props> {
             return <div>{error.message}</div>;
           }
 
-          return (
-            <TabBarContainer
-              viewer={(props && props.viewer) || null}
-              story={(props && props.story) || null}
-            />
-          );
+          return <TabBarContainer viewer={(props && props.viewer) || null} />;
         }}
       />
     );
diff --git a/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap
index db9b00991..fa42a9c69 100644
--- a/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap
+++ b/src/core/client/stream/App/__snapshots__/App.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`renders correctly 1`] = `
       data-testid="current-tab-pane"
       tabID="COMMENTS"
     >
-      <withContext(withLocalStateContainer(CommentsPaneContainer)) />
+      <CommentsPane />
     </TabPane>
     <TabPane
       data-testid="current-tab-pane"
diff --git a/src/core/client/stream/common/Timestamp/Timestamp.tsx b/src/core/client/stream/common/Timestamp/Timestamp.tsx
index 54f8c5461..80b263594 100644
--- a/src/core/client/stream/common/Timestamp/Timestamp.tsx
+++ b/src/core/client/stream/common/Timestamp/Timestamp.tsx
@@ -1,3 +1,4 @@
+import cn from "classnames";
 import React from "react";
 import { FunctionComponent } from "react";
 
@@ -6,11 +7,15 @@ import { RelativeTime } from "coral-ui/components";
 import styles from "./Timestamp.css";
 
 export interface TimestampProps {
+  className?: string;
   children: string;
 }
 
 const Timestamp: FunctionComponent<TimestampProps> = props => (
-  <RelativeTime className={styles.root} date={props.children} />
+  <RelativeTime
+    className={cn(styles.root, props.className)}
+    date={props.children}
+  />
 );
 
 export default Timestamp;
diff --git a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
index 58565d4ef..583073520 100644
--- a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
+++ b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
@@ -16,12 +16,13 @@ exports[`init local state 1`] = `
     \\"accessTokenExp\\": null,
     \\"accessTokenJTI\\": null,
     \\"loggedIn\\": false,
-    \\"defaultStreamOrderBy\\": \\"CREATED_AT_DESC\\",
+    \\"commentsOrderBy\\": \\"CREATED_AT_DESC\\",
     \\"authPopup\\": {
       \\"__ref\\": \\"client:root.local.authPopup\\"
     },
     \\"activeTab\\": \\"COMMENTS\\",
-    \\"profileTab\\": \\"MY_COMMENTS\\"
+    \\"profileTab\\": \\"MY_COMMENTS\\",
+    \\"commentsTab\\": \\"ALL_COMMENTS\\"
   },
   \\"client:root.local.authPopup\\": {
     \\"__id\\": \\"client:root.local.authPopup\\",
diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts
index 50aabf326..befda585d 100644
--- a/src/core/client/stream/local/initLocalState.ts
+++ b/src/core/client/stream/local/initLocalState.ts
@@ -40,7 +40,7 @@ export default async function initLocalState(
       localRecord.setValue(query.commentID, "commentID");
     }
     // Set sort
-    localRecord.setValue("CREATED_AT_DESC", "defaultStreamOrderBy");
+    localRecord.setValue("CREATED_AT_DESC", "commentsOrderBy");
 
     // Create authPopup Record
     const authPopupRecord = createAndRetain(
@@ -57,8 +57,6 @@ export default async function initLocalState(
     // Set active tabs
     localRecord.setValue("COMMENTS", "activeTab");
     localRecord.setValue("MY_COMMENTS", "profileTab");
-
-    // Set sort
-    localRecord.setValue("CREATED_AT_DESC", "defaultStreamOrderBy");
+    localRecord.setValue("ALL_COMMENTS", "commentsTab");
   });
 }
diff --git a/src/core/client/stream/local/local.graphql b/src/core/client/stream/local/local.graphql
index baa95bc68..17f41aec9 100644
--- a/src/core/client/stream/local/local.graphql
+++ b/src/core/client/stream/local/local.graphql
@@ -14,6 +14,11 @@ enum PROFILE_TAB {
   SETTINGS
 }
 
+enum COMMENTS_TAB {
+  ALL_COMMENTS
+  FEATURED_COMMENTS
+}
+
 enum COMMENT_VIEWER_ACTION {
   EDIT
   APPROVE
@@ -47,9 +52,9 @@ type Local {
   storyID: String
   storyURL: String
   commentID: String
-  defaultStreamOrderBy: COMMENT_SORT!
+  commentsOrderBy: COMMENT_SORT!
   profileTab: PROFILE_TAB!
-  bla: [String]
+  commentsTab: COMMENTS_TAB!
 }
 
 extend type Query {
diff --git a/src/core/client/stream/shared/htmlContent.css b/src/core/client/stream/shared/htmlContent.css
index 8dac38a88..5340b0ee1 100644
--- a/src/core/client/stream/shared/htmlContent.css
+++ b/src/core/client/stream/shared/htmlContent.css
@@ -23,4 +23,10 @@
       content: none;
     }
   }
+  a {
+    color: var(--palette-primary-main);
+    &:hover {
+      color: var(--palette-primary-dark);
+    }
+  }
 }
diff --git a/src/core/client/stream/tabs/Comments/Comment/Comment.tsx b/src/core/client/stream/tabs/Comments/Comment/Comment.tsx
index d2878c5c3..64bb41bc3 100644
--- a/src/core/client/stream/tabs/Comments/Comment/Comment.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/Comment.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react";
 
 import HTMLContent from "coral-stream/common/HTMLContent";
 import Timestamp from "coral-stream/common/Timestamp";
-import { Flex, HorizontalGutter, Tag } from "coral-ui/components";
+import { Flex, HorizontalGutter } from "coral-ui/components";
 
 import EditedMarker from "./EditedMarker";
 import InReplyTo from "./InReplyTo";
@@ -21,7 +21,7 @@ export interface CommentProps {
   showEditedMarker?: boolean;
   highlight?: boolean;
   parentAuthorName?: string | null;
-  tags?: ReadonlyArray<string>;
+  userTags?: React.ReactNode;
 }
 
 const Comment: FunctionComponent<CommentProps> = props => {
@@ -34,7 +34,7 @@ const Comment: FunctionComponent<CommentProps> = props => {
         <TopBarLeft>
           <Flex direction="row" alignItems="center" itemGutter="half">
             {props.username && props.username}
-            {props.tags && props.tags.map((t, i) => <Tag key={i}>{t}</Tag>)}
+            {props.userTags}
           </Flex>
           <Flex direction="row" alignItems="baseline" itemGutter>
             <Timestamp>{props.createdAt}</Timestamp>
@@ -49,7 +49,7 @@ const Comment: FunctionComponent<CommentProps> = props => {
         </div>
       )}
 
-      <HorizontalGutter>
+      <HorizontalGutter spacing={1}>
         <HTMLContent>{props.body || ""}</HTMLContent>
         {props.footer}
       </HorizontalGutter>
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
index 5f3cac667..e43262555 100644
--- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
@@ -130,14 +130,3 @@ it("renders disabled reply when commenting has been disabled", () => {
   renderer.render(<CommentContainerN {...props} />);
   expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
-
-it("renders staff badge", () => {
-  const props = createDefaultProps({
-    comment: {
-      tags: [{ name: "Staff" }],
-    },
-  });
-  const renderer = createRenderer();
-  renderer.render(<CommentContainerN {...props} />);
-  expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
index 830e2c80f..476932000 100644
--- a/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
@@ -5,7 +5,7 @@ import { graphql } from "react-relay";
 import { isBeforeDate } from "coral-common/utils";
 import { getURLWithCommentID, roleIsAtLeast } from "coral-framework/helpers";
 import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
-import { GQLUSER_ROLE, GQLUSER_STATUS } from "coral-framework/schema";
+import { GQLTAG, GQLUSER_ROLE, GQLUSER_STATUS } from "coral-framework/schema";
 import { PropTypesOf } from "coral-framework/types";
 import { CommentContainer_comment as CommentData } from "coral-stream/__generated__/CommentContainer_comment.graphql";
 import { CommentContainer_settings as SettingsData } from "coral-stream/__generated__/CommentContainer_settings.graphql";
@@ -17,7 +17,7 @@ import {
   withSetCommentIDMutation,
   withShowAuthPopupMutation,
 } from "coral-stream/mutations";
-import { Button, Flex, HorizontalGutter } from "coral-ui/components";
+import { Button, Flex, HorizontalGutter, Tag } from "coral-ui/components";
 
 import { isCommentVisible } from "../helpers";
 import ButtonsBar from "./ButtonsBar";
@@ -33,6 +33,7 @@ import ReplyCommentFormContainer from "./ReplyCommentForm";
 import ReportButtonContainer from "./ReportButton";
 import ShowConversationLink from "./ShowConversationLink";
 import { UsernameWithPopoverContainer } from "./Username";
+import UserTagsContainer from "./UserTagsContainer";
 
 interface Props {
   viewer: ViewerData | null;
@@ -157,6 +158,20 @@ export class CommentContainer extends Component<Props, State> {
       viewer,
     } = this.props;
     const { showReplyDialog, showEditDialog, editable } = this.state;
+    const hasFeaturedTag = Boolean(
+      comment.tags.find(t => t.code === GQLTAG.FEATURED)
+    );
+    const commentTags = (
+      <>
+        {hasFeaturedTag && (
+          <Tag color="primary" variant="pill">
+            <Localized id="comments-featuredTag">
+              <span>Featured</span>
+            </Localized>
+          </Tag>
+        )}
+      </>
+    );
     const banned = Boolean(
       this.props.viewer &&
         this.props.viewer.status.current.includes(GQLUSER_STATUS.BANNED)
@@ -204,15 +219,18 @@ export class CommentContainer extends Component<Props, State> {
             }
             username={
               comment.author && (
-                <UsernameWithPopoverContainer
-                  viewer={viewer}
-                  user={comment.author}
-                />
+                <>
+                  <UsernameWithPopoverContainer
+                    viewer={viewer}
+                    user={comment.author}
+                  />
+                  <UserTagsContainer comment={comment} />
+                </>
               )
             }
-            tags={comment.tags.map(t => t.name)}
             topBarRight={
-              <Flex itemGutter>
+              <Flex alignItems="center" itemGutter>
+                {commentTags}
                 {editable && (
                   <Localized id="comments-commentContainer-editButton">
                     <Button
@@ -224,7 +242,9 @@ export class CommentContainer extends Component<Props, State> {
                     </Button>
                   </Localized>
                 )}
-                {showCaret && <CaretContainer comment={comment} />}
+                {showCaret && (
+                  <CaretContainer comment={comment} story={story} />
+                )}
               </Flex>
             }
             footer={
@@ -315,6 +335,7 @@ const enhanced = withSetCommentIDMutation(
         fragment CommentContainer_story on Story {
           url
           isClosed
+          ...CaretContainer_story
           ...ReplyCommentFormContainer_story
           ...PermalinkButtonContainer_story
           ...EditCommentFormContainer_story
@@ -341,7 +362,7 @@ const enhanced = withSetCommentIDMutation(
             editableUntil
           }
           tags {
-            name
+            code
           }
           pending
           lastViewerAction
@@ -351,6 +372,7 @@ const enhanced = withSetCommentIDMutation(
           ...ReportButtonContainer_comment
           ...CaretContainer_comment
           ...RejectedTombstoneContainer_comment
+          ...UserTagsContainer_comment
         }
       `,
       settings: graphql`
diff --git a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx
index 262c90003..b244f5310 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx
@@ -3,7 +3,8 @@ import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
-import { CaretContainer_comment as CommentData } from "coral-stream/__generated__/CaretContainer_comment.graphql";
+import { CaretContainer_comment } from "coral-stream/__generated__/CaretContainer_comment.graphql";
+import { CaretContainer_story } from "coral-stream/__generated__/CaretContainer_story.graphql";
 import { Button, ClickOutside, Icon, Popover } from "coral-ui/components";
 
 import ModerationDropdownContainer from "./ModerationDropdownContainer";
@@ -11,7 +12,8 @@ import ModerationDropdownContainer from "./ModerationDropdownContainer";
 import styles from "./CaretContainer.css";
 
 interface Props {
-  comment: CommentData;
+  comment: CaretContainer_comment;
+  story: CaretContainer_story;
 }
 
 const CaretContainer: FunctionComponent<Props> = props => {
@@ -29,6 +31,7 @@ const CaretContainer: FunctionComponent<Props> = props => {
           <ClickOutside onClickOutside={toggleVisibility}>
             <ModerationDropdownContainer
               comment={props.comment}
+              story={props.story}
               onDismiss={toggleVisibility}
             />
           </ClickOutside>
@@ -64,6 +67,11 @@ const enhanced = withFragmentContainer<Props>({
       ...ModerationDropdownContainer_comment
     }
   `,
+  story: graphql`
+    fragment CaretContainer_story on Story {
+      ...ModerationDropdownContainer_story
+    }
+  `,
 })(CaretContainer);
 
 export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/FeatureCommentMutation.ts b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/FeatureCommentMutation.ts
new file mode 100644
index 000000000..f836091ec
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/FeatureCommentMutation.ts
@@ -0,0 +1,75 @@
+import { graphql } from "react-relay";
+import { Environment, RecordSourceSelectorProxy } from "relay-runtime";
+
+import { CoralContext } from "coral-framework/lib/bootstrap";
+import {
+  commitMutationPromiseNormalized,
+  createMutation,
+  MutationInput,
+} from "coral-framework/lib/relay";
+import { GQLCOMMENT_STATUS, GQLTAG } from "coral-framework/schema";
+import { FeatureCommentMutation as MutationTypes } from "coral-stream/__generated__/FeatureCommentMutation.graphql";
+
+let clientMutationId = 0;
+
+function incrementCount(store: RecordSourceSelectorProxy, storyID: string) {
+  const storyRecord = store.get(storyID);
+  if (!storyRecord) {
+    return;
+  }
+  const commentCountsRecord = storyRecord.getLinkedRecord("commentCounts");
+  if (!commentCountsRecord) {
+    return;
+  }
+  const tagsRecord = commentCountsRecord.getLinkedRecord("tags");
+  if (tagsRecord) {
+    tagsRecord.setValue(tagsRecord.getValue("FEATURED") + 1, "FEATURED");
+  }
+}
+
+const FeatureCommentMutation = createMutation(
+  "featureComment",
+  (
+    environment: Environment,
+    input: MutationInput<MutationTypes> & { storyID: string },
+    { uuidGenerator }: CoralContext
+  ) =>
+    commitMutationPromiseNormalized<MutationTypes>(environment, {
+      mutation: graphql`
+        mutation FeatureCommentMutation($input: FeatureCommentInput!) {
+          featureComment(input: $input) {
+            comment {
+              tags {
+                code
+              }
+              status
+            }
+            clientMutationId
+          }
+        }
+      `,
+      optimisticUpdater: store => {
+        const comment = store.get(input.commentID)!;
+        const tags = comment.getLinkedRecords("tags");
+        if (tags) {
+          const newTag = store.create(uuidGenerator(), "Tag");
+          newTag.setValue(GQLTAG.FEATURED, "code");
+          comment.setLinkedRecords(tags.concat(newTag), "tags");
+          comment.setValue(GQLCOMMENT_STATUS.APPROVED, "status");
+        }
+        incrementCount(store, input.storyID);
+      },
+      updater: store => {
+        incrementCount(store, input.storyID);
+      },
+      variables: {
+        input: {
+          commentID: input.commentID,
+          commentRevisionID: input.commentRevisionID,
+          clientMutationId: (clientMutationId++).toString(),
+        },
+      },
+    })
+);
+
+export default FeatureCommentMutation;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.css b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.css
index 25e24f6bc..7662868a2 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.css
+++ b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.css
@@ -6,3 +6,7 @@
   color: var(--palette-error-dark);
   font-weight: var(--font-weight-bold);
 }
+.featured {
+  color: var(--palette-primary-dark);
+  font-weight: var(--font-weight-bold);
+}
diff --git a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.tsx
index c18bd76a6..f83850f6e 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.tsx
@@ -3,7 +3,8 @@ import React, { FunctionComponent, useCallback } from "react";
 import { graphql } from "react-relay";
 
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
-import { ModerationDropdownContainer_comment as CommentData } from "coral-stream/__generated__/ModerationDropdownContainer_comment.graphql";
+import { ModerationDropdownContainer_comment } from "coral-stream/__generated__/ModerationDropdownContainer_comment.graphql";
+import { ModerationDropdownContainer_story } from "coral-stream/__generated__/ModerationDropdownContainer_story.graphql";
 import {
   Dropdown,
   DropdownButton,
@@ -12,19 +13,26 @@ import {
 } from "coral-ui/components";
 
 import ApproveCommentMutation from "./ApproveCommentMutation";
-import styles from "./ModerationDropdownContainer.css";
+import FeatureCommentMutation from "./FeatureCommentMutation";
 import RejectCommentMutation from "./RejectCommentMutation";
+import UnfeatureCommentMutation from "./UnfeatureCommentMutation";
+
+import styles from "./ModerationDropdownContainer.css";
 
 interface Props {
-  comment: CommentData;
+  comment: ModerationDropdownContainer_comment;
+  story: ModerationDropdownContainer_story;
   onDismiss: () => void;
 }
 
 const ModerationDropdownContainer: FunctionComponent<Props> = ({
   comment,
+  story,
   onDismiss,
 }) => {
   const approve = useMutation(ApproveCommentMutation);
+  const feature = useMutation(FeatureCommentMutation);
+  const unfeature = useMutation(UnfeatureCommentMutation);
   const reject = useMutation(RejectCommentMutation);
 
   const onApprove = useCallback(() => {
@@ -35,16 +43,60 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
       reject({ commentID: comment.id, commentRevisionID: comment.revision.id }),
     [approve, comment]
   );
+  const onFeature = useCallback(() => {
+    feature({
+      storyID: story.id,
+      commentID: comment.id,
+      commentRevisionID: comment.revision.id,
+    });
+    onDismiss();
+  }, [feature, comment]);
+  const onUnfeature = useCallback(() => {
+    unfeature({
+      commentID: comment.id,
+      storyID: story.id,
+    });
+    onDismiss();
+  }, [unfeature, comment]);
 
   const approved = comment.status === "APPROVED";
   const rejected = comment.status === "REJECTED";
+  const featured = comment.tags.some(t => t.code === "FEATURED");
 
   return (
     <Dropdown>
+      {featured ? (
+        <Localized id="comments-moderationDropdown-unfeature">
+          <DropdownButton
+            icon={
+              <Icon className={styles.featured} size="md">
+                star
+              </Icon>
+            }
+            className={styles.featured}
+            onClick={onUnfeature}
+          >
+            Un-Feature
+          </DropdownButton>
+        </Localized>
+      ) : (
+        <Localized id="comments-moderationDropdown-feature">
+          <DropdownButton
+            icon={<Icon size="md">star_border</Icon>}
+            onClick={onFeature}
+          >
+            Feature
+          </DropdownButton>
+        </Localized>
+      )}
       {approved ? (
         <Localized id="comments-moderationDropdown-approved">
           <DropdownButton
-            icon={<Icon className={styles.approved}>check</Icon>}
+            icon={
+              <Icon className={styles.approved} size="md">
+                check
+              </Icon>
+            }
             className={styles.approved}
             disabled
           >
@@ -53,7 +105,10 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
         </Localized>
       ) : (
         <Localized id="comments-moderationDropdown-approve">
-          <DropdownButton icon={<Icon>check</Icon>} onClick={onApprove}>
+          <DropdownButton
+            icon={<Icon size="md">check</Icon>}
+            onClick={onApprove}
+          >
             Approve
           </DropdownButton>
         </Localized>
@@ -61,7 +116,11 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
       {rejected ? (
         <Localized id="comments-moderationDropdown-rejected">
           <DropdownButton
-            icon={<Icon className={styles.rejected}>close</Icon>}
+            icon={
+              <Icon className={styles.rejected} size="md">
+                close
+              </Icon>
+            }
             className={styles.rejected}
             disabled
           >
@@ -70,7 +129,10 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
         </Localized>
       ) : (
         <Localized id="comments-moderationDropdown-reject">
-          <DropdownButton icon={<Icon>close</Icon>} onClick={onReject}>
+          <DropdownButton
+            icon={<Icon size="md">close</Icon>}
+            onClick={onReject}
+          >
             Reject
           </DropdownButton>
         </Localized>
@@ -97,6 +159,14 @@ const enhanced = withFragmentContainer<Props>({
         id
       }
       status
+      tags {
+        code
+      }
+    }
+  `,
+  story: graphql`
+    fragment ModerationDropdownContainer_story on Story {
+      id
     }
   `,
 })(ModerationDropdownContainer);
diff --git a/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/UnfeatureCommentMutation.ts b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/UnfeatureCommentMutation.ts
new file mode 100644
index 000000000..f39e59ddd
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/UnfeatureCommentMutation.ts
@@ -0,0 +1,69 @@
+import { graphql } from "react-relay";
+import { Environment, RecordSourceSelectorProxy } from "relay-runtime";
+
+import {
+  commitMutationPromiseNormalized,
+  createMutation,
+  MutationInput,
+} from "coral-framework/lib/relay";
+import { GQLTAG } from "coral-framework/schema";
+import { UnfeatureCommentMutation as MutationTypes } from "coral-stream/__generated__/UnfeatureCommentMutation.graphql";
+
+let clientMutationId = 0;
+
+function decrementCount(store: RecordSourceSelectorProxy, storyID: string) {
+  const storyRecord = store.get(storyID);
+  if (!storyRecord) {
+    return;
+  }
+  const commentCountsRecord = storyRecord.getLinkedRecord("commentCounts");
+  if (!commentCountsRecord) {
+    return;
+  }
+  const tagsRecord = commentCountsRecord.getLinkedRecord("tags");
+  if (tagsRecord) {
+    tagsRecord.setValue(tagsRecord.getValue("FEATURED") - 1, "FEATURED");
+  }
+}
+
+const UnfeatureCommentMutation = createMutation(
+  "unfeatureComment",
+  (
+    environment: Environment,
+    input: MutationInput<MutationTypes> & { storyID: string }
+  ) =>
+    commitMutationPromiseNormalized<MutationTypes>(environment, {
+      mutation: graphql`
+        mutation UnfeatureCommentMutation($input: UnfeatureCommentInput!) {
+          unfeatureComment(input: $input) {
+            comment {
+              tags {
+                code
+              }
+            }
+            clientMutationId
+          }
+        }
+      `,
+      optimisticUpdater: store => {
+        const comment = store.get(input.commentID)!;
+        const tags = comment.getLinkedRecords("tags")!;
+        comment.setLinkedRecords(
+          tags.filter(t => t!.getValue("code") === GQLTAG.FEATURED),
+          "tags"
+        );
+        decrementCount(store, input.storyID);
+      },
+      updater: store => {
+        decrementCount(store, input.storyID);
+      },
+      variables: {
+        input: {
+          commentID: input.commentID,
+          clientMutationId: (clientMutationId++).toString(),
+        },
+      },
+    })
+);
+
+export default UnfeatureCommentMutation;
diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/CreateCommentReplyMutation.ts b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/CreateCommentReplyMutation.ts
index 58c667895..14fbe2c83 100644
--- a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/CreateCommentReplyMutation.ts
+++ b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/CreateCommentReplyMutation.ts
@@ -123,7 +123,7 @@ const mutation = graphql`
       edge {
         cursor
         node {
-          ...StreamContainer_comment @relay(mask: false)
+          ...AllCommentsTabContainer_comment @relay(mask: false)
           status
         }
       }
@@ -200,7 +200,7 @@ function commit(
               },
             },
             tags: roleIsAtLeast(viewer.role, GQLUSER_ROLE.STAFF)
-              ? [{ name: "Staff" }]
+              ? [{ code: "STAFF" }]
               : [],
             viewerActionPresence: {
               reaction: false,
diff --git a/src/core/client/stream/tabs/Comments/Comment/RootParent.tsx b/src/core/client/stream/tabs/Comments/Comment/RootParent.tsx
index 8ef3832c1..6184d5cff 100644
--- a/src/core/client/stream/tabs/Comments/Comment/RootParent.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/RootParent.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import Timestamp from "coral-stream/common/Timestamp";
-import { Flex, Tag } from "coral-ui/components";
+import { Flex } from "coral-ui/components";
 
 import TopBarLeft from "./TopBarLeft";
 import Username from "./Username";
@@ -10,7 +10,7 @@ export interface RootParentProps {
   id?: string;
   username: string | null;
   createdAt: string;
-  tags?: ReadonlyArray<string>;
+  tags: React.ReactNode;
 }
 
 const RootParent: FunctionComponent<RootParentProps> = props => {
@@ -19,7 +19,7 @@ const RootParent: FunctionComponent<RootParentProps> = props => {
       <TopBarLeft>
         <Flex direction="row" alignItems="center" itemGutter="half">
           <div>{props.username && <Username>{props.username}</Username>}</div>
-          {props.tags && props.tags.map((t, i) => <Tag key={i}>{t}</Tag>)}
+          {props.tags}
         </Flex>
         <Flex direction="row" alignItems="baseline" itemGutter>
           <Timestamp>{props.createdAt}</Timestamp>
diff --git a/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.css b/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.css
index 9d518d975..ff7670c0d 100644
--- a/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.css
+++ b/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.css
@@ -1,5 +1,4 @@
 .root {
   width: 280px;
   max-width: 80vw;
-  padding: var(--spacing-3);
 }
diff --git a/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.tsx
index 6aafd7c2f..a66c821db 100644
--- a/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.tsx
@@ -3,12 +3,7 @@ import { graphql } from "react-relay";
 
 import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import { UserIgnorePopoverContainer_user as UserData } from "coral-stream/__generated__/UserIgnorePopoverContainer_user.graphql";
-import {
-  Button,
-  Flex,
-  HorizontalGutter,
-  Typography,
-} from "coral-ui/components";
+import { Box, Button, Flex, Typography } from "coral-ui/components";
 
 import IgnoreUserMutation from "./IgnoreUserMutation";
 
@@ -30,21 +25,21 @@ export const UserIgnorePopoverContainer: FunctionComponent<Props> = ({
     onDismiss();
   }, [user.id, ignoreUser]);
   return (
-    <HorizontalGutter spacing={3} className={styles.root}>
-      <HorizontalGutter spacing={2}>
-        <Localized
-          id="comments-userIgnorePopover-ignoreUser"
-          $username={user.username}
-        >
-          <Typography variant="heading3">Ignore {user.username}?</Typography>
-        </Localized>
-        <Localized id="comments-userIgnorePopover-description">
-          <Typography variant="detail">
-            When you ignore a commenter, all comments they wrote on the site
-            will be hidden from you. You can undo this later from My Profile.
-          </Typography>
-        </Localized>
-      </HorizontalGutter>
+    <Box className={styles.root} p={3}>
+      <Localized
+        id="comments-userIgnorePopover-ignoreUser"
+        $username={user.username}
+      >
+        <Typography variant="heading3" mb={2}>
+          Ignore {user.username}?
+        </Typography>
+      </Localized>
+      <Localized id="comments-userIgnorePopover-description">
+        <Typography variant="detail" mb={3}>
+          When you ignore a commenter, all comments they wrote on the site will
+          be hidden from you. You can undo this later from My Profile.
+        </Typography>
+      </Localized>
       <Flex justifyContent="flex-end" itemGutter="half">
         <Localized id="comments-userIgnorePopover-cancel">
           <Button variant="outlined" size="small" onClick={onDismiss}>
@@ -57,7 +52,7 @@ export const UserIgnorePopoverContainer: FunctionComponent<Props> = ({
           </Button>
         </Localized>
       </Flex>
-    </HorizontalGutter>
+    </Box>
   );
 };
 
diff --git a/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx b/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx
new file mode 100644
index 000000000..4e47aff62
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx
@@ -0,0 +1,37 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
+import { UserTagsContainer_comment as CommentData } from "coral-stream/__generated__/UserTagsContainer_comment.graphql";
+import { Tag } from "coral-ui/components";
+
+interface Props {
+  comment: CommentData;
+}
+
+const UserTagsContainer: FunctionComponent<Props> = props => {
+  const { comment } = props;
+  const staffTag = comment.tags.find(t => t.code === "STAFF");
+  return (
+    <>
+      {staffTag && (
+        <Localized id="comments-staffTag">
+          <Tag>Staff</Tag>
+        </Localized>
+      )}
+    </>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  comment: graphql`
+    fragment UserTagsContainer_comment on Comment {
+      tags {
+        code
+      }
+    }
+  `,
+})(UserTagsContainer);
+
+export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Comment/Username/Username.css b/src/core/client/stream/tabs/Comments/Comment/Username/Username.css
index 2719c1c2c..baec7e39e 100644
--- a/src/core/client/stream/tabs/Comments/Comment/Username/Username.css
+++ b/src/core/client/stream/tabs/Comments/Comment/Username/Username.css
@@ -1,5 +1,5 @@
 .root {
-  line-height: 0;
+  line-height: 1;
 }
 .popover {
   width: 232px;
diff --git a/src/core/client/stream/tabs/Comments/Comment/Username/Username.spec.tsx b/src/core/client/stream/tabs/Comments/Comment/Username/Username.spec.tsx
deleted file mode 100644
index 3b7fb6e0d..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/Username/Username.spec.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import TestRenderer from "react-test-renderer";
-
-import { PropTypesOf } from "coral-framework/types";
-import { UIContext, UIContextProps } from "coral-ui/components";
-
-import Username from "./Username";
-
-it("renders correctly on small screens", () => {
-  const props: PropTypesOf<typeof Username> = {
-    children: "Marvin",
-  };
-
-  const context: UIContextProps = {
-    mediaQueryValues: {
-      width: 320,
-    },
-  };
-
-  const testRenderer = TestRenderer.create(
-    <UIContext.Provider value={context}>
-      <Username {...props} />
-    </UIContext.Provider>
-  );
-  expect(testRenderer.toJSON()).toMatchSnapshot();
-});
-
-it("renders correctly on big screens", () => {
-  const props: PropTypesOf<typeof Username> = {
-    children: "Marvin",
-  };
-
-  const context: UIContextProps = {
-    mediaQueryValues: {
-      width: 1600,
-    },
-  };
-
-  const testRenderer = TestRenderer.create(
-    <UIContext.Provider value={context}>
-      <Username {...props} />
-    </UIContext.Provider>
-  );
-  expect(testRenderer.toJSON()).toMatchSnapshot();
-});
diff --git a/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx b/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx
index 81177afe7..3cf0c0a6b 100644
--- a/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx
+++ b/src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FunctionComponent } from "react";
 
-import { MatchMedia, Typography } from "coral-ui/components";
+import { Typography } from "coral-ui/components";
 
 import styles from "./Username.css";
 
@@ -11,17 +11,9 @@ interface Props {
 
 const Username: FunctionComponent<Props> = props => {
   return (
-    <MatchMedia gtWidth="xs">
-      {matches => (
-        <Typography
-          variant={matches ? "heading2" : "heading3"}
-          className={styles.root}
-          container="span"
-        >
-          {props.children}
-        </Typography>
-      )}
-    </MatchMedia>
+    <Typography variant={"heading3"} className={styles.root} container="span">
+      {props.children}
+    </Typography>
   );
 };
 
diff --git a/src/core/client/stream/tabs/Comments/Comment/Username/__snapshots__/Username.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/Username/__snapshots__/Username.spec.tsx.snap
deleted file mode 100644
index 54224f9b0..000000000
--- a/src/core/client/stream/tabs/Comments/Comment/Username/__snapshots__/Username.spec.tsx.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly on big screens 1`] = `
-<span
-  className="Typography-root Typography-heading2 Typography-colorTextPrimary Username-root"
->
-  Marvin
-</span>
-`;
-
-exports[`renders correctly on small screens 1`] = `
-<span
-  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
->
-  Marvin
-</span>
-`;
diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap
index ffb57ac39..7be849284 100644
--- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -32,7 +32,9 @@ exports[`renders username and body 1`] = `
       topBarRight
     </div>
   </ForwardRef(forwardRef)>
-  <ForwardRef(forwardRef)>
+  <ForwardRef(forwardRef)
+    spacing={1}
+  >
     <HTMLContent>
       Woof
     </HTMLContent>
diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
index 3dd70a7b3..e00b85a0a 100644
--- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
@@ -87,22 +87,48 @@ exports[`hide reply button 1`] = `
       indentLevel={1}
       parentAuthorName={null}
       showEditedMarker={false}
-      tags={Array []}
       topBarRight={
         <ForwardRef(forwardRef)
+          alignItems="center"
           itemGutter={true}
-        />
+        >
+          <React.Fragment />
+        </ForwardRef(forwardRef)>
       }
       username={
-        <Relay(UsernameWithPopoverContainer)
-          user={
-            Object {
-              "id": "author-id",
-              "username": "Marvin",
+        <React.Fragment>
+          <Relay(UsernameWithPopoverContainer)
+            user={
+              Object {
+                "id": "author-id",
+                "username": "Marvin",
+              }
             }
-          }
-          viewer={null}
-        />
+            viewer={null}
+          />
+          <Relay(UserTagsContainer)
+            comment={
+              Object {
+                "author": Object {
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
+              }
+            }
+          />
+        </React.Fragment>
       }
     />
   </ForwardRef(forwardRef)>
@@ -202,22 +228,48 @@ exports[`renders body only 1`] = `
       indentLevel={1}
       parentAuthorName={null}
       showEditedMarker={false}
-      tags={Array []}
       topBarRight={
         <ForwardRef(forwardRef)
+          alignItems="center"
           itemGutter={true}
-        />
+        >
+          <React.Fragment />
+        </ForwardRef(forwardRef)>
       }
       username={
-        <Relay(UsernameWithPopoverContainer)
-          user={
-            Object {
-              "id": "author-id",
-              "username": null,
+        <React.Fragment>
+          <Relay(UsernameWithPopoverContainer)
+            user={
+              Object {
+                "id": "author-id",
+                "username": null,
+              }
             }
-          }
-          viewer={null}
-        />
+            viewer={null}
+          />
+          <Relay(UserTagsContainer)
+            comment={
+              Object {
+                "author": Object {
+                  "id": "author-id",
+                  "username": null,
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
+              }
+            }
+          />
+        </React.Fragment>
       }
     />
   </ForwardRef(forwardRef)>
@@ -317,22 +369,48 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
       indentLevel={1}
       parentAuthorName={null}
       showEditedMarker={false}
-      tags={Array []}
       topBarRight={
         <ForwardRef(forwardRef)
+          alignItems="center"
           itemGutter={true}
-        />
+        >
+          <React.Fragment />
+        </ForwardRef(forwardRef)>
       }
       username={
-        <Relay(UsernameWithPopoverContainer)
-          user={
-            Object {
-              "id": "author-id",
-              "username": "Marvin",
+        <React.Fragment>
+          <Relay(UsernameWithPopoverContainer)
+            user={
+              Object {
+                "id": "author-id",
+                "username": "Marvin",
+              }
             }
-          }
-          viewer={null}
-        />
+            viewer={null}
+          />
+          <Relay(UserTagsContainer)
+            comment={
+              Object {
+                "author": Object {
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
+              }
+            }
+          />
+        </React.Fragment>
       }
     />
   </ForwardRef(forwardRef)>
@@ -432,22 +510,48 @@ exports[`renders disabled reply when story is closed 1`] = `
       indentLevel={1}
       parentAuthorName={null}
       showEditedMarker={false}
-      tags={Array []}
       topBarRight={
         <ForwardRef(forwardRef)
+          alignItems="center"
           itemGutter={true}
-        />
+        >
+          <React.Fragment />
+        </ForwardRef(forwardRef)>
       }
       username={
-        <Relay(UsernameWithPopoverContainer)
-          user={
-            Object {
-              "id": "author-id",
-              "username": "Marvin",
+        <React.Fragment>
+          <Relay(UsernameWithPopoverContainer)
+            user={
+              Object {
+                "id": "author-id",
+                "username": "Marvin",
+              }
             }
-          }
-          viewer={null}
-        />
+            viewer={null}
+          />
+          <Relay(UserTagsContainer)
+            comment={
+              Object {
+                "author": Object {
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
+              }
+            }
+          />
+        </React.Fragment>
       }
     />
   </ForwardRef(forwardRef)>
@@ -555,149 +659,52 @@ exports[`renders in reply to 1`] = `
       indentLevel={1}
       parentAuthorName="ParentAuthor"
       showEditedMarker={false}
-      tags={Array []}
       topBarRight={
         <ForwardRef(forwardRef)
+          alignItems="center"
           itemGutter={true}
-        />
+        >
+          <React.Fragment />
+        </ForwardRef(forwardRef)>
       }
       username={
-        <Relay(UsernameWithPopoverContainer)
-          user={
-            Object {
-              "id": "author-id",
-              "username": "Marvin",
-            }
-          }
-          viewer={null}
-        />
-      }
-    />
-  </ForwardRef(forwardRef)>
-</div>
-`;
-
-exports[`renders staff badge 1`] = `
-<div
-  data-testid="comment-comment-id"
->
-  <ForwardRef(forwardRef)>
-    <IndentedComment
-      blur={false}
-      body="Woof"
-      createdAt="1995-12-17T03:24:00.000Z"
-      footer={
         <React.Fragment>
-          <ForwardRef(forwardRef)
-            justifyContent="space-between"
-          >
-            <ButtonsBar>
-              <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
-                comment={
-                  Object {
-                    "author": Object {
-                      "id": "author-id",
-                      "username": "Marvin",
-                    },
-                    "body": "Woof",
-                    "createdAt": "1995-12-17T03:24:00.000Z",
-                    "editing": Object {
-                      "editableUntil": "1995-12-17T03:24:30.000Z",
-                      "edited": false,
-                    },
-                    "id": "comment-id",
-                    "lastViewerAction": null,
-                    "parent": null,
-                    "pending": false,
-                    "status": "NONE",
-                    "tags": Array [
-                      Object {
-                        "name": "Staff",
-                      },
-                    ],
-                  }
-                }
-                readOnly={false}
-                settings={
-                  Object {
-                    "disableCommenting": Object {
-                      "enabled": false,
-                    },
-                  }
-                }
-                viewer={null}
-              />
-              <ReplyButton
-                active={false}
-                disabled={false}
-                id="comments-commentContainer-replyButton-comment-id"
-                onClick={[Function]}
-              />
-              <Relay(PermalinkButtonContainer)
-                commentID="comment-id"
-                story={
-                  Object {
-                    "isClosed": false,
-                    "url": "http://localhost/story",
-                  }
-                }
-              />
-            </ButtonsBar>
-            <ButtonsBar>
-              <withContext(createMutationContainer(Relay(ReportButtonContainer)))
-                comment={
-                  Object {
-                    "author": Object {
-                      "id": "author-id",
-                      "username": "Marvin",
-                    },
-                    "body": "Woof",
-                    "createdAt": "1995-12-17T03:24:00.000Z",
-                    "editing": Object {
-                      "editableUntil": "1995-12-17T03:24:30.000Z",
-                      "edited": false,
-                    },
-                    "id": "comment-id",
-                    "lastViewerAction": null,
-                    "parent": null,
-                    "pending": false,
-                    "status": "NONE",
-                    "tags": Array [
-                      Object {
-                        "name": "Staff",
-                      },
-                    ],
-                  }
-                }
-                viewer={null}
-              />
-            </ButtonsBar>
-          </ForwardRef(forwardRef)>
-        </React.Fragment>
-      }
-      indentLevel={1}
-      parentAuthorName={null}
-      showEditedMarker={false}
-      tags={
-        Array [
-          "Staff",
-        ]
-      }
-      topBarRight={
-        <ForwardRef(forwardRef)
-          itemGutter={true}
-        />
-      }
-      username={
-        <Relay(UsernameWithPopoverContainer)
-          user={
-            Object {
-              "id": "author-id",
-              "username": "Marvin",
+          <Relay(UsernameWithPopoverContainer)
+            user={
+              Object {
+                "id": "author-id",
+                "username": "Marvin",
+              }
             }
-          }
-          viewer={null}
-        />
+            viewer={null}
+          />
+          <Relay(UserTagsContainer)
+            comment={
+              Object {
+                "author": Object {
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": Object {
+                  "author": Object {
+                    "username": "ParentAuthor",
+                  },
+                },
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
+              }
+            }
+          />
+        </React.Fragment>
       }
     />
   </ForwardRef(forwardRef)>
@@ -797,22 +804,48 @@ exports[`renders username and body 1`] = `
       indentLevel={1}
       parentAuthorName={null}
       showEditedMarker={false}
-      tags={Array []}
       topBarRight={
         <ForwardRef(forwardRef)
+          alignItems="center"
           itemGutter={true}
-        />
+        >
+          <React.Fragment />
+        </ForwardRef(forwardRef)>
       }
       username={
-        <Relay(UsernameWithPopoverContainer)
-          user={
-            Object {
-              "id": "author-id",
-              "username": "Marvin",
+        <React.Fragment>
+          <Relay(UsernameWithPopoverContainer)
+            user={
+              Object {
+                "id": "author-id",
+                "username": "Marvin",
+              }
             }
-          }
-          viewer={null}
-        />
+            viewer={null}
+          />
+          <Relay(UserTagsContainer)
+            comment={
+              Object {
+                "author": Object {
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
+              }
+            }
+          />
+        </React.Fragment>
       }
     />
   </ForwardRef(forwardRef)>
@@ -917,22 +950,48 @@ exports[`shows conversation link 1`] = `
       indentLevel={1}
       parentAuthorName={null}
       showEditedMarker={false}
-      tags={Array []}
       topBarRight={
         <ForwardRef(forwardRef)
+          alignItems="center"
           itemGutter={true}
-        />
+        >
+          <React.Fragment />
+        </ForwardRef(forwardRef)>
       }
       username={
-        <Relay(UsernameWithPopoverContainer)
-          user={
-            Object {
-              "id": "author-id",
-              "username": "Marvin",
+        <React.Fragment>
+          <Relay(UsernameWithPopoverContainer)
+            user={
+              Object {
+                "id": "author-id",
+                "username": "Marvin",
+              }
             }
-          }
-          viewer={null}
-        />
+            viewer={null}
+          />
+          <Relay(UserTagsContainer)
+            comment={
+              Object {
+                "author": Object {
+                  "id": "author-id",
+                  "username": "Marvin",
+                },
+                "body": "Woof",
+                "createdAt": "1995-12-17T03:24:00.000Z",
+                "editing": Object {
+                  "editableUntil": "1995-12-17T03:24:30.000Z",
+                  "edited": false,
+                },
+                "id": "comment-id",
+                "lastViewerAction": null,
+                "parent": null,
+                "pending": false,
+                "status": "NONE",
+                "tags": Array [],
+              }
+            }
+          />
+        </React.Fragment>
       }
     />
   </ForwardRef(forwardRef)>
diff --git a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/TopBarLeft.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/TopBarLeft.spec.tsx.snap
index 3fb190943..6b9941c63 100644
--- a/src/core/client/stream/tabs/Comments/Comment/__snapshots__/TopBarLeft.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Comment/__snapshots__/TopBarLeft.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly on big screens 1`] = `
 <div
-  className="Flex-root Flex-flex Flex-itemGutter Flex-alignFlexEnd Flex-directionRow"
+  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignFlexEnd Flex-directionRow gutter"
 >
   <div>
     Hello World
@@ -12,7 +12,7 @@ exports[`renders correctly on big screens 1`] = `
 
 exports[`renders correctly on small screens 1`] = `
 <div
-  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
 >
   <div>
     Hello World
diff --git a/src/core/client/stream/tabs/Comments/Comment/index.ts b/src/core/client/stream/tabs/Comments/Comment/index.ts
index cb8c77108..bd13d8ecc 100644
--- a/src/core/client/stream/tabs/Comments/Comment/index.ts
+++ b/src/core/client/stream/tabs/Comments/Comment/index.ts
@@ -5,3 +5,4 @@ export { default as ButtonsBar } from "./ButtonsBar";
 export { default as ShowConversationLink } from "./ShowConversationLink";
 export { default as RootParent } from "./RootParent";
 export { default as IndentedComment } from "./IndentedComment";
+export { default as UserTagsContainer } from "./UserTagsContainer";
diff --git a/src/core/client/stream/tabs/Comments/CommentsPane.spec.tsx b/src/core/client/stream/tabs/Comments/CommentsPane.spec.tsx
deleted file mode 100644
index 128d41954..000000000
--- a/src/core/client/stream/tabs/Comments/CommentsPane.spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { PropTypesOf } from "coral-framework/types";
-
-import CommentsPane from "./CommentsPane";
-
-it("renders stream", () => {
-  const props: PropTypesOf<typeof CommentsPane> = {
-    showPermalinkView: false,
-  };
-  const renderer = createRenderer();
-  renderer.render(<CommentsPane {...props} />);
-  expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
-
-it("renders permalink view", () => {
-  const props: PropTypesOf<typeof CommentsPane> = {
-    showPermalinkView: true,
-  };
-  const renderer = createRenderer();
-  renderer.render(<CommentsPane {...props} />);
-  expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/stream/tabs/Comments/CommentsPane.tsx b/src/core/client/stream/tabs/Comments/CommentsPane.tsx
index 0dae747bd..9ec67fb59 100644
--- a/src/core/client/stream/tabs/Comments/CommentsPane.tsx
+++ b/src/core/client/stream/tabs/Comments/CommentsPane.tsx
@@ -1,15 +1,23 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
 
+import { graphql, useLocal } from "coral-framework/lib/relay";
+import { CommentsPaneLocal } from "coral-stream/__generated__/CommentsPaneLocal.graphql";
+
 import PermalinkView from "./PermalinkView";
 import Stream from "./Stream";
 
-export interface CommentsPaneProps {
-  showPermalinkView: boolean;
-}
-
-const CommentsPane: FunctionComponent<CommentsPaneProps> = props => {
-  return props.showPermalinkView ? <PermalinkView /> : <Stream />;
+const CommentsPane: FunctionComponent = () => {
+  const [local] = useLocal<CommentsPaneLocal>(graphql`
+    fragment CommentsPaneLocal on Local {
+      commentID
+    }
+  `);
+  const showPermalinkView = Boolean(local.commentID);
+  if (showPermalinkView) {
+    return <PermalinkView />;
+  }
+  return <Stream />;
 };
 
 export default CommentsPane;
diff --git a/src/core/client/stream/tabs/Comments/CommentsPaneContainer.tsx b/src/core/client/stream/tabs/Comments/CommentsPaneContainer.tsx
deleted file mode 100644
index 2abbc8411..000000000
--- a/src/core/client/stream/tabs/Comments/CommentsPaneContainer.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-import { FunctionComponent } from "react";
-
-import { graphql, withLocalStateContainer } from "coral-framework/lib/relay";
-import { CommentsPaneContainerLocal as Local } from "coral-stream/__generated__/CommentsPaneContainerLocal.graphql";
-
-import CommentsPane from "./CommentsPane";
-
-interface Props {
-  local: Local;
-}
-
-const CommentsPaneContainer: FunctionComponent<Props> = ({
-  local: { commentID },
-}) => {
-  return <CommentsPane showPermalinkView={!!commentID} />;
-};
-
-const enhanced = withLocalStateContainer(
-  graphql`
-    fragment CommentsPaneContainerLocal on Local {
-      commentID
-    }
-  `
-)(CommentsPaneContainer);
-
-export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThread.spec.tsx b/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThread.spec.tsx
deleted file mode 100644
index 4b1859a12..000000000
--- a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThread.spec.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { noop } from "lodash";
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { pureMerge } from "coral-common/utils";
-import { removeFragmentRefs } from "coral-framework/testHelpers";
-import { DeepPartial, PropTypesOf } from "coral-framework/types";
-
-import ConversationThread from "./ConversationThread";
-
-const ConversationThreadN = removeFragmentRefs(ConversationThread);
-
-type Props = PropTypesOf<typeof ConversationThreadN>;
-
-function createDefaultProps(add: DeepPartial<Props> = {}): Props {
-  return pureMerge(
-    {
-      className: "root",
-      viewer: {},
-      story: {},
-      settings: {},
-      comment: {},
-      disableLoadMore: false,
-      loadMore: noop,
-      remaining: 2,
-      parents: [],
-      rootParent: {
-        id: "root-parent",
-        createdAt: "1995-12-17T03:24:00.000Z",
-        username: "parentAuthor",
-        tags: [],
-      },
-    },
-    add
-  );
-}
-
-describe("with 2 remaining parent comments", () => {
-  it("renders correctly", () => {
-    const props = createDefaultProps();
-    const renderer = createRenderer();
-    renderer.render(<ConversationThreadN {...props} />);
-    expect(renderer.getRenderOutput()).toMatchSnapshot();
-  });
-  it("renders staff badge", () => {
-    const props = createDefaultProps({
-      rootParent: {
-        tags: ["Staff"],
-      },
-    });
-    const renderer = createRenderer();
-    renderer.render(<ConversationThreadN {...props} />);
-    expect(renderer.getRenderOutput()).toMatchSnapshot();
-  });
-  it("renders with disabled load more", () => {
-    const props = createDefaultProps({
-      disableLoadMore: true,
-    });
-    const renderer = createRenderer();
-    renderer.render(<ConversationThreadN {...props} />);
-    expect(renderer.getRenderOutput()).toMatchSnapshot();
-  });
-});
-
-it("renders with no parent comments", () => {
-  const props = createDefaultProps({
-    remaining: 0,
-    rootParent: null,
-  });
-  const renderer = createRenderer();
-  renderer.render(<ConversationThreadN {...props} />);
-  expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThread.tsx b/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThread.tsx
deleted file mode 100644
index 24bafe7c2..000000000
--- a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThread.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import cn from "classnames";
-import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent } from "react";
-
-import { PropTypesOf } from "coral-framework/types";
-import { Button, Counter, Flex, HorizontalGutter } from "coral-ui/components";
-
-import {
-  CommentContainer,
-  RootParent,
-} from "coral-stream/tabs/Comments/Comment";
-import LocalReplyListContainer from "coral-stream/tabs/Comments/ReplyList/LocalReplyListContainer";
-
-import { Circle, Line } from "./Timeline";
-
-import styles from "./ConversationThread.css";
-
-export interface ConversationThreadProps {
-  className?: string;
-  viewer: PropTypesOf<typeof CommentContainer>["viewer"] &
-    (PropTypesOf<typeof LocalReplyListContainer>["viewer"] | null);
-  story: PropTypesOf<typeof CommentContainer>["story"] &
-    PropTypesOf<typeof LocalReplyListContainer>["story"];
-  settings: PropTypesOf<typeof CommentContainer>["settings"] &
-    PropTypesOf<typeof LocalReplyListContainer>["settings"];
-  comment: PropTypesOf<typeof CommentContainer>["comment"];
-  disableLoadMore: boolean;
-  loadMore: () => void;
-  remaining: number;
-  parents: Array<
-    { id: string } & PropTypesOf<typeof CommentContainer>["comment"] &
-      PropTypesOf<typeof LocalReplyListContainer>["comment"]
-  >;
-  rootParent: {
-    id: string;
-    createdAt: string;
-    username: string | null;
-    tags: ReadonlyArray<string>;
-  } | null;
-}
-
-const ConversationThread: FunctionComponent<
-  ConversationThreadProps
-> = props => {
-  const dataTestID = "comments-permalinkView-conversationThread";
-  if (props.remaining === 0 && props.parents.length === 0) {
-    return (
-      <div
-        className={cn(props.className, styles.root)}
-        data-testid={dataTestID}
-      >
-        <CommentContainer
-          comment={props.comment}
-          story={props.story}
-          settings={props.settings}
-          viewer={props.viewer}
-          highlight
-        />
-      </div>
-    );
-  }
-  return (
-    <div className={cn(props.className, styles.root)} data-testid={dataTestID}>
-      <HorizontalGutter container={<Line dotted />}>
-        {props.rootParent && (
-          <Circle>
-            <RootParent
-              id={props.rootParent.id}
-              username={props.rootParent.username}
-              createdAt={props.rootParent.createdAt}
-              tags={props.rootParent.tags}
-            />
-          </Circle>
-        )}
-        {props.remaining > 0 && (
-          <Circle hollow className={styles.loadMore}>
-            <Flex alignItems="center" itemGutter="half">
-              <Localized
-                id="comments-conversationThread-showMoreOfThisConversation"
-                $count={props.remaining}
-              >
-                <Button
-                  className={styles.showMoreButton}
-                  onClick={props.loadMore}
-                  disabled={props.disableLoadMore}
-                  variant="underlined"
-                >
-                  Show more of this conversation
-                </Button>
-              </Localized>
-              {props.remaining > 1 && <Counter>{props.remaining}</Counter>}
-            </Flex>
-          </Circle>
-        )}
-      </HorizontalGutter>
-      <HorizontalGutter container={Line}>
-        {props.parents.map((parent, i) => (
-          <Circle key={parent.id} hollow={!!props.remaining || i > 0}>
-            <CommentContainer
-              comment={parent}
-              story={props.story}
-              viewer={props.viewer}
-              settings={props.settings}
-              localReply
-            />
-            {props.viewer && (
-              <LocalReplyListContainer
-                story={props.story}
-                viewer={props.viewer}
-                settings={props.settings}
-                comment={parent}
-                indentLevel={1}
-              />
-            )}
-          </Circle>
-        ))}
-        <Circle end>
-          <CommentContainer
-            comment={props.comment}
-            story={props.story}
-            settings={props.settings}
-            viewer={props.viewer}
-            highlight
-          />
-        </Circle>
-      </HorizontalGutter>
-    </div>
-  );
-};
-
-export default ConversationThread;
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThread.css b/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.css
similarity index 100%
rename from src/core/client/stream/tabs/Comments/PermalinkView/ConversationThread.css
rename to src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.css
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx b/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx
index c1fac0f89..ff52d380a 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx
@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import { Child as PymChild } from "pym.js";
 import React from "react";
 import { graphql, RelayPaginationProp } from "react-relay";
@@ -13,8 +14,17 @@ import {
   SetCommentIDMutation,
   withSetCommentIDMutation,
 } from "coral-stream/mutations";
+import {
+  CommentContainer,
+  RootParent,
+  UserTagsContainer,
+} from "coral-stream/tabs/Comments/Comment";
+import LocalReplyListContainer from "coral-stream/tabs/Comments/ReplyList/LocalReplyListContainer";
+import { Button, Counter, Flex, HorizontalGutter } from "coral-ui/components";
 
-import ConversationThread from "./ConversationThread";
+import { Circle, Line } from "./Timeline";
+
+import styles from "./ConversationThreadContainer.css";
 
 interface ConversationThreadContainerProps {
   comment: CommentData;
@@ -52,30 +62,91 @@ class ConversationThreadContainer extends React.Component<
 
   public render() {
     const { comment, story, viewer, settings } = this.props;
+    const parents = comment.parents.edges.map(edge => edge.node);
+    const remaining = comment.parentCount - comment.parents.edges.length;
     const hasMore = this.props.relay.hasMore();
+    const rootParent = hasMore && comment && comment.rootParent;
+
+    const dataTestID = "comments-permalinkView-conversationThread";
+    if (remaining === 0 && parents.length === 0) {
+      return (
+        <div className={styles.root} data-testid={dataTestID}>
+          <CommentContainer
+            comment={comment}
+            story={story}
+            settings={settings}
+            viewer={viewer}
+            highlight
+          />
+        </div>
+      );
+    }
     return (
-      <ConversationThread
-        viewer={viewer}
-        story={story}
-        comment={comment}
-        settings={settings}
-        parents={comment.parents.edges.map(edge => edge.node)}
-        disableLoadMore={this.state.disableLoadMore}
-        loadMore={this.loadMore}
-        remaining={comment.parentCount - comment.parents.edges.length}
-        rootParent={
-          (hasMore &&
-            comment &&
-            comment.rootParent && {
-              id: comment.rootParent.id,
-              createdAt: comment.rootParent.createdAt,
-              username:
-                comment.rootParent.author && comment.rootParent.author.username,
-              tags: comment.rootParent.tags.map(t => t.name),
-            }) ||
-          null
-        }
-      />
+      <div className={styles.root} data-testid={dataTestID}>
+        <HorizontalGutter container={<Line dotted />}>
+          {rootParent && (
+            <Circle>
+              <RootParent
+                id={rootParent.id}
+                username={rootParent.author && rootParent.author.username}
+                createdAt={rootParent.createdAt}
+                tags={<UserTagsContainer comment={rootParent} />}
+              />
+            </Circle>
+          )}
+          {remaining > 0 && (
+            <Circle hollow className={styles.loadMore}>
+              <Flex alignItems="center" itemGutter="half">
+                <Localized
+                  id="comments-conversationThread-showMoreOfThisConversation"
+                  $count={remaining}
+                >
+                  <Button
+                    className={styles.showMoreButton}
+                    onClick={this.loadMore}
+                    disabled={this.state.disableLoadMore}
+                    variant="underlined"
+                  >
+                    Show more of this conversation
+                  </Button>
+                </Localized>
+                {remaining > 1 && <Counter color="dark">{remaining}</Counter>}
+              </Flex>
+            </Circle>
+          )}
+        </HorizontalGutter>
+        <HorizontalGutter container={Line}>
+          {parents.map((parent, i) => (
+            <Circle key={parent.id} hollow={!!remaining || i > 0}>
+              <CommentContainer
+                comment={parent}
+                story={story}
+                viewer={viewer}
+                settings={settings}
+                localReply
+              />
+              {viewer && (
+                <LocalReplyListContainer
+                  story={story}
+                  viewer={viewer}
+                  settings={settings}
+                  comment={parent}
+                  indentLevel={1}
+                />
+              )}
+            </Circle>
+          ))}
+          <Circle end>
+            <CommentContainer
+              comment={comment}
+              story={story}
+              settings={settings}
+              viewer={viewer}
+              highlight
+            />
+          </Circle>
+        </HorizontalGutter>
+      </div>
     );
   }
 }
@@ -123,9 +194,7 @@ const enhanced = withContext(ctx => ({
                 username
               }
               createdAt
-              tags {
-                name
-              }
+              ...UserTagsContainer_comment
             }
             parentCount
             parents(last: $count, before: $cursor)
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkViewQuery.tsx b/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkViewQuery.tsx
index c8b6eb986..a2d09bb69 100644
--- a/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkViewQuery.tsx
+++ b/src/core/client/stream/tabs/Comments/PermalinkView/PermalinkViewQuery.tsx
@@ -51,36 +51,38 @@ export const render = ({
 
 const PermalinkViewQuery: FunctionComponent<Props> = ({
   local: { commentID, storyID, storyURL },
-}) => (
-  <QueryRenderer<QueryTypes>
-    query={graphql`
-      query PermalinkViewQuery(
-        $commentID: ID!
-        $storyID: ID
-        $storyURL: String
-      ) {
-        viewer {
-          ...PermalinkViewContainer_viewer
+}) => {
+  return (
+    <QueryRenderer<QueryTypes>
+      query={graphql`
+        query PermalinkViewQuery(
+          $commentID: ID!
+          $storyID: ID
+          $storyURL: String
+        ) {
+          viewer {
+            ...PermalinkViewContainer_viewer
+          }
+          story(id: $storyID, url: $storyURL) {
+            ...PermalinkViewContainer_story
+          }
+          comment(id: $commentID) {
+            ...PermalinkViewContainer_comment
+          }
+          settings {
+            ...PermalinkViewContainer_settings
+          }
         }
-        story(id: $storyID, url: $storyURL) {
-          ...PermalinkViewContainer_story
-        }
-        comment(id: $commentID) {
-          ...PermalinkViewContainer_comment
-        }
-        settings {
-          ...PermalinkViewContainer_settings
-        }
-      }
-    `}
-    variables={{
-      commentID: commentID!,
-      storyID,
-      storyURL,
-    }}
-    render={render}
-  />
-);
+      `}
+      variables={{
+        commentID: commentID!,
+        storyID,
+        storyURL,
+      }}
+      render={render}
+    />
+  );
+};
 
 const enhanced = withLocalStateContainer(
   graphql`
diff --git a/src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/ConversationThread.spec.tsx.snap b/src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/ConversationThread.spec.tsx.snap
deleted file mode 100644
index a4c7391ba..000000000
--- a/src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/ConversationThread.spec.tsx.snap
+++ /dev/null
@@ -1,215 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders with no parent comments 1`] = `
-<div
-  className="root ConversationThread-root"
-  data-testid="comments-permalinkView-conversationThread"
->
-  <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-    comment={Object {}}
-    highlight={true}
-    settings={Object {}}
-    story={Object {}}
-    viewer={Object {}}
-  />
-</div>
-`;
-
-exports[`with 2 remaining parent comments renders correctly 1`] = `
-<div
-  className="root ConversationThread-root"
-  data-testid="comments-permalinkView-conversationThread"
->
-  <ForwardRef(forwardRef)
-    container={
-      <Line
-        dotted={true}
-      />
-    }
-  >
-    <Circle>
-      <RootParent
-        createdAt="1995-12-17T03:24:00.000Z"
-        id="root-parent"
-        tags={Array []}
-        username="parentAuthor"
-      />
-    </Circle>
-    <Circle
-      className="ConversationThread-loadMore"
-      hollow={true}
-    >
-      <ForwardRef(forwardRef)
-        alignItems="center"
-        itemGutter="half"
-      >
-        <Localized
-          $count={2}
-          id="comments-conversationThread-showMoreOfThisConversation"
-        >
-          <ForwardRef(forwardRef)
-            className="ConversationThread-showMoreButton"
-            disabled={false}
-            onClick={[Function]}
-            variant="underlined"
-          >
-            Show more of this conversation
-          </ForwardRef(forwardRef)>
-        </Localized>
-        <withPropsOnChange(Counter)>
-          2
-        </withPropsOnChange(Counter)>
-      </ForwardRef(forwardRef)>
-    </Circle>
-  </ForwardRef(forwardRef)>
-  <ForwardRef(forwardRef)
-    container={[Function]}
-  >
-    <Circle
-      end={true}
-    >
-      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-        comment={Object {}}
-        highlight={true}
-        settings={Object {}}
-        story={Object {}}
-        viewer={Object {}}
-      />
-    </Circle>
-  </ForwardRef(forwardRef)>
-</div>
-`;
-
-exports[`with 2 remaining parent comments renders staff badge 1`] = `
-<div
-  className="root ConversationThread-root"
-  data-testid="comments-permalinkView-conversationThread"
->
-  <ForwardRef(forwardRef)
-    container={
-      <Line
-        dotted={true}
-      />
-    }
-  >
-    <Circle>
-      <RootParent
-        createdAt="1995-12-17T03:24:00.000Z"
-        id="root-parent"
-        tags={
-          Array [
-            "Staff",
-          ]
-        }
-        username="parentAuthor"
-      />
-    </Circle>
-    <Circle
-      className="ConversationThread-loadMore"
-      hollow={true}
-    >
-      <ForwardRef(forwardRef)
-        alignItems="center"
-        itemGutter="half"
-      >
-        <Localized
-          $count={2}
-          id="comments-conversationThread-showMoreOfThisConversation"
-        >
-          <ForwardRef(forwardRef)
-            className="ConversationThread-showMoreButton"
-            disabled={false}
-            onClick={[Function]}
-            variant="underlined"
-          >
-            Show more of this conversation
-          </ForwardRef(forwardRef)>
-        </Localized>
-        <withPropsOnChange(Counter)>
-          2
-        </withPropsOnChange(Counter)>
-      </ForwardRef(forwardRef)>
-    </Circle>
-  </ForwardRef(forwardRef)>
-  <ForwardRef(forwardRef)
-    container={[Function]}
-  >
-    <Circle
-      end={true}
-    >
-      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-        comment={Object {}}
-        highlight={true}
-        settings={Object {}}
-        story={Object {}}
-        viewer={Object {}}
-      />
-    </Circle>
-  </ForwardRef(forwardRef)>
-</div>
-`;
-
-exports[`with 2 remaining parent comments renders with disabled load more 1`] = `
-<div
-  className="root ConversationThread-root"
-  data-testid="comments-permalinkView-conversationThread"
->
-  <ForwardRef(forwardRef)
-    container={
-      <Line
-        dotted={true}
-      />
-    }
-  >
-    <Circle>
-      <RootParent
-        createdAt="1995-12-17T03:24:00.000Z"
-        id="root-parent"
-        tags={Array []}
-        username="parentAuthor"
-      />
-    </Circle>
-    <Circle
-      className="ConversationThread-loadMore"
-      hollow={true}
-    >
-      <ForwardRef(forwardRef)
-        alignItems="center"
-        itemGutter="half"
-      >
-        <Localized
-          $count={2}
-          id="comments-conversationThread-showMoreOfThisConversation"
-        >
-          <ForwardRef(forwardRef)
-            className="ConversationThread-showMoreButton"
-            disabled={true}
-            onClick={[Function]}
-            variant="underlined"
-          >
-            Show more of this conversation
-          </ForwardRef(forwardRef)>
-        </Localized>
-        <withPropsOnChange(Counter)>
-          2
-        </withPropsOnChange(Counter)>
-      </ForwardRef(forwardRef)>
-    </Circle>
-  </ForwardRef(forwardRef)>
-  <ForwardRef(forwardRef)
-    container={[Function]}
-  >
-    <Circle
-      end={true}
-    >
-      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-        comment={Object {}}
-        highlight={true}
-        settings={Object {}}
-        story={Object {}}
-        viewer={Object {}}
-      />
-    </Circle>
-  </ForwardRef(forwardRef)>
-</div>
-`;
diff --git a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx
new file mode 100644
index 000000000..e8d320e6e
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx
@@ -0,0 +1,186 @@
+import React, { FunctionComponent } from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
+
+import {
+  useLoadMore,
+  withPaginationContainer,
+} from "coral-framework/lib/relay";
+import { Omit, PropTypesOf } from "coral-framework/types";
+import { AllCommentsTabContainer_settings as SettingsData } from "coral-stream/__generated__/AllCommentsTabContainer_settings.graphql";
+import { AllCommentsTabContainer_story as StoryData } from "coral-stream/__generated__/AllCommentsTabContainer_story.graphql";
+import { AllCommentsTabContainer_viewer as ViewerData } from "coral-stream/__generated__/AllCommentsTabContainer_viewer.graphql";
+import { AllCommentsTabContainerPaginationQueryVariables } from "coral-stream/__generated__/AllCommentsTabContainerPaginationQuery.graphql";
+import { Button, HorizontalGutter } from "coral-ui/components";
+import { Localized } from "fluent-react/compat";
+import { CommentContainer } from "../../Comment";
+import IgnoredTombstoneOrHideContainer from "../../IgnoredTombstoneOrHideContainer";
+import { ReplyListContainer } from "../../ReplyList";
+
+interface Props {
+  story: StoryData;
+  settings: SettingsData;
+  viewer: ViewerData | null;
+  relay: RelayPaginationProp;
+}
+
+// tslint:disable-next-line:no-unused-expression
+graphql`
+  fragment AllCommentsTabContainer_comment on Comment {
+    id
+    ...CommentContainer_comment
+    ...ReplyListContainer1_comment
+  }
+`;
+
+export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
+  const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
+  const comments = props.story.comments.edges.map(edge => edge.node);
+  return (
+    <>
+      <HorizontalGutter
+        id="coral-comments-stream-log"
+        data-testid="comments-stream-log"
+        role="log"
+        aria-live="polite"
+      >
+        {comments.map(comment => (
+          <IgnoredTombstoneOrHideContainer
+            key={comment.id}
+            viewer={props.viewer}
+            comment={comment}
+          >
+            <HorizontalGutter>
+              <CommentContainer
+                viewer={props.viewer}
+                settings={props.settings}
+                comment={comment}
+                story={props.story}
+              />
+              <ReplyListContainer
+                settings={props.settings}
+                viewer={props.viewer}
+                comment={comment}
+                story={props.story}
+              />
+            </HorizontalGutter>
+          </IgnoredTombstoneOrHideContainer>
+        ))}
+        {props.relay.hasMore() && (
+          <Localized id="comments-stream-loadMore">
+            <Button
+              id={"coral-comments-stream-loadMore"}
+              onClick={loadMore}
+              variant="outlined"
+              fullWidth
+              disabled={isLoadingMore}
+              aria-controls="coral-comments-stream-log"
+            >
+              Load More
+            </Button>
+          </Localized>
+        )}
+      </HorizontalGutter>
+    </>
+  );
+};
+
+// TODO: (cvle) if this could be autogenerated..
+type FragmentVariables = Omit<
+  AllCommentsTabContainerPaginationQueryVariables,
+  "storyID"
+>;
+
+const enhanced = withPaginationContainer<
+  Props,
+  AllCommentsTabContainerPaginationQueryVariables,
+  FragmentVariables
+>(
+  {
+    story: graphql`
+      fragment AllCommentsTabContainer_story on Story
+        @argumentDefinitions(
+          count: { type: "Int!", defaultValue: 5 }
+          cursor: { type: "Cursor" }
+          orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_DESC }
+        ) {
+        id
+        comments(first: $count, after: $cursor, orderBy: $orderBy)
+          @connection(key: "Stream_comments") {
+          edges {
+            node {
+              ...AllCommentsTabContainer_comment @relay(mask: false)
+              ...IgnoredTombstoneOrHideContainer_comment
+            }
+          }
+        }
+        ...PostCommentFormContainer_story
+        ...CommentContainer_story
+        ...ReplyListContainer1_story
+        ...CreateCommentReplyMutation_story
+        ...CreateCommentMutation_story
+      }
+    `,
+    viewer: graphql`
+      fragment AllCommentsTabContainer_viewer on User {
+        ...ReplyListContainer1_viewer
+        ...CommentContainer_viewer
+        ...CreateCommentReplyMutation_viewer
+        ...CreateCommentMutation_viewer
+        ...IgnoredTombstoneOrHideContainer_viewer
+        status {
+          current
+        }
+      }
+    `,
+    settings: graphql`
+      fragment AllCommentsTabContainer_settings on Settings {
+        reaction {
+          sortLabel
+        }
+        ...ReplyListContainer1_settings
+        ...CommentContainer_settings
+      }
+    `,
+  },
+  {
+    direction: "forward",
+    getConnectionFromProps(props) {
+      return props.story && props.story.comments;
+    },
+    // This is also the default implementation of `getFragmentVariables` if it isn't provided.
+    getFragmentVariables(prevVars, totalCount) {
+      return {
+        ...prevVars,
+        count: totalCount,
+      };
+    },
+    getVariables(props, { count, cursor }, fragmentVariables) {
+      return {
+        count,
+        cursor,
+        orderBy: fragmentVariables.orderBy,
+        // storyID isn't specified as an @argument for the fragment, but it should be a
+        // variable available for the fragment under the query root.
+        storyID: props.story.id,
+      };
+    },
+    query: graphql`
+      # Pagination query to be fetched upon calling 'loadMore'.
+      # Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
+      query AllCommentsTabContainerPaginationQuery(
+        $count: Int!
+        $cursor: Cursor
+        $orderBy: COMMENT_SORT!
+        $storyID: ID
+      ) {
+        story(id: $storyID) {
+          ...AllCommentsTabContainer_story
+            @arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
+        }
+      }
+    `,
+  }
+)(AllCommentsTabContainer);
+
+export type AllCommentsTabContainerProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabQuery.tsx b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabQuery.tsx
new file mode 100644
index 000000000..b082b9e7d
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabQuery.tsx
@@ -0,0 +1,93 @@
+import {
+  graphql,
+  QueryRenderer,
+  withLocalStateContainer,
+} from "coral-framework/lib/relay";
+import { AllCommentsTabQuery as QueryTypes } from "coral-stream/__generated__/AllCommentsTabQuery.graphql";
+import { AllCommentsTabQueryLocal as Local } from "coral-stream/__generated__/AllCommentsTabQueryLocal.graphql";
+import { Delay, Flex, Spinner } from "coral-ui/components";
+import React, { FunctionComponent } from "react";
+import { ReadyState } from "react-relay";
+
+import AllCommentsTabContainer from "./AllCommentsTabContainer";
+
+interface Props {
+  local: Local;
+  preload?: boolean;
+}
+
+export const render = (data: ReadyState<QueryTypes["response"]>) => {
+  if (data.error) {
+    return <div>{data.error.message}</div>;
+  }
+  if (!data.props) {
+    return (
+      <Flex justifyContent="center">
+        <Spinner />
+      </Flex>
+    );
+  }
+  if (data.props) {
+    return (
+      <AllCommentsTabContainer
+        settings={data.props.settings}
+        viewer={data.props.viewer}
+        story={data.props.story!}
+      />
+    );
+  }
+
+  return (
+    <Delay>
+      <Flex justifyContent="center">
+        <Spinner />
+      </Flex>
+    </Delay>
+  );
+};
+
+const AllCommentsTabQuery: FunctionComponent<Props> = props => {
+  const {
+    local: { storyID, storyURL, commentsOrderBy },
+  } = props;
+  return (
+    <QueryRenderer<QueryTypes>
+      query={graphql`
+        query AllCommentsTabQuery(
+          $storyID: ID
+          $storyURL: String
+          $commentsOrderBy: COMMENT_SORT
+        ) {
+          viewer {
+            ...AllCommentsTabContainer_viewer
+          }
+          story(id: $storyID, url: $storyURL) {
+            ...AllCommentsTabContainer_story
+              @arguments(orderBy: $commentsOrderBy)
+          }
+          settings {
+            ...AllCommentsTabContainer_settings
+          }
+        }
+      `}
+      variables={{
+        storyID,
+        storyURL,
+        commentsOrderBy,
+      }}
+      render={data => (props.preload ? null : render(data))}
+    />
+  );
+};
+
+const enhanced = withLocalStateContainer(
+  graphql`
+    fragment AllCommentsTabQueryLocal on Local {
+      storyID
+      storyURL
+      commentsOrderBy
+    }
+  `
+)(AllCommentsTabQuery);
+
+export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/index.ts b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/index.ts
new file mode 100644
index 000000000..eb3be2ea2
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/index.ts
@@ -0,0 +1 @@
+export { default, default as AllCommentsTabQuery } from "./AllCommentsTabQuery";
diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.css b/src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.css
new file mode 100644
index 000000000..0fc736a27
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.css
@@ -0,0 +1,19 @@
+.root {
+  align-items: center;
+  display: flex;
+}
+
+.tooltip {
+  width: max-content;
+  max-width: 220px;
+}
+
+.title {
+  line-height: 1;
+}
+
+.button {
+  line-height: 0;
+  color: var(--palette-grey-dark);
+  padding: 6px;
+}
diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.tsx b/src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.tsx
new file mode 100644
index 000000000..5599dcb92
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.tsx
@@ -0,0 +1,80 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import {
+  BaseButton,
+  Box,
+  ClickOutside,
+  Icon,
+  Popover,
+  Typography,
+} from "coral-ui/components";
+
+import { Localized } from "fluent-react/compat";
+import styles from "./FeaturedCommentTooltip.css";
+
+interface Props {
+  className?: string;
+  active?: boolean;
+}
+
+export const FeaturedCommentTooltip: FunctionComponent<Props> = props => {
+  return (
+    <Popover
+      id="comments-featuredCommentPopover"
+      className={cn(styles.root, props.className)}
+      body={({ toggleVisibility }) => (
+        <ClickOutside onClickOutside={toggleVisibility}>
+          <Box
+            p={2}
+            className={styles.tooltip}
+            onClick={evt => {
+              // Don't propagate click events when clicking inside of popover to
+              // avoid accidently activating the featured comments tab.
+              evt.stopPropagation();
+            }}
+          >
+            <Localized id="comments-featuredCommentTooltip-how">
+              <Typography
+                color="textLight"
+                variant="bodyCopyBold"
+                mb={2}
+                className={styles.title}
+              >
+                How is a comment featured?
+              </Typography>
+            </Localized>
+            <Localized id="comments-featuredCommentTooltip-handSelectedComments">
+              <Typography color="textLight" variant="detail">
+                Comments are hand selected by our team as worth reading.
+              </Typography>
+            </Localized>
+          </Box>
+        </ClickOutside>
+      )}
+      placement={"bottom"}
+      dark
+    >
+      {({ toggleVisibility, ref }) => (
+        <Localized
+          id="comments-featuredCommentTooltip-toggleButton"
+          attrs={{ "aria-label": true }}
+        >
+          <BaseButton
+            className={styles.button}
+            onClick={evt => {
+              evt.stopPropagation();
+              toggleVisibility();
+            }}
+            aria-label="Toggle featured comments tooltip"
+            ref={ref}
+          >
+            <Icon color={props.active ? "primary" : "inherit"}>info</Icon>
+          </BaseButton>
+        </Localized>
+      )}
+    </Popover>
+  );
+};
+
+export default FeaturedCommentTooltip;
diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.css b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.css
new file mode 100644
index 000000000..0bf7552ef
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.css
@@ -0,0 +1,25 @@
+.root {
+  background-color: var(--palette-primary-lightest);
+  border: 1px solid var(--palette-primary-light);
+  color: var(--palette-text-primary);
+  padding: var(--spacing-4);
+  box-sizing: border-box;
+}
+
+.replies,
+.gotoConversation {
+  font-size: calc(14rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-sans-serif);
+  line-height: 0;
+}
+
+.gotoArrow {
+  display: inline-block;
+  text-decoration: none;
+  margin-left: var(--spacing-1);
+}
+
+.replies {
+  color: var(--palette-grey-main);
+}
diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx
new file mode 100644
index 000000000..02a957179
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx
@@ -0,0 +1,148 @@
+import React, { FunctionComponent, MouseEvent, useCallback } from "react";
+import { graphql } from "react-relay";
+
+import { getURLWithCommentID } from "coral-framework/helpers";
+import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
+import { GQLUSER_STATUS } from "coral-framework/schema";
+import { FeaturedCommentContainer_comment as CommentData } from "coral-stream/__generated__/FeaturedCommentContainer_comment.graphql";
+import { FeaturedCommentContainer_settings as SettingsData } from "coral-stream/__generated__/FeaturedCommentContainer_settings.graphql";
+import { FeaturedCommentContainer_story as StoryData } from "coral-stream/__generated__/FeaturedCommentContainer_story.graphql";
+import { FeaturedCommentContainer_viewer as ViewerData } from "coral-stream/__generated__/FeaturedCommentContainer_viewer.graphql";
+import HTMLContent from "coral-stream/common/HTMLContent";
+import Timestamp from "coral-stream/common/Timestamp";
+import {
+  SetCommentIDMutation,
+  withSetCommentIDMutation,
+} from "coral-stream/mutations";
+import { Box, Flex, Icon, TextLink } from "coral-ui/components";
+
+import { UserTagsContainer } from "../../Comment";
+import ReactionButtonContainer from "../../Comment/ReactionButton";
+import { UsernameWithPopoverContainer } from "../../Comment/Username";
+
+import { Localized } from "fluent-react/compat";
+import styles from "./FeaturedCommentContainer.css";
+
+interface Props {
+  viewer: ViewerData | null;
+  comment: CommentData;
+  story: StoryData;
+  settings: SettingsData;
+  setCommentID: SetCommentIDMutation;
+}
+
+const FeaturedCommentContainer: FunctionComponent<Props> = props => {
+  const { comment, settings, story, viewer, setCommentID } = props;
+  const banned = Boolean(
+    viewer && viewer.status.current.includes(GQLUSER_STATUS.BANNED)
+  );
+  const onGotoConversation = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      setCommentID({ id: comment.id });
+      return false;
+    },
+    [setCommentID, comment]
+  );
+
+  return (
+    <div className={styles.root} data-testid={`featuredComment-${comment.id}`}>
+      <HTMLContent>{comment.body || ""}</HTMLContent>
+      <Flex direction="row" alignItems="center" mt={4}>
+        {comment.author && (
+          <UsernameWithPopoverContainer user={comment.author} viewer={viewer} />
+        )}
+        <Box ml={1} container="span">
+          <UserTagsContainer comment={comment} />
+        </Box>
+        <Box ml={2} clone>
+          <Timestamp>{comment.createdAt}</Timestamp>
+        </Box>
+      </Flex>
+      <Flex justifyContent="space-between" mt={2}>
+        <ReactionButtonContainer
+          comment={comment}
+          settings={settings}
+          viewer={viewer}
+          readOnly={banned}
+        />
+        <Flex alignItems="center">
+          {comment.replyCount > 0 && (
+            <Flex alignItems="center" className={styles.replies}>
+              <Icon size="md">reply</Icon>
+              <Localized id="comments-featured-replies">
+                <Box mx={1}>Replies</Box>
+              </Localized>
+              <Box>{comment.replyCount}</Box>
+              <Box mx={2}>|</Box>
+            </Flex>
+          )}
+          <div>
+            <TextLink
+              className={styles.gotoConversation}
+              onClick={onGotoConversation}
+              href={getURLWithCommentID(story.url, comment.id)}
+            >
+              <Localized id="comments-featured-gotoConversation">
+                <span>Go to Conversation</span>
+              </Localized>
+              <span className={styles.gotoArrow}>></span>
+            </TextLink>
+          </div>
+        </Flex>
+      </Flex>
+    </div>
+  );
+};
+
+const enhanced = withSetCommentIDMutation(
+  withFragmentContainer<Props>({
+    viewer: graphql`
+      fragment FeaturedCommentContainer_viewer on User {
+        id
+        status {
+          current
+        }
+        ignoredUsers {
+          id
+        }
+        role
+        ...UsernameWithPopoverContainer_viewer
+        ...ReactionButtonContainer_viewer
+      }
+    `,
+    story: graphql`
+      fragment FeaturedCommentContainer_story on Story {
+        url
+      }
+    `,
+    comment: graphql`
+      fragment FeaturedCommentContainer_comment on Comment {
+        id
+        author {
+          ...UsernameWithPopoverContainer_user
+          id
+          username
+        }
+        parent {
+          author {
+            username
+          }
+        }
+        body
+        createdAt
+        lastViewerAction
+        replyCount
+        ...ReactionButtonContainer_comment
+        ...UserTagsContainer_comment
+      }
+    `,
+    settings: graphql`
+      fragment FeaturedCommentContainer_settings on Settings {
+        ...ReactionButtonContainer_settings
+      }
+    `,
+  })(FeaturedCommentContainer)
+);
+
+export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsContainer.tsx
new file mode 100644
index 000000000..68f6ddac5
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsContainer.tsx
@@ -0,0 +1,164 @@
+import React, { FunctionComponent } from "react";
+import { graphql, RelayPaginationProp } from "react-relay";
+
+import {
+  useLoadMore,
+  withPaginationContainer,
+} from "coral-framework/lib/relay";
+import { Omit, PropTypesOf } from "coral-framework/types";
+import { FeaturedCommentsContainer_settings as SettingsData } from "coral-stream/__generated__/FeaturedCommentsContainer_settings.graphql";
+import { FeaturedCommentsContainer_story as StoryData } from "coral-stream/__generated__/FeaturedCommentsContainer_story.graphql";
+import { FeaturedCommentsContainer_viewer as ViewerData } from "coral-stream/__generated__/FeaturedCommentsContainer_viewer.graphql";
+import { FeaturedCommentsContainerPaginationQueryVariables } from "coral-stream/__generated__/FeaturedCommentsContainerPaginationQuery.graphql";
+import { Button, HorizontalGutter } from "coral-ui/components";
+import { Localized } from "fluent-react/compat";
+
+import IgnoredTombstoneOrHideContainer from "../../IgnoredTombstoneOrHideContainer";
+import FeaturedCommentContainer from "./FeaturedCommentContainer";
+
+interface Props {
+  story: StoryData;
+  settings: SettingsData;
+  viewer: ViewerData | null;
+  relay: RelayPaginationProp;
+}
+
+export const FeaturedCommentsContainer: FunctionComponent<Props> = props => {
+  const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
+  const comments = props.story.featuredComments.edges.map(edge => edge.node);
+  return (
+    <>
+      <HorizontalGutter
+        id="coral-comments-stream-log"
+        data-testid="comments-stream-log"
+        role="log"
+        aria-live="polite"
+        spacing={3}
+      >
+        {comments.map(comment => (
+          <IgnoredTombstoneOrHideContainer
+            key={comment.id}
+            viewer={props.viewer}
+            comment={comment}
+          >
+            <FeaturedCommentContainer
+              viewer={props.viewer}
+              settings={props.settings}
+              comment={comment}
+              story={props.story}
+            />
+          </IgnoredTombstoneOrHideContainer>
+        ))}
+        {props.relay.hasMore() && (
+          <Localized id="comments-stream-loadMore">
+            <Button
+              id={"coral-comments-stream-loadMore"}
+              onClick={loadMore}
+              variant="outlined"
+              fullWidth
+              disabled={isLoadingMore}
+              aria-controls="coral-comments-stream-log"
+            >
+              Load More
+            </Button>
+          </Localized>
+        )}
+      </HorizontalGutter>
+    </>
+  );
+};
+
+// TODO: (cvle) if this could be autogenerated..
+type FragmentVariables = Omit<
+  FeaturedCommentsContainerPaginationQueryVariables,
+  "storyID"
+>;
+
+const enhanced = withPaginationContainer<
+  Props,
+  FeaturedCommentsContainerPaginationQueryVariables,
+  FragmentVariables
+>(
+  {
+    story: graphql`
+      fragment FeaturedCommentsContainer_story on Story
+        @argumentDefinitions(
+          count: { type: "Int!", defaultValue: 5 }
+          cursor: { type: "Cursor" }
+          orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_DESC }
+        ) {
+        id
+        featuredComments(first: $count, after: $cursor, orderBy: $orderBy)
+          @connection(key: "Stream_featuredComments") {
+          edges {
+            node {
+              id
+              ...FeaturedCommentContainer_comment
+              ...IgnoredTombstoneOrHideContainer_comment
+            }
+          }
+        }
+        ...PostCommentFormContainer_story
+        ...FeaturedCommentContainer_story
+      }
+    `,
+    viewer: graphql`
+      fragment FeaturedCommentsContainer_viewer on User {
+        ...FeaturedCommentContainer_viewer
+        ...IgnoredTombstoneOrHideContainer_viewer
+        status {
+          current
+        }
+      }
+    `,
+    settings: graphql`
+      fragment FeaturedCommentsContainer_settings on Settings {
+        reaction {
+          sortLabel
+        }
+        ...FeaturedCommentContainer_settings
+      }
+    `,
+  },
+  {
+    direction: "forward",
+    getConnectionFromProps(props) {
+      return props.story && props.story.featuredComments;
+    },
+    // This is also the default implementation of `getFragmentVariables` if it isn't provided.
+    getFragmentVariables(prevVars, totalCount) {
+      return {
+        ...prevVars,
+        count: totalCount,
+      };
+    },
+    getVariables(props, { count, cursor }, fragmentVariables) {
+      return {
+        count,
+        cursor,
+        orderBy: fragmentVariables.orderBy,
+        // storyID isn't specified as an @argument for the fragment, but it should be a
+        // variable available for the fragment under the query root.
+        storyID: props.story.id,
+      };
+    },
+    query: graphql`
+      # Pagination query to be fetched upon calling 'loadMore'.
+      # Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
+      query FeaturedCommentsContainerPaginationQuery(
+        $count: Int!
+        $cursor: Cursor
+        $orderBy: COMMENT_SORT!
+        $storyID: ID
+      ) {
+        story(id: $storyID) {
+          ...FeaturedCommentsContainer_story
+            @arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
+        }
+      }
+    `,
+  }
+)(FeaturedCommentsContainer);
+
+export type FeaturedCommentsContainerProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsQuery.tsx b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsQuery.tsx
new file mode 100644
index 000000000..ba252ef58
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsQuery.tsx
@@ -0,0 +1,93 @@
+import {
+  graphql,
+  QueryRenderer,
+  withLocalStateContainer,
+} from "coral-framework/lib/relay";
+import { FeaturedCommentsQuery as QueryTypes } from "coral-stream/__generated__/FeaturedCommentsQuery.graphql";
+import { FeaturedCommentsQueryLocal as Local } from "coral-stream/__generated__/FeaturedCommentsQueryLocal.graphql";
+import { Delay, Flex, Spinner } from "coral-ui/components";
+import React, { FunctionComponent } from "react";
+import { ReadyState } from "react-relay";
+
+import FeaturedCommentsContainer from "./FeaturedCommentsContainer";
+
+interface Props {
+  local: Local;
+  preload?: boolean;
+}
+
+export const render = (data: ReadyState<QueryTypes["response"]>) => {
+  if (data.error) {
+    return <div>{data.error.message}</div>;
+  }
+  if (!data.props) {
+    return (
+      <Flex justifyContent="center">
+        <Spinner />
+      </Flex>
+    );
+  }
+  if (data.props) {
+    return (
+      <FeaturedCommentsContainer
+        settings={data.props.settings}
+        viewer={data.props.viewer}
+        story={data.props.story!}
+      />
+    );
+  }
+
+  return (
+    <Delay>
+      <Flex justifyContent="center">
+        <Spinner />
+      </Flex>
+    </Delay>
+  );
+};
+
+const FeaturedCommentsQuery: FunctionComponent<Props> = props => {
+  const {
+    local: { storyID, storyURL, commentsOrderBy },
+  } = props;
+  return (
+    <QueryRenderer<QueryTypes>
+      query={graphql`
+        query FeaturedCommentsQuery(
+          $storyID: ID
+          $storyURL: String
+          $commentsOrderBy: COMMENT_SORT
+        ) {
+          viewer {
+            ...FeaturedCommentsContainer_viewer
+          }
+          story(id: $storyID, url: $storyURL) {
+            ...FeaturedCommentsContainer_story
+              @arguments(orderBy: $commentsOrderBy)
+          }
+          settings {
+            ...FeaturedCommentsContainer_settings
+          }
+        }
+      `}
+      variables={{
+        storyID,
+        storyURL,
+        commentsOrderBy,
+      }}
+      render={data => (props.preload ? null : render(data))}
+    />
+  );
+};
+
+const enhanced = withLocalStateContainer(
+  graphql`
+    fragment FeaturedCommentsQueryLocal on Local {
+      storyID
+      storyURL
+      commentsOrderBy
+    }
+  `
+)(FeaturedCommentsQuery);
+
+export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/index.ts b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/index.ts
new file mode 100644
index 000000000..93eead095
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/FeaturedComments/index.ts
@@ -0,0 +1,4 @@
+export {
+  default,
+  default as FeaturedCommentsQuery,
+} from "./FeaturedCommentsQuery";
diff --git a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/CreateCommentMutation.ts b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/CreateCommentMutation.ts
index a6372d103..802566c27 100644
--- a/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/CreateCommentMutation.ts
+++ b/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/CreateCommentMutation.ts
@@ -95,7 +95,7 @@ const mutation = graphql`
       edge {
         cursor
         node {
-          ...StreamContainer_comment @relay(mask: false)
+          ...AllCommentsTabContainer_comment @relay(mask: false)
           status
         }
       }
@@ -165,7 +165,7 @@ function commit(
               },
             },
             tags: roleIsAtLeast(viewer.role, GQLUSER_ROLE.STAFF)
-              ? [{ name: "Staff" }]
+              ? [{ code: "STAFF" }]
               : [],
             viewerActionPresence: {
               reaction: false,
diff --git a/src/core/client/stream/tabs/Comments/Stream/SortMenu.tsx b/src/core/client/stream/tabs/Comments/Stream/SortMenu.tsx
index 028be1878..4177b1302 100644
--- a/src/core/client/stream/tabs/Comments/Stream/SortMenu.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/SortMenu.tsx
@@ -10,10 +10,10 @@ import {
   Typography,
 } from "coral-ui/components";
 
-import Divider from "./Divider";
 import * as styles from "./SortMenu.css";
 
 interface Props {
+  className?: string;
   orderBy:
     | "CREATED_AT_ASC"
     | "CREATED_AT_DESC"
@@ -27,42 +27,44 @@ interface Props {
 const SortMenu: FunctionComponent<Props> = props => (
   <MatchMedia ltWidth="sm">
     {matches => (
-      <div>
-        <Flex justifyContent="flex-end" alignItems="center" itemGutter>
-          {!matches && (
-            <Localized id="comments-sortMenu-sortBy">
-              <Typography
-                variant="bodyCopyBold"
-                container={<label htmlFor="coral-comments-sortMenu" />}
-              >
-                Sort By
-              </Typography>
-            </Localized>
-          )}
-          <SelectField
-            id="coral-comments-sortMenu"
-            value={props.orderBy}
-            onChange={props.onChange}
-            afterWrapper={(matches && <Icon>sort</Icon>) || undefined}
-            classes={{
-              select: (matches && styles.mobileSelect) || undefined,
-              afterWrapper: (matches && styles.mobileAfterWrapper) || undefined,
-            }}
-          >
-            <Localized id="comments-sortMenu-newest">
-              <Option value="CREATED_AT_DESC">Newest</Option>
-            </Localized>
-            <Localized id="comments-sortMenu-oldest">
-              <Option value="CREATED_AT_ASC">Oldest</Option>
-            </Localized>
-            <Localized id="comments-sortMenu-mostReplies">
-              <Option value="REPLIES_DESC">Most Replies</Option>
-            </Localized>
-            <Option value="REACTION_DESC">{props.reactionSortLabel}</Option>
-          </SelectField>
-        </Flex>
-        <Divider />
-      </div>
+      <Flex
+        className={props.className}
+        justifyContent="flex-end"
+        alignItems="center"
+        itemGutter
+      >
+        {!matches && (
+          <Localized id="comments-sortMenu-sortBy">
+            <Typography
+              variant="bodyCopyBold"
+              container={<label htmlFor="coral-comments-sortMenu" />}
+            >
+              Sort By
+            </Typography>
+          </Localized>
+        )}
+        <SelectField
+          id="coral-comments-sortMenu"
+          value={props.orderBy}
+          onChange={props.onChange}
+          afterWrapper={(matches && <Icon>sort</Icon>) || undefined}
+          classes={{
+            select: (matches && styles.mobileSelect) || undefined,
+            afterWrapper: (matches && styles.mobileAfterWrapper) || undefined,
+          }}
+        >
+          <Localized id="comments-sortMenu-newest">
+            <Option value="CREATED_AT_DESC">Newest</Option>
+          </Localized>
+          <Localized id="comments-sortMenu-oldest">
+            <Option value="CREATED_AT_ASC">Oldest</Option>
+          </Localized>
+          <Localized id="comments-sortMenu-mostReplies">
+            <Option value="REPLIES_DESC">Most Replies</Option>
+          </Localized>
+          <Option value="REACTION_DESC">{props.reactionSortLabel}</Option>
+        </SelectField>
+      </Flex>
     )}
   </MatchMedia>
 );
diff --git a/src/core/client/stream/tabs/Comments/Stream/Stream.css b/src/core/client/stream/tabs/Comments/Stream/Stream.css
deleted file mode 100644
index 88de80d08..000000000
--- a/src/core/client/stream/tabs/Comments/Stream/Stream.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.root {
-  width: 100%;
-}
diff --git a/src/core/client/stream/tabs/Comments/Stream/Stream.spec.tsx b/src/core/client/stream/tabs/Comments/Stream/Stream.spec.tsx
deleted file mode 100644
index bbb4e2226..000000000
--- a/src/core/client/stream/tabs/Comments/Stream/Stream.spec.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { shallow } from "enzyme";
-import { noop } from "lodash";
-import React from "react";
-import sinon, { SinonSpy } from "sinon";
-
-import { removeFragmentRefs } from "coral-framework/testHelpers";
-import { PropTypesOf } from "coral-framework/types";
-
-import Stream from "./Stream";
-
-const StreamN = removeFragmentRefs(Stream);
-
-it("renders correctly", () => {
-  const props: PropTypesOf<typeof StreamN> = {
-    story: {
-      id: "story-id",
-      isClosed: false,
-    },
-    comments: [{ id: "comment-1" }, { id: "comment-2" }],
-    settings: { reaction: { sortLabel: "Most Reacted" } },
-    onLoadMore: noop,
-    disableLoadMore: false,
-    hasMore: false,
-    viewer: null,
-    orderBy: "CREATED_AT_ASC",
-    onChangeOrderBy: noop,
-  };
-  const wrapper = shallow(<StreamN {...props} />);
-  expect(wrapper).toMatchSnapshot();
-});
-
-describe("when use is logged in", () => {
-  it("renders correctly", () => {
-    const props: PropTypesOf<typeof StreamN> = {
-      story: {
-        id: "story-id",
-        isClosed: false,
-      },
-      comments: [{ id: "comment-1" }, { id: "comment-2" }],
-      onLoadMore: noop,
-      disableLoadMore: false,
-      hasMore: false,
-      viewer: {},
-      settings: { reaction: { sortLabel: "Most Reacted" } },
-      orderBy: "CREATED_AT_ASC",
-      onChangeOrderBy: noop,
-    };
-    const wrapper = shallow(<StreamN {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});
-
-describe("when there is more", () => {
-  const props: PropTypesOf<typeof StreamN> = {
-    story: {
-      id: "story-id",
-      isClosed: false,
-    },
-    comments: [{ id: "comment-1" }, { id: "comment-2" }],
-    settings: { reaction: { sortLabel: "Most Reacted" } },
-    onLoadMore: sinon.spy(),
-    disableLoadMore: false,
-    hasMore: true,
-    viewer: null,
-    orderBy: "CREATED_AT_ASC",
-    onChangeOrderBy: noop,
-  };
-
-  const wrapper = shallow(<StreamN {...props} />);
-  it("renders a load more button", () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("calls onLoadMore", () => {
-    wrapper.find("#coral-comments-stream-loadMore").simulate("click");
-    expect((props.onLoadMore as SinonSpy).calledOnce).toBe(true);
-  });
-
-  const wrapperDisabledButton = shallow(<StreamN {...props} disableLoadMore />);
-  it("disables load more button", () => {
-    expect(wrapperDisabledButton).toMatchSnapshot();
-  });
-});
diff --git a/src/core/client/stream/tabs/Comments/Stream/Stream.tsx b/src/core/client/stream/tabs/Comments/Stream/Stream.tsx
deleted file mode 100644
index b7e809899..000000000
--- a/src/core/client/stream/tabs/Comments/Stream/Stream.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import * as React from "react";
-import { FunctionComponent } from "react";
-
-import { PropTypesOf } from "coral-framework/types";
-import UserBoxContainer from "coral-stream/common/UserBox";
-import { Button, Flex, HorizontalGutter, Spinner } from "coral-ui/components";
-
-import CommentContainer from "../Comment";
-import IgnoredTombstoneOrHideContainer from "../IgnoredTombstoneOrHideContainer";
-import ReplyListContainer from "../ReplyList";
-import BannedInfo from "./BannedInfo";
-import CommunityGuidelinesContainer from "./CommunityGuidelines";
-import PostCommentFormContainer from "./PostCommentForm";
-import SortMenu from "./SortMenu";
-
-import styles from "./Stream.css";
-
-export interface StreamProps {
-  story: {
-    id: string;
-    isClosed?: boolean;
-  } & PropTypesOf<typeof CommentContainer>["story"] &
-    PropTypesOf<typeof ReplyListContainer>["story"] &
-    PropTypesOf<typeof PostCommentFormContainer>["story"];
-  settings: PropTypesOf<typeof CommentContainer>["settings"] &
-    PropTypesOf<typeof ReplyListContainer>["settings"] &
-    PropTypesOf<typeof UserBoxContainer>["settings"] &
-    PropTypesOf<typeof CommunityGuidelinesContainer>["settings"] &
-    PropTypesOf<typeof PostCommentFormContainer>["settings"] & {
-      reaction: {
-        sortLabel: string;
-      };
-    };
-  comments: ReadonlyArray<
-    { id: string } & PropTypesOf<typeof CommentContainer>["comment"] &
-      PropTypesOf<typeof ReplyListContainer>["comment"] &
-      PropTypesOf<typeof IgnoredTombstoneOrHideContainer>["comment"]
-  >;
-  onLoadMore?: () => void;
-  hasMore?: boolean;
-  disableLoadMore?: boolean;
-  viewer:
-    | PropTypesOf<typeof UserBoxContainer>["viewer"] &
-        PropTypesOf<typeof CommentContainer>["viewer"] &
-        PropTypesOf<typeof ReplyListContainer>["viewer"] &
-        PropTypesOf<typeof IgnoredTombstoneOrHideContainer>["viewer"]
-    | null;
-  orderBy: PropTypesOf<typeof SortMenu>["orderBy"];
-  onChangeOrderBy: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-  refetching?: boolean;
-  banned?: boolean;
-}
-
-const Stream: FunctionComponent<StreamProps> = props => {
-  return (
-    <HorizontalGutter className={styles.root} size="double">
-      <UserBoxContainer viewer={props.viewer} settings={props.settings} />
-      <CommunityGuidelinesContainer settings={props.settings} />
-      {!props.banned && (
-        <PostCommentFormContainer
-          settings={props.settings}
-          story={props.story}
-        />
-      )}
-      {props.banned && <BannedInfo />}
-      {props.comments.length > 0 && (
-        <SortMenu
-          orderBy={props.orderBy}
-          onChange={props.onChangeOrderBy}
-          reactionSortLabel={props.settings.reaction.sortLabel}
-        />
-      )}
-      {props.refetching && (
-        <Flex justifyContent="center">
-          <Spinner />
-        </Flex>
-      )}
-      {!props.refetching && (
-        <HorizontalGutter
-          id="coral-comments-stream-log"
-          data-testid="comments-stream-log"
-          role="log"
-          aria-live="polite"
-        >
-          {props.comments.map(comment => (
-            <IgnoredTombstoneOrHideContainer
-              key={comment.id}
-              viewer={props.viewer}
-              comment={comment}
-            >
-              <HorizontalGutter>
-                <CommentContainer
-                  viewer={props.viewer}
-                  settings={props.settings}
-                  comment={comment}
-                  story={props.story}
-                />
-                <ReplyListContainer
-                  settings={props.settings}
-                  viewer={props.viewer}
-                  comment={comment}
-                  story={props.story}
-                />
-              </HorizontalGutter>
-            </IgnoredTombstoneOrHideContainer>
-          ))}
-          {props.hasMore && (
-            <Localized id="comments-stream-loadMore">
-              <Button
-                id={"coral-comments-stream-loadMore"}
-                onClick={props.onLoadMore}
-                variant="outlined"
-                fullWidth
-                disabled={props.disableLoadMore}
-                aria-controls="coral-comments-stream-log"
-              >
-                Load More
-              </Button>
-            </Localized>
-          )}
-        </HorizontalGutter>
-      )}
-    </HorizontalGutter>
-  );
-};
-
-export default Stream;
diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
new file mode 100644
index 000000000..bdd25d92f
--- /dev/null
+++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
@@ -0,0 +1,28 @@
+.root {
+  width: 100%;
+}
+
+.tabBarContainer {
+  position: relative;
+  padding-top: var(--spacing-1);
+}
+
+.sortMenu {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.featuredCommentsInfo {
+  position: absolute;
+  top: 0;
+  right: 4px;
+  height: 100%;
+}
+
+.featuredCommentsTabContainer {
+  position: relative;
+}
+.featuredCommentsTab {
+  padding-right: 30px !important;
+}
diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.spec.tsx b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.spec.tsx
deleted file mode 100644
index 89670db7a..000000000
--- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.spec.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { shallow, ShallowWrapper } from "enzyme";
-import { noop } from "lodash";
-import React from "react";
-
-import { removeFragmentRefs } from "coral-framework/testHelpers";
-import { PropTypesOf } from "coral-framework/types";
-
-import Stream from "./Stream";
-import { StreamContainer } from "./StreamContainer";
-
-// Remove relay refs so we can stub the props.
-const StreamContainerN = removeFragmentRefs(StreamContainer);
-
-it("renders correctly", () => {
-  const props: PropTypesOf<typeof StreamContainerN> = {
-    story: {
-      id: "story-id",
-      isClosed: false,
-      comments: {
-        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
-      },
-    },
-    viewer: null,
-    settings: {
-      reaction: {
-        sortLabel: "Most Respected",
-      },
-    },
-    relay: {
-      hasMore: noop,
-      isLoading: noop,
-    } as any,
-    defaultOrderBy: "CREATED_AT_ASC",
-  };
-  const wrapper = shallow(<StreamContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
-});
-
-describe("when has more comments", () => {
-  let finishLoading: ((error?: Error) => void) | null = null;
-  const props: PropTypesOf<typeof StreamContainerN> = {
-    story: {
-      id: "story-id",
-      isClosed: false,
-      comments: {
-        edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
-      },
-    },
-    viewer: null,
-    settings: {
-      reaction: {
-        sortLabel: "Most Respected",
-      },
-    },
-    relay: {
-      hasMore: () => true,
-      isLoading: () => false,
-      loadMore: (_: any, callback: () => void) => (finishLoading = callback),
-    } as any,
-    defaultOrderBy: "CREATED_AT_ASC",
-  };
-
-  let wrapper: ShallowWrapper;
-
-  beforeAll(() => (wrapper = shallow(<StreamContainerN {...props} />)));
-
-  it("renders hasMore", () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  describe("when loading more", () => {
-    beforeAll(() => {
-      wrapper
-        .find(Stream)
-        .props()
-        .onLoadMore();
-    });
-    it("calls relay loadMore", () => {
-      expect(finishLoading).not.toBeNull();
-    });
-    it("disables load more button", () => {
-      wrapper.update();
-      expect(wrapper).toMatchSnapshot();
-    });
-    it("enable load more button after loading is done", () => {
-      finishLoading!();
-      wrapper.update();
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-});
diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
index d0c8610a7..312450ca3 100644
--- a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
@@ -1,209 +1,190 @@
-import React, { ChangeEvent } from "react";
-import { graphql, RelayPaginationProp } from "react-relay";
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent, useCallback } from "react";
+import { graphql } from "react-relay";
 
-import { withPaginationContainer } from "coral-framework/lib/relay";
+import { useLocal, withFragmentContainer } from "coral-framework/lib/relay";
 import { GQLUSER_STATUS } from "coral-framework/schema";
-import { Omit, PropTypesOf } from "coral-framework/types";
 import { StreamContainer_settings as SettingsData } from "coral-stream/__generated__/StreamContainer_settings.graphql";
 import { StreamContainer_story as StoryData } from "coral-stream/__generated__/StreamContainer_story.graphql";
 import { StreamContainer_viewer as ViewerData } from "coral-stream/__generated__/StreamContainer_viewer.graphql";
+import { StreamContainerLocal } from "coral-stream/__generated__/StreamContainerLocal.graphql";
+import { UserBoxContainer } from "coral-stream/common/UserBox";
 import {
-  COMMENT_SORT,
-  StreamContainerPaginationQueryVariables,
-} from "coral-stream/__generated__/StreamContainerPaginationQuery.graphql";
-import StoryClosedTimeoutContainer from "./StoryClosedTimeout";
+  Counter,
+  Flex,
+  HorizontalGutter,
+  Tab,
+  TabBar,
+  TabContent,
+  TabPane,
+} from "coral-ui/components";
+import { PropTypesOf } from "coral-ui/types";
 
-import Stream from "./Stream";
+import AllCommentsTab from "./AllCommentsTab";
+import BannedInfo from "./BannedInfo";
+import { CommunityGuidelinesContainer } from "./CommunityGuidelines";
+import FeaturedComments from "./FeaturedComments";
+import FeaturedCommentTooltip from "./FeaturedCommentTooltip";
+import { PostCommentFormContainer } from "./PostCommentForm";
+import SortMenu from "./SortMenu";
+import StoryClosedTimeoutContainer from "./StoryClosedTimeout";
+import styles from "./StreamContainer.css";
 
 interface Props {
   story: StoryData;
   settings: SettingsData;
   viewer: ViewerData | null;
-  relay: RelayPaginationProp;
-  defaultOrderBy: COMMENT_SORT;
 }
 
-// tslint:disable-next-line:no-unused-expression
-graphql`
-  fragment StreamContainer_comment on Comment {
-    id
-    ...CommentContainer_comment
-    ...ReplyListContainer1_comment
-  }
-`;
+// Use a custom tab for featured comments, because we need to put the tooltip
+// button logically next to the tab as both are buttons and position them together
+// using absolute positioning.
+const TabWithFeaturedTooltip: FunctionComponent<PropTypesOf<typeof Tab>> = ({
+  ...props
+}) => (
+  <div className={styles.featuredCommentsTabContainer}>
+    <Tab {...props} className={styles.featuredCommentsTab} />
+    <FeaturedCommentTooltip
+      active={props.active}
+      className={styles.featuredCommentsInfo}
+    />
+  </div>
+);
 
-export class StreamContainer extends React.Component<Props> {
-  public state = {
-    disableLoadMore: false,
-    refetching: false,
-  };
-  private orderBy = this.props.defaultOrderBy;
-
-  private handleOnChangeOrderBy = (e: ChangeEvent<HTMLSelectElement>) => {
-    this.orderBy = e.target.value as COMMENT_SORT;
-    this.setState({ refetching: true });
-    this.props.relay.refetchConnection(
-      5,
-      err => {
-        if (err) {
-          // tslint:disable-next-line:no-console
-          console.error(err);
-          return;
-        }
-        this.setState({ refetching: false });
-      },
-      {
-        orderBy: e.target.value as COMMENT_SORT,
+export const StreamContainer: FunctionComponent<Props> = props => {
+  const [local, setLocal] = useLocal<StreamContainerLocal>(
+    graphql`
+      fragment StreamContainerLocal on Local {
+        commentsTab
+        commentsOrderBy
       }
-    );
-  };
+    `
+  );
+  const onChangeOrder = useCallback(
+    (order: React.ChangeEvent<HTMLSelectElement>) =>
+      setLocal({ commentsOrderBy: order.target.value as any }),
+    [setLocal]
+  );
+  const onChangeTab = useCallback(
+    (tab: any) => setLocal({ commentsTab: tab }),
+    [setLocal]
+  );
+  const banned = Boolean(
+    props.viewer && props.viewer.status.current.includes(GQLUSER_STATUS.BANNED)
+  );
 
-  public render() {
-    const comments = this.props.story.comments.edges.map(edge => edge.node);
-    return (
-      <>
-        <StoryClosedTimeoutContainer story={this.props.story} />
-        <Stream
-          story={this.props.story}
-          comments={comments}
-          settings={this.props.settings}
-          onLoadMore={this.loadMore}
-          hasMore={this.props.relay.hasMore()}
-          disableLoadMore={this.state.disableLoadMore}
-          viewer={this.props.viewer}
-          orderBy={this.orderBy}
-          onChangeOrderBy={this.handleOnChangeOrderBy}
-          refetching={this.state.refetching}
-          banned={Boolean(
-            this.props.viewer &&
-              this.props.viewer.status.current.includes(GQLUSER_STATUS.BANNED)
-          )}
-        />
-      </>
-    );
-  }
+  const allCommentsCount = props.story.commentCounts.totalVisible;
+  const featuredCommentsCount = props.story.commentCounts.tags.FEATURED;
+  return (
+    <>
+      <StoryClosedTimeoutContainer story={props.story} />
+      <HorizontalGutter className={styles.root} size="double">
+        <UserBoxContainer viewer={props.viewer} settings={props.settings} />
+        <CommunityGuidelinesContainer settings={props.settings} />
+        {!banned && (
+          <PostCommentFormContainer
+            settings={props.settings}
+            story={props.story}
+          />
+        )}
+        {banned && <BannedInfo />}
+        <HorizontalGutter spacing={5} className={styles.tabBarContainer}>
+          <SortMenu
+            className={styles.sortMenu}
+            orderBy={local.commentsOrderBy}
+            onChange={onChangeOrder}
+            reactionSortLabel={props.settings.reaction.sortLabel}
+          />
+          <TabBar
+            variant="secondary"
+            activeTab={local.commentsTab}
+            onTabClick={onChangeTab}
+          >
+            {featuredCommentsCount > 0 && (
+              <TabWithFeaturedTooltip tabID="FEATURED_COMMENTS">
+                <Flex spacing={1} alignItems="center">
+                  <Localized id="comments-featuredTab">
+                    <span>Featured</span>
+                  </Localized>
+                  <Counter
+                    data-testid="comments-featuredCount"
+                    size="sm"
+                    color={
+                      local.commentsTab === "FEATURED_COMMENTS"
+                        ? "primary"
+                        : "grey"
+                    }
+                  >
+                    {featuredCommentsCount}
+                  </Counter>
+                </Flex>
+              </TabWithFeaturedTooltip>
+            )}
+            <Tab tabID="ALL_COMMENTS">
+              <Flex alignItems="center" spacing={1}>
+                <Localized id="comments-allCommentsTab">
+                  <span>All Comments</span>
+                </Localized>
+                <Counter
+                  size="sm"
+                  color={
+                    local.commentsTab === "ALL_COMMENTS" ? "primary" : "grey"
+                  }
+                >
+                  {allCommentsCount}
+                </Counter>
+              </Flex>
+            </Tab>
+          </TabBar>
+          <TabContent activeTab={local.commentsTab}>
+            <TabPane tabID="FEATURED_COMMENTS">
+              <FeaturedComments />
+            </TabPane>
+            <TabPane tabID="ALL_COMMENTS">
+              <AllCommentsTab />
+            </TabPane>
+          </TabContent>
+        </HorizontalGutter>
+      </HorizontalGutter>
+    </>
+  );
+};
 
-  private loadMore = () => {
-    if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
-      return;
+const enhanced = withFragmentContainer<Props>({
+  story: graphql`
+    fragment StreamContainer_story on Story {
+      ...PostCommentFormContainer_story
+      ...StoryClosedTimeoutContainer_story
+      ...CreateCommentReplyMutation_story
+      ...CreateCommentMutation_story
+      commentCounts {
+        totalVisible
+        tags {
+          FEATURED
+        }
+      }
     }
-    this.setState({ disableLoadMore: true });
-    this.props.relay.loadMore(
-      10, // Fetch the next 10 feed items
-      error => {
-        this.setState({ disableLoadMore: false });
-        if (error) {
-          // tslint:disable-next-line:no-console
-          console.error(error);
-        }
+  `,
+  viewer: graphql`
+    fragment StreamContainer_viewer on User {
+      ...UserBoxContainer_viewer
+      ...CreateCommentReplyMutation_viewer
+      ...CreateCommentMutation_viewer
+      status {
+        current
       }
-    );
-  };
-}
+    }
+  `,
+  settings: graphql`
+    fragment StreamContainer_settings on Settings {
+      reaction {
+        sortLabel
+      }
+      ...PostCommentFormContainer_settings
+      ...UserBoxContainer_settings
+      ...CommunityGuidelinesContainer_settings
+    }
+  `,
+})(StreamContainer);
 
-// TODO: (cvle) if this could be autogenerated..
-type FragmentVariables = Omit<
-  StreamContainerPaginationQueryVariables,
-  "storyID"
->;
-
-const enhanced = withPaginationContainer<
-  Props,
-  StreamContainerPaginationQueryVariables,
-  FragmentVariables
->(
-  {
-    story: graphql`
-      fragment StreamContainer_story on Story
-        @argumentDefinitions(
-          count: { type: "Int!", defaultValue: 5 }
-          cursor: { type: "Cursor" }
-          orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_DESC }
-        ) {
-        id
-        isClosed
-        comments(first: $count, after: $cursor, orderBy: $orderBy)
-          @connection(key: "Stream_comments") {
-          edges {
-            node {
-              ...StreamContainer_comment @relay(mask: false)
-              ...IgnoredTombstoneOrHideContainer_comment
-            }
-          }
-        }
-        ...PostCommentFormContainer_story
-        ...CommentContainer_story
-        ...ReplyListContainer1_story
-        ...StoryClosedTimeoutContainer_story
-        ...CreateCommentReplyMutation_story
-        ...CreateCommentMutation_story
-      }
-    `,
-    viewer: graphql`
-      fragment StreamContainer_viewer on User {
-        ...ReplyListContainer1_viewer
-        ...CommentContainer_viewer
-        ...UserBoxContainer_viewer
-        ...CreateCommentReplyMutation_viewer
-        ...CreateCommentMutation_viewer
-        ...IgnoredTombstoneOrHideContainer_viewer
-        status {
-          current
-        }
-      }
-    `,
-    settings: graphql`
-      fragment StreamContainer_settings on Settings {
-        reaction {
-          sortLabel
-        }
-        ...PostCommentFormContainer_settings
-        ...ReplyListContainer1_settings
-        ...CommentContainer_settings
-        ...UserBoxContainer_settings
-        ...CommunityGuidelinesContainer_settings
-      }
-    `,
-  },
-  {
-    direction: "forward",
-    getConnectionFromProps(props) {
-      return props.story && props.story.comments;
-    },
-    // This is also the default implementation of `getFragmentVariables` if it isn't provided.
-    getFragmentVariables(prevVars, totalCount) {
-      return {
-        ...prevVars,
-        count: totalCount,
-      };
-    },
-    getVariables(props, { count, cursor }, fragmentVariables) {
-      return {
-        count,
-        cursor,
-        orderBy: fragmentVariables.orderBy,
-        // storyID isn't specified as an @argument for the fragment, but it should be a
-        // variable available for the fragment under the query root.
-        storyID: props.story.id,
-      };
-    },
-    query: graphql`
-      # Pagination query to be fetched upon calling 'loadMore'.
-      # Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
-      query StreamContainerPaginationQuery(
-        $count: Int!
-        $cursor: Cursor
-        $orderBy: COMMENT_SORT!
-        $storyID: ID
-      ) {
-        story(id: $storyID) {
-          ...StreamContainer_story
-            @arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
-        }
-      }
-    `,
-  }
-)(StreamContainer);
-
-export type StreamContainerProps = PropTypesOf<typeof enhanced>;
 export default enhanced;
diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamQuery.spec.tsx b/src/core/client/stream/tabs/Comments/Stream/StreamQuery.spec.tsx
deleted file mode 100644
index 6d82062a1..000000000
--- a/src/core/client/stream/tabs/Comments/Stream/StreamQuery.spec.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import { createRenderer } from "react-test-renderer/shallow";
-
-import { render } from "./StreamQuery";
-
-it("renders stream container", () => {
-  const data = {
-    props: {
-      story: {},
-    } as any,
-    error: null,
-  };
-  const renderer = createRenderer();
-  renderer.render(React.createElement(() => render(data, "CREATED_AT_ASC")));
-  expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
-
-it("renders loading", () => {
-  const data = {
-    props: null,
-    error: null,
-  };
-  const renderer = createRenderer();
-  renderer.render(React.createElement(() => render(data, "CREATED_AT_ASC")));
-  expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
-
-it("renders error", () => {
-  const data = {
-    props: null,
-    error: new Error("error"),
-  };
-  const renderer = createRenderer();
-  renderer.render(React.createElement(() => render(data, "CREATED_AT_ASC")));
-  expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamQuery.tsx b/src/core/client/stream/tabs/Comments/Stream/StreamQuery.tsx
index c649d2c05..defbd4f1e 100644
--- a/src/core/client/stream/tabs/Comments/Stream/StreamQuery.tsx
+++ b/src/core/client/stream/tabs/Comments/Stream/StreamQuery.tsx
@@ -10,16 +10,14 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 
+import { AllCommentsTabQuery } from "./AllCommentsTab";
 import StreamContainer from "./StreamContainer";
 
 interface Props {
   local: Local;
 }
 
-export const render = (
-  data: ReadyState<QueryTypes["response"]>,
-  defaultStreamOrderBy: Props["local"]["defaultStreamOrderBy"]
-) => {
+export const render = (data: ReadyState<QueryTypes["response"]>) => {
   if (data.error) {
     return <div>{data.error.message}</div>;
   }
@@ -37,7 +35,6 @@ export const render = (
         settings={data.props.settings}
         viewer={data.props.viewer}
         story={data.props.story}
-        defaultOrderBy={defaultStreamOrderBy}
       />
     );
   }
@@ -53,34 +50,49 @@ export const render = (
 
 const StreamQuery: FunctionComponent<Props> = props => {
   const {
-    local: { storyID, storyURL, defaultStreamOrderBy },
+    local: { storyID, storyURL, commentsTab },
   } = props;
   return (
-    <QueryRenderer<QueryTypes>
-      query={graphql`
-        query StreamQuery(
-          $storyID: ID
-          $storyURL: String
-          $streamOrderBy: COMMENT_SORT
-        ) {
-          viewer {
-            ...StreamContainer_viewer
+    <>
+      <QueryRenderer<QueryTypes>
+        query={graphql`
+          query StreamQuery($storyID: ID, $storyURL: String) {
+            viewer {
+              ...StreamContainer_viewer
+            }
+            story(id: $storyID, url: $storyURL) {
+              ...StreamContainer_story
+            }
+            settings {
+              ...StreamContainer_settings
+            }
           }
-          story(id: $storyID, url: $storyURL) {
-            ...StreamContainer_story @arguments(orderBy: $streamOrderBy)
+        `}
+        variables={{
+          storyID,
+          storyURL,
+        }}
+        render={data => {
+          if (
+            // TODO: (cvle) For some reason this way of preloading
+            // causes weird errors in the
+            // tests. Needs further investigation.
+            process.env.NODE_ENV !== "test" &&
+            !data.props &&
+            !data.error
+          ) {
+            return (
+              <>
+                {commentsTab === "ALL_COMMENTS" && (
+                  <AllCommentsTabQuery preload />
+                )}
+              </>
+            );
           }
-          settings {
-            ...StreamContainer_settings
-          }
-        }
-      `}
-      variables={{
-        storyID,
-        storyURL,
-        streamOrderBy: defaultStreamOrderBy,
-      }}
-      render={data => render(data, props.local.defaultStreamOrderBy)}
-    />
+          return render(data);
+        }}
+      />
+    </>
   );
 };
 
@@ -89,7 +101,8 @@ const enhanced = withLocalStateContainer(
     fragment StreamQueryLocal on Local {
       storyID
       storyURL
-      defaultStreamOrderBy
+      commentsOrderBy
+      commentsTab
     }
   `
 )(StreamQuery);
diff --git a/src/core/client/stream/tabs/Comments/Stream/__snapshots__/SortMenu.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Stream/__snapshots__/SortMenu.spec.tsx.snap
index f1fc06b14..b8d8a12a9 100644
--- a/src/core/client/stream/tabs/Comments/Stream/__snapshots__/SortMenu.spec.tsx.snap
+++ b/src/core/client/stream/tabs/Comments/Stream/__snapshots__/SortMenu.spec.tsx.snap
@@ -1,119 +1,109 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly on big screens 1`] = `
-<div>
-  <div
-    className="Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter"
+<div
+  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+>
+  <label
+    className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+    htmlFor="coral-comments-sortMenu"
   >
-    <label
-      className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
-      htmlFor="coral-comments-sortMenu"
+    Sort By
+  </label>
+  <span
+    className="SelectField-root"
+  >
+    <select
+      className="SelectField-select undefined"
+      id="coral-comments-sortMenu"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      value="CREATED_AT_ASC"
     >
-      Sort By
-    </label>
-    <span
-      className="SelectField-root"
-    >
-      <select
-        className="SelectField-select undefined"
-        id="coral-comments-sortMenu"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
+      <option
+        value="CREATED_AT_DESC"
+      >
+        Newest
+      </option>
+      <option
         value="CREATED_AT_ASC"
       >
-        <option
-          value="CREATED_AT_DESC"
-        >
-          Newest
-        </option>
-        <option
-          value="CREATED_AT_ASC"
-        >
-          Oldest
-        </option>
-        <option
-          value="REPLIES_DESC"
-        >
-          Most Replies
-        </option>
-        <option
-          value="REACTION_DESC"
-        >
-          Most Reacted
-        </option>
-      </select>
-      <span
-        aria-hidden={true}
-        className="SelectField-afterWrapper undefined"
+        Oldest
+      </option>
+      <option
+        value="REPLIES_DESC"
       >
-        <span
-          aria-hidden="true"
-          className="Icon-root Icon-sm"
-        >
-          expand_more
-        </span>
+        Most Replies
+      </option>
+      <option
+        value="REACTION_DESC"
+      >
+        Most Reacted
+      </option>
+    </select>
+    <span
+      aria-hidden={true}
+      className="SelectField-afterWrapper undefined"
+    >
+      <span
+        aria-hidden="true"
+        className="Icon-root Icon-sm"
+      >
+        expand_more
       </span>
     </span>
-  </div>
-  <hr
-    className="Divider-root"
-  />
+  </span>
 </div>
 `;
 
 exports[`renders correctly on small screens 1`] = `
-<div>
-  <div
-    className="Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter"
+<div
+  className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+>
+  <span
+    className="SelectField-root"
   >
-    <span
-      className="SelectField-root"
+    <select
+      className="SelectField-select SortMenu-mobileSelect"
+      id="coral-comments-sortMenu"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      value="CREATED_AT_ASC"
     >
-      <select
-        className="SelectField-select SortMenu-mobileSelect"
-        id="coral-comments-sortMenu"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
+      <option
+        value="CREATED_AT_DESC"
+      >
+        Newest
+      </option>
+      <option
         value="CREATED_AT_ASC"
       >
-        <option
-          value="CREATED_AT_DESC"
-        >
-          Newest
-        </option>
-        <option
-          value="CREATED_AT_ASC"
-        >
-          Oldest
-        </option>
-        <option
-          value="REPLIES_DESC"
-        >
-          Most Replies
-        </option>
-        <option
-          value="REACTION_DESC"
-        >
-          Most Reacted
-        </option>
-      </select>
-      <span
-        aria-hidden={true}
-        className="SelectField-afterWrapper SortMenu-mobileAfterWrapper"
+        Oldest
+      </option>
+      <option
+        value="REPLIES_DESC"
       >
-        <span
-          aria-hidden="true"
-          className="Icon-root Icon-sm"
-        >
-          sort
-        </span>
+        Most Replies
+      </option>
+      <option
+        value="REACTION_DESC"
+      >
+        Most Reacted
+      </option>
+    </select>
+    <span
+      aria-hidden={true}
+      className="SelectField-afterWrapper SortMenu-mobileAfterWrapper"
+    >
+      <span
+        aria-hidden="true"
+        className="Icon-root Icon-sm"
+      >
+        sort
       </span>
     </span>
-  </div>
-  <hr
-    className="Divider-root"
-  />
+  </span>
 </div>
 `;
diff --git a/src/core/client/stream/tabs/Comments/Stream/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Stream/__snapshots__/Stream.spec.tsx.snap
deleted file mode 100644
index ec885e28b..000000000
--- a/src/core/client/stream/tabs/Comments/Stream/__snapshots__/Stream.spec.tsx.snap
+++ /dev/null
@@ -1,677 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<ForwardRef(forwardRef)
-  className="Stream-root"
-  size="double"
->
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-    viewer={null}
-  />
-  <Relay(CommunityGuidelinesContainerProps)
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-  />
-  <withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-    story={
-      Object {
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-  />
-  <SortMenu
-    onChange={[Function]}
-    orderBy="CREATED_AT_ASC"
-    reactionSortLabel="Most Reacted"
-  />
-  <ForwardRef(forwardRef)
-    aria-live="polite"
-    data-testid="comments-stream-log"
-    id="coral-comments-stream-log"
-    role="log"
-  >
-    <Relay(IgnoredTombstoneOrHideContainer)
-      comment={
-        Object {
-          "id": "comment-1",
-        }
-      }
-      key="comment-1"
-      viewer={null}
-    >
-      <ForwardRef(forwardRef)>
-        <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-          comment={
-            Object {
-              "id": "comment-1",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-        <withProps(Relay(ReplyListContainer))
-          comment={
-            Object {
-              "id": "comment-1",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-      </ForwardRef(forwardRef)>
-    </Relay(IgnoredTombstoneOrHideContainer)>
-    <Relay(IgnoredTombstoneOrHideContainer)
-      comment={
-        Object {
-          "id": "comment-2",
-        }
-      }
-      key="comment-2"
-      viewer={null}
-    >
-      <ForwardRef(forwardRef)>
-        <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-          comment={
-            Object {
-              "id": "comment-2",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-        <withProps(Relay(ReplyListContainer))
-          comment={
-            Object {
-              "id": "comment-2",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-      </ForwardRef(forwardRef)>
-    </Relay(IgnoredTombstoneOrHideContainer)>
-  </ForwardRef(forwardRef)>
-</ForwardRef(forwardRef)>
-`;
-
-exports[`when there is more disables load more button 1`] = `
-<ForwardRef(forwardRef)
-  className="Stream-root"
-  size="double"
->
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-    viewer={null}
-  />
-  <Relay(CommunityGuidelinesContainerProps)
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-  />
-  <withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-    story={
-      Object {
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-  />
-  <SortMenu
-    onChange={[Function]}
-    orderBy="CREATED_AT_ASC"
-    reactionSortLabel="Most Reacted"
-  />
-  <ForwardRef(forwardRef)
-    aria-live="polite"
-    data-testid="comments-stream-log"
-    id="coral-comments-stream-log"
-    role="log"
-  >
-    <Relay(IgnoredTombstoneOrHideContainer)
-      comment={
-        Object {
-          "id": "comment-1",
-        }
-      }
-      key="comment-1"
-      viewer={null}
-    >
-      <ForwardRef(forwardRef)>
-        <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-          comment={
-            Object {
-              "id": "comment-1",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-        <withProps(Relay(ReplyListContainer))
-          comment={
-            Object {
-              "id": "comment-1",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-      </ForwardRef(forwardRef)>
-    </Relay(IgnoredTombstoneOrHideContainer)>
-    <Relay(IgnoredTombstoneOrHideContainer)
-      comment={
-        Object {
-          "id": "comment-2",
-        }
-      }
-      key="comment-2"
-      viewer={null}
-    >
-      <ForwardRef(forwardRef)>
-        <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-          comment={
-            Object {
-              "id": "comment-2",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-        <withProps(Relay(ReplyListContainer))
-          comment={
-            Object {
-              "id": "comment-2",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-      </ForwardRef(forwardRef)>
-    </Relay(IgnoredTombstoneOrHideContainer)>
-    <Localized
-      id="comments-stream-loadMore"
-    >
-      <ForwardRef(forwardRef)
-        aria-controls="coral-comments-stream-log"
-        disabled={true}
-        fullWidth={true}
-        id="coral-comments-stream-loadMore"
-        onClick={[Function]}
-        variant="outlined"
-      >
-        Load More
-      </ForwardRef(forwardRef)>
-    </Localized>
-  </ForwardRef(forwardRef)>
-</ForwardRef(forwardRef)>
-`;
-
-exports[`when there is more renders a load more button 1`] = `
-<ForwardRef(forwardRef)
-  className="Stream-root"
-  size="double"
->
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-    viewer={null}
-  />
-  <Relay(CommunityGuidelinesContainerProps)
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-  />
-  <withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-    story={
-      Object {
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-  />
-  <SortMenu
-    onChange={[Function]}
-    orderBy="CREATED_AT_ASC"
-    reactionSortLabel="Most Reacted"
-  />
-  <ForwardRef(forwardRef)
-    aria-live="polite"
-    data-testid="comments-stream-log"
-    id="coral-comments-stream-log"
-    role="log"
-  >
-    <Relay(IgnoredTombstoneOrHideContainer)
-      comment={
-        Object {
-          "id": "comment-1",
-        }
-      }
-      key="comment-1"
-      viewer={null}
-    >
-      <ForwardRef(forwardRef)>
-        <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-          comment={
-            Object {
-              "id": "comment-1",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-        <withProps(Relay(ReplyListContainer))
-          comment={
-            Object {
-              "id": "comment-1",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-      </ForwardRef(forwardRef)>
-    </Relay(IgnoredTombstoneOrHideContainer)>
-    <Relay(IgnoredTombstoneOrHideContainer)
-      comment={
-        Object {
-          "id": "comment-2",
-        }
-      }
-      key="comment-2"
-      viewer={null}
-    >
-      <ForwardRef(forwardRef)>
-        <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-          comment={
-            Object {
-              "id": "comment-2",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-        <withProps(Relay(ReplyListContainer))
-          comment={
-            Object {
-              "id": "comment-2",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={null}
-        />
-      </ForwardRef(forwardRef)>
-    </Relay(IgnoredTombstoneOrHideContainer)>
-    <Localized
-      id="comments-stream-loadMore"
-    >
-      <ForwardRef(forwardRef)
-        aria-controls="coral-comments-stream-log"
-        disabled={false}
-        fullWidth={true}
-        id="coral-comments-stream-loadMore"
-        onClick={[Function]}
-        variant="outlined"
-      >
-        Load More
-      </ForwardRef(forwardRef)>
-    </Localized>
-  </ForwardRef(forwardRef)>
-</ForwardRef(forwardRef)>
-`;
-
-exports[`when use is logged in renders correctly 1`] = `
-<ForwardRef(forwardRef)
-  className="Stream-root"
-  size="double"
->
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-    viewer={Object {}}
-  />
-  <Relay(CommunityGuidelinesContainerProps)
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-  />
-  <withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Reacted",
-        },
-      }
-    }
-    story={
-      Object {
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-  />
-  <SortMenu
-    onChange={[Function]}
-    orderBy="CREATED_AT_ASC"
-    reactionSortLabel="Most Reacted"
-  />
-  <ForwardRef(forwardRef)
-    aria-live="polite"
-    data-testid="comments-stream-log"
-    id="coral-comments-stream-log"
-    role="log"
-  >
-    <Relay(IgnoredTombstoneOrHideContainer)
-      comment={
-        Object {
-          "id": "comment-1",
-        }
-      }
-      key="comment-1"
-      viewer={Object {}}
-    >
-      <ForwardRef(forwardRef)>
-        <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-          comment={
-            Object {
-              "id": "comment-1",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={Object {}}
-        />
-        <withProps(Relay(ReplyListContainer))
-          comment={
-            Object {
-              "id": "comment-1",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={Object {}}
-        />
-      </ForwardRef(forwardRef)>
-    </Relay(IgnoredTombstoneOrHideContainer)>
-    <Relay(IgnoredTombstoneOrHideContainer)
-      comment={
-        Object {
-          "id": "comment-2",
-        }
-      }
-      key="comment-2"
-      viewer={Object {}}
-    >
-      <ForwardRef(forwardRef)>
-        <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
-          comment={
-            Object {
-              "id": "comment-2",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={Object {}}
-        />
-        <withProps(Relay(ReplyListContainer))
-          comment={
-            Object {
-              "id": "comment-2",
-            }
-          }
-          settings={
-            Object {
-              "reaction": Object {
-                "sortLabel": "Most Reacted",
-              },
-            }
-          }
-          story={
-            Object {
-              "id": "story-id",
-              "isClosed": false,
-            }
-          }
-          viewer={Object {}}
-        />
-      </ForwardRef(forwardRef)>
-    </Relay(IgnoredTombstoneOrHideContainer)>
-  </ForwardRef(forwardRef)>
-</ForwardRef(forwardRef)>
-`;
diff --git a/src/core/client/stream/tabs/Comments/Stream/__snapshots__/StreamContainer.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Stream/__snapshots__/StreamContainer.spec.tsx.snap
deleted file mode 100644
index 3072d861d..000000000
--- a/src/core/client/stream/tabs/Comments/Stream/__snapshots__/StreamContainer.spec.tsx.snap
+++ /dev/null
@@ -1,296 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<Fragment>
-  <withContext(createMutationContainer(Relay(StoryClosedTimeoutContainer)))
-    story={
-      Object {
-        "comments": Object {
-          "edges": Array [
-            Object {
-              "node": Object {
-                "id": "comment-1",
-              },
-            },
-            Object {
-              "node": Object {
-                "id": "comment-2",
-              },
-            },
-          ],
-        },
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-  />
-  <Stream
-    banned={false}
-    comments={
-      Array [
-        Object {
-          "id": "comment-1",
-        },
-        Object {
-          "id": "comment-2",
-        },
-      ]
-    }
-    disableLoadMore={false}
-    onChangeOrderBy={[Function]}
-    onLoadMore={[Function]}
-    orderBy="CREATED_AT_ASC"
-    refetching={false}
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Respected",
-        },
-      }
-    }
-    story={
-      Object {
-        "comments": Object {
-          "edges": Array [
-            Object {
-              "node": Object {
-                "id": "comment-1",
-              },
-            },
-            Object {
-              "node": Object {
-                "id": "comment-2",
-              },
-            },
-          ],
-        },
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-    viewer={null}
-  />
-</Fragment>
-`;
-
-exports[`when has more comments renders hasMore 1`] = `
-<Fragment>
-  <withContext(createMutationContainer(Relay(StoryClosedTimeoutContainer)))
-    story={
-      Object {
-        "comments": Object {
-          "edges": Array [
-            Object {
-              "node": Object {
-                "id": "comment-1",
-              },
-            },
-            Object {
-              "node": Object {
-                "id": "comment-2",
-              },
-            },
-          ],
-        },
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-  />
-  <Stream
-    banned={false}
-    comments={
-      Array [
-        Object {
-          "id": "comment-1",
-        },
-        Object {
-          "id": "comment-2",
-        },
-      ]
-    }
-    disableLoadMore={false}
-    hasMore={true}
-    onChangeOrderBy={[Function]}
-    onLoadMore={[Function]}
-    orderBy="CREATED_AT_ASC"
-    refetching={false}
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Respected",
-        },
-      }
-    }
-    story={
-      Object {
-        "comments": Object {
-          "edges": Array [
-            Object {
-              "node": Object {
-                "id": "comment-1",
-              },
-            },
-            Object {
-              "node": Object {
-                "id": "comment-2",
-              },
-            },
-          ],
-        },
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-    viewer={null}
-  />
-</Fragment>
-`;
-
-exports[`when has more comments when loading more disables load more button 1`] = `
-<Fragment>
-  <withContext(createMutationContainer(Relay(StoryClosedTimeoutContainer)))
-    story={
-      Object {
-        "comments": Object {
-          "edges": Array [
-            Object {
-              "node": Object {
-                "id": "comment-1",
-              },
-            },
-            Object {
-              "node": Object {
-                "id": "comment-2",
-              },
-            },
-          ],
-        },
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-  />
-  <Stream
-    banned={false}
-    comments={
-      Array [
-        Object {
-          "id": "comment-1",
-        },
-        Object {
-          "id": "comment-2",
-        },
-      ]
-    }
-    disableLoadMore={true}
-    hasMore={true}
-    onChangeOrderBy={[Function]}
-    onLoadMore={[Function]}
-    orderBy="CREATED_AT_ASC"
-    refetching={false}
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Respected",
-        },
-      }
-    }
-    story={
-      Object {
-        "comments": Object {
-          "edges": Array [
-            Object {
-              "node": Object {
-                "id": "comment-1",
-              },
-            },
-            Object {
-              "node": Object {
-                "id": "comment-2",
-              },
-            },
-          ],
-        },
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-    viewer={null}
-  />
-</Fragment>
-`;
-
-exports[`when has more comments when loading more enable load more button after loading is done 1`] = `
-<Fragment>
-  <withContext(createMutationContainer(Relay(StoryClosedTimeoutContainer)))
-    story={
-      Object {
-        "comments": Object {
-          "edges": Array [
-            Object {
-              "node": Object {
-                "id": "comment-1",
-              },
-            },
-            Object {
-              "node": Object {
-                "id": "comment-2",
-              },
-            },
-          ],
-        },
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-  />
-  <Stream
-    banned={false}
-    comments={
-      Array [
-        Object {
-          "id": "comment-1",
-        },
-        Object {
-          "id": "comment-2",
-        },
-      ]
-    }
-    disableLoadMore={false}
-    hasMore={true}
-    onChangeOrderBy={[Function]}
-    onLoadMore={[Function]}
-    orderBy="CREATED_AT_ASC"
-    refetching={false}
-    settings={
-      Object {
-        "reaction": Object {
-          "sortLabel": "Most Respected",
-        },
-      }
-    }
-    story={
-      Object {
-        "comments": Object {
-          "edges": Array [
-            Object {
-              "node": Object {
-                "id": "comment-1",
-              },
-            },
-            Object {
-              "node": Object {
-                "id": "comment-2",
-              },
-            },
-          ],
-        },
-        "id": "story-id",
-        "isClosed": false,
-      }
-    }
-    viewer={null}
-  />
-</Fragment>
-`;
diff --git a/src/core/client/stream/tabs/Comments/Stream/__snapshots__/StreamQuery.spec.tsx.snap b/src/core/client/stream/tabs/Comments/Stream/__snapshots__/StreamQuery.spec.tsx.snap
deleted file mode 100644
index 2015249b4..000000000
--- a/src/core/client/stream/tabs/Comments/Stream/__snapshots__/StreamQuery.spec.tsx.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders error 1`] = `
-<div>
-  error
-</div>
-`;
-
-exports[`renders loading 1`] = `
-<Delay
-  ms={500}
->
-  <ForwardRef(forwardRef)
-    justifyContent="center"
-  >
-    <withPropsOnChange(Spinner) />
-  </ForwardRef(forwardRef)>
-</Delay>
-`;
-
-exports[`renders stream container 1`] = `
-<Relay(StreamContainer)
-  defaultOrderBy="CREATED_AT_ASC"
-  story={Object {}}
-/>
-`;
diff --git a/src/core/client/stream/tabs/Comments/__snapshots__/CommentsPane.spec.tsx.snap b/src/core/client/stream/tabs/Comments/__snapshots__/CommentsPane.spec.tsx.snap
deleted file mode 100644
index 2207f2403..000000000
--- a/src/core/client/stream/tabs/Comments/__snapshots__/CommentsPane.spec.tsx.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders permalink view 1`] = `<withContext(withLocalStateContainer(PermalinkViewQuery)) />`;
-
-exports[`renders stream 1`] = `<withContext(withLocalStateContainer(StreamQuery)) />`;
diff --git a/src/core/client/stream/tabs/Comments/index.ts b/src/core/client/stream/tabs/Comments/index.ts
index 1a58636b2..63b62d0bc 100644
--- a/src/core/client/stream/tabs/Comments/index.ts
+++ b/src/core/client/stream/tabs/Comments/index.ts
@@ -1,4 +1 @@
-export {
-  default,
-  default as CommentsPaneContainer,
-} from "./CommentsPaneContainer";
+export { default, default as CommentsPane } from "./CommentsPane";
diff --git a/src/core/client/stream/tabs/Profile/Profile.tsx b/src/core/client/stream/tabs/Profile/Profile.tsx
index d0e59d1cb..b4b088b79 100644
--- a/src/core/client/stream/tabs/Profile/Profile.tsx
+++ b/src/core/client/stream/tabs/Profile/Profile.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, useCallback } from "react";
 
+import { graphql, useLocal } from "coral-framework/lib/relay";
 import { PropTypesOf } from "coral-framework/types";
 import { ProfileLocal } from "coral-stream/__generated__/ProfileLocal.graphql";
 import UserBoxContainer from "coral-stream/common/UserBox";
@@ -10,8 +11,8 @@ import {
   TabContent,
   TabPane,
 } from "coral-ui/components";
+import { Localized } from "fluent-react/compat";
 
-import { graphql, useLocal } from "coral-framework/lib/relay";
 import CommentHistoryContainer from "./CommentHistory";
 import SettingsContainer from "./Settings";
 
@@ -41,8 +42,16 @@ const Profile: FunctionComponent<ProfileProps> = props => {
         activeTab={local.profileTab}
         onTabClick={onTabClick}
       >
-        <Tab tabID="MY_COMMENTS">My Comments</Tab>
-        <Tab tabID="SETTINGS">Settings</Tab>
+        <Tab tabID="MY_COMMENTS">
+          <Localized id="profile-myCommentsTab">
+            <span>My Comments</span>
+          </Localized>
+        </Tab>
+        <Tab tabID="SETTINGS">
+          <Localized id="profile-settingsTab">
+            <span>Settings</span>
+          </Localized>
+        </Tab>
       </TabBar>
       <TabContent activeTab={local.profileTab}>
         <TabPane tabID="MY_COMMENTS">
diff --git a/src/core/client/stream/test/comments/create.ts b/src/core/client/stream/test/comments/create.ts
index 1782ba62b..c52615ae0 100644
--- a/src/core/client/stream/test/comments/create.ts
+++ b/src/core/client/stream/test/comments/create.ts
@@ -7,9 +7,10 @@ export default function create(params: CreateTestRendererParams) {
     ...params,
     initLocalState: (localRecord, source, environment) => {
       localRecord.setValue("COMMENTS", "activeTab");
+      localRecord.setValue("ALL_COMMENTS", "commentsTab");
       localRecord.setValue(false, "loggedIn");
       localRecord.setValue("jti", "accessTokenJTI");
-      localRecord.setValue("CREATED_AT_DESC", "defaultStreamOrderBy");
+      localRecord.setValue("CREATED_AT_DESC", "commentsOrderBy");
       if (params.initLocalState) {
         params.initLocalState(localRecord, source, environment);
       }
diff --git a/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap b/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
new file mode 100644
index 000000000..d0fa1e1d6
--- /dev/null
+++ b/src/core/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
@@ -0,0 +1,491 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders comment stream 1`] = `
+<div
+  className="Box-root HorizontalGutter-root App-root HorizontalGutter-full"
+>
+  <ul
+    className="TabBar-root TabBar-primary"
+    role="tablist"
+  >
+    <li
+      className="Tab-root"
+      id="tab-COMMENTS"
+      role="presentation"
+    >
+      <button
+        aria-controls="tabPane-COMMENTS"
+        aria-selected={true}
+        className="BaseButton-root Tab-button Tab-primary Tab-active"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        onTouchEnd={[Function]}
+        role="tab"
+        type="button"
+      >
+        <span>
+          Comments
+        </span>
+      </button>
+    </li>
+  </ul>
+  <section
+    aria-labelledby="tab-COMMENTS"
+    className="App-tabContent"
+    data-testid="current-tab-pane"
+    id="tabPane-COMMENTS"
+    role="tabpanel"
+  >
+    <div
+      className="Box-root HorizontalGutter-root StreamContainer-root HorizontalGutter-double"
+    >
+      <div
+        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div>
+        <div
+          className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+        >
+          <div
+            aria-hidden="true"
+          >
+            <div>
+              <div
+                className=""
+              >
+                <div
+                  className="RTE-contentEditableContainer"
+                >
+                  <div
+                    aria-placeholder="Post a comment"
+                    className="RTE-contentEditable RTE-content"
+                    contentEditable={true}
+                    dangerouslySetInnerHTML={
+                      Object {
+                        "__html": "",
+                      }
+                    }
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onCut={[Function]}
+                    onFocus={[Function]}
+                    onInput={[Function]}
+                    onKeyDown={[Function]}
+                    onPaste={[Function]}
+                    onSelect={[Function]}
+                  />
+                  <div
+                    aria-hidden="true"
+                    className="RTE-placeholder RTE-placeholder"
+                  >
+                    Post a comment
+                  </div>
+                </div>
+                <div
+                  className="RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
+                >
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Bold"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_bold
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Italic"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_italic
+                    </span>
+                  </button>
+                  <button
+                    className="Button-button"
+                    disabled={false}
+                    onClick={[Function]}
+                    title="Blockquote"
+                    type="button"
+                  >
+                    <span
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      format_quote
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <button
+            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            type="submit"
+          >
+            Sign in and Join the Conversation
+          </button>
+        </div>
+      </div>
+      <div
+        className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-5"
+      >
+        <div
+          className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+        >
+          <label
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            htmlFor="coral-comments-sortMenu"
+          >
+            Sort By
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              className="SelectField-select undefined"
+              id="coral-comments-sortMenu"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              value="CREATED_AT_DESC"
+            >
+              <option
+                value="CREATED_AT_DESC"
+              >
+                Newest
+              </option>
+              <option
+                value="CREATED_AT_ASC"
+              >
+                Oldest
+              </option>
+              <option
+                value="REPLIES_DESC"
+              >
+                Most Replies
+              </option>
+              <option
+                value="REACTION_DESC"
+              >
+                Most Respected
+              </option>
+            </select>
+            <span
+              aria-hidden={true}
+              className="SelectField-afterWrapper undefined"
+            >
+              <span
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </span>
+            </span>
+          </span>
+        </div>
+        <ul
+          className="TabBar-root TabBar-secondary"
+          role="tablist"
+        >
+          <li
+            className="Tab-root"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
+          >
+            <button
+              aria-controls="tabPane-ALL_COMMENTS"
+              aria-selected={false}
+              className="BaseButton-root Tab-button Tab-secondary"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              role="tab"
+              type="button"
+            >
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+              >
+                <span>
+                  All Comments
+                </span>
+                <span
+                  className="Counter-root Counter-colorGrey Counter-sizeSmall"
+                >
+                  <span
+                    className="Counter-text"
+                  >
+                    2
+                  </span>
+                </span>
+              </div>
+            </button>
+          </li>
+        </ul>
+        <section
+          aria-labelledby="tab-FEATURED_COMMENTS"
+          id="tabPane-FEATURED_COMMENTS"
+          role="tabpanel"
+        >
+          <div
+            aria-live="polite"
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
+            data-testid="comments-stream-log"
+            id="coral-comments-stream-log"
+            role="log"
+          >
+            <div
+              className="FeaturedCommentContainer-root"
+              data-testid="featuredComment-comment-0"
+            >
+              <div
+                className="HTMLContent-root"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Joining Too",
+                  }
+                }
+              />
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
+              >
+                <div
+                  className="Popover-root"
+                >
+                  <button
+                    aria-controls="username-popover"
+                    className="BaseButton-root"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                    >
+                      Markus
+                    </span>
+                  </button>
+                  <div
+                    aria-hidden={true}
+                    aria-labelledby="username-popover-ariainfo"
+                    id="username-popover"
+                    role="popup"
+                  >
+                    <div
+                      className="AriaInfo-root"
+                      id="username-popover-ariainfo"
+                    >
+                      A popover with more user information
+                    </div>
+                  </div>
+                </div>
+                <span
+                  className="Box-root Box-ml-1"
+                />
+                <time
+                  className="Timestamp-root Box-root Box-ml-2 RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+              <div
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Box-mt-2"
+              >
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  disabled={false}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Respect
+                  </span>
+                </button>
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                >
+                  <div>
+                    <a
+                      className="TextLink-root FeaturedCommentContainer-gotoConversation"
+                      href="http://localhost/stories/story-with-featured-comments?commentID=comment-0"
+                      onClick={[Function]}
+                    >
+                      <span>
+                        Go to Conversation
+                      </span>
+                      <span
+                        className="FeaturedCommentContainer-gotoArrow"
+                      >
+                        &gt;
+                      </span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="FeaturedCommentContainer-root"
+              data-testid="featuredComment-comment-1"
+            >
+              <div
+                className="HTMLContent-root"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "What's up?",
+                  }
+                }
+              />
+              <div
+                className="Box-root Flex-root Flex-flex Flex-alignCenter Flex-directionRow Box-mt-4"
+              >
+                <div
+                  className="Popover-root"
+                >
+                  <button
+                    aria-controls="username-popover"
+                    className="BaseButton-root"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                    >
+                      Lukas
+                    </span>
+                  </button>
+                  <div
+                    aria-hidden={true}
+                    aria-labelledby="username-popover-ariainfo"
+                    id="username-popover"
+                    role="popup"
+                  >
+                    <div
+                      className="AriaInfo-root"
+                      id="username-popover-ariainfo"
+                    >
+                      A popover with more user information
+                    </div>
+                  </div>
+                </div>
+                <span
+                  className="Box-root Box-ml-1"
+                />
+                <time
+                  className="Timestamp-root Box-root Box-ml-2 RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+              <div
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Box-mt-2"
+              >
+                <button
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                  disabled={false}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="button"
+                >
+                  <span>
+                    Respect
+                  </span>
+                </button>
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
+                >
+                  <div>
+                    <a
+                      className="TextLink-root FeaturedCommentContainer-gotoConversation"
+                      href="http://localhost/stories/story-with-featured-comments?commentID=comment-1"
+                      onClick={[Function]}
+                    >
+                      <span>
+                        Go to Conversation
+                      </span>
+                      <span
+                        className="FeaturedCommentContainer-gotoArrow"
+                      >
+                        &gt;
+                      </span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </section>
+</div>
+`;
diff --git a/src/core/client/stream/test/comments/featured/create.ts b/src/core/client/stream/test/comments/featured/create.ts
new file mode 100644
index 000000000..96e84c874
--- /dev/null
+++ b/src/core/client/stream/test/comments/featured/create.ts
@@ -0,0 +1,15 @@
+import { CreateTestRendererParams } from "coral-framework/testHelpers";
+
+import superCreate from "../create";
+
+export default function create(params: CreateTestRendererParams) {
+  return superCreate({
+    ...params,
+    initLocalState: (localRecord, source, environment) => {
+      localRecord.setValue("FEATURED_COMMENTS", "commentsTab");
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+}
diff --git a/src/core/client/stream/test/comments/featured/loadMore.spec.tsx b/src/core/client/stream/test/comments/featured/loadMore.spec.tsx
new file mode 100644
index 000000000..bd58808a7
--- /dev/null
+++ b/src/core/client/stream/test/comments/featured/loadMore.spec.tsx
@@ -0,0 +1,99 @@
+import { pureMerge } from "coral-common/utils";
+import { GQLResolver, StoryToCommentsResolver } from "coral-framework/schema";
+import {
+  act,
+  createQueryResolverStub,
+  createResolversStub,
+  CreateTestRendererParams,
+  waitForElement,
+  waitUntilThrow,
+  within,
+} from "coral-framework/testHelpers";
+
+import { settings, storyWithFeaturedComments } from "../../fixtures";
+import create from "./create";
+
+const story = storyWithFeaturedComments;
+
+async function createTestRenderer(
+  params: CreateTestRendererParams<GQLResolver> = {}
+) {
+  const { testRenderer, context } = create({
+    ...params,
+    resolvers: pureMerge(
+      createResolversStub<GQLResolver>({
+        Query: {
+          settings: () => settings,
+          story: () => ({
+            ...story,
+            featuredComments: createQueryResolverStub<StoryToCommentsResolver>(
+              ({ variables }) => {
+                if (!variables.after) {
+                  return {
+                    edges: [story.comments.edges[0]],
+                    pageInfo: {
+                      endCursor: story.comments.edges[0].cursor,
+                      hasNextPage: true,
+                    },
+                  };
+                }
+                expectAndFail(variables.after).toBe(
+                  story.comments.edges[0].cursor
+                );
+                return {
+                  edges: [story.comments.edges[1]],
+                  pageInfo: {
+                    endCursor: story.comments.edges[1].cursor,
+                    hasNextPage: false,
+                  },
+                };
+              }
+            ) as any,
+          }),
+        },
+      }),
+      params.resolvers
+    ),
+    initLocalState: (localRecord, source, environment) => {
+      localRecord.setValue(story.id, "storyID");
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+  return {
+    testRenderer,
+    context,
+  };
+}
+
+it("loads more", async () => {
+  const { testRenderer } = await createTestRenderer();
+  const streamLog = await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
+
+  // Get amount of comments before.
+  const commentsBefore = within(streamLog).getAllByTestID(/^featuredComment-/)
+    .length;
+
+  const loadMoreButton = await waitForElement(() =>
+    within(streamLog).getByText("Load More", {
+      exact: false,
+      selector: "button",
+    })
+  );
+  await act(async () => {
+    loadMoreButton.props.onClick({});
+    await waitUntilThrow(() =>
+      within(streamLog).getByText("Load More", {
+        exact: false,
+        selector: "button",
+      })
+    );
+  });
+  // Get amount of comments after.
+  const commentsAfter = within(streamLog).getAllByTestID(/^featuredComment-/)
+    .length;
+  expect(commentsAfter).toBeGreaterThan(commentsBefore);
+});
diff --git a/src/core/client/stream/test/comments/featured/renderFeaturedStream.spec.tsx b/src/core/client/stream/test/comments/featured/renderFeaturedStream.spec.tsx
new file mode 100644
index 000000000..f02905a26
--- /dev/null
+++ b/src/core/client/stream/test/comments/featured/renderFeaturedStream.spec.tsx
@@ -0,0 +1,56 @@
+import { pureMerge } from "coral-common/utils";
+import { GQLResolver, StoryToCommentsResolver } from "coral-framework/schema";
+import {
+  createQueryResolverStub,
+  createResolversStub,
+  CreateTestRendererParams,
+  waitForElement,
+  within,
+} from "coral-framework/testHelpers";
+
+import { settings, storyWithFeaturedComments } from "../../fixtures";
+import create from "./create";
+
+const story = storyWithFeaturedComments;
+
+async function createTestRenderer(
+  params: CreateTestRendererParams<GQLResolver> = {}
+) {
+  const { testRenderer, context } = create({
+    ...params,
+    resolvers: pureMerge(
+      createResolversStub<GQLResolver>({
+        Query: {
+          settings: () => settings,
+          story: () => ({
+            ...story,
+            featuredComments: createQueryResolverStub<StoryToCommentsResolver>(
+              () => {
+                return story.comments;
+              }
+            ) as any,
+          }),
+        },
+      }),
+      params.resolvers
+    ),
+    initLocalState: (localRecord, source, environment) => {
+      localRecord.setValue(story.id, "storyID");
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+  return {
+    testRenderer,
+    context,
+  };
+}
+
+it("renders comment stream", async () => {
+  const { testRenderer } = await createTestRenderer();
+  await waitForElement(() =>
+    within(testRenderer.root).getByTestID("comments-stream-log")
+  );
+  expect(within(testRenderer.root).toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
index bd0d1620a..b8eee3136 100644
--- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkView.spec.tsx.snap
@@ -9,10 +9,10 @@ exports[`renders permalink view 1`] = `
   role="tabpanel"
 >
   <div
-    className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
+    className="Box-root HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
@@ -40,15 +40,15 @@ exports[`renders permalink view 1`] = `
       </button>
     </div>
     <div
-      className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
+      className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
     >
       <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
       >
         You are currently viewing a
       </p>
       <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
       >
         SINGLE CONVERSATION
       </p>
@@ -68,17 +68,17 @@ exports[`renders permalink view 1`] = `
       </a>
     </div>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <div
-        className="ConversationThread-root"
+        className="ConversationThreadContainer-root"
         data-testid="comments-permalinkView-conversationThread"
       >
         <div
-          className="Line-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
+          className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
         />
         <div
-          className="Line-root HorizontalGutter-root HorizontalGutter-full"
+          className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div
             className="Circle-circleContainer"
@@ -102,7 +102,7 @@ exports[`renders permalink view 1`] = `
               data-testid="comment-comment-1"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
                   className="Indent-root"
@@ -115,13 +115,13 @@ exports[`renders permalink view 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                       >
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <div
                               className="Popover-root"
@@ -138,7 +138,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                                 >
                                   Lukas
                                 </span>
@@ -159,7 +159,7 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
                               className="Timestamp-root RelativeTime-root"
@@ -172,12 +172,12 @@ exports[`renders permalink view 1`] = `
                         </div>
                         <div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                           />
                         </div>
                       </div>
                       <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                       >
                         <div
                           className="HTMLContent-root"
@@ -188,10 +188,10 @@ exports[`renders permalink view 1`] = `
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                          className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -258,7 +258,7 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -308,7 +308,7 @@ exports[`renders permalink view 1`] = `
               data-testid="comment-comment-2"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
                   className="Indent-root"
@@ -321,13 +321,13 @@ exports[`renders permalink view 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                       >
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <div
                               className="Popover-root"
@@ -344,7 +344,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                                 >
                                   Isabelle
                                 </span>
@@ -365,7 +365,7 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
                               className="Timestamp-root RelativeTime-root"
@@ -378,12 +378,12 @@ exports[`renders permalink view 1`] = `
                         </div>
                         <div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                           />
                         </div>
                       </div>
                       <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                       >
                         <div
                           className="HTMLContent-root"
@@ -394,10 +394,10 @@ exports[`renders permalink view 1`] = `
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                          className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -464,7 +464,7 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -512,7 +512,7 @@ exports[`renders permalink view 1`] = `
               data-testid="comment-comment-with-replies"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
                   className="Indent-root"
@@ -525,13 +525,13 @@ exports[`renders permalink view 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                       >
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <div
                               className="Popover-root"
@@ -548,7 +548,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                                 >
                                   Markus
                                 </span>
@@ -569,7 +569,7 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
                               className="Timestamp-root RelativeTime-root"
@@ -582,12 +582,12 @@ exports[`renders permalink view 1`] = `
                         </div>
                         <div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                           />
                         </div>
                       </div>
                       <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                       >
                         <div
                           className="HTMLContent-root"
@@ -598,10 +598,10 @@ exports[`renders permalink view 1`] = `
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                          className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -668,7 +668,7 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -700,19 +700,19 @@ exports[`renders permalink view 1`] = `
         className="PermalinkView-replyList"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
           data-testid="commentReplyList-comment-with-replies"
           id="coral-comments-replyList-log--comment-with-replies"
           role="log"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
               data-testid="comment-comment-3"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
                   className="Indent-root"
@@ -725,13 +725,13 @@ exports[`renders permalink view 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                       >
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <div
                               className="Popover-root"
@@ -748,7 +748,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                                 >
                                   Isabelle
                                 </span>
@@ -769,7 +769,7 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
                               className="Timestamp-root RelativeTime-root"
@@ -782,12 +782,12 @@ exports[`renders permalink view 1`] = `
                         </div>
                         <div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                           />
                         </div>
                       </div>
                       <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                       >
                         <div
                           className="HTMLContent-root"
@@ -798,10 +798,10 @@ exports[`renders permalink view 1`] = `
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                          className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -868,7 +868,7 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -895,13 +895,13 @@ exports[`renders permalink view 1`] = `
             </div>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
               data-testid="comment-comment-4"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
                   className="Indent-root"
@@ -914,13 +914,13 @@ exports[`renders permalink view 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                       >
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <div
                               className="Popover-root"
@@ -937,7 +937,7 @@ exports[`renders permalink view 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                                 >
                                   Isabelle
                                 </span>
@@ -958,7 +958,7 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
                               className="Timestamp-root RelativeTime-root"
@@ -971,12 +971,12 @@ exports[`renders permalink view 1`] = `
                         </div>
                         <div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                           />
                         </div>
                       </div>
                       <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                       >
                         <div
                           className="HTMLContent-root"
@@ -987,10 +987,10 @@ exports[`renders permalink view 1`] = `
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                          className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -1057,7 +1057,7 @@ exports[`renders permalink view 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index ab5e0a1a8..7ac48301e 100644
--- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -9,10 +9,10 @@ exports[`renders permalink view with unknown comment 1`] = `
   role="tabpanel"
 >
   <div
-    className="HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
+    className="Box-root HorizontalGutter-root PermalinkView-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
@@ -40,15 +40,15 @@ exports[`renders permalink view with unknown comment 1`] = `
       </button>
     </div>
     <div
-      className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
+      className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
     >
       <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
       >
         You are currently viewing a
       </p>
       <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
+        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
       >
         SINGLE CONVERSATION
       </p>
@@ -70,11 +70,13 @@ exports[`renders permalink view with unknown comment 1`] = `
     <div
       className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
     >
-      <p
-        className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-      >
-        This comment has been removed or does not exist.
-      </p>
+      <div>
+        <p
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        >
+          This comment has been removed or does not exist.
+        </p>
+      </div>
     </div>
   </div>
 </section>
diff --git a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
index 8939e05b6..4707d23c3 100644
--- a/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/permalink/__snapshots__/permalinkViewLoadMoreParents.spec.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`renders conversation thread 1`] = `
 <div
-  className="ConversationThread-root"
+  className="ConversationThreadContainer-root"
   data-testid="comments-permalinkView-conversationThread"
 >
   <div
-    className="Line-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
+    className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
   >
     <div
       className="Circle-circleContainer"
@@ -27,30 +27,30 @@ exports[`renders conversation thread 1`] = `
         </svg>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+        className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
         id="comment-from-staff-0"
       >
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
         >
           <div
-            className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
           >
             <div>
               <span
-                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
               >
                 Moderator
               </span>
             </div>
             <span
-              className="Tag-root"
+              className="Tag-root Tag-colorGrey"
             >
               Staff
             </span>
           </div>
           <div
-            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
           >
             <time
               className="Timestamp-root RelativeTime-root"
@@ -64,7 +64,7 @@ exports[`renders conversation thread 1`] = `
       </div>
     </div>
     <div
-      className="Circle-circleContainer ConversationThread-loadMore"
+      className="Circle-circleContainer ConversationThreadContainer-loadMore"
     >
       <div
         className="Circle-circleSubContainer"
@@ -84,10 +84,10 @@ exports[`renders conversation thread 1`] = `
         </svg>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
+        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
       >
         <button
-          className="BaseButton-root Button-root ConversationThread-showMoreButton Button-sizeRegular Button-colorRegular Button-variantUnderlined"
+          className="BaseButton-root Button-root ConversationThreadContainer-showMoreButton Button-sizeRegular Button-colorRegular Button-variantUnderlined"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
@@ -100,7 +100,7 @@ exports[`renders conversation thread 1`] = `
           Show More of This Conversation
         </button>
         <span
-          className="Counter-root Counter-colorInherit"
+          className="Counter-root Counter-colorDark"
         >
           <span
             className="Counter-text"
@@ -112,7 +112,7 @@ exports[`renders conversation thread 1`] = `
     </div>
   </div>
   <div
-    className="Line-root HorizontalGutter-root HorizontalGutter-full"
+    className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="Circle-circleContainer"
@@ -136,7 +136,7 @@ exports[`renders conversation thread 1`] = `
         data-testid="comment-comment-0"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div
             className="Indent-root"
@@ -149,13 +149,13 @@ exports[`renders conversation thread 1`] = `
                 role="article"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <div
                         className="Popover-root"
@@ -172,7 +172,7 @@ exports[`renders conversation thread 1`] = `
                           type="button"
                         >
                           <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                           >
                             Markus
                           </span>
@@ -193,7 +193,7 @@ exports[`renders conversation thread 1`] = `
                       </div>
                     </div>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
@@ -206,12 +206,12 @@ exports[`renders conversation thread 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                 >
                   <div
                     className="HTMLContent-root"
@@ -222,10 +222,10 @@ exports[`renders conversation thread 1`] = `
                     }
                   />
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                    className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -292,7 +292,7 @@ exports[`renders conversation thread 1`] = `
                       </div>
                     </div>
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -324,14 +324,14 @@ exports[`renders conversation thread 1`] = `
 
 exports[`shows more of this conversation 1`] = `
 <div
-  className="ConversationThread-root"
+  className="ConversationThreadContainer-root"
   data-testid="comments-permalinkView-conversationThread"
 >
   <div
-    className="Line-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
+    className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
   />
   <div
-    className="Line-root HorizontalGutter-root HorizontalGutter-full"
+    className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="Circle-circleContainer"
@@ -355,7 +355,7 @@ exports[`shows more of this conversation 1`] = `
         data-testid="comment-comment-1"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div
             className="Indent-root"
@@ -368,13 +368,13 @@ exports[`shows more of this conversation 1`] = `
                 role="article"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <div
                         className="Popover-root"
@@ -391,7 +391,7 @@ exports[`shows more of this conversation 1`] = `
                           type="button"
                         >
                           <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                           >
                             Lukas
                           </span>
@@ -412,7 +412,7 @@ exports[`shows more of this conversation 1`] = `
                       </div>
                     </div>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
@@ -425,12 +425,12 @@ exports[`shows more of this conversation 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                 >
                   <div
                     className="HTMLContent-root"
@@ -441,10 +441,10 @@ exports[`shows more of this conversation 1`] = `
                     }
                   />
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                    className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -511,7 +511,7 @@ exports[`shows more of this conversation 1`] = `
                       </div>
                     </div>
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -561,7 +561,7 @@ exports[`shows more of this conversation 1`] = `
         data-testid="comment-comment-from-staff-0"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div
             className="Indent-root"
@@ -574,13 +574,13 @@ exports[`shows more of this conversation 1`] = `
                 role="article"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <div
                         className="Popover-root"
@@ -597,7 +597,7 @@ exports[`shows more of this conversation 1`] = `
                           type="button"
                         >
                           <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                           >
                             Moderator
                           </span>
@@ -617,13 +617,13 @@ exports[`shows more of this conversation 1`] = `
                         </div>
                       </div>
                       <span
-                        className="Tag-root"
+                        className="Tag-root Tag-colorGrey"
                       >
                         Staff
                       </span>
                     </div>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
@@ -636,12 +636,12 @@ exports[`shows more of this conversation 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                 >
                   <div
                     className="HTMLContent-root"
@@ -652,10 +652,10 @@ exports[`shows more of this conversation 1`] = `
                     }
                   />
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                    className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -722,7 +722,7 @@ exports[`shows more of this conversation 1`] = `
                       </div>
                     </div>
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -770,7 +770,7 @@ exports[`shows more of this conversation 1`] = `
         data-testid="comment-comment-0"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div
             className="Indent-root"
@@ -783,13 +783,13 @@ exports[`shows more of this conversation 1`] = `
                 role="article"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                     >
                       <div
                         className="Popover-root"
@@ -806,7 +806,7 @@ exports[`shows more of this conversation 1`] = `
                           type="button"
                         >
                           <span
-                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                            className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                           >
                             Markus
                           </span>
@@ -827,7 +827,7 @@ exports[`shows more of this conversation 1`] = `
                       </div>
                     </div>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                     >
                       <time
                         className="Timestamp-root RelativeTime-root"
@@ -840,12 +840,12 @@ exports[`shows more of this conversation 1`] = `
                   </div>
                   <div>
                     <div
-                      className="Flex-root Flex-flex Flex-itemGutter"
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                     />
                   </div>
                 </div>
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                 >
                   <div
                     className="HTMLContent-root"
@@ -856,10 +856,10 @@ exports[`shows more of this conversation 1`] = `
                     }
                   />
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                    className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -926,7 +926,7 @@ exports[`shows more of this conversation 1`] = `
                       </div>
                     </div>
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                     >
                       <button
                         className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
diff --git a/src/core/client/stream/test/comments/permalink/create.ts b/src/core/client/stream/test/comments/permalink/create.ts
new file mode 100644
index 000000000..3de9a4b2d
--- /dev/null
+++ b/src/core/client/stream/test/comments/permalink/create.ts
@@ -0,0 +1,30 @@
+import { GQLResolver, StoryToCommentsResolver } from "coral-framework/schema";
+import {
+  createQueryResolverOverwrite,
+  CreateTestRendererParams,
+  overwriteQueryResolver,
+} from "coral-framework/testHelpers";
+import { storyWithNoComments } from "coral-stream/test/fixtures";
+
+import createTopLevel from "../create";
+
+export default function create(params: CreateTestRendererParams) {
+  return createTopLevel({
+    ...params,
+    resolvers: overwriteQueryResolver<GQLResolver>(params.resolvers || {}, {
+      story: {
+        featuredComments: createQueryResolverOverwrite<StoryToCommentsResolver>(
+          ({ variables }) => {
+            // TODO: (cvle) Remove this overwrite once we have featured comment counts.
+            return storyWithNoComments.comments;
+          }
+        ),
+      },
+    }),
+    initLocalState: (localRecord, source, environment) => {
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+}
diff --git a/src/core/client/stream/test/comments/permalink/permalinkView.spec.tsx b/src/core/client/stream/test/comments/permalink/permalinkView.spec.tsx
index b8cc693a6..488e84326 100644
--- a/src/core/client/stream/test/comments/permalink/permalinkView.spec.tsx
+++ b/src/core/client/stream/test/comments/permalink/permalinkView.spec.tsx
@@ -2,6 +2,7 @@ import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
 import {
+  act,
   createSinonStub,
   waitForElement,
   within,
@@ -13,7 +14,7 @@ import {
   settings,
   stories,
 } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
@@ -96,12 +97,14 @@ it("show all comments", async () => {
     within(testRenderer.root).getByTestID("current-tab-pane")
   );
 
-  within(tabPane)
-    .getByText("View Full Discussion")
-    .props.onClick(mockEvent);
+  await act(async () => {
+    within(tabPane)
+      .getByText("View Full Discussion")
+      .props.onClick(mockEvent);
+    await waitForElement(() =>
+      within(tabPane).getByTestID("comments-stream-log")
+    );
+  });
 
-  await waitForElement(() =>
-    within(tabPane).getByTestID("comments-stream-log")
-  );
   mockEvent.preventDefault.verify();
 });
diff --git a/src/core/client/stream/test/comments/permalink/permalinkViewCommentNotFound.spec.tsx b/src/core/client/stream/test/comments/permalink/permalinkViewCommentNotFound.spec.tsx
index 97c7c0bc6..2978a816d 100644
--- a/src/core/client/stream/test/comments/permalink/permalinkViewCommentNotFound.spec.tsx
+++ b/src/core/client/stream/test/comments/permalink/permalinkViewCommentNotFound.spec.tsx
@@ -2,13 +2,14 @@ import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
 import {
+  act,
   createSinonStub,
   waitForElement,
   within,
 } from "coral-framework/testHelpers";
 
 import { comments, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
@@ -72,12 +73,14 @@ it("show all comments", async () => {
     within(testRenderer.root).getByTestID("current-tab-pane")
   );
 
-  within(tabPane)
-    .getByText("View Full Discussion")
-    .props.onClick(mockEvent);
+  await act(async () => {
+    within(tabPane)
+      .getByText("View Full Discussion")
+      .props.onClick(mockEvent);
 
-  await waitForElement(() =>
-    within(tabPane).getByTestID("comments-stream-log")
-  );
+    await waitForElement(() =>
+      within(tabPane).getByTestID("comments-stream-log")
+    );
+  });
   mockEvent.preventDefault.verify();
 });
diff --git a/src/core/client/stream/test/comments/permalink/permalinkViewLoadMoreParents.spec.tsx b/src/core/client/stream/test/comments/permalink/permalinkViewLoadMoreParents.spec.tsx
index 7a727de63..75329cd9e 100644
--- a/src/core/client/stream/test/comments/permalink/permalinkViewLoadMoreParents.spec.tsx
+++ b/src/core/client/stream/test/comments/permalink/permalinkViewLoadMoreParents.spec.tsx
@@ -9,7 +9,7 @@ import {
 } from "coral-framework/testHelpers";
 
 import { comments, commentsFromStaff, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/permalink/permalinkViewPostReply.spec.tsx b/src/core/client/stream/test/comments/permalink/permalinkViewPostReply.spec.tsx
index 76c09b380..f83d63851 100644
--- a/src/core/client/stream/test/comments/permalink/permalinkViewPostReply.spec.tsx
+++ b/src/core/client/stream/test/comments/permalink/permalinkViewPostReply.spec.tsx
@@ -16,7 +16,7 @@ import {
   settings,
   stories,
 } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 const commentFixture = comments[0];
 
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
index 32a4666ea..21dfe3908 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/editComment.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`cancel edit 1`] = `
   data-testid="comment-comment-with-replies"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="Indent-root"
@@ -18,13 +18,13 @@ exports[`cancel edit 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -41,7 +41,7 @@ exports[`cancel edit 1`] = `
                     type="button"
                   >
                     <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
                       Markus
                     </span>
@@ -62,7 +62,7 @@ exports[`cancel edit 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -75,7 +75,7 @@ exports[`cancel edit 1`] = `
             </div>
             <div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
@@ -93,7 +93,7 @@ exports[`cancel edit 1`] = `
             </div>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
           >
             <div
               className="HTMLContent-root"
@@ -104,10 +104,10 @@ exports[`cancel edit 1`] = `
               }
             />
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+              className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -174,7 +174,7 @@ exports[`cancel edit 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -228,15 +228,15 @@ exports[`edit a comment and handle server error: edit form 1`] = `
     onSubmit={[Function]}
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <div>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
         >
           <div>
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Markus
             </span>
@@ -251,7 +251,7 @@ exports[`edit a comment and handle server error: edit form 1`] = `
         </div>
       </div>
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root HorizontalGutter-half"
       >
         <label
           className="AriaInfo-root"
@@ -358,7 +358,7 @@ exports[`edit a comment and handle server error: edit form 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
       >
         <button
           className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
@@ -400,15 +400,15 @@ exports[`edit a comment: edit form 1`] = `
     onSubmit={[Function]}
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <div>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
         >
           <div>
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Markus
             </span>
@@ -423,7 +423,7 @@ exports[`edit a comment: edit form 1`] = `
         </div>
       </div>
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root HorizontalGutter-half"
       >
         <label
           className="AriaInfo-root"
@@ -530,7 +530,7 @@ exports[`edit a comment: edit form 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
       >
         <button
           className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
@@ -572,15 +572,15 @@ exports[`edit a comment: optimistic response 1`] = `
     onSubmit={[Function]}
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <div>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
         >
           <div>
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Markus
             </span>
@@ -595,7 +595,7 @@ exports[`edit a comment: optimistic response 1`] = `
         </div>
       </div>
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root HorizontalGutter-half"
       >
         <label
           className="AriaInfo-root"
@@ -702,7 +702,7 @@ exports[`edit a comment: optimistic response 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
       >
         <button
           className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined Button-disabled"
@@ -740,7 +740,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
   data-testid="comment-comment-with-replies"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="Indent-root"
@@ -753,13 +753,13 @@ exports[`edit a comment: render comment with edit button 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -776,7 +776,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
                     type="button"
                   >
                     <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
                       Markus
                     </span>
@@ -797,7 +797,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -810,7 +810,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
             </div>
             <div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
@@ -828,7 +828,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
             </div>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
           >
             <div
               className="HTMLContent-root"
@@ -839,10 +839,10 @@ exports[`edit a comment: render comment with edit button 1`] = `
               }
             />
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+              className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -909,7 +909,7 @@ exports[`edit a comment: render comment with edit button 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -959,7 +959,7 @@ exports[`edit a comment: server response 1`] = `
   data-testid="comment-comment-with-replies"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="Indent-root"
@@ -972,13 +972,13 @@ exports[`edit a comment: server response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -995,7 +995,7 @@ exports[`edit a comment: server response 1`] = `
                     type="button"
                   >
                     <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
                       Markus
                     </span>
@@ -1016,7 +1016,7 @@ exports[`edit a comment: server response 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -1038,7 +1038,7 @@ exports[`edit a comment: server response 1`] = `
             </div>
             <div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
@@ -1056,7 +1056,7 @@ exports[`edit a comment: server response 1`] = `
             </div>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
           >
             <div
               className="HTMLContent-root"
@@ -1067,10 +1067,10 @@ exports[`edit a comment: server response 1`] = `
               }
             />
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+              className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -1137,7 +1137,7 @@ exports[`edit a comment: server response 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -1187,7 +1187,7 @@ exports[`shows expiry message: edit form closed 1`] = `
   data-testid="comment-comment-with-replies"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="Indent-root"
@@ -1200,13 +1200,13 @@ exports[`shows expiry message: edit form closed 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -1223,7 +1223,7 @@ exports[`shows expiry message: edit form closed 1`] = `
                     type="button"
                   >
                     <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
                       Markus
                     </span>
@@ -1244,7 +1244,7 @@ exports[`shows expiry message: edit form closed 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -1257,7 +1257,7 @@ exports[`shows expiry message: edit form closed 1`] = `
             </div>
             <div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
@@ -1275,7 +1275,7 @@ exports[`shows expiry message: edit form closed 1`] = `
             </div>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
           >
             <div
               className="HTMLContent-root"
@@ -1286,10 +1286,10 @@ exports[`shows expiry message: edit form closed 1`] = `
               }
             />
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+              className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -1356,7 +1356,7 @@ exports[`shows expiry message: edit form closed 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -1410,15 +1410,15 @@ exports[`shows expiry message: edit time expired 1`] = `
     onSubmit={[Function]}
   >
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
     >
       <div>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
         >
           <div>
             <span
-              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
             >
               Markus
             </span>
@@ -1433,7 +1433,7 @@ exports[`shows expiry message: edit time expired 1`] = `
         </div>
       </div>
       <div
-        className="HorizontalGutter-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root HorizontalGutter-half"
       >
         <label
           className="AriaInfo-root"
@@ -1530,7 +1530,7 @@ exports[`shows expiry message: edit time expired 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
       >
         <button
           className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
index fc6f7f6bf..96a0b0156 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/loadMore.spec.tsx.snap
@@ -3,19 +3,19 @@
 exports[`renders comment stream with load more button 1`] = `
 <div
   aria-live="polite"
-  className="HorizontalGutter-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root HorizontalGutter-full"
   data-testid="comments-stream-log"
   id="coral-comments-stream-log"
   role="log"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       data-testid="comment-comment-0"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           className="Indent-root"
@@ -28,13 +28,13 @@ exports[`renders comment stream with load more button 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -51,7 +51,7 @@ exports[`renders comment stream with load more button 1`] = `
                         type="button"
                       >
                         <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
                           Markus
                         </span>
@@ -72,7 +72,7 @@ exports[`renders comment stream with load more button 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
                       className="Timestamp-root RelativeTime-root"
@@ -85,12 +85,12 @@ exports[`renders comment stream with load more button 1`] = `
                 </div>
                 <div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                   />
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
               >
                 <div
                   className="HTMLContent-root"
@@ -101,10 +101,10 @@ exports[`renders comment stream with load more button 1`] = `
                   }
                 />
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -171,7 +171,7 @@ exports[`renders comment stream with load more button 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -198,13 +198,13 @@ exports[`renders comment stream with load more button 1`] = `
     </div>
   </div>
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       data-testid="comment-comment-1"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           className="Indent-root"
@@ -217,13 +217,13 @@ exports[`renders comment stream with load more button 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -240,7 +240,7 @@ exports[`renders comment stream with load more button 1`] = `
                         type="button"
                       >
                         <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
                           Lukas
                         </span>
@@ -261,7 +261,7 @@ exports[`renders comment stream with load more button 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
                       className="Timestamp-root RelativeTime-root"
@@ -274,12 +274,12 @@ exports[`renders comment stream with load more button 1`] = `
                 </div>
                 <div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                   />
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
               >
                 <div
                   className="HTMLContent-root"
@@ -290,10 +290,10 @@ exports[`renders comment stream with load more button 1`] = `
                   }
                 />
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -360,7 +360,7 @@ exports[`renders comment stream with load more button 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
index c47d414f6..c8e6ef002 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postComment.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`post a comment: optimistic response 1`] = `
   data-testid="comment-uuid-0"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="IndentedComment-blur Indent-root"
@@ -18,13 +18,13 @@ exports[`post a comment: optimistic response 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -41,7 +41,7 @@ exports[`post a comment: optimistic response 1`] = `
                     type="button"
                   >
                     <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
                       Markus
                     </span>
@@ -62,7 +62,7 @@ exports[`post a comment: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -75,7 +75,7 @@ exports[`post a comment: optimistic response 1`] = `
             </div>
             <div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
@@ -93,7 +93,7 @@ exports[`post a comment: optimistic response 1`] = `
             </div>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
           >
             <div
               className="HTMLContent-root"
@@ -104,10 +104,10 @@ exports[`post a comment: optimistic response 1`] = `
               }
             />
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+              className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -174,7 +174,7 @@ exports[`post a comment: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
index bb7ec24b8..7070a6e5e 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postLocalReply.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`post a reply: open reply form 1`] = `
   data-testid="comment-comment-with-deepest-replies-5"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="Indent-root"
@@ -18,13 +18,13 @@ exports[`post a reply: open reply form 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -41,7 +41,7 @@ exports[`post a reply: open reply form 1`] = `
                     type="button"
                   >
                     <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
                       Markus
                     </span>
@@ -62,7 +62,7 @@ exports[`post a reply: open reply form 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -75,12 +75,12 @@ exports[`post a reply: open reply form 1`] = `
             </div>
             <div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
               />
             </div>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
           >
             <div
               className="HTMLContent-root"
@@ -91,10 +91,10 @@ exports[`post a reply: open reply form 1`] = `
               }
             />
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+              className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -161,7 +161,7 @@ exports[`post a reply: open reply form 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -223,10 +223,10 @@ exports[`post a reply: open reply form 1`] = `
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root HorizontalGutter-half"
         >
           <div>
             <label
@@ -236,7 +236,7 @@ exports[`post a reply: open reply form 1`] = `
               Write a reply
             </label>
             <div
-              className="Flex-root ReplyTo-root Flex-flex Flex-alignCenter"
+              className="Box-root Flex-root ReplyTo-root Flex-flex Flex-alignCenter"
             >
               <span
                 aria-hidden="true"
@@ -248,11 +248,11 @@ exports[`post a reply: open reply form 1`] = `
                  
               </span>
               <span
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ReplyTo-text"
+                className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ReplyTo-text"
               >
                 Replying to: 
                 <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary ReplyTo-username"
+                  className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ReplyTo-username"
                 >
                   Markus
                 </span>
@@ -343,7 +343,7 @@ exports[`post a reply: open reply form 1`] = `
           </div>
         </div>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
@@ -379,19 +379,19 @@ exports[`post a reply: open reply form 1`] = `
 
 exports[`post a reply: optimistic response 1`] = `
 <div
-  className="HorizontalGutter-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root HorizontalGutter-full"
   data-testid="commentReplyList-comment-with-deepest-replies-5"
   id="coral-comments-replyList-log--comment-with-deepest-replies-5"
   role="log"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       data-testid="comment-uuid-0"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           className="IndentedComment-blur Indent-root"
@@ -404,13 +404,13 @@ exports[`post a reply: optimistic response 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -427,7 +427,7 @@ exports[`post a reply: optimistic response 1`] = `
                         type="button"
                       >
                         <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
                           Markus
                         </span>
@@ -448,7 +448,7 @@ exports[`post a reply: optimistic response 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
                       className="Timestamp-root RelativeTime-root"
@@ -461,7 +461,7 @@ exports[`post a reply: optimistic response 1`] = `
                 </div>
                 <div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
@@ -482,7 +482,7 @@ exports[`post a reply: optimistic response 1`] = `
                 className="Comment-subBar"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
                 >
                   <span
                     aria-hidden="true"
@@ -494,11 +494,11 @@ exports[`post a reply: optimistic response 1`] = `
                      
                   </span>
                   <span
-                    className="Typography-root Typography-timestamp Typography-colorTextPrimary InReplyTo-inReplyTo"
+                    className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary InReplyTo-inReplyTo"
                   >
                     In reply to 
                     <span
-                      className="Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username"
+                      className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username"
                     >
                       Markus
                     </span>
@@ -506,7 +506,7 @@ exports[`post a reply: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
               >
                 <div
                   className="HTMLContent-root"
@@ -517,10 +517,10 @@ exports[`post a reply: optimistic response 1`] = `
                   }
                 />
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -571,7 +571,7 @@ exports[`post a reply: optimistic response 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -621,19 +621,19 @@ exports[`post a reply: optimistic response 1`] = `
 exports[`renders comment stream 1`] = `
 <div
   aria-live="polite"
-  className="HorizontalGutter-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root HorizontalGutter-full"
   data-testid="comments-stream-log"
   id="coral-comments-stream-log"
   role="log"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       data-testid="comment-comment-with-deepest-replies"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           className="Indent-root"
@@ -646,13 +646,13 @@ exports[`renders comment stream 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -669,7 +669,7 @@ exports[`renders comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
                           Markus
                         </span>
@@ -690,7 +690,7 @@ exports[`renders comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
                       className="Timestamp-root RelativeTime-root"
@@ -703,12 +703,12 @@ exports[`renders comment stream 1`] = `
                 </div>
                 <div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                   />
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
               >
                 <div
                   className="HTMLContent-root"
@@ -719,10 +719,10 @@ exports[`renders comment stream 1`] = `
                   }
                 />
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -789,7 +789,7 @@ exports[`renders comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -833,19 +833,19 @@ exports[`renders comment stream 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
       data-testid="commentReplyList-comment-with-deepest-replies"
       id="coral-comments-replyList-log--comment-with-deepest-replies"
       role="log"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           data-testid="comment-comment-with-deepest-replies-1"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
               className="Indent-root"
@@ -858,13 +858,13 @@ exports[`renders comment stream 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                       >
                         <div
                           className="Popover-root"
@@ -881,7 +881,7 @@ exports[`renders comment stream 1`] = `
                             type="button"
                           >
                             <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                             >
                               Markus
                             </span>
@@ -902,7 +902,7 @@ exports[`renders comment stream 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                       >
                         <time
                           className="Timestamp-root RelativeTime-root"
@@ -915,12 +915,12 @@ exports[`renders comment stream 1`] = `
                     </div>
                     <div>
                       <div
-                        className="Flex-root Flex-flex Flex-itemGutter"
+                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                       />
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                   >
                     <div
                       className="HTMLContent-root"
@@ -931,10 +931,10 @@ exports[`renders comment stream 1`] = `
                       }
                     />
                     <div
-                      className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                      className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                       >
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -1001,7 +1001,7 @@ exports[`renders comment stream 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                       >
                         <div
                           className="Popover-root"
@@ -1045,19 +1045,19 @@ exports[`renders comment stream 1`] = `
           </div>
         </div>
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
           data-testid="commentReplyList-comment-with-deepest-replies-1"
           id="coral-comments-replyList-log--comment-with-deepest-replies-1"
           role="log"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
               data-testid="comment-comment-with-deepest-replies-2"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
                   className="Indent-root"
@@ -1070,13 +1070,13 @@ exports[`renders comment stream 1`] = `
                       role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                       >
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <div
                               className="Popover-root"
@@ -1093,7 +1093,7 @@ exports[`renders comment stream 1`] = `
                                 type="button"
                               >
                                 <span
-                                  className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                                 >
                                   Markus
                                 </span>
@@ -1114,7 +1114,7 @@ exports[`renders comment stream 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                           >
                             <time
                               className="Timestamp-root RelativeTime-root"
@@ -1127,12 +1127,12 @@ exports[`renders comment stream 1`] = `
                         </div>
                         <div>
                           <div
-                            className="Flex-root Flex-flex Flex-itemGutter"
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                           />
                         </div>
                       </div>
                       <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                       >
                         <div
                           className="HTMLContent-root"
@@ -1143,10 +1143,10 @@ exports[`renders comment stream 1`] = `
                           }
                         />
                         <div
-                          className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                          className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <button
                               className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -1213,7 +1213,7 @@ exports[`renders comment stream 1`] = `
                             </div>
                           </div>
                           <div
-                            className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                           >
                             <div
                               className="Popover-root"
@@ -1257,19 +1257,19 @@ exports[`renders comment stream 1`] = `
               </div>
             </div>
             <div
-              className="HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
               data-testid="commentReplyList-comment-with-deepest-replies-2"
               id="coral-comments-replyList-log--comment-with-deepest-replies-2"
               role="log"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
                   data-testid="comment-comment-with-deepest-replies-3"
                 >
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-full"
                   >
                     <div
                       className="Indent-root"
@@ -1282,13 +1282,13 @@ exports[`renders comment stream 1`] = `
                           role="article"
                         >
                           <div
-                            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                           >
                             <div
-                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                             >
                               <div
-                                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                               >
                                 <div
                                   className="Popover-root"
@@ -1305,7 +1305,7 @@ exports[`renders comment stream 1`] = `
                                     type="button"
                                   >
                                     <span
-                                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                                     >
                                       Markus
                                     </span>
@@ -1326,7 +1326,7 @@ exports[`renders comment stream 1`] = `
                                 </div>
                               </div>
                               <div
-                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                               >
                                 <time
                                   className="Timestamp-root RelativeTime-root"
@@ -1339,12 +1339,12 @@ exports[`renders comment stream 1`] = `
                             </div>
                             <div>
                               <div
-                                className="Flex-root Flex-flex Flex-itemGutter"
+                                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                               />
                             </div>
                           </div>
                           <div
-                            className="HorizontalGutter-root HorizontalGutter-full"
+                            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                           >
                             <div
                               className="HTMLContent-root"
@@ -1355,10 +1355,10 @@ exports[`renders comment stream 1`] = `
                               }
                             />
                             <div
-                              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                              className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                             >
                               <div
-                                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                               >
                                 <button
                                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -1425,7 +1425,7 @@ exports[`renders comment stream 1`] = `
                                 </div>
                               </div>
                               <div
-                                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                               >
                                 <div
                                   className="Popover-root"
@@ -1469,19 +1469,19 @@ exports[`renders comment stream 1`] = `
                   </div>
                 </div>
                 <div
-                  className="HorizontalGutter-root HorizontalGutter-full"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
                   data-testid="commentReplyList-comment-with-deepest-replies-3"
                   id="coral-comments-replyList-log--comment-with-deepest-replies-3"
                   role="log"
                 >
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-full"
                   >
                     <div
                       data-testid="comment-comment-with-deepest-replies-4"
                     >
                       <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-full"
                       >
                         <div
                           className="Indent-root"
@@ -1494,13 +1494,13 @@ exports[`renders comment stream 1`] = `
                               role="article"
                             >
                               <div
-                                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                               >
                                 <div
-                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                                 >
                                   <div
-                                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                                   >
                                     <div
                                       className="Popover-root"
@@ -1517,7 +1517,7 @@ exports[`renders comment stream 1`] = `
                                         type="button"
                                       >
                                         <span
-                                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                                         >
                                           Markus
                                         </span>
@@ -1538,7 +1538,7 @@ exports[`renders comment stream 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                                   >
                                     <time
                                       className="Timestamp-root RelativeTime-root"
@@ -1551,12 +1551,12 @@ exports[`renders comment stream 1`] = `
                                 </div>
                                 <div>
                                   <div
-                                    className="Flex-root Flex-flex Flex-itemGutter"
+                                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                                   />
                                 </div>
                               </div>
                               <div
-                                className="HorizontalGutter-root HorizontalGutter-full"
+                                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                               >
                                 <div
                                   className="HTMLContent-root"
@@ -1567,10 +1567,10 @@ exports[`renders comment stream 1`] = `
                                   }
                                 />
                                 <div
-                                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                                 >
                                   <div
-                                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                                   >
                                     <button
                                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -1637,7 +1637,7 @@ exports[`renders comment stream 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                                   >
                                     <div
                                       className="Popover-root"
@@ -1681,19 +1681,19 @@ exports[`renders comment stream 1`] = `
                       </div>
                     </div>
                     <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
+                      className="Box-root HorizontalGutter-root HorizontalGutter-full"
                       data-testid="commentReplyList-comment-with-deepest-replies-4"
                       id="coral-comments-replyList-log--comment-with-deepest-replies-4"
                       role="log"
                     >
                       <div
-                        className="HorizontalGutter-root HorizontalGutter-full"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-full"
                       >
                         <div
                           data-testid="comment-comment-with-deepest-replies-5"
                         >
                           <div
-                            className="HorizontalGutter-root HorizontalGutter-full"
+                            className="Box-root HorizontalGutter-root HorizontalGutter-full"
                           >
                             <div
                               className="Indent-root"
@@ -1706,13 +1706,13 @@ exports[`renders comment stream 1`] = `
                                   role="article"
                                 >
                                   <div
-                                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                    className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                                   >
                                     <div
-                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                                     >
                                       <div
-                                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                                       >
                                         <div
                                           className="Popover-root"
@@ -1729,7 +1729,7 @@ exports[`renders comment stream 1`] = `
                                             type="button"
                                           >
                                             <span
-                                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                                             >
                                               Markus
                                             </span>
@@ -1750,7 +1750,7 @@ exports[`renders comment stream 1`] = `
                                         </div>
                                       </div>
                                       <div
-                                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                                       >
                                         <time
                                           className="Timestamp-root RelativeTime-root"
@@ -1763,12 +1763,12 @@ exports[`renders comment stream 1`] = `
                                     </div>
                                     <div>
                                       <div
-                                        className="Flex-root Flex-flex Flex-itemGutter"
+                                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                                       />
                                     </div>
                                   </div>
                                   <div
-                                    className="HorizontalGutter-root HorizontalGutter-full"
+                                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                                   >
                                     <div
                                       className="HTMLContent-root"
@@ -1779,10 +1779,10 @@ exports[`renders comment stream 1`] = `
                                       }
                                     />
                                     <div
-                                      className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                                      className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                                     >
                                       <div
-                                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                                       >
                                         <button
                                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -1849,7 +1849,7 @@ exports[`renders comment stream 1`] = `
                                         </div>
                                       </div>
                                       <div
-                                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                                       >
                                         <div
                                           className="Popover-root"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
index ff3a37cef..dacbdd869 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/postReply.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`post a reply: open reply form 1`] = `
   data-testid="comment-comment-0"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="Indent-root"
@@ -18,13 +18,13 @@ exports[`post a reply: open reply form 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -41,7 +41,7 @@ exports[`post a reply: open reply form 1`] = `
                     type="button"
                   >
                     <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
                       Markus
                     </span>
@@ -62,7 +62,7 @@ exports[`post a reply: open reply form 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -75,12 +75,12 @@ exports[`post a reply: open reply form 1`] = `
             </div>
             <div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
               />
             </div>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
           >
             <div
               className="HTMLContent-root"
@@ -91,10 +91,10 @@ exports[`post a reply: open reply form 1`] = `
               }
             />
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+              className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -161,7 +161,7 @@ exports[`post a reply: open reply form 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -208,10 +208,10 @@ exports[`post a reply: open reply form 1`] = `
       onSubmit={[Function]}
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root HorizontalGutter-half"
         >
           <div>
             <label
@@ -221,7 +221,7 @@ exports[`post a reply: open reply form 1`] = `
               Write a reply
             </label>
             <div
-              className="Flex-root ReplyTo-root Flex-flex Flex-alignCenter"
+              className="Box-root Flex-root ReplyTo-root Flex-flex Flex-alignCenter"
             >
               <span
                 aria-hidden="true"
@@ -233,11 +233,11 @@ exports[`post a reply: open reply form 1`] = `
                  
               </span>
               <span
-                className="Typography-root Typography-bodyCopy Typography-colorTextPrimary ReplyTo-text"
+                className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ReplyTo-text"
               >
                 Replying to: 
                 <span
-                  className="Typography-root Typography-heading4 Typography-colorTextPrimary ReplyTo-username"
+                  className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ReplyTo-username"
                 >
                   Markus
                 </span>
@@ -328,7 +328,7 @@ exports[`post a reply: open reply form 1`] = `
           </div>
         </div>
         <div
-          className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow"
+          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
         >
           <button
             className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
@@ -364,19 +364,19 @@ exports[`post a reply: open reply form 1`] = `
 
 exports[`post a reply: optimistic response 1`] = `
 <div
-  className="HorizontalGutter-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root HorizontalGutter-full"
   data-testid="commentReplyList-comment-0"
   id="coral-comments-replyList-log--comment-0"
   role="log"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       data-testid="comment-uuid-0"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           className="IndentedComment-blur Indent-root"
@@ -389,13 +389,13 @@ exports[`post a reply: optimistic response 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -412,7 +412,7 @@ exports[`post a reply: optimistic response 1`] = `
                         type="button"
                       >
                         <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
                           Markus
                         </span>
@@ -433,7 +433,7 @@ exports[`post a reply: optimistic response 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
                       className="Timestamp-root RelativeTime-root"
@@ -446,7 +446,7 @@ exports[`post a reply: optimistic response 1`] = `
                 </div>
                 <div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
@@ -467,7 +467,7 @@ exports[`post a reply: optimistic response 1`] = `
                 className="Comment-subBar"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root Flex-flex Flex-alignCenter"
                 >
                   <span
                     aria-hidden="true"
@@ -479,11 +479,11 @@ exports[`post a reply: optimistic response 1`] = `
                      
                   </span>
                   <span
-                    className="Typography-root Typography-timestamp Typography-colorTextPrimary InReplyTo-inReplyTo"
+                    className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary InReplyTo-inReplyTo"
                   >
                     In reply to 
                     <span
-                      className="Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username"
+                      className="Box-root Typography-root Typography-heading5 Typography-colorTextPrimary InReplyTo-username"
                     >
                       Markus
                     </span>
@@ -491,7 +491,7 @@ exports[`post a reply: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
               >
                 <div
                   className="HTMLContent-root"
@@ -502,10 +502,10 @@ exports[`post a reply: optimistic response 1`] = `
                   }
                 />
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -572,7 +572,7 @@ exports[`post a reply: optimistic response 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
index 1ffe41114..d0a6f50e2 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderCommunityGuidelines.spec.tsx.snap
@@ -9,10 +9,10 @@ exports[`renders comment stream with community guidelines 1`] = `
   role="tabpanel"
 >
   <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+    className="Box-root HorizontalGutter-root StreamContainer-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
@@ -42,19 +42,21 @@ exports[`renders comment stream with community guidelines 1`] = `
     <div
       className="CallOut-root CallOut-colorPrimary CallOut-fullWidth"
     >
-      <div
-        className="Markdown-root"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<h2 id=\\"community-guidelines\\">Community Guidelines</h2>
+      <div>
+        <div
+          className="Markdown-root"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "<h2 id=\\"community-guidelines\\">Community Guidelines</h2>
 ",
+            }
           }
-        }
-      />
+        />
+      </div>
     </div>
     <div>
       <div
-        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
       >
         <div
           aria-hidden="true"
@@ -154,12 +156,14 @@ exports[`renders comment stream with community guidelines 1`] = `
         </button>
       </div>
     </div>
-    <div>
+    <div
+      className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-5"
+    >
       <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter"
+        className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
       >
         <label
-          className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
           htmlFor="coral-comments-sortMenu"
         >
           Sort By
@@ -209,197 +213,430 @@ exports[`renders comment stream with community guidelines 1`] = `
           </span>
         </span>
       </div>
-      <hr
-        className="Divider-root"
-      />
-    </div>
-    <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      data-testid="comments-stream-log"
-      id="coral-comments-stream-log"
-      role="log"
-    >
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+      <ul
+        className="TabBar-root TabBar-secondary"
+        role="tablist"
       >
-        <div
-          data-testid="comment-comment-0"
+        <li
+          className="Tab-root"
+          id="tab-ALL_COMMENTS"
+          role="presentation"
         >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+          <button
+            aria-controls="tabPane-ALL_COMMENTS"
+            aria-selected={true}
+            className="BaseButton-root Tab-button Tab-secondary Tab-active"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            role="tab"
+            type="button"
           >
             <div
-              className="Indent-root"
+              className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+            >
+              <span>
+                All Comments
+              </span>
+              <span
+                className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+              >
+                <span
+                  className="Counter-text"
+                >
+                  2
+                </span>
+              </span>
+            </div>
+          </button>
+        </li>
+      </ul>
+      <section
+        aria-labelledby="tab-ALL_COMMENTS"
+        id="tabPane-ALL_COMMENTS"
+        role="tabpanel"
+      >
+        <div
+          aria-live="polite"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          data-testid="comments-stream-log"
+          id="coral-comments-stream-log"
+          role="log"
+        >
+          <div
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div
+              data-testid="comment-comment-0"
             >
               <div
-                className=""
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
               >
                 <div
-                  className="Comment-root"
-                  role="article"
+                  className="Indent-root"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className=""
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="Comment-root"
+                      role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                       >
                         <div
-                          className="Popover-root"
+                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                         >
-                          <button
-                            aria-controls="username-popover"
-                            className="BaseButton-root"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                            >
-                              Markus
-                            </span>
-                          </button>
                           <div
-                            aria-hidden={true}
-                            aria-labelledby="username-popover-ariainfo"
-                            id="username-popover"
-                            role="popup"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <div
-                              className="AriaInfo-root"
-                              id="username-popover-ariainfo"
+                              className="Popover-root"
                             >
-                              A popover with more user information
+                              <button
+                                aria-controls="username-popover"
+                                className="BaseButton-root"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                >
+                                  Markus
+                                </span>
+                              </button>
+                              <div
+                                aria-hidden={true}
+                                aria-labelledby="username-popover-ariainfo"
+                                id="username-popover"
+                                role="popup"
+                              >
+                                <div
+                                  className="AriaInfo-root"
+                                  id="username-popover-ariainfo"
+                                >
+                                  A popover with more user information
+                                </div>
+                              </div>
                             </div>
                           </div>
+                          <div
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <div>
+                          <div
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                          />
                         </div>
                       </div>
                       <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                       >
-                        <time
-                          className="Timestamp-root RelativeTime-root"
-                          dateTime="2018-07-06T18:24:00.000Z"
-                          title="2018-07-06T18:24:00.000Z"
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "Joining Too",
+                            }
+                          }
+                        />
+                        <div
+                          className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
-                          2018-07-06T18:24:00.000Z
-                        </time>
+                          <div
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                          >
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              disabled={false}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Respect
+                              </span>
+                            </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              disabled={false}
+                              id="comments-commentContainer-replyButton-comment-0"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Reply
+                              </span>
+                            </button>
+                            <div
+                              className="Popover-root"
+                            >
+                              <button
+                                aria-controls="permalink-popover-comment-0"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Share
+                                </span>
+                              </button>
+                              <div
+                                aria-hidden={true}
+                                aria-labelledby="permalink-popover-comment-0-ariainfo"
+                                id="permalink-popover-comment-0"
+                                role="popup"
+                              >
+                                <div
+                                  className="AriaInfo-root"
+                                  id="permalink-popover-comment-0-ariainfo"
+                                >
+                                  A dialog showing a permalink to the comment
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                          >
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              disabled={false}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Report
+                              </span>
+                            </button>
+                          </div>
+                        </div>
                       </div>
                     </div>
-                    <div>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter"
-                      />
-                    </div>
                   </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div
+              data-testid="comment-comment-1"
+            >
+              <div
+                className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              >
+                <div
+                  className="Indent-root"
+                >
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
+                    className=""
                   >
                     <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "Joining Too",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                      className="Comment-root"
+                      role="article"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                       >
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Respect
-                          </span>
-                        </button>
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          disabled={false}
-                          id="comments-commentContainer-replyButton-comment-0"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Reply
-                          </span>
-                        </button>
                         <div
-                          className="Popover-root"
+                          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                         >
-                          <button
-                            aria-controls="permalink-popover-comment-0"
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Share
-                            </span>
-                          </button>
                           <div
-                            aria-hidden={true}
-                            aria-labelledby="permalink-popover-comment-0-ariainfo"
-                            id="permalink-popover-comment-0"
-                            role="popup"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                           >
                             <div
-                              className="AriaInfo-root"
-                              id="permalink-popover-comment-0-ariainfo"
+                              className="Popover-root"
                             >
-                              A dialog showing a permalink to the comment
+                              <button
+                                aria-controls="username-popover"
+                                className="BaseButton-root"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                >
+                                  Lukas
+                                </span>
+                              </button>
+                              <div
+                                aria-hidden={true}
+                                aria-labelledby="username-popover-ariainfo"
+                                id="username-popover"
+                                role="popup"
+                              >
+                                <div
+                                  className="AriaInfo-root"
+                                  id="username-popover-ariainfo"
+                                >
+                                  A popover with more user information
+                                </div>
+                              </div>
                             </div>
                           </div>
+                          <div
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                        <div>
+                          <div
+                            className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                          />
                         </div>
                       </div>
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                       >
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "What's up?",
+                            }
+                          }
+                        />
+                        <div
+                          className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                         >
-                          <span>
-                            Report
-                          </span>
-                        </button>
+                          <div
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                          >
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              disabled={false}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Respect
+                              </span>
+                            </button>
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              disabled={false}
+                              id="comments-commentContainer-replyButton-comment-1"
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Reply
+                              </span>
+                            </button>
+                            <div
+                              className="Popover-root"
+                            >
+                              <button
+                                aria-controls="permalink-popover-comment-1"
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Share
+                                </span>
+                              </button>
+                              <div
+                                aria-hidden={true}
+                                aria-labelledby="permalink-popover-comment-1-ariainfo"
+                                id="permalink-popover-comment-1"
+                                role="popup"
+                              >
+                                <div
+                                  className="AriaInfo-root"
+                                  id="permalink-popover-comment-1-ariainfo"
+                                >
+                                  A dialog showing a permalink to the comment
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                          >
+                            <button
+                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                              disabled={false}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                              onTouchEnd={[Function]}
+                              type="button"
+                            >
+                              <span>
+                                Report
+                              </span>
+                            </button>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -408,196 +645,7 @@ exports[`renders comment stream with community guidelines 1`] = `
             </div>
           </div>
         </div>
-      </div>
-      <div
-        className="HorizontalGutter-root HorizontalGutter-full"
-      >
-        <div
-          data-testid="comment-comment-1"
-        >
-          <div
-            className="HorizontalGutter-root HorizontalGutter-full"
-          >
-            <div
-              className="Indent-root"
-            >
-              <div
-                className=""
-              >
-                <div
-                  className="Comment-root"
-                  role="article"
-                >
-                  <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
-                      >
-                        <div
-                          className="Popover-root"
-                        >
-                          <button
-                            aria-controls="username-popover"
-                            className="BaseButton-root"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                            >
-                              Lukas
-                            </span>
-                          </button>
-                          <div
-                            aria-hidden={true}
-                            aria-labelledby="username-popover-ariainfo"
-                            id="username-popover"
-                            role="popup"
-                          >
-                            <div
-                              className="AriaInfo-root"
-                              id="username-popover-ariainfo"
-                            >
-                              A popover with more user information
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                      >
-                        <time
-                          className="Timestamp-root RelativeTime-root"
-                          dateTime="2018-07-06T18:24:00.000Z"
-                          title="2018-07-06T18:24:00.000Z"
-                        >
-                          2018-07-06T18:24:00.000Z
-                        </time>
-                      </div>
-                    </div>
-                    <div>
-                      <div
-                        className="Flex-root Flex-flex Flex-itemGutter"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
-                  >
-                    <div
-                      className="HTMLContent-root"
-                      dangerouslySetInnerHTML={
-                        Object {
-                          "__html": "What's up?",
-                        }
-                      }
-                    />
-                    <div
-                      className="Flex-root Flex-flex Flex-justifySpaceBetween"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                      >
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Respect
-                          </span>
-                        </button>
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          disabled={false}
-                          id="comments-commentContainer-replyButton-comment-1"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Reply
-                          </span>
-                        </button>
-                        <div
-                          className="Popover-root"
-                        >
-                          <button
-                            aria-controls="permalink-popover-comment-1"
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Share
-                            </span>
-                          </button>
-                          <div
-                            aria-hidden={true}
-                            aria-labelledby="permalink-popover-comment-1-ariainfo"
-                            id="permalink-popover-comment-1"
-                            role="popup"
-                          >
-                            <div
-                              className="AriaInfo-root"
-                              id="permalink-popover-comment-1-ariainfo"
-                            >
-                              A dialog showing a permalink to the comment
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                      >
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
-                        >
-                          <span>
-                            Report
-                          </span>
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      </section>
     </div>
   </div>
 </section>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
index 8e3883802..1ede939b1 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
@@ -9,10 +9,10 @@ exports[`renders message box when commenting disabled 1`] = `
   role="tabpanel"
 >
   <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+    className="Box-root HorizontalGutter-root StreamContainer-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
@@ -40,20 +40,22 @@ exports[`renders message box when commenting disabled 1`] = `
       </button>
     </div>
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <div
         className="CallOut-root CallOut-colorRegular CallOut-fullWidth PostCommentFormClosedSitewide-root"
       >
-        <div
-          className="Markdown-root PostCommentFormClosedSitewide-message"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<p>Commenting disabled</p>
+        <div>
+          <div
+            className="Markdown-root PostCommentFormClosedSitewide-message"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<p>Commenting disabled</p>
 ",
+              }
             }
-          }
-        />
+          />
+        </div>
       </div>
       <div
         className="MessageBox-root"
@@ -76,12 +78,117 @@ exports[`renders message box when commenting disabled 1`] = `
       </div>
     </div>
     <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      data-testid="comments-stream-log"
-      id="coral-comments-stream-log"
-      role="log"
-    />
+      className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-5"
+    >
+      <div
+        className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+      >
+        <label
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+          htmlFor="coral-comments-sortMenu"
+        >
+          Sort By
+        </label>
+        <span
+          className="SelectField-root"
+        >
+          <select
+            className="SelectField-select undefined"
+            id="coral-comments-sortMenu"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            value="CREATED_AT_DESC"
+          >
+            <option
+              value="CREATED_AT_DESC"
+            >
+              Newest
+            </option>
+            <option
+              value="CREATED_AT_ASC"
+            >
+              Oldest
+            </option>
+            <option
+              value="REPLIES_DESC"
+            >
+              Most Replies
+            </option>
+            <option
+              value="REACTION_DESC"
+            >
+              Most Respected
+            </option>
+          </select>
+          <span
+            aria-hidden={true}
+            className="SelectField-afterWrapper undefined"
+          >
+            <span
+              aria-hidden="true"
+              className="Icon-root Icon-sm"
+            >
+              expand_more
+            </span>
+          </span>
+        </span>
+      </div>
+      <ul
+        className="TabBar-root TabBar-secondary"
+        role="tablist"
+      >
+        <li
+          className="Tab-root"
+          id="tab-ALL_COMMENTS"
+          role="presentation"
+        >
+          <button
+            aria-controls="tabPane-ALL_COMMENTS"
+            aria-selected={true}
+            className="BaseButton-root Tab-button Tab-secondary Tab-active"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            role="tab"
+            type="button"
+          >
+            <div
+              className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+            >
+              <span>
+                All Comments
+              </span>
+              <span
+                className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+              >
+                <span
+                  className="Counter-text"
+                >
+                  0
+                </span>
+              </span>
+            </div>
+          </button>
+        </li>
+      </ul>
+      <section
+        aria-labelledby="tab-ALL_COMMENTS"
+        id="tabPane-ALL_COMMENTS"
+        role="tabpanel"
+      >
+        <div
+          aria-live="polite"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          data-testid="comments-stream-log"
+          id="coral-comments-stream-log"
+          role="log"
+        />
+      </section>
+    </div>
   </div>
 </section>
 `;
@@ -95,27 +202,27 @@ exports[`renders message box when logged in 1`] = `
   role="tabpanel"
 >
   <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+    className="Box-root HorizontalGutter-root StreamContainer-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root"
+      className="Box-root Flex-root"
     >
       <div
-        className="Flex-flex Flex-halfItemGutter Flex-wrap"
+        className="Flex-flex Flex-halfItemGutter Flex-wrap gutter"
       >
         <div
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
         >
           Signed in as 
           <span
-            className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
           >
             Markus
           </span>
           .
         </div>
         <div
-          className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+          className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
         >
           <span>
             Not you? 
@@ -161,10 +268,10 @@ exports[`renders message box when logged in 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root HorizontalGutter-half"
           >
             <label
               className="AriaInfo-root"
@@ -256,7 +363,7 @@ exports[`renders message box when logged in 1`] = `
             </div>
           </div>
           <div
-            className="Flex-root Flex-flex Flex-alignFlexEnd Flex-directionColumn"
+            className="Box-root Flex-root Flex-flex Flex-alignFlexEnd Flex-directionColumn"
           >
             <button
               className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled"
@@ -275,12 +382,117 @@ exports[`renders message box when logged in 1`] = `
       </form>
     </div>
     <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      data-testid="comments-stream-log"
-      id="coral-comments-stream-log"
-      role="log"
-    />
+      className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-5"
+    >
+      <div
+        className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+      >
+        <label
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+          htmlFor="coral-comments-sortMenu"
+        >
+          Sort By
+        </label>
+        <span
+          className="SelectField-root"
+        >
+          <select
+            className="SelectField-select undefined"
+            id="coral-comments-sortMenu"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            value="CREATED_AT_DESC"
+          >
+            <option
+              value="CREATED_AT_DESC"
+            >
+              Newest
+            </option>
+            <option
+              value="CREATED_AT_ASC"
+            >
+              Oldest
+            </option>
+            <option
+              value="REPLIES_DESC"
+            >
+              Most Replies
+            </option>
+            <option
+              value="REACTION_DESC"
+            >
+              Most Respected
+            </option>
+          </select>
+          <span
+            aria-hidden={true}
+            className="SelectField-afterWrapper undefined"
+          >
+            <span
+              aria-hidden="true"
+              className="Icon-root Icon-sm"
+            >
+              expand_more
+            </span>
+          </span>
+        </span>
+      </div>
+      <ul
+        className="TabBar-root TabBar-secondary"
+        role="tablist"
+      >
+        <li
+          className="Tab-root"
+          id="tab-ALL_COMMENTS"
+          role="presentation"
+        >
+          <button
+            aria-controls="tabPane-ALL_COMMENTS"
+            aria-selected={true}
+            className="BaseButton-root Tab-button Tab-secondary Tab-active"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            role="tab"
+            type="button"
+          >
+            <div
+              className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+            >
+              <span>
+                All Comments
+              </span>
+              <span
+                className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+              >
+                <span
+                  className="Counter-text"
+                >
+                  0
+                </span>
+              </span>
+            </div>
+          </button>
+        </li>
+      </ul>
+      <section
+        aria-labelledby="tab-ALL_COMMENTS"
+        id="tabPane-ALL_COMMENTS"
+        role="tabpanel"
+      >
+        <div
+          aria-live="polite"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          data-testid="comments-stream-log"
+          id="coral-comments-stream-log"
+          role="log"
+        />
+      </section>
+    </div>
   </div>
 </section>
 `;
@@ -294,10 +506,10 @@ exports[`renders message box when not logged in 1`] = `
   role="tabpanel"
 >
   <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+    className="Box-root HorizontalGutter-root StreamContainer-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
@@ -345,7 +557,7 @@ exports[`renders message box when not logged in 1`] = `
         />
       </div>
       <div
-        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
       >
         <div
           aria-hidden="true"
@@ -446,12 +658,117 @@ exports[`renders message box when not logged in 1`] = `
       </div>
     </div>
     <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      data-testid="comments-stream-log"
-      id="coral-comments-stream-log"
-      role="log"
-    />
+      className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-5"
+    >
+      <div
+        className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+      >
+        <label
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+          htmlFor="coral-comments-sortMenu"
+        >
+          Sort By
+        </label>
+        <span
+          className="SelectField-root"
+        >
+          <select
+            className="SelectField-select undefined"
+            id="coral-comments-sortMenu"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            value="CREATED_AT_DESC"
+          >
+            <option
+              value="CREATED_AT_DESC"
+            >
+              Newest
+            </option>
+            <option
+              value="CREATED_AT_ASC"
+            >
+              Oldest
+            </option>
+            <option
+              value="REPLIES_DESC"
+            >
+              Most Replies
+            </option>
+            <option
+              value="REACTION_DESC"
+            >
+              Most Respected
+            </option>
+          </select>
+          <span
+            aria-hidden={true}
+            className="SelectField-afterWrapper undefined"
+          >
+            <span
+              aria-hidden="true"
+              className="Icon-root Icon-sm"
+            >
+              expand_more
+            </span>
+          </span>
+        </span>
+      </div>
+      <ul
+        className="TabBar-root TabBar-secondary"
+        role="tablist"
+      >
+        <li
+          className="Tab-root"
+          id="tab-ALL_COMMENTS"
+          role="presentation"
+        >
+          <button
+            aria-controls="tabPane-ALL_COMMENTS"
+            aria-selected={true}
+            className="BaseButton-root Tab-button Tab-secondary Tab-active"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            role="tab"
+            type="button"
+          >
+            <div
+              className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+            >
+              <span>
+                All Comments
+              </span>
+              <span
+                className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+              >
+                <span
+                  className="Counter-text"
+                >
+                  0
+                </span>
+              </span>
+            </div>
+          </button>
+        </li>
+      </ul>
+      <section
+        aria-labelledby="tab-ALL_COMMENTS"
+        id="tabPane-ALL_COMMENTS"
+        role="tabpanel"
+      >
+        <div
+          aria-live="polite"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          data-testid="comments-stream-log"
+          id="coral-comments-stream-log"
+          role="log"
+        />
+      </section>
+    </div>
   </div>
 </section>
 `;
@@ -465,10 +782,10 @@ exports[`renders message box when story isClosed 1`] = `
   role="tabpanel"
 >
   <div
-    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+    className="Box-root HorizontalGutter-root StreamContainer-root HorizontalGutter-double"
   >
     <div
-      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
     >
       <button
         className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
@@ -512,24 +829,131 @@ exports[`renders message box when story isClosed 1`] = `
       <div
         className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
       >
-        <div
-          className="Markdown-root"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<p>Story is closed</p>
+        <div>
+          <div
+            className="Markdown-root"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<p>Story is closed</p>
 ",
+              }
             }
-          }
-        />
+          />
+        </div>
       </div>
     </div>
     <div
-      aria-live="polite"
-      className="HorizontalGutter-root HorizontalGutter-full"
-      data-testid="comments-stream-log"
-      id="coral-comments-stream-log"
-      role="log"
-    />
+      className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-5"
+    >
+      <div
+        className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
+      >
+        <label
+          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+          htmlFor="coral-comments-sortMenu"
+        >
+          Sort By
+        </label>
+        <span
+          className="SelectField-root"
+        >
+          <select
+            className="SelectField-select undefined"
+            id="coral-comments-sortMenu"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            value="CREATED_AT_DESC"
+          >
+            <option
+              value="CREATED_AT_DESC"
+            >
+              Newest
+            </option>
+            <option
+              value="CREATED_AT_ASC"
+            >
+              Oldest
+            </option>
+            <option
+              value="REPLIES_DESC"
+            >
+              Most Replies
+            </option>
+            <option
+              value="REACTION_DESC"
+            >
+              Most Respected
+            </option>
+          </select>
+          <span
+            aria-hidden={true}
+            className="SelectField-afterWrapper undefined"
+          >
+            <span
+              aria-hidden="true"
+              className="Icon-root Icon-sm"
+            >
+              expand_more
+            </span>
+          </span>
+        </span>
+      </div>
+      <ul
+        className="TabBar-root TabBar-secondary"
+        role="tablist"
+      >
+        <li
+          className="Tab-root"
+          id="tab-ALL_COMMENTS"
+          role="presentation"
+        >
+          <button
+            aria-controls="tabPane-ALL_COMMENTS"
+            aria-selected={true}
+            className="BaseButton-root Tab-button Tab-secondary Tab-active"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            role="tab"
+            type="button"
+          >
+            <div
+              className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+            >
+              <span>
+                All Comments
+              </span>
+              <span
+                className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+              >
+                <span
+                  className="Counter-text"
+                >
+                  0
+                </span>
+              </span>
+            </div>
+          </button>
+        </li>
+      </ul>
+      <section
+        aria-labelledby="tab-ALL_COMMENTS"
+        id="tabPane-ALL_COMMENTS"
+        role="tabpanel"
+      >
+        <div
+          aria-live="polite"
+          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          data-testid="comments-stream-log"
+          id="coral-comments-stream-log"
+          role="log"
+        />
+      </section>
+    </div>
   </div>
 </section>
 `;
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
index 84f9f24b4..fafe54b3e 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderReplies.spec.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`renders reply list 1`] = `
 <div
-  className="HorizontalGutter-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root HorizontalGutter-full"
   data-testid="commentReplyList-comment-with-deep-replies"
   id="coral-comments-replyList-log--comment-with-deep-replies"
   role="log"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       data-testid="comment-comment-with-replies"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           className="Indent-root"
@@ -27,13 +27,13 @@ exports[`renders reply list 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -50,7 +50,7 @@ exports[`renders reply list 1`] = `
                         type="button"
                       >
                         <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
                           Markus
                         </span>
@@ -71,7 +71,7 @@ exports[`renders reply list 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
                       className="Timestamp-root RelativeTime-root"
@@ -84,12 +84,12 @@ exports[`renders reply list 1`] = `
                 </div>
                 <div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                   />
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
               >
                 <div
                   className="HTMLContent-root"
@@ -100,10 +100,10 @@ exports[`renders reply list 1`] = `
                   }
                 />
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -170,7 +170,7 @@ exports[`renders reply list 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -196,19 +196,19 @@ exports[`renders reply list 1`] = `
       </div>
     </div>
     <div
-      className="HorizontalGutter-root HorizontalGutter-full"
+      className="Box-root HorizontalGutter-root HorizontalGutter-full"
       data-testid="commentReplyList-comment-with-replies"
       id="coral-comments-replyList-log--comment-with-replies"
       role="log"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           data-testid="comment-comment-3"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
               className="Indent-root"
@@ -221,13 +221,13 @@ exports[`renders reply list 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                       >
                         <div
                           className="Popover-root"
@@ -244,7 +244,7 @@ exports[`renders reply list 1`] = `
                             type="button"
                           >
                             <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                             >
                               Isabelle
                             </span>
@@ -265,7 +265,7 @@ exports[`renders reply list 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                       >
                         <time
                           className="Timestamp-root RelativeTime-root"
@@ -278,12 +278,12 @@ exports[`renders reply list 1`] = `
                     </div>
                     <div>
                       <div
-                        className="Flex-root Flex-flex Flex-itemGutter"
+                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                       />
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                   >
                     <div
                       className="HTMLContent-root"
@@ -294,10 +294,10 @@ exports[`renders reply list 1`] = `
                       }
                     />
                     <div
-                      className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                      className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                       >
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -364,7 +364,7 @@ exports[`renders reply list 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                       >
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -391,13 +391,13 @@ exports[`renders reply list 1`] = `
         </div>
       </div>
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           data-testid="comment-comment-4"
         >
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
             <div
               className="Indent-root"
@@ -410,13 +410,13 @@ exports[`renders reply list 1`] = `
                   role="article"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                      className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                       >
                         <div
                           className="Popover-root"
@@ -433,7 +433,7 @@ exports[`renders reply list 1`] = `
                             type="button"
                           >
                             <span
-                              className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                             >
                               Isabelle
                             </span>
@@ -454,7 +454,7 @@ exports[`renders reply list 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                       >
                         <time
                           className="Timestamp-root RelativeTime-root"
@@ -467,12 +467,12 @@ exports[`renders reply list 1`] = `
                     </div>
                     <div>
                       <div
-                        className="Flex-root Flex-flex Flex-itemGutter"
+                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                       />
                     </div>
                   </div>
                   <div
-                    className="HorizontalGutter-root HorizontalGutter-full"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                   >
                     <div
                       className="HTMLContent-root"
@@ -483,10 +483,10 @@ exports[`renders reply list 1`] = `
                       }
                     />
                     <div
-                      className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                      className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                       >
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -553,7 +553,7 @@ exports[`renders reply list 1`] = `
                         </div>
                       </div>
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                       >
                         <button
                           className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -582,13 +582,13 @@ exports[`renders reply list 1`] = `
     </div>
   </div>
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       data-testid="comment-comment-5"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           className="Indent-root"
@@ -601,13 +601,13 @@ exports[`renders reply list 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -624,7 +624,7 @@ exports[`renders reply list 1`] = `
                         type="button"
                       >
                         <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
                           Isabelle
                         </span>
@@ -645,7 +645,7 @@ exports[`renders reply list 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
                       className="Timestamp-root RelativeTime-root"
@@ -658,12 +658,12 @@ exports[`renders reply list 1`] = `
                 </div>
                 <div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                   />
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
               >
                 <div
                   className="HTMLContent-root"
@@ -674,10 +674,10 @@ exports[`renders reply list 1`] = `
                   }
                 />
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -744,7 +744,7 @@ exports[`renders reply list 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
index 3112f889e..fcebd75d1 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="HorizontalGutter-root App-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root App-root HorizontalGutter-full"
 >
   <ul
     className="TabBar-root TabBar-primary"
@@ -27,7 +27,7 @@ exports[`renders comment stream 1`] = `
         type="button"
       >
         <span>
-          2 Comments
+          Comments
         </span>
       </button>
     </li>
@@ -40,10 +40,10 @@ exports[`renders comment stream 1`] = `
     role="tabpanel"
   >
     <div
-      className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root StreamContainer-root HorizontalGutter-double"
     >
       <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
       >
         <button
           className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
@@ -72,7 +72,7 @@ exports[`renders comment stream 1`] = `
       </div>
       <div>
         <div
-          className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
         >
           <div
             aria-hidden="true"
@@ -172,12 +172,14 @@ exports[`renders comment stream 1`] = `
           </button>
         </div>
       </div>
-      <div>
+      <div
+        className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-5"
+      >
         <div
-          className="Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter"
+          className="Box-root Flex-root StreamContainer-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
         >
           <label
-            className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             htmlFor="coral-comments-sortMenu"
           >
             Sort By
@@ -227,197 +229,435 @@ exports[`renders comment stream 1`] = `
             </span>
           </span>
         </div>
-        <hr
-          className="Divider-root"
-        />
-      </div>
-      <div
-        aria-live="polite"
-        className="HorizontalGutter-root HorizontalGutter-full"
-        data-testid="comments-stream-log"
-        id="coral-comments-stream-log"
-        role="log"
-      >
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
+        <ul
+          className="TabBar-root TabBar-secondary"
+          role="tablist"
         >
-          <div
-            data-testid="comment-comment-0"
+          <li
+            className="Tab-root"
+            id="tab-ALL_COMMENTS"
+            role="presentation"
           >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
+            <button
+              aria-controls="tabPane-ALL_COMMENTS"
+              aria-selected={true}
+              className="BaseButton-root Tab-button Tab-secondary Tab-active"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              role="tab"
+              type="button"
             >
               <div
-                className="Indent-root"
+                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
+              >
+                <span>
+                  All Comments
+                </span>
+                <span
+                  className="Counter-root Counter-colorPrimary Counter-sizeSmall"
+                >
+                  <span
+                    className="Counter-text"
+                  >
+                    2
+                  </span>
+                </span>
+              </div>
+            </button>
+          </li>
+        </ul>
+        <section
+          aria-labelledby="tab-ALL_COMMENTS"
+          id="tabPane-ALL_COMMENTS"
+          role="tabpanel"
+        >
+          <div
+            aria-live="polite"
+            className="Box-root HorizontalGutter-root HorizontalGutter-full"
+            data-testid="comments-stream-log"
+            id="coral-comments-stream-log"
+            role="log"
+          >
+            <div
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+            >
+              <div
+                data-testid="comment-comment-0"
               >
                 <div
-                  className=""
+                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
                 >
                   <div
-                    className="Comment-root"
-                    role="article"
+                    className="Indent-root"
                   >
                     <div
-                      className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                      className=""
                     >
                       <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        className="Comment-root"
+                        role="article"
                       >
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                          className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         >
                           <div
-                            className="Popover-root"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                           >
-                            <button
-                              aria-controls="username-popover"
-                              className="BaseButton-root"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span
-                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                              >
-                                Markus
-                              </span>
-                            </button>
                             <div
-                              aria-hidden={true}
-                              aria-labelledby="username-popover-ariainfo"
-                              id="username-popover"
-                              role="popup"
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                             >
                               <div
-                                className="AriaInfo-root"
-                                id="username-popover-ariainfo"
+                                className="Popover-root"
                               >
-                                A popover with more user information
+                                <button
+                                  aria-controls="username-popover"
+                                  className="BaseButton-root"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span
+                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  >
+                                    Markus
+                                  </span>
+                                </button>
+                                <div
+                                  aria-hidden={true}
+                                  aria-labelledby="username-popover-ariainfo"
+                                  id="username-popover"
+                                  role="popup"
+                                >
+                                  <div
+                                    className="AriaInfo-root"
+                                    id="username-popover-ariainfo"
+                                  >
+                                    A popover with more user information
+                                  </div>
+                                </div>
                               </div>
                             </div>
+                            <div
+                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                            >
+                              <time
+                                className="Timestamp-root RelativeTime-root"
+                                dateTime="2018-07-06T18:24:00.000Z"
+                                title="2018-07-06T18:24:00.000Z"
+                              >
+                                2018-07-06T18:24:00.000Z
+                              </time>
+                            </div>
+                          </div>
+                          <div>
+                            <div
+                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                            />
                           </div>
                         </div>
                         <div
-                          className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                         >
-                          <time
-                            className="Timestamp-root RelativeTime-root"
-                            dateTime="2018-07-06T18:24:00.000Z"
-                            title="2018-07-06T18:24:00.000Z"
+                          <div
+                            className="HTMLContent-root"
+                            dangerouslySetInnerHTML={
+                              Object {
+                                "__html": "Joining Too",
+                              }
+                            }
+                          />
+                          <div
+                            className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                           >
-                            2018-07-06T18:24:00.000Z
-                          </time>
+                            <div
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            >
+                              <button
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                disabled={false}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Respect
+                                </span>
+                              </button>
+                              <button
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                disabled={false}
+                                id="comments-commentContainer-replyButton-comment-0"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Reply
+                                </span>
+                              </button>
+                              <div
+                                className="Popover-root"
+                              >
+                                <button
+                                  aria-controls="permalink-popover-comment-0"
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Share
+                                  </span>
+                                </button>
+                                <div
+                                  aria-hidden={true}
+                                  aria-labelledby="permalink-popover-comment-0-ariainfo"
+                                  id="permalink-popover-comment-0"
+                                  role="popup"
+                                >
+                                  <div
+                                    className="AriaInfo-root"
+                                    id="permalink-popover-comment-0-ariainfo"
+                                  >
+                                    A dialog showing a permalink to the comment
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            >
+                              <button
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                disabled={false}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Report
+                                </span>
+                              </button>
+                            </div>
+                          </div>
                         </div>
                       </div>
-                      <div>
-                        <div
-                          className="Flex-root Flex-flex Flex-itemGutter"
-                        />
-                      </div>
                     </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+            >
+              <div
+                data-testid="comment-comment-from-staff-0"
+              >
+                <div
+                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                >
+                  <div
+                    className="Indent-root"
+                  >
                     <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
+                      className=""
                     >
                       <div
-                        className="HTMLContent-root"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "Joining Too",
-                          }
-                        }
-                      />
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                        className="Comment-root"
+                        role="article"
                       >
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
                         >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            disabled={false}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            disabled={false}
-                            id="comments-commentContainer-replyButton-comment-0"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
                           <div
-                            className="Popover-root"
+                            className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                           >
-                            <button
-                              aria-controls="permalink-popover-comment-0"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
                             <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-0-ariainfo"
-                              id="permalink-popover-comment-0"
-                              role="popup"
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                             >
                               <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-0-ariainfo"
+                                className="Popover-root"
                               >
-                                A dialog showing a permalink to the comment
+                                <button
+                                  aria-controls="username-popover"
+                                  className="BaseButton-root"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span
+                                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  >
+                                    Moderator
+                                  </span>
+                                </button>
+                                <div
+                                  aria-hidden={true}
+                                  aria-labelledby="username-popover-ariainfo"
+                                  id="username-popover"
+                                  role="popup"
+                                >
+                                  <div
+                                    className="AriaInfo-root"
+                                    id="username-popover-ariainfo"
+                                  >
+                                    A popover with more user information
+                                  </div>
+                                </div>
                               </div>
+                              <span
+                                className="Tag-root Tag-colorGrey"
+                              >
+                                Staff
+                              </span>
                             </div>
+                            <div
+                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
+                            >
+                              <time
+                                className="Timestamp-root RelativeTime-root"
+                                dateTime="2018-07-06T18:24:00.000Z"
+                                title="2018-07-06T18:24:00.000Z"
+                              >
+                                2018-07-06T18:24:00.000Z
+                              </time>
+                            </div>
+                          </div>
+                          <div>
+                            <div
+                              className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
+                            />
                           </div>
                         </div>
                         <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
                         >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            disabled={false}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
+                          <div
+                            className="HTMLContent-root"
+                            dangerouslySetInnerHTML={
+                              Object {
+                                "__html": "Joining Too",
+                              }
+                            }
+                          />
+                          <div
+                            className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                           >
-                            <span>
-                              Report
-                            </span>
-                          </button>
+                            <div
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            >
+                              <button
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                disabled={false}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Respect
+                                </span>
+                              </button>
+                              <button
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                disabled={false}
+                                id="comments-commentContainer-replyButton-comment-from-staff-0"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Reply
+                                </span>
+                              </button>
+                              <div
+                                className="Popover-root"
+                              >
+                                <button
+                                  aria-controls="permalink-popover-comment-from-staff-0"
+                                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseOut={[Function]}
+                                  onMouseOver={[Function]}
+                                  onTouchEnd={[Function]}
+                                  type="button"
+                                >
+                                  <span>
+                                    Share
+                                  </span>
+                                </button>
+                                <div
+                                  aria-hidden={true}
+                                  aria-labelledby="permalink-popover-comment-from-staff-0-ariainfo"
+                                  id="permalink-popover-comment-from-staff-0"
+                                  role="popup"
+                                >
+                                  <div
+                                    className="AriaInfo-root"
+                                    id="permalink-popover-comment-from-staff-0-ariainfo"
+                                  >
+                                    A dialog showing a permalink to the comment
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
+                            >
+                              <button
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                disabled={false}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Report
+                                </span>
+                              </button>
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -426,201 +666,7 @@ exports[`renders comment stream 1`] = `
               </div>
             </div>
           </div>
-        </div>
-        <div
-          className="HorizontalGutter-root HorizontalGutter-full"
-        >
-          <div
-            data-testid="comment-comment-from-staff-0"
-          >
-            <div
-              className="HorizontalGutter-root HorizontalGutter-full"
-            >
-              <div
-                className="Indent-root"
-              >
-                <div
-                  className=""
-                >
-                  <div
-                    className="Comment-root"
-                    role="article"
-                  >
-                    <div
-                      className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
-                    >
-                      <div
-                        className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
-                        >
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="username-popover"
-                              className="BaseButton-root"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span
-                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
-                              >
-                                Moderator
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="username-popover-ariainfo"
-                              id="username-popover"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="username-popover-ariainfo"
-                              >
-                                A popover with more user information
-                              </div>
-                            </div>
-                          </div>
-                          <span
-                            className="Tag-root"
-                          >
-                            Staff
-                          </span>
-                        </div>
-                        <div
-                          className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
-                        >
-                          <time
-                            className="Timestamp-root RelativeTime-root"
-                            dateTime="2018-07-06T18:24:00.000Z"
-                            title="2018-07-06T18:24:00.000Z"
-                          >
-                            2018-07-06T18:24:00.000Z
-                          </time>
-                        </div>
-                      </div>
-                      <div>
-                        <div
-                          className="Flex-root Flex-flex Flex-itemGutter"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      className="HorizontalGutter-root HorizontalGutter-full"
-                    >
-                      <div
-                        className="HTMLContent-root"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "Joining Too",
-                          }
-                        }
-                      />
-                      <div
-                        className="Flex-root Flex-flex Flex-justifySpaceBetween"
-                      >
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            disabled={false}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Respect
-                            </span>
-                          </button>
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            disabled={false}
-                            id="comments-commentContainer-replyButton-comment-from-staff-0"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Reply
-                            </span>
-                          </button>
-                          <div
-                            className="Popover-root"
-                          >
-                            <button
-                              aria-controls="permalink-popover-comment-from-staff-0"
-                              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              onTouchEnd={[Function]}
-                              type="button"
-                            >
-                              <span>
-                                Share
-                              </span>
-                            </button>
-                            <div
-                              aria-hidden={true}
-                              aria-labelledby="permalink-popover-comment-from-staff-0-ariainfo"
-                              id="permalink-popover-comment-from-staff-0"
-                              role="popup"
-                            >
-                              <div
-                                className="AriaInfo-root"
-                                id="permalink-popover-comment-from-staff-0-ariainfo"
-                              >
-                                A dialog showing a permalink to the comment
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
-                        >
-                          <button
-                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                            disabled={false}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseOut={[Function]}
-                            onMouseOver={[Function]}
-                            onTouchEnd={[Function]}
-                            type="button"
-                          >
-                            <span>
-                              Report
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        </section>
       </div>
     </div>
   </section>
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap
index ac01174cf..98f9a17a6 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap
@@ -73,18 +73,18 @@ exports[`render popup 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="HorizontalGutter-root ReportCommentForm-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root ReportCommentForm-root HorizontalGutter-full"
         >
           <h1
-            className="Typography-root Typography-heading2 Typography-colorTextPrimary ReportCommentForm-title"
+            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary ReportCommentForm-title"
           >
             Report This Comment
           </h1>
           <div
-            className="HorizontalGutter-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root HorizontalGutter-half"
           >
             <p
-              className="Typography-root Typography-detail Typography-colorTextPrimary ReportCommentForm-detail"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary ReportCommentForm-detail"
             >
               Why are you reporting this comment?
             </p>
@@ -93,7 +93,7 @@ exports[`render popup 1`] = `
             >
               <li>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -117,7 +117,7 @@ exports[`render popup 1`] = `
               </li>
               <li>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -141,7 +141,7 @@ exports[`render popup 1`] = `
               </li>
               <li>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -165,7 +165,7 @@ exports[`render popup 1`] = `
               </li>
               <li>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -253,18 +253,18 @@ exports[`render popup expanded 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="HorizontalGutter-root ReportCommentForm-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root ReportCommentForm-root HorizontalGutter-full"
         >
           <h1
-            className="Typography-root Typography-heading2 Typography-colorTextPrimary ReportCommentForm-title"
+            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary ReportCommentForm-title"
           >
             Report This Comment
           </h1>
           <div
-            className="HorizontalGutter-root HorizontalGutter-half"
+            className="Box-root HorizontalGutter-root HorizontalGutter-half"
           >
             <p
-              className="Typography-root Typography-detail Typography-colorTextPrimary ReportCommentForm-detail"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary ReportCommentForm-detail"
             >
               Why are you reporting this comment?
             </p>
@@ -273,7 +273,7 @@ exports[`render popup expanded 1`] = `
             >
               <li>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={true}
@@ -297,7 +297,7 @@ exports[`render popup expanded 1`] = `
               </li>
               <li>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -321,7 +321,7 @@ exports[`render popup expanded 1`] = `
               </li>
               <li>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -345,7 +345,7 @@ exports[`render popup expanded 1`] = `
               </li>
               <li>
                 <div
-                  className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                 >
                   <input
                     checked={false}
@@ -369,7 +369,7 @@ exports[`render popup expanded 1`] = `
               </li>
             </ul>
             <label
-              className="Typography-root Typography-detail Typography-colorTextPrimary ReportCommentForm-detail"
+              className="Box-root Typography-root Typography-detail Typography-colorTextPrimary ReportCommentForm-detail"
               htmlFor="comments-reportCommentForm-aditionalDetails--comment-0"
             >
               Please leave any additional information that may be helpful to our moderators. (Optional)
@@ -386,7 +386,7 @@ exports[`render popup expanded 1`] = `
                   value=""
                 />
                 <p
-                  className="Typography-root Typography-detail Typography-colorTextSecondary ReportCommentForm-textareaInfo"
+                  className="Box-root Typography-root Typography-detail Typography-colorTextSecondary ReportCommentForm-textareaInfo"
                 >
                   Max. 500 Characters
                 </p>
@@ -394,7 +394,7 @@ exports[`render popup expanded 1`] = `
             </div>
           </div>
           <div
-            className="Flex-root Flex-flex Flex-justifyFlexEnd Flex-alignCenter"
+            className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd Flex-alignCenter"
           >
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -479,16 +479,16 @@ exports[`report comment as offensive 1`] = `
         </span>
       </button>
       <div
-        className="HorizontalGutter-root ThankYou-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root ThankYou-root HorizontalGutter-full"
       >
         <h1
-          className="Typography-root Typography-heading2 Typography-colorTextPrimary ThankYou-title"
+          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary ThankYou-title"
         >
           Thank you!
         </h1>
         <div>
           <p
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             We’ve received your message. Reports from members like you keep the community safe.
              
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
index db70c6b44..551341ea3 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/showAllReplies.spec.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="HorizontalGutter-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root HorizontalGutter-full"
   data-testid="commentReplyList-comment-0"
   id="coral-comments-replyList-log--comment-0"
   role="log"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       data-testid="comment-comment-1"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           className="Indent-root"
@@ -27,13 +27,13 @@ exports[`renders comment stream 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -50,7 +50,7 @@ exports[`renders comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
                           Lukas
                         </span>
@@ -71,7 +71,7 @@ exports[`renders comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
                       className="Timestamp-root RelativeTime-root"
@@ -84,12 +84,12 @@ exports[`renders comment stream 1`] = `
                 </div>
                 <div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                   />
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
               >
                 <div
                   className="HTMLContent-root"
@@ -100,10 +100,10 @@ exports[`renders comment stream 1`] = `
                   }
                 />
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -170,7 +170,7 @@ exports[`renders comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
index 765f17d44..673e17e83 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/showConversation.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`renders deepest comment with link 1`] = `
   data-testid="comment-comment-with-deepest-replies-5"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       className="Indent-root"
@@ -18,13 +18,13 @@ exports[`renders deepest comment with link 1`] = `
           role="article"
         >
           <div
-            className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
           >
             <div
-              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
               >
                 <div
                   className="Popover-root"
@@ -41,7 +41,7 @@ exports[`renders deepest comment with link 1`] = `
                     type="button"
                   >
                     <span
-                      className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                     >
                       Markus
                     </span>
@@ -62,7 +62,7 @@ exports[`renders deepest comment with link 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
               >
                 <time
                   className="Timestamp-root RelativeTime-root"
@@ -75,12 +75,12 @@ exports[`renders deepest comment with link 1`] = `
             </div>
             <div>
               <div
-                className="Flex-root Flex-flex Flex-itemGutter"
+                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
               />
             </div>
           </div>
           <div
-            className="HorizontalGutter-root HorizontalGutter-full"
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
           >
             <div
               className="HTMLContent-root"
@@ -91,10 +91,10 @@ exports[`renders deepest comment with link 1`] = `
               }
             />
             <div
-              className="Flex-root Flex-flex Flex-justifySpaceBetween"
+              className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
             >
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -161,7 +161,7 @@ exports[`renders deepest comment with link 1`] = `
                 </div>
               </div>
               <div
-                className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
               >
                 <button
                   className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
index 207382cae..0788958be 100644
--- a/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
+++ b/src/core/client/stream/test/comments/stream/__snapshots__/sortStream.spec.tsx.snap
@@ -3,19 +3,19 @@
 exports[`renders app with comment stream 1`] = `
 <div
   aria-live="polite"
-  className="HorizontalGutter-root HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root HorizontalGutter-full"
   data-testid="comments-stream-log"
   id="coral-comments-stream-log"
   role="log"
 >
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       data-testid="comment-comment-2"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           className="Indent-root"
@@ -28,13 +28,13 @@ exports[`renders app with comment stream 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -51,7 +51,7 @@ exports[`renders app with comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
                           Isabelle
                         </span>
@@ -72,7 +72,7 @@ exports[`renders app with comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
                       className="Timestamp-root RelativeTime-root"
@@ -85,12 +85,12 @@ exports[`renders app with comment stream 1`] = `
                 </div>
                 <div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                   />
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
               >
                 <div
                   className="HTMLContent-root"
@@ -101,10 +101,10 @@ exports[`renders app with comment stream 1`] = `
                   }
                 />
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -171,7 +171,7 @@ exports[`renders app with comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -198,13 +198,13 @@ exports[`renders app with comment stream 1`] = `
     </div>
   </div>
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
   >
     <div
       data-testid="comment-comment-3"
     >
       <div
-        className="HorizontalGutter-root HorizontalGutter-full"
+        className="Box-root HorizontalGutter-root HorizontalGutter-full"
       >
         <div
           className="Indent-root"
@@ -217,13 +217,13 @@ exports[`renders app with comment stream 1`] = `
               role="article"
             >
               <div
-                className="Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-directionRow"
               >
                 <div
-                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                   >
                     <div
                       className="Popover-root"
@@ -240,7 +240,7 @@ exports[`renders app with comment stream 1`] = `
                         type="button"
                       >
                         <span
-                          className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
                         >
                           Isabelle
                         </span>
@@ -261,7 +261,7 @@ exports[`renders app with comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
                   >
                     <time
                       className="Timestamp-root RelativeTime-root"
@@ -274,12 +274,12 @@ exports[`renders app with comment stream 1`] = `
                 </div>
                 <div>
                   <div
-                    className="Flex-root Flex-flex Flex-itemGutter"
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
                   />
                 </div>
               </div>
               <div
-                className="HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-1"
               >
                 <div
                   className="HTMLContent-root"
@@ -290,10 +290,10 @@ exports[`renders app with comment stream 1`] = `
                   }
                 />
                 <div
-                  className="Flex-root Flex-flex Flex-justifySpaceBetween"
+                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                 >
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
@@ -360,7 +360,7 @@ exports[`renders app with comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow gutter"
                   >
                     <button
                       className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
diff --git a/src/core/client/stream/test/comments/stream/banned.spec.tsx b/src/core/client/stream/test/comments/stream/banned.spec.tsx
index 294252e6d..dd854f8fc 100644
--- a/src/core/client/stream/test/comments/stream/banned.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/banned.spec.tsx
@@ -10,7 +10,7 @@ import {
 } from "coral-framework/testHelpers";
 
 import { comments, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 const story = stories[0];
 const firstComment = story.comments.edges[0].node;
diff --git a/src/core/client/stream/test/comments/stream/charCountEditComment.spec.tsx b/src/core/client/stream/test/comments/stream/charCountEditComment.spec.tsx
index 3057286db..d01afa610 100644
--- a/src/core/client/stream/test/comments/stream/charCountEditComment.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/charCountEditComment.spec.tsx
@@ -4,15 +4,16 @@ import timekeeper from "timekeeper";
 
 import { ERROR_CODES } from "coral-common/errors";
 import { InvalidRequestError } from "coral-framework/lib/errors";
+import { GQLResolver } from "coral-framework/schema";
 import {
-  createSinonStub,
+  createResolversStub,
   findParentWithType,
   waitForElement,
   within,
 } from "coral-framework/testHelpers";
 
 import { commenters, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 beforeAll(() => {
   timekeeper.freeze(stories[0].comments.edges[0].node.createdAt);
@@ -119,31 +120,34 @@ it("update from server upon specific char count error", async () => {
     ERROR_CODES.COMMENT_BODY_EXCEEDS_MAX_LENGTH,
     ERROR_CODES.COMMENT_BODY_TOO_SHORT,
   ]) {
+    let createCommentCalled = false;
     const { rte, form } = await createTestRenderer(
-      {
+      createResolversStub<GQLResolver>({
         Mutation: {
-          editComment: sinon.stub().callsFake(() => {
+          editComment: () => {
+            createCommentCalled = true;
             throw new InvalidRequestError({
               code: errorCode,
               param: "input.body",
             });
-          }),
+          },
         },
         Query: {
-          settings: createSinonStub(
-            s => s.onFirstCall().returns(settingsWithCharCount),
-            s =>
-              s.onSecondCall().returns({
-                ...settingsWithCharCount,
-                charCount: {
-                  enabled: true,
-                  min: 3,
-                  max: 5,
-                },
-              })
-          ),
+          settings: () => {
+            if (!createCommentCalled) {
+              return settingsWithCharCount;
+            }
+            return {
+              ...settingsWithCharCount,
+              charCount: {
+                enabled: true,
+                min: 3,
+                max: 5,
+              },
+            };
+          },
         },
-      },
+      }),
       { muteNetworkErrors: true }
     );
 
diff --git a/src/core/client/stream/test/comments/stream/charCountPostComment.spec.tsx b/src/core/client/stream/test/comments/stream/charCountPostComment.spec.tsx
index 9583470d5..99fc2f7c3 100644
--- a/src/core/client/stream/test/comments/stream/charCountPostComment.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/charCountPostComment.spec.tsx
@@ -3,15 +3,16 @@ import sinon from "sinon";
 import RTE from "@coralproject/rte";
 import { ERROR_CODES } from "coral-common/errors";
 import { InvalidRequestError } from "coral-framework/lib/errors";
+import { GQLResolver } from "coral-framework/schema";
 import {
-  createSinonStub,
+  createResolversStub,
   findParentWithType,
   waitForElement,
   within,
 } from "coral-framework/testHelpers";
 
 import { commenters, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 const settingsWithCharCount = {
   ...settings,
@@ -114,31 +115,34 @@ it("update from server upon specific char count error", async () => {
     ERROR_CODES.COMMENT_BODY_EXCEEDS_MAX_LENGTH,
     ERROR_CODES.COMMENT_BODY_TOO_SHORT,
   ]) {
+    let createCommentCalled = false;
     const { rte, form } = await createTestRenderer(
-      {
+      createResolversStub<GQLResolver>({
         Mutation: {
-          createComment: sinon.stub().callsFake(() => {
+          createComment: () => {
+            createCommentCalled = true;
             throw new InvalidRequestError({
               code: errorCode,
               param: "input.body",
             });
-          }),
+          },
         },
         Query: {
-          settings: createSinonStub(
-            s => s.onFirstCall().returns(settingsWithCharCount),
-            s =>
-              s.onSecondCall().returns({
-                ...settingsWithCharCount,
-                charCount: {
-                  enabled: true,
-                  min: 3,
-                  max: 5,
-                },
-              })
-          ),
+          settings: () => {
+            if (!createCommentCalled) {
+              return settingsWithCharCount;
+            }
+            return {
+              ...settingsWithCharCount,
+              charCount: {
+                enabled: true,
+                min: 3,
+                max: 5,
+              },
+            };
+          },
         },
-      },
+      }),
       { muteNetworkErrors: true }
     );
 
diff --git a/src/core/client/stream/test/comments/stream/charCountReplyComment.spec.tsx b/src/core/client/stream/test/comments/stream/charCountReplyComment.spec.tsx
index 2e3899995..eae32b1c4 100644
--- a/src/core/client/stream/test/comments/stream/charCountReplyComment.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/charCountReplyComment.spec.tsx
@@ -4,14 +4,15 @@ import RTE from "@coralproject/rte";
 import { ERROR_CODES } from "coral-common/errors";
 import { InvalidRequestError } from "coral-framework/lib/errors";
 import {
-  createSinonStub,
+  createResolversStub,
   findParentWithType,
   waitForElement,
   within,
 } from "coral-framework/testHelpers";
 
+import { GQLResolver } from "coral-framework/schema";
 import { commenters, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 const settingsWithCharCount = {
   ...settings,
@@ -125,31 +126,34 @@ it("update from server upon specific char count error", async () => {
     ERROR_CODES.COMMENT_BODY_EXCEEDS_MAX_LENGTH,
     ERROR_CODES.COMMENT_BODY_TOO_SHORT,
   ]) {
+    let createCommentCalled = false;
     const { rte, form } = await createTestRenderer(
-      {
+      createResolversStub<GQLResolver>({
         Mutation: {
-          createCommentReply: sinon.stub().callsFake(() => {
+          createCommentReply: () => {
+            createCommentCalled = true;
             throw new InvalidRequestError({
               code: errorCode,
               param: "input.body",
             });
-          }),
+          },
         },
         Query: {
-          settings: createSinonStub(
-            s => s.onFirstCall().returns(settingsWithCharCount),
-            s =>
-              s.onSecondCall().returns({
-                ...settingsWithCharCount,
-                charCount: {
-                  enabled: true,
-                  min: 3,
-                  max: 5,
-                },
-              })
-          ),
+          settings: () => {
+            if (!createCommentCalled) {
+              return settingsWithCharCount;
+            }
+            return {
+              ...settingsWithCharCount,
+              charCount: {
+                enabled: true,
+                min: 3,
+                max: 5,
+              },
+            };
+          },
         },
-      },
+      }),
       { muteNetworkErrors: true }
     );
 
diff --git a/src/core/client/stream/test/comments/stream/closedOrDisabledCommentStream.spec.tsx b/src/core/client/stream/test/comments/stream/closedOrDisabledCommentStream.spec.tsx
index e12caccca..68022a283 100644
--- a/src/core/client/stream/test/comments/stream/closedOrDisabledCommentStream.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/closedOrDisabledCommentStream.spec.tsx
@@ -3,7 +3,7 @@ import sinon from "sinon";
 import { waitForElement, within } from "coral-framework/testHelpers";
 
 import { settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 afterEach(() => jest.useRealTimers());
 
diff --git a/src/core/client/stream/test/comments/stream/create.ts b/src/core/client/stream/test/comments/stream/create.ts
new file mode 100644
index 000000000..a917b691d
--- /dev/null
+++ b/src/core/client/stream/test/comments/stream/create.ts
@@ -0,0 +1,31 @@
+import { GQLResolver, StoryToCommentsResolver } from "coral-framework/schema";
+import {
+  createQueryResolverOverwrite,
+  CreateTestRendererParams,
+  overwriteQueryResolver,
+} from "coral-framework/testHelpers";
+import { storyWithNoComments } from "coral-stream/test/fixtures";
+
+import createTopLevel from "../create";
+
+export default function create(params: CreateTestRendererParams) {
+  return createTopLevel({
+    ...params,
+    resolvers: overwriteQueryResolver<GQLResolver>(params.resolvers || {}, {
+      story: {
+        featuredComments: createQueryResolverOverwrite<StoryToCommentsResolver>(
+          () => {
+            // TODO: remove this.
+            return storyWithNoComments.comments;
+          }
+        ),
+      },
+    }),
+    initLocalState: (localRecord, source, environment) => {
+      localRecord.setValue("ALL_COMMENTS", "commentsTab");
+      if (params.initLocalState) {
+        params.initLocalState(localRecord, source, environment);
+      }
+    },
+  });
+}
diff --git a/src/core/client/stream/test/comments/stream/editComment.spec.tsx b/src/core/client/stream/test/comments/stream/editComment.spec.tsx
index ff47b04c2..92aab6bd0 100644
--- a/src/core/client/stream/test/comments/stream/editComment.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/editComment.spec.tsx
@@ -15,7 +15,7 @@ import {
   settings,
   storyWithReplies,
 } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 function createTestRenderer(
   resolver: any = {},
diff --git a/src/core/client/stream/test/comments/stream/ignoreUser.spec.tsx b/src/core/client/stream/test/comments/stream/ignoreUser.spec.tsx
index fff29dbc4..028c4608e 100644
--- a/src/core/client/stream/test/comments/stream/ignoreUser.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/ignoreUser.spec.tsx
@@ -9,7 +9,7 @@ import {
 } from "coral-framework/testHelpers";
 
 import { settings, stories, viewerPassive } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 const story = stories[0];
 const firstComment = story.comments.edges[0].node;
diff --git a/src/core/client/stream/test/comments/stream/loadMore.spec.tsx b/src/core/client/stream/test/comments/stream/loadMore.spec.tsx
index d7536247c..46124240d 100644
--- a/src/core/client/stream/test/comments/stream/loadMore.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/loadMore.spec.tsx
@@ -2,46 +2,54 @@ import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
 import {
+  act,
   createSinonStub,
   wait,
   waitForElement,
   within,
 } from "coral-framework/testHelpers";
+import { isMatch } from "lodash";
 
 import { comments, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
   const storyStub = {
     ...stories[0],
-    comments: createSinonStub(
-      s => s.throws(),
-      s =>
-        s.withArgs({ first: 5, orderBy: "CREATED_AT_DESC" }).returns({
-          edges: [
-            {
-              node: comments[0],
-              cursor: comments[0].createdAt,
+    comments: createSinonStub(s =>
+      s.callsFake((input: any) => {
+        if (
+          isMatch(input, {
+            first: 5,
+            orderBy: "CREATED_AT_DESC",
+          })
+        ) {
+          return {
+            edges: [
+              {
+                node: comments[0],
+                cursor: comments[0].createdAt,
+              },
+              {
+                node: comments[1],
+                cursor: comments[1].createdAt,
+              },
+            ],
+            pageInfo: {
+              endCursor: comments[1].createdAt,
+              hasNextPage: true,
             },
-            {
-              node: comments[1],
-              cursor: comments[1].createdAt,
-            },
-          ],
-          pageInfo: {
-            endCursor: comments[1].createdAt,
-            hasNextPage: true,
-          },
-        }),
-      s =>
-        s
-          .withArgs({
+          };
+        }
+        if (
+          isMatch(input, {
             first: 10,
             orderBy: "CREATED_AT_DESC",
             after: comments[1].createdAt,
           })
-          .returns({
+        ) {
+          return {
             edges: [
               {
                 node: comments[2],
@@ -52,7 +60,10 @@ beforeEach(() => {
               endCursor: comments[2].createdAt,
               hasNextPage: false,
             },
-          })
+          };
+        }
+        throw new Error("Unexpected request");
+      })
     ),
   };
 
@@ -99,17 +110,18 @@ it("loads more comments", async () => {
   // Get amount of comments before.
   const commentsBefore = within(streamLog).getAllByTestID(/^comment-/).length;
 
-  within(streamLog)
-    .getByText("Load More")
-    .props.onClick();
+  await act(async () => {
+    within(streamLog)
+      .getByText("Load More")
+      .props.onClick();
 
-  // Wait for load more button to disappear
-
-  // Should now have one more comment
-  await wait(() =>
-    expect(within(streamLog).queryByText("Load More")).toBeNull()
-  );
+    // Wait for load more button to disappear
 
+    // Should now have one more comment
+    await wait(() =>
+      expect(within(streamLog).queryByText("Load More")).toBeNull()
+    );
+  });
   expect(within(streamLog).getAllByTestID(/^comment-/).length).toBe(
     commentsBefore + 1
   );
diff --git a/src/core/client/stream/test/comments/stream/memberSince.spec.tsx b/src/core/client/stream/test/comments/stream/memberSince.spec.tsx
index 8753e6154..d71284e54 100644
--- a/src/core/client/stream/test/comments/stream/memberSince.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/memberSince.spec.tsx
@@ -8,7 +8,7 @@ import {
 } from "coral-framework/testHelpers";
 
 import { commenters, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 const story = stories[0];
 const firstComment = story.comments.edges[0].node;
diff --git a/src/core/client/stream/test/comments/stream/moderation.spec.tsx b/src/core/client/stream/test/comments/stream/moderation.spec.tsx
index d7f41c527..14c570a52 100644
--- a/src/core/client/stream/test/comments/stream/moderation.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/moderation.spec.tsx
@@ -1,14 +1,16 @@
 import { pureMerge } from "coral-common/utils";
 import { GQLCOMMENT_STATUS, GQLResolver } from "coral-framework/schema";
 import {
+  act,
   createResolversStub,
   CreateTestRendererParams,
   waitForElement,
+  waitUntilThrow,
   within,
 } from "coral-framework/testHelpers";
 
-import { moderators, settings, stories } from "../../fixtures";
-import create from "../create";
+import { featuredTag, moderators, settings, stories } from "../../fixtures";
+import create from "./create";
 
 const story = stories[0];
 const firstComment = story.comments.edges[0].node;
@@ -63,6 +65,75 @@ it("render go to moderate link", async () => {
   expect(link.props.href).toBe(`/admin/moderate/comment/${firstComment.id}`);
 });
 
+it("feature and unfeature comment", async () => {
+  const { testRenderer } = await createTestRenderer({
+    logNetwork: false,
+    resolvers: createResolversStub<GQLResolver>({
+      Mutation: {
+        featureComment: ({ variables }) => {
+          expectAndFail(variables).toMatchObject({
+            commentID: firstComment.id,
+            commentRevisionID: firstComment.revision.id,
+          });
+          return {
+            comment: pureMerge<typeof firstComment>(firstComment, {
+              tags: [featuredTag],
+              status: GQLCOMMENT_STATUS.APPROVED,
+            }),
+          };
+        },
+        unfeatureComment: ({ variables }) => {
+          expectAndFail(variables).toMatchObject({
+            commentID: firstComment.id,
+          });
+          return { comment: firstComment };
+        },
+      },
+    }),
+  });
+  const comment = await waitForElement(() =>
+    within(testRenderer.root).getByTestID(`comment-${firstComment.id}`)
+  );
+  const caretButton = within(comment).getByLabelText("Moderate");
+
+  // Feature
+  act(() => {
+    caretButton.props.onClick();
+  });
+  const featureButton = await waitForElement(() =>
+    within(comment).getByText("Feature", {
+      selector: "button",
+    })
+  );
+  await act(async () => {
+    featureButton.props.onClick();
+    await waitForElement(() =>
+      within(comment).getByText("Featured", { exact: false })
+    );
+  });
+
+  within(
+    within(testRenderer.root).getByTestID("comments-featuredCount")
+  ).getByText("1");
+
+  // Unfeature
+  act(() => {
+    caretButton.props.onClick();
+  });
+  const UnfeatureButton = within(comment).getByText("Un-Feature", {
+    selector: "button",
+  });
+  await act(async () => {
+    UnfeatureButton.props.onClick();
+    await waitUntilThrow(() =>
+      within(comment).getByText("Featured", { exact: false })
+    );
+  });
+  expect(() =>
+    within(testRenderer.root).getByTestID("comments-featuredCount")
+  ).toThrow();
+});
+
 it("approve comment", async () => {
   const { testRenderer } = await createTestRenderer({
     resolvers: createResolversStub<GQLResolver>({
diff --git a/src/core/client/stream/test/comments/stream/postComment.spec.tsx b/src/core/client/stream/test/comments/stream/postComment.spec.tsx
index 5f5ed2879..31cb8159c 100644
--- a/src/core/client/stream/test/comments/stream/postComment.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/postComment.spec.tsx
@@ -1,22 +1,25 @@
+import { ReactTestInstance } from "react-test-renderer";
 import sinon from "sinon";
 import timekeeper from "timekeeper";
 
+import RTE from "@coralproject/rte";
 import { ERROR_CODES } from "coral-common/errors";
 import {
   InvalidRequestError,
   ModerationNudgeError,
 } from "coral-framework/lib/errors";
+import { GQLResolver } from "coral-framework/schema";
 import {
+  act,
+  createResolversStub,
   createSinonStub,
   findParentWithType,
   waitForElement,
   within,
 } from "coral-framework/testHelpers";
 
-import RTE from "@coralproject/rte";
-import { ReactTestInstance } from "react-test-renderer";
 import { baseComment, commenters, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 async function createTestRenderer(
   resolver: any,
@@ -252,35 +255,40 @@ it("handle moderation nudge error", async () => {
 });
 
 it("handle disabled commenting error", async () => {
+  let createCommentCalled = false;
   const { rte, form } = await createTestRenderer(
-    {
+    createResolversStub<GQLResolver>({
       Mutation: {
-        createComment: sinon.stub().callsFake(() => {
+        createComment: () => {
+          createCommentCalled = true;
           throw new InvalidRequestError({
             code: ERROR_CODES.COMMENTING_DISABLED,
           });
-        }),
+        },
       },
       Query: {
-        settings: createSinonStub(
-          s => s.onFirstCall().returns(settings),
-          s =>
-            s.onSecondCall().returns({
-              ...settings,
-              disableCommenting: {
-                enabled: true,
-                message: "commenting disabled",
-              },
-            })
-        ),
+        settings: () => {
+          if (!createCommentCalled) {
+            return settings;
+          }
+          return {
+            ...settings,
+            disableCommenting: {
+              enabled: true,
+              message: "commenting disabled",
+            },
+          };
+        },
       },
-    },
+    }),
     { muteNetworkErrors: true }
   );
 
-  rte.props.onChange({ html: "abc" });
-  form.props.onSubmit();
-  await waitForElement(() => within(form).getByText("commenting disabled"));
+  await act(async () => {
+    rte.props.onChange({ html: "abc" });
+    form.props.onSubmit();
+    await waitForElement(() => within(form).getByText("commenting disabled"));
+  });
   expect(rte.props.disabled).toBe(true);
   expect(within(form).getByText("Submit").props.disabled).toBe(true);
 });
diff --git a/src/core/client/stream/test/comments/stream/postLocalReply.spec.tsx b/src/core/client/stream/test/comments/stream/postLocalReply.spec.tsx
index ede1b56fc..c859839d9 100644
--- a/src/core/client/stream/test/comments/stream/postLocalReply.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/postLocalReply.spec.tsx
@@ -14,7 +14,7 @@ import {
   settings,
   storyWithDeepestReplies,
 } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/stream/postReply.spec.tsx b/src/core/client/stream/test/comments/stream/postReply.spec.tsx
index ad483c394..307b0ceb5 100644
--- a/src/core/client/stream/test/comments/stream/postReply.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/postReply.spec.tsx
@@ -15,7 +15,7 @@ import {
 
 import RTE from "@coralproject/rte";
 import { baseComment, commenters, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 async function createTestRenderer(
   resolver: any = {},
diff --git a/src/core/client/stream/test/comments/stream/reaction.spec.tsx b/src/core/client/stream/test/comments/stream/reaction.spec.tsx
index 6c0acab69..ea9b37e0b 100644
--- a/src/core/client/stream/test/comments/stream/reaction.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/reaction.spec.tsx
@@ -3,7 +3,7 @@ import sinon from "sinon";
 import { waitForElement, within } from "coral-framework/testHelpers";
 
 import { commenters, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 function createTestRenderer() {
   const resolvers = {
diff --git a/src/core/client/stream/test/comments/stream/renderCommunityGuidelines.spec.tsx b/src/core/client/stream/test/comments/stream/renderCommunityGuidelines.spec.tsx
index 5ca9fc55d..692912ca1 100644
--- a/src/core/client/stream/test/comments/stream/renderCommunityGuidelines.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/renderCommunityGuidelines.spec.tsx
@@ -3,7 +3,7 @@ import sinon from "sinon";
 import { waitForElement, within } from "coral-framework/testHelpers";
 
 import { settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 function createTestRenderer() {
   const resolvers = {
diff --git a/src/core/client/stream/test/comments/stream/renderMessageBox.spec.tsx b/src/core/client/stream/test/comments/stream/renderMessageBox.spec.tsx
index 5aa06403a..75171f8b6 100644
--- a/src/core/client/stream/test/comments/stream/renderMessageBox.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/renderMessageBox.spec.tsx
@@ -4,7 +4,7 @@ import { pureMerge } from "coral-common/utils";
 import { waitForElement, within } from "coral-framework/testHelpers";
 
 import { commenters, settings, storyWithNoComments } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 async function createTestRenderer(
   data: {
diff --git a/src/core/client/stream/test/comments/stream/renderReplies.spec.tsx b/src/core/client/stream/test/comments/stream/renderReplies.spec.tsx
index d386ee906..86f3bfe97 100644
--- a/src/core/client/stream/test/comments/stream/renderReplies.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/renderReplies.spec.tsx
@@ -8,7 +8,7 @@ import {
 } from "coral-framework/testHelpers";
 
 import { settings, storyWithDeepReplies } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/stream/renderStream.spec.tsx b/src/core/client/stream/test/comments/stream/renderStream.spec.tsx
index 4e4d38202..6aa7a64a6 100644
--- a/src/core/client/stream/test/comments/stream/renderStream.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/renderStream.spec.tsx
@@ -3,7 +3,7 @@ import sinon from "sinon";
 import { waitForElement, within } from "coral-framework/testHelpers";
 
 import { settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 const story = stories[2];
 
diff --git a/src/core/client/stream/test/comments/stream/reportComment.spec.tsx b/src/core/client/stream/test/comments/stream/reportComment.spec.tsx
index dc6f63f7c..bca80bfd8 100644
--- a/src/core/client/stream/test/comments/stream/reportComment.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/reportComment.spec.tsx
@@ -6,7 +6,7 @@ import { InvalidRequestError } from "coral-framework/lib/errors";
 import { wait, waitForElement, within } from "coral-framework/testHelpers";
 
 import { commenters, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 function createTestRenderer(
   resolver: any = {},
diff --git a/src/core/client/stream/test/comments/stream/showAllReplies.spec.tsx b/src/core/client/stream/test/comments/stream/showAllReplies.spec.tsx
index 1ea5f0ac2..81856cc10 100644
--- a/src/core/client/stream/test/comments/stream/showAllReplies.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/showAllReplies.spec.tsx
@@ -9,7 +9,7 @@ import {
 } from "coral-framework/testHelpers";
 
 import { comments, settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
diff --git a/src/core/client/stream/test/comments/stream/showConversation.spec.tsx b/src/core/client/stream/test/comments/stream/showConversation.spec.tsx
index 28bfee288..d171ab12c 100644
--- a/src/core/client/stream/test/comments/stream/showConversation.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/showConversation.spec.tsx
@@ -2,13 +2,14 @@ import { ReactTestRenderer } from "react-test-renderer";
 import sinon from "sinon";
 
 import {
+  act,
   createSinonStub,
   waitForElement,
   within,
 } from "coral-framework/testHelpers";
 
 import { comments, settings, storyWithDeepestReplies } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 let testRenderer: ReactTestRenderer;
 beforeEach(() => {
@@ -59,11 +60,13 @@ it("shows conversation", async () => {
   const streamLog = await waitForElement(() =>
     within(testRenderer.root).getByTestID("comments-stream-log")
   );
-  within(streamLog)
-    .getByText("Read More of this Conversation", { exact: false })
-    .props.onClick(mockEvent);
+  await act(async () => {
+    within(streamLog)
+      .getByText("Read More of this Conversation", { exact: false })
+      .props.onClick(mockEvent);
 
-  await waitForElement(() =>
-    within(testRenderer.root).getByText("SINGLE CONVERSATION")
-  );
+    await waitForElement(() =>
+      within(testRenderer.root).getByText("SINGLE CONVERSATION")
+    );
+  });
 });
diff --git a/src/core/client/stream/test/comments/stream/sortStream.spec.tsx b/src/core/client/stream/test/comments/stream/sortStream.spec.tsx
index 11eaa62f8..56ae9ae4d 100644
--- a/src/core/client/stream/test/comments/stream/sortStream.spec.tsx
+++ b/src/core/client/stream/test/comments/stream/sortStream.spec.tsx
@@ -1,13 +1,14 @@
 import sinon from "sinon";
 
 import {
+  act,
   createSinonStub,
   waitForElement,
   within,
 } from "coral-framework/testHelpers";
 
 import { settings, stories } from "../../fixtures";
-import create from "../create";
+import create from "./create";
 
 const createTestRenderer = async (resolver: any = {}) => {
   const resolvers = {
@@ -31,21 +32,22 @@ const createTestRenderer = async (resolver: any = {}) => {
 };
 
 it("renders app with comment stream", async () => {
-  const commentsQueryStub = createSinonStub(
-    s =>
-      s.onFirstCall().callsFake((input: any) => {
-        expectAndFail(input).toEqual({ first: 5, orderBy: "CREATED_AT_DESC" });
-        return stories[0].comments;
-      }),
-    s =>
-      s.onSecondCall().callsFake((input: any) => {
-        expectAndFail(input).toEqual({
-          after: null,
+  let changedSort = false;
+  const commentsQueryStub = createSinonStub(s =>
+    s.callsFake((input: any) => {
+      if (!changedSort) {
+        expectAndFail(input).toMatchObject({
           first: 5,
-          orderBy: "CREATED_AT_ASC",
+          orderBy: "CREATED_AT_DESC",
         });
-        return stories[1].comments;
-      })
+        return stories[0].comments;
+      }
+      expectAndFail(input).toMatchObject({
+        first: 5,
+        orderBy: "CREATED_AT_ASC",
+      });
+      return stories[1].comments;
+    })
   );
   const storyQueryStub = createSinonStub(s =>
     s.callsFake((_: any, input: any) => {
@@ -70,12 +72,15 @@ it("renders app with comment stream", async () => {
   const selectField = within(testRenderer.root).getByLabelText("Sort By");
   const oldestOption = within(selectField).getByText("Oldest");
 
-  selectField.props.onChange({
-    target: { value: oldestOption.props.value.toString() },
-  });
+  await act(async () => {
+    changedSort = true;
+    selectField.props.onChange({
+      target: { value: oldestOption.props.value.toString() },
+    });
 
-  streamLog = await waitForElement(() =>
-    within(testRenderer.root).getByTestID("comments-stream-log")
-  );
+    streamLog = await waitForElement(() =>
+      within(testRenderer.root).getByTestID("comments-stream-log")
+    );
+  });
   expect(within(streamLog).toJSON()).toMatchSnapshot();
 });
diff --git a/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap b/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
index 44742785b..c5c20f995 100644
--- a/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
+++ b/src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap
@@ -10,27 +10,27 @@ exports[`renders configure 1`] = `
 >
   <div>
     <div
-      className="HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-double"
     >
       <div
-        className="Flex-root"
+        className="Box-root Flex-root"
       >
         <div
-          className="Flex-flex Flex-halfItemGutter Flex-wrap"
+          className="Flex-flex Flex-halfItemGutter Flex-wrap gutter"
         >
           <div
-            className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
           >
             Signed in as 
             <span
-              className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+              className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
             >
               Moderator
             </span>
             .
           </div>
           <div
-            className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
+            className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
           >
             <span>
               Not you? 
@@ -56,10 +56,10 @@ exports[`renders configure 1`] = `
         onSubmit={[Function]}
       >
         <div
-          className="Flex-root Flex-flex Flex-itemGutter Flex-justifySpaceBetween Flex-alignFlexStart"
+          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifySpaceBetween Flex-alignFlexStart gutter"
         >
           <h1
-            className="Typography-root Typography-heading2 Typography-colorTextPrimary ConfigureStream-heading"
+            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary ConfigureStream-heading"
           >
             Configure this Comment Stream
           </h1>
@@ -77,7 +77,7 @@ exports[`renders configure 1`] = `
           </button>
         </div>
         <div
-          className="HorizontalGutter-root HorizontalGutter-double"
+          className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <div>
             <div
@@ -102,7 +102,7 @@ exports[`renders configure 1`] = `
                   className="CheckBox-labelSpan"
                 >
                   <span
-                    className="Typography-root Typography-heading3 Typography-colorTextPrimary"
+                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
                   >
                     <span>
                       Enable Pre-Moderation
@@ -115,7 +115,7 @@ exports[`renders configure 1`] = `
               className="ToggleConfig-details"
             >
               <p
-                className="Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
               >
                 Moderators must approve any comment before it is published to this stream.
               </p>
@@ -144,7 +144,7 @@ exports[`renders configure 1`] = `
                   className="CheckBox-labelSpan"
                 >
                   <span
-                    className="Typography-root Typography-heading3 Typography-colorTextPrimary"
+                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
                   >
                     <span>
                       Pre-Moderate Comments Containing Links
@@ -157,7 +157,7 @@ exports[`renders configure 1`] = `
               className="ToggleConfig-details"
             >
               <p
-                className="Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
+                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
               >
                 Moderators must approve any comment that contains a link before it is published to this stream.
               </p>
@@ -186,7 +186,7 @@ exports[`renders configure 1`] = `
                   className="CheckBox-labelSpan"
                 >
                   <span
-                    className="Typography-root Typography-heading3 Typography-colorTextPrimary"
+                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
                   >
                     <span>
                       Enable Message Box for this Stream
@@ -199,10 +199,10 @@ exports[`renders configure 1`] = `
               className="ToggleConfig-details"
             >
               <div
-                className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
               >
                 <p
-                  className="Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
+                  className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
                 >
                   Add a message to the top of the comment box for your readers. Use this to pose a topic,
 ask a question or make announcements relating to this story.
@@ -218,15 +218,15 @@ ask a question or make announcements relating to this story.
     />
     <div>
       <h1
-        className="Typography-root Typography-heading2 Typography-colorTextPrimary CloseStream-heading"
+        className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary CloseStream-heading"
       >
         Close Comment Stream
       </h1>
       <div
-        className="Flex-root Flex-flex Flex-itemGutter Flex-alignFlexStart"
+        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignFlexStart gutter"
       >
         <p
-          className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
         >
           This comment stream is currently open. By closing this comment stream,
 no new comments may be submitted and all previously submitted comments
diff --git a/src/core/client/stream/test/fixtures.ts b/src/core/client/stream/test/fixtures.ts
index 06f6783b1..69e7d0075 100644
--- a/src/core/client/stream/test/fixtures.ts
+++ b/src/core/client/stream/test/fixtures.ts
@@ -4,6 +4,8 @@ import {
   GQLMODERATION_MODE,
   GQLSettings,
   GQLStory,
+  GQLTag,
+  GQLTAG,
   GQLUser,
   GQLUSER_ROLE,
   GQLUSER_STATUS,
@@ -230,6 +232,11 @@ export const commentWithDeepReplies = denormalizeComment(
   )
 );
 
+export const featuredTag = createFixture<GQLTag>({
+  code: GQLTAG.FEATURED,
+  createdAt: "2015-02-06T18:24:00.000Z",
+});
+
 export const commentWithDeepestReplies = denormalizeComment(
   createFixture<GQLComment>({
     ...baseComment,
@@ -342,6 +349,9 @@ export const baseStory = createFixture<GQLStory>({
   },
   commentCounts: {
     totalVisible: 0,
+    tags: {
+      FEATURED: 0,
+    },
   },
   settings: {
     moderation: GQLMODERATION_MODE.POST,
@@ -371,7 +381,7 @@ export const commentsFromStaff = denormalizeComments(
         id: "comment-from-staff-0",
         author: moderators[0],
         body: "Joining Too",
-        tags: [{ name: "Staff" }],
+        tags: [{ code: GQLTAG.STAFF }],
       },
     ],
     baseComment
@@ -444,6 +454,31 @@ export const storyWithNoComments = denormalizeStory(
   )
 );
 
+export const storyWithFeaturedComments = denormalizeStory(
+  createFixture<GQLStory>(
+    {
+      id: "story-with-featured-comments",
+      url: "http://localhost/stories/story-with-featured-comments",
+      comments: {
+        edges: [
+          {
+            node: { ...comments[0], tags: [featuredTag] },
+            cursor: comments[0].createdAt,
+          },
+          {
+            node: { ...comments[1], tags: [featuredTag] },
+            cursor: comments[1].createdAt,
+          },
+        ],
+        pageInfo: {
+          hasNextPage: false,
+        },
+      },
+    },
+    baseStory
+  )
+);
+
 export const storyWithReplies = denormalizeStory(
   createFixture<GQLStory>(
     {
diff --git a/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap b/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
index b2fb34260..98cd43320 100644
--- a/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
+++ b/src/core/client/stream/test/profile/__snapshots__/myComments.spec.tsx.snap
@@ -2,20 +2,20 @@
 
 exports[`renders profile 1`] = `
 <div
-  className="HorizontalGutter-root HorizontalGutter-double"
+  className="Box-root HorizontalGutter-root HorizontalGutter-double"
   data-testid="profile-commentHistory"
 >
   <h1
-    className="Typography-root Typography-heading3 Typography-colorTextPrimary"
+    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
   >
     Comment History
   </h1>
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
     data-testid="historyComment-comment-0"
   >
     <h1
-      className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary"
     >
       Story: title
     </h1>
@@ -27,7 +27,7 @@ exports[`renders profile 1`] = `
       2018-07-06T18:24:00.000Z
     </time>
     <div
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       <div
         className="HTMLContent-root"
@@ -39,7 +39,7 @@ exports[`renders profile 1`] = `
       />
     </div>
     <div
-      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
+      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow gutter"
     >
       <a
         className="TextLink-root HistoryComment-viewConversation"
@@ -52,11 +52,11 @@ exports[`renders profile 1`] = `
     </div>
   </div>
   <div
-    className="HorizontalGutter-root HorizontalGutter-full"
+    className="Box-root HorizontalGutter-root HorizontalGutter-full"
     data-testid="historyComment-comment-1"
   >
     <h1
-      className="Typography-root Typography-heading4 Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary"
     >
       Story: title
     </h1>
@@ -68,7 +68,7 @@ exports[`renders profile 1`] = `
       2018-07-06T18:24:00.000Z
     </time>
     <div
-      className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
     >
       <div
         className="HTMLContent-root"
@@ -80,7 +80,7 @@ exports[`renders profile 1`] = `
       />
     </div>
     <div
-      className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow"
+      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionRow gutter"
     >
       <a
         className="TextLink-root HistoryComment-viewConversation"
diff --git a/src/core/client/ui/components/Box/Box.css b/src/core/client/ui/components/Box/Box.css
new file mode 100644
index 000000000..6fb665fbe
--- /dev/null
+++ b/src/core/client/ui/components/Box/Box.css
@@ -0,0 +1,240 @@
+.root {
+}
+
+/* Margin */
+
+.ml-1 {
+  margin-left: var(--spacing-1) !important;
+}
+.mr-1 {
+  margin-right: var(--spacing-1) !important;
+}
+.mt-1 {
+  margin-top: var(--spacing-1) !important;
+}
+.mb-1 {
+  margin-bottom: var(--spacing-1) !important;
+}
+
+.ml-2 {
+  margin-left: var(--spacing-2) !important;
+}
+.mr-2 {
+  margin-right: var(--spacing-2) !important;
+}
+.mt-2 {
+  margin-top: var(--spacing-2) !important;
+}
+.mb-2 {
+  margin-bottom: var(--spacing-2) !important;
+}
+
+.ml-3 {
+  margin-left: var(--spacing-3) !important;
+}
+.mr-3 {
+  margin-right: var(--spacing-3) !important;
+}
+.mt-3 {
+  margin-top: var(--spacing-3) !important;
+}
+.mb-3 {
+  margin-bottom: var(--spacing-3) !important;
+}
+
+.ml-4 {
+  margin-left: var(--spacing-4) !important;
+}
+.mr-4 {
+  margin-right: var(--spacing-4) !important;
+}
+.mt-4 {
+  margin-top: var(--spacing-4) !important;
+}
+.mb-4 {
+  margin-bottom: var(--spacing-4) !important;
+}
+
+.ml-5 {
+  margin-left: var(--spacing-5) !important;
+}
+.mr-5 {
+  margin-right: var(--spacing-5) !important;
+}
+.mt-5 {
+  margin-top: var(--spacing-5) !important;
+}
+.mb-5 {
+  margin-bottom: var(--spacing-5) !important;
+}
+
+.ml-6 {
+  margin-left: var(--spacing-6) !important;
+}
+.mr-6 {
+  margin-right: var(--spacing-6) !important;
+}
+.mt-6 {
+  margin-top: var(--spacing-6) !important;
+}
+.mb-6 {
+  margin-bottom: var(--spacing-6) !important;
+}
+
+.ml-7 {
+  margin-left: var(--spacing-7) !important;
+}
+.mr-7 {
+  margin-right: var(--spacing-7) !important;
+}
+.mt-7 {
+  margin-top: var(--spacing-7) !important;
+}
+.mb-7 {
+  margin-bottom: var(--spacing-7) !important;
+}
+
+.ml-8 {
+  margin-left: var(--spacing-8) !important;
+}
+.mr-8 {
+  margin-right: var(--spacing-8) !important;
+}
+.mt-8 {
+  margin-top: var(--spacing-8) !important;
+}
+.mb-8 {
+  margin-bottom: var(--spacing-8) !important;
+}
+
+.ml-9 {
+  margin-left: var(--spacing-9) !important;
+}
+.mr-9 {
+  margin-right: var(--spacing-9) !important;
+}
+.mt-9 {
+  margin-top: var(--spacing-9) !important;
+}
+.mb-9 {
+  margin-bottom: var(--spacing-9) !important;
+}
+
+/* Padding */
+
+.pl-1 {
+  padding-left: var(--spacing-1) !important;
+}
+.pr-1 {
+  padding-right: var(--spacing-1) !important;
+}
+.pt-1 {
+  padding-top: var(--spacing-1) !important;
+}
+.pb-1 {
+  padding-bottom: var(--spacing-1) !important;
+}
+
+.pl-2 {
+  padding-left: var(--spacing-2) !important;
+}
+.pr-2 {
+  padding-right: var(--spacing-2) !important;
+}
+.pt-2 {
+  padding-top: var(--spacing-2) !important;
+}
+.pb-2 {
+  padding-bottom: var(--spacing-2) !important;
+}
+
+.pl-3 {
+  padding-left: var(--spacing-3) !important;
+}
+.pr-3 {
+  padding-right: var(--spacing-3) !important;
+}
+.pt-3 {
+  padding-top: var(--spacing-3) !important;
+}
+.pb-3 {
+  padding-bottom: var(--spacing-3) !important;
+}
+
+.pl-4 {
+  padding-left: var(--spacing-4) !important;
+}
+.pr-4 {
+  padding-right: var(--spacing-4) !important;
+}
+.pt-4 {
+  padding-top: var(--spacing-4) !important;
+}
+.pb-4 {
+  padding-bottom: var(--spacing-4) !important;
+}
+
+.pl-5 {
+  padding-left: var(--spacing-5) !important;
+}
+.pr-5 {
+  padding-right: var(--spacing-5) !important;
+}
+.pt-5 {
+  padding-top: var(--spacing-5) !important;
+}
+.pb-5 {
+  padding-bottom: var(--spacing-5) !important;
+}
+
+.pl-6 {
+  padding-left: var(--spacing-6) !important;
+}
+.pr-6 {
+  padding-right: var(--spacing-6) !important;
+}
+.pt-6 {
+  padding-top: var(--spacing-6) !important;
+}
+.pb-6 {
+  padding-bottom: var(--spacing-6) !important;
+}
+
+.pl-7 {
+  padding-left: var(--spacing-7) !important;
+}
+.pr-7 {
+  padding-right: var(--spacing-7) !important;
+}
+.pt-7 {
+  padding-top: var(--spacing-7) !important;
+}
+.pb-7 {
+  padding-bottom: var(--spacing-7) !important;
+}
+
+.pl-8 {
+  padding-left: var(--spacing-8) !important;
+}
+.pr-8 {
+  padding-right: var(--spacing-8) !important;
+}
+.pt-8 {
+  padding-top: var(--spacing-8) !important;
+}
+.pb-8 {
+  padding-bottom: var(--spacing-8) !important;
+}
+
+.pl-9 {
+  padding-left: var(--spacing-9) !important;
+}
+.pr-9 {
+  padding-right: var(--spacing-9) !important;
+}
+.pt-9 {
+  padding-top: var(--spacing-9) !important;
+}
+.pb-9 {
+  padding-bottom: var(--spacing-9) !important;
+}
diff --git a/src/core/client/ui/components/Box/Box.mdx b/src/core/client/ui/components/Box/Box.mdx
new file mode 100644
index 000000000..e7b8aa2a0
--- /dev/null
+++ b/src/core/client/ui/components/Box/Box.mdx
@@ -0,0 +1,30 @@
+---
+menu: UI Kit
+name: Box
+---
+
+import { Playground } from "docz";
+import Box from "./Box";
+
+# Box
+
+## Usage
+
+<Playground>
+  <Box padding={2}>First box</Box>
+  <Box padding={2} marginTop={2}>
+    Second box
+  </Box>
+</Playground>
+
+## Short Aliases
+
+<Playground>
+  <Box p={2}>First box</Box>
+  <Box p={2} mt={2}>
+    Second box
+  </Box>
+  <Box p={2} mt={2} clone>
+    <div>Cloned div</div>
+  </Box>
+</Playground>
diff --git a/src/core/client/ui/components/Box/Box.tsx b/src/core/client/ui/components/Box/Box.tsx
new file mode 100644
index 000000000..4a00ccbd9
--- /dev/null
+++ b/src/core/client/ui/components/Box/Box.tsx
@@ -0,0 +1,164 @@
+import cn from "classnames";
+import React, {
+  FunctionComponent,
+  HTMLAttributes,
+  ReactElement,
+  Ref,
+} from "react";
+
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { Spacing } from "coral-ui/theme/variables";
+
+import styles from "./Box.css";
+
+interface Props extends HTMLAttributes<any> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+
+  /* Margin */
+  m?: Spacing;
+  mx?: Spacing;
+  my?: Spacing;
+  margin?: Spacing;
+  marginStart?: Spacing;
+  marginEnd?: Spacing;
+  marginLeft?: Spacing;
+  marginRight?: Spacing;
+  marginTop?: Spacing;
+  marginBottom?: Spacing;
+  ms?: Spacing;
+  me?: Spacing;
+  ml?: Spacing;
+  mr?: Spacing;
+  mt?: Spacing;
+  mb?: Spacing;
+
+  /* Padding */
+  p?: Spacing;
+  px?: Spacing;
+  py?: Spacing;
+  padding?: Spacing;
+  paddingStart?: Spacing;
+  paddingEnd?: Spacing;
+  paddingLeft?: Spacing;
+  paddingRight?: Spacing;
+  paddingTop?: Spacing;
+  paddingBottom?: Spacing;
+  ps?: Spacing;
+  pe?: Spacing;
+  pl?: Spacing;
+  pr?: Spacing;
+  pt?: Spacing;
+  pb?: Spacing;
+
+  /** If set, will perform React.cloneElement instead */
+  clone?: boolean;
+
+  /** The name of the Box to render */
+  children?: React.ReactNode;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLElement>;
+
+  /**
+   * The container used for the root node.
+   * Either a string to use a DOM element, a component, or an element.
+   */
+  container?: React.ReactElement<any> | React.ComponentType<any> | string;
+}
+
+const Box: FunctionComponent<Props> = props => {
+  const {
+    clone,
+    classes,
+    className,
+    forwardRef,
+    container,
+    children,
+    m,
+    mx,
+    my,
+    margin,
+    marginStart,
+    marginEnd,
+    marginLeft,
+    marginRight,
+    marginTop,
+    marginBottom,
+    ml,
+    mr,
+    ms,
+    me,
+    mt,
+    mb,
+    p,
+    px,
+    py,
+    padding,
+    paddingStart,
+    paddingEnd,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    pl,
+    pr,
+    ps,
+    pe,
+    pt,
+    pb,
+    ...rest
+  } = props;
+  const final = {
+    ml: ml || marginLeft || ms || marginStart || mx || m || margin,
+    mr: mr || marginRight || me || marginEnd || mx || m || margin,
+    mt: mt || marginTop || my || m || margin,
+    mb: mb || marginBottom || my || m || margin,
+    pl: pl || paddingLeft || ps || paddingStart || px || p || padding,
+    pr: pr || paddingRight || pe || paddingEnd || px || p || padding,
+    pt: pt || paddingTop || py || p || padding,
+    pb: pb || paddingBottom || py || p || padding,
+  };
+  const rootClassName = cn(
+    classes.root,
+    className,
+    /* Margin */
+    final.ml && (classes as any)[`ml-${final.ml}`],
+    final.mr && (classes as any)[`mr-${final.mr}`],
+    final.mt && (classes as any)[`mt-${final.mt}`],
+    final.mb && (classes as any)[`mb-${final.mb}`],
+    /* Padding */
+    final.pl && (classes as any)[`pl-${final.pl}`],
+    final.pr && (classes as any)[`pr-${final.pr}`],
+    final.pt && (classes as any)[`pt-${final.pt}`],
+    final.pb && (classes as any)[`pb-${final.pb}`]
+  );
+
+  const innerProps = {
+    className: rootClassName,
+    ref: forwardRef,
+    ...rest,
+  };
+
+  const Container = container!;
+
+  if (clone) {
+    const child = React.Children.only(children) as ReactElement;
+    return React.cloneElement(child, innerProps);
+  }
+  if (React.isValidElement<any>(Container)) {
+    return React.cloneElement(Container, { ...innerProps, children });
+  } else {
+    return <Container {...innerProps}>{children}</Container>;
+  }
+};
+
+Box.defaultProps = {
+  container: "div",
+} as Partial<Props>;
+
+const enhanced = withForwardRef(withStyles(styles)(Box));
+export default enhanced;
diff --git a/src/core/client/ui/components/Box/index.ts b/src/core/client/ui/components/Box/index.ts
new file mode 100644
index 000000000..772ab37c1
--- /dev/null
+++ b/src/core/client/ui/components/Box/index.ts
@@ -0,0 +1 @@
+export { default } from "./Box";
diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css
index 392d1fe3c..50d60f23b 100644
--- a/src/core/client/ui/components/Button/Button.css
+++ b/src/core/client/ui/components/Button/Button.css
@@ -9,7 +9,7 @@
   border: 0px solid transparent;
 
   & > * {
-    margin: 0 calc(0.5 * var(--mini-unit)) 0 0;
+    margin: 0 var(--spacing-1) 0 0;
     /* convince safari */
     align-self: center;
   }
diff --git a/src/core/client/ui/components/CallOut/CallOut.tsx b/src/core/client/ui/components/CallOut/CallOut.tsx
index e5afb0d1a..05501e169 100644
--- a/src/core/client/ui/components/CallOut/CallOut.tsx
+++ b/src/core/client/ui/components/CallOut/CallOut.tsx
@@ -45,7 +45,7 @@ const CallOut: FunctionComponent<CallOutProps> = props => {
 
   return (
     <div className={rootClassName} {...rest}>
-      {children}
+      <div>{children}</div>
     </div>
   );
 };
diff --git a/src/core/client/ui/components/CallOut/__snapshots__/CallOut.spec.tsx.snap b/src/core/client/ui/components/CallOut/__snapshots__/CallOut.spec.tsx.snap
index 1891d1d73..9e568c05b 100644
--- a/src/core/client/ui/components/CallOut/__snapshots__/CallOut.spec.tsx.snap
+++ b/src/core/client/ui/components/CallOut/__snapshots__/CallOut.spec.tsx.snap
@@ -4,6 +4,8 @@ exports[`renders correctly 1`] = `
 <div
   className="CallOut-root CallOut-colorError custom"
 >
-  Hello World
+  <div>
+    Hello World
+  </div>
 </div>
 `;
diff --git a/src/core/client/ui/components/Counter/Counter.css b/src/core/client/ui/components/Counter/Counter.css
index 9781f8e8d..b5bb794e6 100644
--- a/src/core/client/ui/components/Counter/Counter.css
+++ b/src/core/client/ui/components/Counter/Counter.css
@@ -1,22 +1,40 @@
 .root {
-  composes: subTabCounter from "coral-ui/shared/typography.css";
-  border-radius: 1px;
+  font-size: calc(14rem / var(--rem-base));
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-sans-serif);
+  line-height: 1;
+  letter-spacing: calc(0.2em / 14);
+  border-radius: var(--round-corners);
   padding: 2px 3px 3px 3px;
   color: inherit;
 }
 
+.sizeSmall {
+  font-size: calc(12rem / var(--rem-base));
+  padding: 2px 3px;
+  line-height: 1;
+}
+
+.text {
+  color: var(--palette-text-light);
+}
+
 .colorPrimary {
   background-color: var(--palette-primary-main);
 }
 
 .colorGrey {
+  background-color: var(--palette-grey-lightest);
+  box-shadow: inset 0px 0px 0px 1px var(--palette-grey-dark);
+  & .text {
+    color: var(--palette-grey-dark);
+  }
+}
+
+.colorDark {
   background-color: var(--palette-grey-dark);
 }
 
 .colorInherit {
   background-color: currentColor;
 }
-
-.text {
-  color: var(--palette-text-light);
-}
diff --git a/src/core/client/ui/components/Counter/Counter.mdx b/src/core/client/ui/components/Counter/Counter.mdx
index 249e68dfa..73e13787c 100644
--- a/src/core/client/ui/components/Counter/Counter.mdx
+++ b/src/core/client/ui/components/Counter/Counter.mdx
@@ -17,3 +17,18 @@ import Counter from "./Counter";
     <span>Comments</span> <Counter>23</Counter>
   </Flex>
 </Playground>
+
+<Playground>
+  <Flex itemGutter>
+    <Counter size="sm">23</Counter>
+    <Counter size="sm" color="primary">
+      15
+    </Counter>
+    <Counter size="sm" color="grey">
+      10
+    </Counter>
+    <Counter size="sm" color="dark">
+      20
+    </Counter>
+  </Flex>
+</Playground>
diff --git a/src/core/client/ui/components/Counter/Counter.tsx b/src/core/client/ui/components/Counter/Counter.tsx
index 27bd1119c..123747778 100644
--- a/src/core/client/ui/components/Counter/Counter.tsx
+++ b/src/core/client/ui/components/Counter/Counter.tsx
@@ -14,7 +14,9 @@ interface Props {
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color?: "inherit" | "grey" | "primary";
+  color?: "inherit" | "dark" | "grey" | "primary";
+
+  size?: "sm" | "md";
 }
 
 const Counter: FunctionComponent<Props> = ({
@@ -22,14 +24,17 @@ const Counter: FunctionComponent<Props> = ({
   color,
   className,
   children,
+  size,
   ...rest
 }) => {
   const rootClassName = cn(
     classes.root,
     {
       [classes.colorPrimary]: color === "primary",
+      [classes.colorDark]: color === "dark",
       [classes.colorGrey]: color === "grey",
       [classes.colorInherit]: color === "inherit",
+      [classes.sizeSmall]: size === "sm",
     },
     className
   );
diff --git a/src/core/client/ui/components/Counter/__snapshots__/Counter.spec.tsx.snap b/src/core/client/ui/components/Counter/__snapshots__/Counter.spec.tsx.snap
index bd0bb0827..8c8a83078 100644
--- a/src/core/client/ui/components/Counter/__snapshots__/Counter.spec.tsx.snap
+++ b/src/core/client/ui/components/Counter/__snapshots__/Counter.spec.tsx.snap
@@ -4,10 +4,12 @@ exports[`renders correctly 1`] = `
 <Counter
   classes={
     Object {
+      "colorDark": "Counter-colorDark",
       "colorGrey": "Counter-colorGrey",
       "colorInherit": "Counter-colorInherit",
       "colorPrimary": "Counter-colorPrimary",
       "root": "Counter-root",
+      "sizeSmall": "Counter-sizeSmall",
       "text": "Counter-text",
     }
   }
diff --git a/src/core/client/ui/components/Dropdown/Button.tsx b/src/core/client/ui/components/Dropdown/Button.tsx
index 6f74b2048..41080cc4d 100644
--- a/src/core/client/ui/components/Dropdown/Button.tsx
+++ b/src/core/client/ui/components/Dropdown/Button.tsx
@@ -50,7 +50,7 @@ const Button: FunctionComponent<Props> = ({
       disabled={disabled}
       {...rest}
     >
-      <Flex>
+      <Flex alignItems="center">
         {icon && <div className={classes.iconBefore}>{icon}</div>}
         <div
           className={cn({
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 79e4c2b0a..1e2ce97fc 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -5,6 +5,222 @@
   display: flex;
 }
 
+.spacing-1 {
+  & > * {
+    margin: 0 var(--spacing-1) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-1) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-1) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--spacing-1) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-2 {
+  & > * {
+    margin: 0 var(--spacing-2) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-2) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-2) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--spacing-2) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-3 {
+  & > * {
+    margin: 0 var(--spacing-3) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-3) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-3) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--spacing-3) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-4 {
+  & > * {
+    margin: 0 var(--spacing-4) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-4) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-4) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--spacing-4) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-5 {
+  & > * {
+    margin: 0 var(--spacing-5) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-5) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-5) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--spacing-5) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-6 {
+  & > * {
+    margin: 0 var(--spacing-6) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-6) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-6) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--spacing-6) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-7 {
+  & > * {
+    margin: 0 var(--spacing-7) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-7) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-7) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--spacing-7) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-8 {
+  & > * {
+    margin: 0 var(--spacing-8) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-8) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-8) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--spacing-8) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-9 {
+  & > * {
+    margin: 0 var(--spacing-9) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-9) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-9) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--spacing-9) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
 .halfItemGutter {
   & > * {
     margin: 0 calc(0.5 * var(--mini-unit)) 0 0 !important;
@@ -19,7 +235,7 @@
       margin: 0 0 calc(0.5 * var(--mini-unit)) 0 !important;
     }
   }
-  &.directionColumnReverese {
+  &.directionColumnReverse {
     & > * {
       margin: calc(0.5 * var(--mini-unit)) 0 0 0 !important;
     }
@@ -43,7 +259,7 @@
       margin: 0 0 calc(2 * var(--mini-unit)) 0 !important;
     }
   }
-  &.directionColumnReverese {
+  &.directionColumnReverse {
     & > * {
       margin: calc(2 * var(--mini-unit)) 0 0 0 !important;
     }
@@ -67,7 +283,7 @@
       margin: 0 0 var(--mini-unit) 0 !important;
     }
   }
-  &.directionColumnReverese {
+  &.directionColumnReverse {
     & > * {
       margin: var(--mini-unit) 0 0 0 !important;
     }
@@ -154,6 +370,159 @@
       margin-left: calc(3 * var(--mini-unit)) !important;
     }
   }
+
+  &:not(.directionColumn).spacing-1 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--spacing-1)) !important;
+    }
+    & > * {
+      margin-top: var(--spacing-1) !important;
+    }
+  }
+  &.directionColumn.spacing-1 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--spacing-1)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--spacing-1) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-2 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--spacing-2)) !important;
+    }
+    & > * {
+      margin-top: var(--spacing-2) !important;
+    }
+  }
+  &.directionColumn.spacing-2 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--spacing-2)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--spacing-2) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-3 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--spacing-3)) !important;
+    }
+    & > * {
+      margin-top: var(--spacing-3) !important;
+    }
+  }
+  &.directionColumn.spacing-3 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--spacing-3)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--spacing-3) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-4 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--spacing-4)) !important;
+    }
+    & > * {
+      margin-top: var(--spacing-4) !important;
+    }
+  }
+  &.directionColumn.spacing-4 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--spacing-4)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--spacing-4) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-5 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--spacing-5)) !important;
+    }
+    & > * {
+      margin-top: var(--spacing-5) !important;
+    }
+  }
+  &.directionColumn.spacing-5 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--spacing-5)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--spacing-5) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-6 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--spacing-6)) !important;
+    }
+    & > * {
+      margin-top: var(--spacing-6) !important;
+    }
+  }
+  &.directionColumn.spacing-6 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--spacing-6)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--spacing-6) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-7 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--spacing-7)) !important;
+    }
+    & > * {
+      margin-top: var(--spacing-7) !important;
+    }
+  }
+  &.directionColumn.spacing-7 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--spacing-7)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--spacing-7) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-8 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--spacing-8)) !important;
+    }
+    & > * {
+      margin-top: var(--spacing-8) !important;
+    }
+  }
+  &.directionColumn.spacing-8 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--spacing-8)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--spacing-8) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-9 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--spacing-9)) !important;
+    }
+    & > * {
+      margin-top: var(--spacing-9) !important;
+    }
+  }
+  &.directionColumn.spacing-9 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--spacing-9)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--spacing-9) !important;
+    }
+  }
 }
 
 .justifyFlexStart {
diff --git a/src/core/client/ui/components/Flex/Flex.mdx b/src/core/client/ui/components/Flex/Flex.mdx
index 7ca59bb54..baf6177f4 100644
--- a/src/core/client/ui/components/Flex/Flex.mdx
+++ b/src/core/client/ui/components/Flex/Flex.mdx
@@ -3,31 +3,39 @@ name: Flex
 menu: UI Kit
 ---
 
-import { Playground, PropsTable } from 'docz'
-import Flex from './Flex'
-import Button from '../Button'
+import { Playground, PropsTable } from "docz";
+import Flex from "./Flex";
+import HorizontalGutter from "../HorizontalGutter";
+import Button from "../Button";
 
 # Flex
 
 `Flex` is a wrapper around `flexbox`.
 
 ## Justify content
+
 <Playground>
   <Flex justifyContent="center">I'm centered</Flex>
 </Playground>
 
 ## Align items
+
 <Playground>
-  <Flex alignItems="center" itemGutter>
+  <Flex alignItems="center" spacing={2}>
     <Button variant="filled">Push Me</Button>
-    <Button variant="filled" size="small">Push Me</Button>
-    <Button variant="filled" size="large">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>
+  <Flex direction="column" spacing={2}>
     <Button variant="filled">Push Me</Button>
     <Button variant="filled">Push Me</Button>
     <Button variant="filled">Push Me</Button>
@@ -37,25 +45,16 @@ import Button from '../Button'
 ## 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>
+  <HorizontalGutter>
+    <Flex direction="row" spacing={2}>
+      <Button variant="filled">Push Me</Button>
+      <Button variant="filled">Push Me</Button>
+      <Button variant="filled">Push Me</Button>
+    </Flex>
+    <Flex direction="row" spacing={8}>
+      <Button variant="filled">Push Me</Button>
+      <Button variant="filled">Push Me</Button>
+      <Button variant="filled">Push Me</Button>
+    </Flex>
+  </HorizontalGutter>
 </Playground>
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index 42a3ecd1c..1baae4465 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -4,11 +4,15 @@ import { FunctionComponent } from "react";
 
 import { pascalCase } from "coral-common/utils";
 import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { Spacing } from "coral-ui/theme/variables";
 import { PropTypesOf } from "coral-ui/types";
 
 import styles from "./Flex.css";
 
-interface Props {
+/** Needs to be loaded after styles, because Box styles have priority */
+import Box from "../Box";
+
+interface Props extends PropTypesOf<typeof Box> {
   /**
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
@@ -25,7 +29,10 @@ interface Props {
     | "space-evenly";
   alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
   direction?: "row" | "column" | "row-reverse" | "column-reverse";
+  /** @deprecated use `spacing` instead */
   itemGutter?: boolean | "half" | "double" | "triple";
+  /** Adds a gutter between items. Uses predefined sizes from design tokens */
+  spacing?: Spacing;
   className?: string;
   wrap?: boolean | "reverse";
 
@@ -44,6 +51,7 @@ const Flex: FunctionComponent<Props> = props => {
     wrap,
     forwardRef,
     children,
+    spacing,
     ...rest
   } = props;
 
@@ -71,7 +79,12 @@ const Flex: FunctionComponent<Props> = props => {
   }
 
   const rootClassNames: string = cn(classes.root, className);
-  const flexClassNames: string = cn(classes.flex, classObject);
+  const flexClassNames: string = cn(
+    classes.flex,
+    classObject,
+    (itemGutter || spacing) && "gutter",
+    spacing && (classes as any)[`spacing-${spacing!}`]
+  );
 
   // text nodes can't be modified with css, so replace them with spans.
   // Readd spaces at the beginning or end of text nodes because
@@ -86,19 +99,19 @@ const Flex: FunctionComponent<Props> = props => {
   if (wrap && itemGutter) {
     // The first div is required to support nested `Flex` components with itemGutters.
     return (
-      <div ref={forwardRef} className={rootClassNames} {...rest}>
+      <Box ref={forwardRef} className={rootClassNames} {...rest}>
         <div className={flexClassNames}>{content}</div>
-      </div>
+      </Box>
     );
   }
   return (
-    <div
+    <Box
       ref={forwardRef}
       className={cn(rootClassNames, flexClassNames)}
       {...rest}
     >
       {content}
-    </div>
+    </Box>
   );
 };
 
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 826ae9de6..5f915908a 100644
--- a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
+++ b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+  className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionRow"
 >
   <div>
     Hello World
@@ -12,7 +12,7 @@ exports[`renders correctly 1`] = `
 
 exports[`renders with half item gutter 1`] = `
 <div
-  className="Flex-root Flex-flex Flex-halfItemGutter"
+  className="Box-root Flex-root Flex-flex Flex-halfItemGutter gutter"
 >
   <div>
     Hello World
@@ -22,7 +22,7 @@ exports[`renders with half item gutter 1`] = `
 
 exports[`renders with item gutter 1`] = `
 <div
-  className="Flex-root Flex-flex Flex-itemGutter"
+  className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
 >
   <div>
     Hello World
@@ -32,7 +32,7 @@ exports[`renders with item gutter 1`] = `
 
 exports[`renders with wrap 1`] = `
 <div
-  className="Flex-root Flex-flex Flex-wrap"
+  className="Box-root Flex-root Flex-flex Flex-wrap"
 >
   <div>
     Hello World
@@ -42,7 +42,7 @@ exports[`renders with wrap 1`] = `
 
 exports[`renders with wrap reverse 1`] = `
 <div
-  className="Flex-root Flex-flex Flex-wrapReverse"
+  className="Box-root Flex-root Flex-flex Flex-wrapReverse"
 >
   <div>
     Hello World
diff --git a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
index 2d7a705af..586adb567 100644
--- a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
+++ b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
 >
   Form Components should go here
 </div>
@@ -10,15 +10,15 @@ exports[`renders correctly 1`] = `
 
 exports[`works with multiple form components 1`] = `
 <div
-  className="HorizontalGutter-root FormField-root HorizontalGutter-half"
+  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
 >
   <label
-    className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+    className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
   >
     Username
   </label>
   <p
-    className="Typography-root Typography-detail Typography-colorTextSecondary"
+    className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
   >
     An identifier displayed on your comments. You may use “_” and “.”
   </p>
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
index 0ce220c50..40a7908ad 100644
--- a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
@@ -3,40 +3,34 @@ name: HorizontalGutter
 menu: UI Kit
 ---
 
-import { Playground } from "docz"
-import HorizontalGutter from "./HorizontalGutter"
-import Button from "../Button"
+import { Playground } from "docz";
+import HorizontalGutter from "./HorizontalGutter";
+import Button from "../Button";
 
 # Spinner
 
 ## Usage
 
-### Full gutter
-
 <Playground>
-  <HorizontalGutter>
-    <div style={{backgroundColor: "grey", height: "30px"}} />
-    <div style={{backgroundColor: "grey", height: "30px"}} />
-    <div style={{backgroundColor: "grey", height: "30px"}} />
+  <HorizontalGutter spacing={2}>
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
   </HorizontalGutter>
 </Playground>
 
-### Half gutter
-
 <Playground>
-  <HorizontalGutter size="half">
-    <div style={{backgroundColor: "grey", height: "30px"}} />
-    <div style={{backgroundColor: "grey", height: "30px"}} />
-    <div style={{backgroundColor: "grey", height: "30px"}} />
+  <HorizontalGutter spacing={4}>
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
   </HorizontalGutter>
 </Playground>
 
-### Double gutter
-
 <Playground>
-  <HorizontalGutter size="double">
-    <div style={{backgroundColor: "grey", height: "30px"}} />
-    <div style={{backgroundColor: "grey", height: "30px"}} />
-    <div style={{backgroundColor: "grey", height: "30px"}} />
+  <HorizontalGutter spacing={6}>
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
   </HorizontalGutter>
 </Playground>
diff --git a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
index 338350da7..bf2ef1a9b 100644
--- a/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
+++ b/src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
@@ -1,12 +1,16 @@
 import cn from "classnames";
-import React, { FunctionComponent, HTMLAttributes, Ref } from "react";
+import React, { FunctionComponent, Ref } from "react";
 
 import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { Spacing } from "coral-ui/theme/variables";
 import { PropTypesOf } from "coral-ui/types";
 
 import styles from "./HorizontalGutter.css";
 
-interface Props extends HTMLAttributes<HTMLSpanElement> {
+/** Needs to be loaded after styles, because Box styles have priority */
+import Box from "../Box";
+
+interface Props extends PropTypesOf<typeof Box> {
   /**
    * This prop can be used to add custom classnames.
    * It is handled by the `withStyles `HOC.
@@ -16,7 +20,8 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
   /** @deprecated use `spacing` instead */
   size?: "half" | "full" | "double" | "triple" | "oneAndAHalf";
 
-  spacing?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+  /** Choose gutter size, uses predefined sizes from design tokens */
+  spacing?: Spacing;
 
   /** The name of the HorizontalGutter to render */
   children?: React.ReactNode;
@@ -51,16 +56,10 @@ const HorizontalGutter: FunctionComponent<Props> = props => {
   const innerProps = {
     className: rootClassName,
     ref: forwardRef,
+    container,
     ...rest,
   };
-
-  const Container = container!;
-
-  if (React.isValidElement<any>(Container)) {
-    return React.cloneElement(Container, innerProps);
-  } else {
-    return <Container {...innerProps} />;
-  }
+  return <Box {...innerProps} />;
 };
 
 HorizontalGutter.defaultProps = {
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
index 15c0915ed..af7883930 100644
--- a/src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap
+++ b/src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="HorizontalGutter-root custom HorizontalGutter-full"
+  className="Box-root HorizontalGutter-root custom HorizontalGutter-full"
 />
 `;
 
 exports[`renders double size 1`] = `
 <div
-  className="HorizontalGutter-root HorizontalGutter-double"
+  className="Box-root HorizontalGutter-root HorizontalGutter-double"
 />
 `;
diff --git a/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap b/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
index eb7d1a539..0ee1071cd 100644
--- a/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
+++ b/src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <p
-  className="Typography-root Typography-detail Typography-colorTextSecondary"
+  className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
 >
   Form Components should go here
 </p>
diff --git a/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap b/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap
index ec528e72d..c619963ce 100644
--- a/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap
+++ b/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <label
-  className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root custom"
+  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root custom"
 >
   Hello
 </label>
diff --git a/src/core/client/ui/components/Popover/Arrow.css b/src/core/client/ui/components/Popover/Arrow.css
index 69cefb71d..98874f818 100644
--- a/src/core/client/ui/components/Popover/Arrow.css
+++ b/src/core/client/ui/components/Popover/Arrow.css
@@ -21,6 +21,16 @@
       border-color: transparent transparent var(--palette-common-white)
         transparent;
     }
+    &.colorDark {
+      &::before {
+        border-color: transparent transparent var(--palette-grey-dark)
+          transparent;
+      }
+      &::after {
+        border-color: transparent transparent var(--palette-grey-dark)
+          transparent;
+      }
+    }
   }
 
   &[data-placement*="top"] {
@@ -41,6 +51,16 @@
       border-color: var(--palette-common-white) transparent transparent
         transparent;
     }
+    &.colorDark {
+      &::before {
+        border-color: var(--palette-grey-dark) transparent transparent
+          transparent;
+      }
+      &::after {
+        border-color: var(--palette-grey-dark) transparent transparent
+          transparent;
+      }
+    }
   }
 
   &[data-placement*="right"] {
@@ -61,6 +81,16 @@
       border-color: transparent var(--palette-common-white) transparent
         transparent;
     }
+    &.colorDark {
+      &::before {
+        border-color: transparent var(--palette-grey-dark) transparent
+          transparent;
+      }
+      &::after {
+        border-color: transparent var(--palette-grey-dark) transparent
+          transparent;
+      }
+    }
   }
 
   &[data-placement*="left"] {
@@ -81,6 +111,16 @@
       border-color: transparent transparent transparent
         var(--palette-common-white);
     }
+    &.colorDark {
+      &::before {
+        border-color: transparent transparent transparent
+          var(--palette-grey-dark);
+      }
+      &::after {
+        border-color: transparent transparent transparent
+          var(--palette-grey-dark);
+      }
+    }
   }
 
   &::before {
diff --git a/src/core/client/ui/components/Popover/Arrow.tsx b/src/core/client/ui/components/Popover/Arrow.tsx
index 89a86e164..4e977bd9d 100644
--- a/src/core/client/ui/components/Popover/Arrow.tsx
+++ b/src/core/client/ui/components/Popover/Arrow.tsx
@@ -3,11 +3,20 @@ import React from "react";
 
 import styles from "./Arrow.css";
 
-const Arrow = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->((props, ref) => (
-  <div {...props} className={cn(props.className, styles.root)} ref={ref} />
-));
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  dark?: boolean;
+}
+
+const Arrow = React.forwardRef<HTMLDivElement, Props>(
+  ({ className, dark, ...rest }, ref) => (
+    <div
+      {...rest}
+      className={cn(className, styles.root, {
+        [styles.colorDark]: dark,
+      })}
+      ref={ref}
+    />
+  )
+);
 
 export default Arrow;
diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css
index bd4503bf5..2d9d4f5a6 100644
--- a/src/core/client/ui/components/Popover/Popover.css
+++ b/src/core/client/ui/components/Popover/Popover.css
@@ -11,6 +11,11 @@
   margin: 2px;
 }
 
+.colorDark {
+  background: var(--palette-grey-dark);
+  border-color: var(--palette-grey-dark);
+}
+
 .top {
   margin: calc(0.5 * var(--mini-unit)) 0;
 }
diff --git a/src/core/client/ui/components/Popover/Popover.mdx b/src/core/client/ui/components/Popover/Popover.mdx
index 6f3dd9ec1..54434116b 100644
--- a/src/core/client/ui/components/Popover/Popover.mdx
+++ b/src/core/client/ui/components/Popover/Popover.mdx
@@ -9,6 +9,9 @@ import Button from "../Button";
 import Flex from "../Flex";
 import Typography from "../Typography";
 import ButtonIcon from "../Button/ButtonIcon";
+import BaseButton from "../BaseButton";
+import ClickOutside from "../ClickOutside";
+import Icon from "../Icon";
 
 # Popover
 
@@ -17,7 +20,10 @@ import ButtonIcon from "../Button/ButtonIcon";
 ## Basic usage
 
 <Playground>
-  <Popover body={<Typography>This is the body</Typography>}>
+  <Popover
+    id="my-popover-1"
+    body={() => <Typography p={2}>This is the body</Typography>}
+  >
     {({ toggleVisibility, ref }) => (
       <Button
         onClick={toggleVisibility}
@@ -35,10 +41,11 @@ import ButtonIcon from "../Button/ButtonIcon";
 
 <Playground>
   <Popover
+    id="my-popover-2"
     placement="top"
     body={({ toggleVisibility }) => (
       <Flex itemGutter="half">
-        <Typography>This is the body</Typography>
+        <Typography p={2}>This is the body</Typography>
         <Button onClick={toggleVisibility} size="small">
           <ButtonIcon>close</ButtonIcon>
         </Button>
@@ -57,3 +64,25 @@ import ButtonIcon from "../Button/ButtonIcon";
     )}
   </Popover>
 </Playground>
+
+## Tooltip
+
+<Playground>
+  <Popover
+    id="my-popover-1"
+    body={({ toggleVisibility }) => (
+      <ClickOutside onClickOutside={toggleVisibility}>
+        <Typography color="textLight" p={2}>
+          I am a Tooltip
+        </Typography>
+      </ClickOutside>
+    )}
+    dark
+  >
+    {({ toggleVisibility, ref }) => (
+      <BaseButton onClick={toggleVisibility} ref={ref}>
+        <Icon color="primary">info</Icon>
+      </BaseButton>
+    )}
+  </Popover>
+</Playground>
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 1513df4bd..7c83d46b9 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -51,6 +51,7 @@ interface PopoverProps {
   modifiers?: PropTypesOf<typeof Popper>["modifiers"];
   eventsEnabled?: PropTypesOf<typeof Popper>["eventsEnabled"];
   positionFixed?: PropTypesOf<typeof Popper>["positionFixed"];
+  dark?: boolean;
 }
 
 interface State {
@@ -119,6 +120,7 @@ class Popover extends React.Component<PopoverProps> {
       positionFixed,
       modifiers,
       eventsEnabled,
+      dark,
       ...rest
     } = this.props;
 
@@ -164,7 +166,9 @@ class Popover extends React.Component<PopoverProps> {
                 {visible && (
                   <div
                     style={props.style}
-                    className={popoverClassName}
+                    className={cn(popoverClassName, {
+                      [classes.colorDark]: dark,
+                    })}
                     ref={props.ref}
                   >
                     {includeArrow && (
@@ -172,6 +176,7 @@ class Popover extends React.Component<PopoverProps> {
                         ref={props.arrowProps.ref}
                         data-placement={props.placement}
                         style={props.arrowProps.style}
+                        dark={dark}
                       />
                     )}
                     {typeof body === "function"
diff --git a/src/core/client/ui/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap b/src/core/client/ui/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap
index 48afcbe9f..f8dad0dcc 100644
--- a/src/core/client/ui/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap
+++ b/src/core/client/ui/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Flex-root RadioButton-root custom Flex-flex Flex-alignCenter"
+  className="Box-root Flex-root RadioButton-root custom Flex-flex Flex-alignCenter"
 >
   <input
     className="RadioButton-input"
diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css
index 7a9e171be..edb984c8a 100644
--- a/src/core/client/ui/components/Tabs/Tab.css
+++ b/src/core/client/ui/components/Tabs/Tab.css
@@ -46,10 +46,12 @@
 
 .secondary {
   font-family: var(--font-family-sans-serif);
+  color: var(--palette-grey-dark);
   padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2)
     calc(0.5 * var(--mini-unit) + 3px) calc(var(--mini-unit) * 2);
 
   &.active {
+    color: var(--palette-text-primary);
     font-weight: var(--font-weight-medium);
     border-bottom: 3px solid var(--palette-primary-main);
     padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2);
diff --git a/src/core/client/ui/components/Tag/Tag.css b/src/core/client/ui/components/Tag/Tag.css
index 65b0af475..296ca4bae 100644
--- a/src/core/client/ui/components/Tag/Tag.css
+++ b/src/core/client/ui/components/Tag/Tag.css
@@ -4,6 +4,39 @@
   line-height: 1;
   padding: 2px 4px;
   white-space: nowrap;
-  background-color: var(--palette-grey-dark);
   border-radius: 1px;
+  display: inline-block;
+}
+
+.colorPrimary {
+  background-color: var(--palette-primary-dark);
+}
+
+.colorGrey {
+  background-color: var(--palette-grey-dark);
+}
+
+.colorError {
+  background-color: var(--palette-error-dark);
+}
+
+.variantPill {
+  border-radius: 20px;
+  padding: 2px 6px;
+  font-weight: var(--font-weight-medium);
+  &.colorGrey {
+    border: 1px solid var(--palette-grey-dark);
+    background-color: var(--palette-grey-lightest);
+    color: var(--palette-grey-dark);
+  }
+  &.colorPrimary {
+    border: 1px solid var(--palette-primary-dark);
+    background-color: var(--palette-primary-lightest);
+    color: var(--palette-primary-dark);
+  }
+  &.colorError {
+    border: 1px solid var(--palette-error-dark);
+    background-color: var(--palette-error-lightest);
+    color: var(--palette-error-dark);
+  }
 }
diff --git a/src/core/client/ui/components/Tag/Tag.mdx b/src/core/client/ui/components/Tag/Tag.mdx
index bf5057e48..266f73948 100644
--- a/src/core/client/ui/components/Tag/Tag.mdx
+++ b/src/core/client/ui/components/Tag/Tag.mdx
@@ -13,7 +13,23 @@ import Flex from "../Flex";
 ## Basic Use
 
 <Playground>
-  <HorizontalGutter>
+  <Flex spacing={1}>
     <Tag>Staff</Tag>
-  </HorizontalGutter>
+    <Tag color="primary">Featured</Tag>
+    <Tag color="error">Rejected</Tag>
+  </Flex>
+</Playground>
+
+## Pill variant
+
+<Playground>
+  <Flex spacing={1}>
+    <Tag variant="pill">Staff</Tag>
+    <Tag variant="pill" color="primary">
+      Featured
+    </Tag>
+    <Tag variant="pill" color="error">
+      Rejected
+    </Tag>
+  </Flex>
 </Playground>
diff --git a/src/core/client/ui/components/Tag/Tag.tsx b/src/core/client/ui/components/Tag/Tag.tsx
index baa8ecfa4..873e7e25e 100644
--- a/src/core/client/ui/components/Tag/Tag.tsx
+++ b/src/core/client/ui/components/Tag/Tag.tsx
@@ -13,12 +13,20 @@ interface Props {
    */
   classes: typeof styles;
   children: React.ReactNode;
+  color?: "grey" | "primary" | "error";
+
+  variant?: "regular" | "pill";
 }
 
 const Tag: FunctionComponent<Props> = props => {
-  const { className, children, classes, ...rest } = props;
+  const { className, children, classes, variant, color, ...rest } = props;
 
-  const rootClassName = cn(classes.root, className);
+  const rootClassName = cn(classes.root, className, {
+    [classes.variantPill]: variant === "pill",
+    [classes.colorPrimary]: color === "primary",
+    [classes.colorError]: color === "error",
+    [classes.colorGrey]: color === "grey",
+  });
 
   return (
     <span className={rootClassName} {...rest}>
@@ -27,5 +35,10 @@ const Tag: FunctionComponent<Props> = props => {
   );
 };
 
+Tag.defaultProps = {
+  color: "grey",
+  variant: "regular",
+};
+
 const enhanced = withStyles(styles)(Tag);
 export default enhanced;
diff --git a/src/core/client/ui/components/Tag/__snapshots__/Tag.spec.tsx.snap b/src/core/client/ui/components/Tag/__snapshots__/Tag.spec.tsx.snap
index 11da754e1..4ce1aa74a 100644
--- a/src/core/client/ui/components/Tag/__snapshots__/Tag.spec.tsx.snap
+++ b/src/core/client/ui/components/Tag/__snapshots__/Tag.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <span
-  className="Tag-root custom"
+  className="Tag-root custom Tag-colorGrey"
 >
   Staff
 </span>
diff --git a/src/core/client/ui/components/Typography/Typography.mdx b/src/core/client/ui/components/Typography/Typography.mdx
index 8f265fdfa..da4edf14f 100644
--- a/src/core/client/ui/components/Typography/Typography.mdx
+++ b/src/core/client/ui/components/Typography/Typography.mdx
@@ -3,13 +3,14 @@ name: Typography
 menu: UI Kit
 ---
 
-import { Playground } from 'docz'
-import Typography from './Typography'
-import HorizontalGutter from '../HorizontalGutter'
+import { Playground } from "docz";
+import Typography from "./Typography";
+import HorizontalGutter from "../HorizontalGutter";
 
 # Typography
 
 ## Basic Use
+
 <Playground>
   <HorizontalGutter>
     <Typography variant="heading1">Heading1</Typography>
@@ -23,6 +24,7 @@ import HorizontalGutter from '../HorizontalGutter'
 </Playground>
 
 ## Using different colors
+
 <Playground>
   <HorizontalGutter>
     <Typography color="textPrimary">textPrimary</Typography>
@@ -33,25 +35,33 @@ import HorizontalGutter from '../HorizontalGutter'
 </Playground>
 
 ## Set align
+
 <Playground>
-  <HorizontalGutter style={{width: "200px"}}>
+  <HorizontalGutter style={{ width: "200px" }}>
     <Typography align="left">left</Typography>
     <Typography align="center">center</Typography>
     <Typography align="right">right</Typography>
-    <Typography align="justify"> No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo
-  quiera, simplemente porque es el dolor.</Typography>
+    <Typography align="justify">
+      {" "}
+      No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo
+      quiera, simplemente porque es el dolor.
+    </Typography>
   </HorizontalGutter>
 </Playground>
 
 ## Cut off long text
+
 <Playground>
-    <Typography noWrap style={{width: "200px"}}>No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo quiera, simplemente porque es el dolor.</Typography>
+  <Typography noWrap style={{ width: "200px" }}>
+    No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo
+    quiera, simplemente porque es el dolor.
+  </Typography>
 </Playground>
 
 ## Gutters
-<Playground>
-    <Typography gutterBottom>I have a bottom gutter</Typography>
-    <Typography paragraph>I have a paragraph gutter</Typography>
-    <Typography>Just a normal text</Typography>
-</Playground>
 
+<Playground>
+  <Typography gutterBottom>I have a bottom gutter</Typography>
+  <Typography paragraph>I have a paragraph gutter</Typography>
+  <Typography>Just a normal text</Typography>
+</Playground>
diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx
index 0bf6edf2e..fd56d8db8 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/Typography/Typography.tsx
@@ -1,12 +1,16 @@
 import cn from "classnames";
-import React, { Ref } from "react";
-import { FunctionComponent, HTMLAttributes, ReactNode } from "react";
+import React from "react";
+import { FunctionComponent, ReactNode } from "react";
 
 import { withForwardRef, withStyles } from "coral-ui/hocs";
 import { PropTypesOf } from "coral-ui/types";
 
+/* In this case the Box styles have higher priority! */
 import styles from "./Typography.css";
 
+/** Needs to be loaded after styles, because Box styles have priority */
+import Box from "../Box";
+
 type Variant =
   | "heading1"
   | "heading2"
@@ -27,7 +31,7 @@ type Variant =
 // Based on Typography Component of Material UI.
 // https://github.com/mui-org/material-ui/blob/303199d39b42a321d28347d8440d69166f872f27/packages/material-ui/src/Typography/Typography.js
 
-interface Props extends HTMLAttributes<any> {
+interface Props extends PropTypesOf<typeof Box> {
   /**
    * Set the text-align on the component.
    */
@@ -86,7 +90,7 @@ interface Props extends HTMLAttributes<any> {
   variant?: Variant;
 
   /** Internal: Forwarded Ref */
-  forwardRef?: Ref<HTMLElement>;
+  forwardRef?: PropTypesOf<typeof Box>["ref"];
 }
 
 const Typography: FunctionComponent<Props> = props => {
@@ -133,14 +137,11 @@ const Typography: FunctionComponent<Props> = props => {
   const innerProps = {
     ref: forwardRef,
     className: rootClassName,
+    container: Container,
     ...rest,
   };
 
-  if (React.isValidElement<any>(Container)) {
-    return React.cloneElement(Container, innerProps);
-  } else {
-    return <Container {...innerProps} />;
-  }
+  return <Box {...innerProps} />;
 };
 
 Typography.defaultProps = {
diff --git a/src/core/client/ui/components/Typography/__snapshots__/Typography.spec.tsx.snap b/src/core/client/ui/components/Typography/__snapshots__/Typography.spec.tsx.snap
index 66abdab95..f7cc27ce6 100644
--- a/src/core/client/ui/components/Typography/__snapshots__/Typography.spec.tsx.snap
+++ b/src/core/client/ui/components/Typography/__snapshots__/Typography.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <h1
-  className="Typography-root Typography-heading1 Typography-colorTextSecondary Typography-noWrap Typography-gutterBottom Typography-alignLeft custom"
+  className="Box-root Typography-root Typography-heading1 Typography-colorTextSecondary Typography-noWrap Typography-gutterBottom Typography-alignLeft custom"
 >
   Hello World
 </h1>
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index acc931248..b24a0cddd 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -30,6 +30,7 @@ export { default as TextLink } from "./TextLink";
 export { default as CheckBox } from "./CheckBox";
 export { default as RadioButton } from "./RadioButton";
 export { default as Delay } from "./Delay";
+export { default as Box } from "./Box";
 export {
   AppBar,
   Begin as AppBarBegin,
diff --git a/src/core/client/ui/shared/buttonReset.css b/src/core/client/ui/shared/buttonReset.css
index 2e6ea33ca..f5a7fd268 100644
--- a/src/core/client/ui/shared/buttonReset.css
+++ b/src/core/client/ui/shared/buttonReset.css
@@ -27,10 +27,6 @@
     cursor: default;
   }
 
-  &:visited {
-    color: inherit;
-  }
-
   &::-moz-focus-inner {
     border: 0;
   }
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 79a4c0a37..6dc5ea2d5 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -224,15 +224,6 @@
   color: var(--palette-grey-lighter);
 }
 
-.subTabCounter {
-  font-size: calc(14rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(18em / 18);
-  letter-spacing: calc(0.2em / 18);
-  color: var(--palette-text-primary);
-}
-
 .menuItem {
   font-size: calc(16rem / var(--rem-base));
   font-weight: var(--font-weight-regular);
@@ -284,8 +275,8 @@
 .tagText {
   font-family: var(--font-family-sans-serif);
   font-weight: var(--font-weight-regular);
-  font-size: calc(13rem / var(--rem-base));
-  letter-spacing: calc(-0.2em / 13);
+  font-size: calc(14rem / var(--rem-base));
+  letter-spacing: calc(-0.2em / 14);
 }
 
 .sideNavigationItem {
diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts
index f44d974d3..179c9e12e 100644
--- a/src/core/client/ui/theme/variables.ts
+++ b/src/core/client/ui/theme/variables.ts
@@ -3,6 +3,9 @@
  * We keep the `.ts` extension to keep the types.
  */
 
+export type Spacing = keyof typeof variables["spacing"];
+export type Shade = keyof typeof variables["palette"]["primary"];
+
 const variables = {
   elevation: {
     main: "1px 0px 4px rgba(0, 0, 0, 0.25)",
diff --git a/src/core/server/errors/index.ts b/src/core/server/errors/index.ts
index d8d684a0a..a451f01fd 100644
--- a/src/core/server/errors/index.ts
+++ b/src/core/server/errors/index.ts
@@ -462,14 +462,13 @@ export class InternalDevelopmentError extends CoralError {
     >;
 
     // Push in the internal message for this override.
-    extensions.message = this.cause()!.message;
+    const cause = this.cause();
+    if (cause) {
+      extensions.message = cause.message;
+    }
 
     return extensions;
   }
-
-  // public get message() {
-  //   return this.cause()!.message;
-  // }
 }
 
 export class NotFoundError extends CoralError {
diff --git a/src/core/server/graph/common/extensions/ErrorWrappingExtension.ts b/src/core/server/graph/common/extensions/ErrorWrappingExtension.ts
index 368fcac84..a873b7324 100644
--- a/src/core/server/graph/common/extensions/ErrorWrappingExtension.ts
+++ b/src/core/server/graph/common/extensions/ErrorWrappingExtension.ts
@@ -1,3 +1,4 @@
+import { ApolloError } from "apollo-server-core";
 import { GraphQLError } from "graphql";
 import { GraphQLExtension, GraphQLResponse } from "graphql-extensions";
 import { merge } from "lodash";
@@ -45,6 +46,12 @@ function extractOriginalError(
   err: GraphQLError,
   ctx: CommonContext
 ): CoralError | undefined {
+  if (err instanceof ApolloError) {
+    // ApolloError's don't need to be hoisted as they contain validation
+    // messages about the graph.
+    return;
+  }
+
   if (!err.originalError) {
     // Only errors that have an originalError need to be hoisted.
     return;
diff --git a/src/core/server/graph/tenant/loaders/Comments.ts b/src/core/server/graph/tenant/loaders/Comments.ts
index 75f792cb4..08c1c7b4c 100644
--- a/src/core/server/graph/tenant/loaders/Comments.ts
+++ b/src/core/server/graph/tenant/loaders/Comments.ts
@@ -7,6 +7,7 @@ import {
   CommentToRepliesArgs,
   GQLActionPresence,
   GQLCOMMENT_SORT,
+  GQLTAG,
   GQLUSER_ROLE,
   QueryToCommentsArgs,
   StoryToCommentsArgs,
@@ -14,12 +15,14 @@ import {
 import { retrieveManyUserActionPresence } from "coral-server/models/action/comment";
 import {
   Comment,
+  CommentConnectionInput,
   retrieveCommentConnection,
   retrieveCommentParentsConnection,
   retrieveCommentRepliesConnection,
   retrieveCommentStoryConnection,
   retrieveCommentUserConnection,
   retrieveManyComments,
+  retrieveStoryCommentTagCounts,
 } from "coral-server/models/comment";
 import { hasVisibleStatus } from "coral-server/models/comment/helpers";
 import { Connection } from "coral-server/models/helpers/connection";
@@ -28,6 +31,16 @@ import { User } from "coral-server/models/user";
 
 import { SingletonResolver } from "./util";
 
+const tagFilter = (tag?: GQLTAG): CommentConnectionInput["filter"] => {
+  if (tag) {
+    return {
+      "tags.type": tag,
+    };
+  }
+
+  return {};
+};
+
 /**
  * primeCommentsFromConnection will prime a given context with the comments
  * retrieved via a connection.
@@ -88,13 +101,20 @@ export default (ctx: Context) => ({
       mapVisibleComments(ctx.user)
     )
   ),
-  forFilter: ({ first = 10, after, storyID, status }: QueryToCommentsArgs) =>
+  forFilter: ({
+    first = 10,
+    after,
+    storyID,
+    status,
+    tag,
+  }: QueryToCommentsArgs) =>
     retrieveCommentConnection(ctx.mongo, ctx.tenant.id, {
       first,
       after,
       orderBy: GQLCOMMENT_SORT.CREATED_AT_DESC,
       filter: omitBy(
         {
+          ...tagFilter(tag),
           storyID,
           status,
         },
@@ -132,6 +152,25 @@ export default (ctx: Context) => ({
       orderBy,
       after,
     }).then(primeCommentsFromConnection(ctx)),
+  taggedForStory: (
+    storyID: string,
+    tag: GQLTAG,
+    // Apply the graph schema defaults at the loader.
+    {
+      first = 10,
+      orderBy = GQLCOMMENT_SORT.CREATED_AT_DESC,
+      after,
+    }: StoryToCommentsArgs
+  ) =>
+    retrieveCommentStoryConnection(ctx.mongo, ctx.tenant.id, storyID, {
+      first,
+      orderBy,
+      after,
+      filter: {
+        // Filter optionally for comments with a specific tag.
+        "tags.type": tag,
+      },
+    }).then(primeCommentsFromConnection(ctx)),
   forStory: (
     storyID: string,
     // Apply the graph schema defaults at the loader.
@@ -145,6 +184,11 @@ export default (ctx: Context) => ({
       first,
       orderBy,
       after,
+      filter: {
+        // Only get Comments that are top level. If the client wants to load
+        // another layer, they can request another nested connection.
+        parentID: null,
+      },
     }).then(primeCommentsFromConnection(ctx)),
   forParent: (
     storyID: string,
@@ -181,4 +225,7 @@ export default (ctx: Context) => ({
       ctx.now
     )
   ),
+  tagCounts: new DataLoader((storyIDs: string[]) =>
+    retrieveStoryCommentTagCounts(ctx.mongo, ctx.tenant.id, storyIDs)
+  ),
 });
diff --git a/src/core/server/graph/tenant/mutators/Comments.ts b/src/core/server/graph/tenant/mutators/Comments.ts
index 3dd27a0bc..8b0d609b9 100644
--- a/src/core/server/graph/tenant/mutators/Comments.ts
+++ b/src/core/server/graph/tenant/mutators/Comments.ts
@@ -3,16 +3,25 @@ import { ADDITIONAL_DETAILS_MAX_LENGTH } from "coral-common/helpers/validate";
 import { mapFieldsetToErrorCodes } from "coral-server/graph/common/errors";
 import TenantContext from "coral-server/graph/tenant/context";
 import {
+  GQLCOMMENT_STATUS,
   GQLCreateCommentDontAgreeInput,
   GQLCreateCommentFlagInput,
   GQLCreateCommentInput,
   GQLCreateCommentReactionInput,
   GQLCreateCommentReplyInput,
   GQLEditCommentInput,
+  GQLFeatureCommentInput,
   GQLRemoveCommentDontAgreeInput,
   GQLRemoveCommentReactionInput,
+  GQLTAG,
+  GQLUnfeatureCommentInput,
 } from "coral-server/graph/tenant/schema/__generated__/types";
-import { create, edit } from "coral-server/services/comments";
+import {
+  addTag,
+  create,
+  edit,
+  removeTag,
+} from "coral-server/services/comments";
 import {
   createDontAgree,
   createFlag,
@@ -21,7 +30,8 @@ import {
   removeReaction,
 } from "coral-server/services/comments/actions";
 
-import { validateMaximumLength } from "./util";
+import { approve } from "coral-server/services/comments/moderation";
+import { validateMaximumLength, WithoutMutationID } from "./util";
 
 export const Comments = (ctx: TenantContext) => ({
   create: ({
@@ -137,4 +147,27 @@ export const Comments = (ctx: TenantContext) => ({
       },
       ctx.now
     ),
+  feature: ({
+    commentID,
+    commentRevisionID,
+  }: WithoutMutationID<GQLFeatureCommentInput>) =>
+    addTag(
+      ctx.mongo,
+      ctx.tenant,
+      commentID,
+      commentRevisionID,
+      ctx.user!,
+      GQLTAG.FEATURED,
+      ctx.now
+    ).then(comment =>
+      comment.status !== GQLCOMMENT_STATUS.APPROVED
+        ? approve(ctx.mongo, ctx.redis, ctx.tenant, {
+            commentID,
+            commentRevisionID,
+            moderatorID: ctx.user!.id,
+          })
+        : comment
+    ),
+  unfeature: ({ commentID }: WithoutMutationID<GQLUnfeatureCommentInput>) =>
+    removeTag(ctx.mongo, ctx.tenant, commentID, GQLTAG.FEATURED),
 });
diff --git a/src/core/server/graph/tenant/mutators/util.ts b/src/core/server/graph/tenant/mutators/util.ts
index 5d96d38b2..f8966dfa5 100644
--- a/src/core/server/graph/tenant/mutators/util.ts
+++ b/src/core/server/graph/tenant/mutators/util.ts
@@ -1,3 +1,5 @@
+import { Omit } from "coral-common/types";
+
 /**
  * validateMaximumLength will limit the value of an optional string to the
  * specified amount, otherwise will throw an error.
@@ -12,3 +14,8 @@ export function validateMaximumLength(maxLength: number, value?: string) {
 
   return value;
 }
+
+export type WithoutMutationID<T extends { clientMutationId: string }> = Omit<
+  T,
+  "clientMutationId"
+>;
diff --git a/src/core/server/graph/tenant/resolvers/CommentCounts.ts b/src/core/server/graph/tenant/resolvers/CommentCounts.ts
index c41fb4d9c..051f83a91 100644
--- a/src/core/server/graph/tenant/resolvers/CommentCounts.ts
+++ b/src/core/server/graph/tenant/resolvers/CommentCounts.ts
@@ -1,14 +1,15 @@
 import { GQLCommentCountsTypeResolver } from "coral-server/graph/tenant/schema/__generated__/types";
 import { VISIBLE_STATUSES } from "coral-server/models/comment/constants";
-import { CommentStatusCounts } from "coral-server/models/story";
+import { Story } from "coral-server/models/story";
 
-export const CommentCounts: GQLCommentCountsTypeResolver<
-  CommentStatusCounts
-> = {
-  totalVisible: commentCounts =>
+export type CommentCountsInput = Pick<Story, "commentCounts" | "id">;
+
+export const CommentCounts: GQLCommentCountsTypeResolver<CommentCountsInput> = {
+  totalVisible: ({ commentCounts }) =>
     VISIBLE_STATUSES.reduce(
-      (total, status) => total + commentCounts[status],
+      (total, status) => total + commentCounts.status[status],
       0
     ),
-  statuses: commentCounts => commentCounts,
+  statuses: ({ commentCounts }) => commentCounts.status,
+  tags: (s, input, ctx) => ctx.loaders.Comments.tagCounts.load(s.id),
 };
diff --git a/src/core/server/graph/tenant/resolvers/Mutation.ts b/src/core/server/graph/tenant/resolvers/Mutation.ts
index 706b77ba3..2ef9025f1 100644
--- a/src/core/server/graph/tenant/resolvers/Mutation.ts
+++ b/src/core/server/graph/tenant/resolvers/Mutation.ts
@@ -47,6 +47,22 @@ export const Mutation: Required<GQLMutationTypeResolver<void>> = {
     comment: await ctx.mutators.Comments.createFlag(input),
     clientMutationId: input.clientMutationId,
   }),
+  featureComment: async (
+    source,
+    { input: { clientMutationId, ...input } },
+    ctx
+  ) => ({
+    comment: await ctx.mutators.Comments.feature(input),
+    clientMutationId,
+  }),
+  unfeatureComment: async (
+    source,
+    { input: { clientMutationId, ...input } },
+    ctx
+  ) => ({
+    comment: await ctx.mutators.Comments.unfeature(input),
+    clientMutationId,
+  }),
   regenerateSSOKey: async (source, { input }, ctx) => ({
     settings: await ctx.mutators.Settings.regenerateSSOKey(),
     clientMutationId: input.clientMutationId,
diff --git a/src/core/server/graph/tenant/resolvers/Story.ts b/src/core/server/graph/tenant/resolvers/Story.ts
index bd8eef63b..5a1021f1c 100644
--- a/src/core/server/graph/tenant/resolvers/Story.ts
+++ b/src/core/server/graph/tenant/resolvers/Story.ts
@@ -3,12 +3,14 @@ import { defaultsDeep } from "lodash";
 import {
   GQLSTORY_STATUS,
   GQLStoryTypeResolver,
+  GQLTAG,
 } from "coral-server/graph/tenant/schema/__generated__/types";
 import { decodeActionCounts } from "coral-server/models/action/comment";
 import * as story from "coral-server/models/story";
 import { getStoryClosedAt } from "coral-server/services/stories";
 
 import TenantContext from "../context";
+import { CommentCountsInput } from "./CommentCounts";
 import { storyModerationInputResolver } from "./ModerationQueues";
 
 const isStoryClosed = (s: story.Story, ctx: TenantContext) => {
@@ -18,12 +20,14 @@ const isStoryClosed = (s: story.Story, ctx: TenantContext) => {
 
 export const Story: GQLStoryTypeResolver<story.Story> = {
   comments: (s, input, ctx) => ctx.loaders.Comments.forStory(s.id, input),
+  featuredComments: (s, input, ctx) =>
+    ctx.loaders.Comments.taggedForStory(s.id, GQLTAG.FEATURED, input),
   status: (s, input, ctx) =>
     isStoryClosed(s, ctx) ? GQLSTORY_STATUS.CLOSED : GQLSTORY_STATUS.OPEN,
   isClosed: (s, input, ctx) => isStoryClosed(s, ctx),
   closedAt: (s, input, ctx) => getStoryClosedAt(ctx.tenant, s) || null,
   commentActionCounts: s => decodeActionCounts(s.commentCounts.action),
-  commentCounts: s => s.commentCounts.status,
+  commentCounts: (s): CommentCountsInput => s,
   // Merge tenant settings into the story settings so we can easily inherit the
   // options if they exist.
   settings: (s, input, ctx) => defaultsDeep({}, s.settings, ctx.tenant),
diff --git a/src/core/server/graph/tenant/resolvers/Tag.ts b/src/core/server/graph/tenant/resolvers/Tag.ts
index a2b9a10e1..13523901d 100644
--- a/src/core/server/graph/tenant/resolvers/Tag.ts
+++ b/src/core/server/graph/tenant/resolvers/Tag.ts
@@ -1,18 +1,8 @@
 import { GQLTagTypeResolver } from "coral-server/graph/tenant/schema/__generated__/types";
-import {
-  COMMENT_TAG_TYPE_TRANSLATIONS,
-  CommentTag,
-} from "coral-server/models/comment/tag";
-import { translate } from "coral-server/services/i18n";
+import { CommentTag } from "coral-server/models/comment/tag";
 
 export const Tag: GQLTagTypeResolver<CommentTag> = {
-  name: ({ type }, input, ctx) => {
-    // Get the translation bundle.
-    const bundle = ctx.i18n.getBundle(ctx.lang);
-
-    // Return the translated string.
-    return translate(bundle, type, COMMENT_TAG_TYPE_TRANSLATIONS[type]);
-  },
+  code: ({ type }) => type,
   createdBy: ({ createdBy }, input, ctx) => {
     if (createdBy) {
       return ctx.loaders.Users.user.load(createdBy);
diff --git a/src/core/server/graph/tenant/schema/schema.graphql b/src/core/server/graph/tenant/schema/schema.graphql
index cd78a1e7e..e99734fc2 100644
--- a/src/core/server/graph/tenant/schema/schema.graphql
+++ b/src/core/server/graph/tenant/schema/schema.graphql
@@ -1674,14 +1674,27 @@ type CommentRevision {
   createdAt: Time!
 }
 
+enum TAG {
+  """
+  STAFF is used when a Comment is written by a User that has the STAFF, ADMIN,
+  or MODERATOR role.
+  """
+  STAFF
+
+  """
+  FEATURED is used when a Comment is marked as such by a staff member.
+  """
+  FEATURED
+}
+
 """
 Tag is a simple text message that can be displayed to segment tagable entities.
 """
 type Tag {
   """
-  name is the publicly displayable name assigned to this Tag.
+  code is the machine representation of the tag name.
   """
-  name: String!
+  code: TAG!
 
   """
   createdBy is the User that assigned the Tag. This is null when the Tag is
@@ -1695,6 +1708,16 @@ type Tag {
   createdAt: Time! @auth(roles: [MODERATOR, ADMIN])
 }
 
+"""
+CommentTagCounts provides count data for Tags made against Comment's.
+"""
+type CommentTagCounts {
+  """
+  FEATURED is the count of Comment's with the FEATURED tag.
+  """
+  FEATURED: Int!
+}
+
 """
 Comment is a comment left by a User on an Story or another Comment as a reply.
 """
@@ -1930,6 +1953,14 @@ type CommentCounts {
   """
   totalVisible: Int!
 
+  """
+  tags stores the counts of all the Tags against Comment's on this Story.
+  """
+  tags: CommentTagCounts!
+
+  """
+  statuses stores the counts of all the statuses against Comments on this Story.
+  """
   statuses: CommentStatusCounts! @auth(roles: [ADMIN, MODERATOR])
 }
 
@@ -2049,6 +2080,15 @@ type Story {
   """
   scrapedAt: Time
 
+  """
+  featuredComments are the Comments with the FEATURED tag on the Story.
+  """
+  featuredComments(
+    first: Int = 10
+    orderBy: COMMENT_SORT = CREATED_AT_DESC
+    after: Cursor
+  ): CommentsConnection!
+
   """
   comments are the comments on the Story.
   """
@@ -2153,6 +2193,7 @@ type Query {
     after: Cursor
     storyID: ID
     status: COMMENT_STATUS
+    tag: TAG
   ): CommentsConnection! @auth(roles: [ADMIN, MODERATOR])
 
   """
@@ -3602,6 +3643,67 @@ type RejectCommentPayload {
   clientMutationId: String!
 }
 
+##################
+# featureComment
+##################
+
+input FeatureCommentInput {
+  """
+  commentID is the ID of the Comment that should be featured.
+  """
+  commentID: ID!
+
+  """
+  commentRevisionID is the ID of the CommentRevision that should be featured
+  """
+  commentRevisionID: ID!
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+type FeatureCommentPayload {
+  """
+  comment is the Comment that was featured.
+  """
+  comment: Comment
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+##################
+# unfeatureComment
+##################
+
+input UnfeatureCommentInput {
+  """
+  commentID is the ID of the featured Comment that should be unfeatured.
+  """
+  commentID: ID!
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+type UnfeatureCommentPayload {
+  """
+  comment is the Comment that was unfeatured.
+  """
+  comment: Comment
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
 ##################
 # setUsername
 ##################
@@ -4169,6 +4271,18 @@ type Mutation {
   createCommentFlag(input: CreateCommentFlagInput!): CreateCommentFlagPayload!
     @auth
 
+  """
+  featureComment will mark a given Comment as featured.
+  """
+  featureComment(input: FeatureCommentInput!): FeatureCommentPayload!
+    @auth(roles: [ADMIN, MODERATOR])
+
+  """
+  unfeatureComment will remove the featured tag from a Comment that is featured.
+  """
+  unfeatureComment(input: UnfeatureCommentInput!): UnfeatureCommentPayload!
+    @auth(roles: [ADMIN, MODERATOR])
+
   """
   createStory will create the provided Story.
   """
diff --git a/src/core/server/locales/en-US/tags.ftl b/src/core/server/locales/en-US/tags.ftl
deleted file mode 100644
index f1da4eabd..000000000
--- a/src/core/server/locales/en-US/tags.ftl
+++ /dev/null
@@ -1,2 +0,0 @@
-tags-staff = Staff
-tags-featured = Featured
diff --git a/src/core/server/locales/pt-BR/tags.ftl b/src/core/server/locales/pt-BR/tags.ftl
deleted file mode 100644
index f1da4eabd..000000000
--- a/src/core/server/locales/pt-BR/tags.ftl
+++ /dev/null
@@ -1,2 +0,0 @@
-tags-staff = Staff
-tags-featured = Featured
diff --git a/src/core/server/models/comment/helpers.ts b/src/core/server/models/comment/helpers.ts
index 8ae43f86d..ab97f0448 100644
--- a/src/core/server/models/comment/helpers.ts
+++ b/src/core/server/models/comment/helpers.ts
@@ -1,4 +1,4 @@
-import { Comment } from ".";
+import { Comment, Revision } from ".";
 import { VISIBLE_STATUSES } from "./constants";
 
 /**
@@ -21,3 +21,14 @@ export function hasAncestors(
 export function hasVisibleStatus(comment: Pick<Comment, "status">): boolean {
   return VISIBLE_STATUSES.includes(comment.status);
 }
+
+/**
+ * getLatestRevision will get the latest revision from a Comment.
+ *
+ * @param comment the comment that contains the revisions
+ */
+export function getLatestRevision(
+  comment: Pick<Comment, "revisions">
+): Revision {
+  return comment.revisions[comment.revisions.length - 1];
+}
diff --git a/src/core/server/models/comment/index.ts b/src/core/server/models/comment/index.ts
index 9218fbf72..8d7b6b8e0 100644
--- a/src/core/server/models/comment/index.ts
+++ b/src/core/server/models/comment/index.ts
@@ -1,13 +1,18 @@
 import { isEmpty, merge } from "lodash";
 import { Db } from "mongodb";
+import performanceNow from "performance-now";
 import uuid from "uuid";
 
 import { Omit, Sub } from "coral-common/types";
 import { dotize } from "coral-common/utils/dotize";
+import { CommentNotFoundError } from "coral-server/errors";
 import {
   GQLCOMMENT_SORT,
   GQLCOMMENT_STATUS,
+  GQLCommentTagCounts,
+  GQLTAG,
 } from "coral-server/graph/tenant/schema/__generated__/types";
+import logger from "coral-server/logger";
 import {
   EncodedCommentActionCounts,
   mergeCommentActionCounts,
@@ -25,14 +30,16 @@ import {
   createConnectionOrderVariants,
   createIndexFactory,
 } from "coral-server/models/helpers/indexing";
-import Query from "coral-server/models/helpers/query";
+import Query, { FilterQuery } from "coral-server/models/helpers/query";
 import { TenantResource } from "coral-server/models/tenant";
 import { VISIBLE_STATUSES } from "./constants";
 import { hasAncestors } from "./helpers";
 import { CommentTag } from "./tag";
 
-function collection(mongo: Db) {
-  return mongo.collection<Readonly<Comment>>("comments");
+export * from "./helpers";
+
+function collection<T = Comment>(mongo: Db) {
+  return mongo.collection<Readonly<T>>("comments");
 }
 
 /**
@@ -156,6 +163,22 @@ export async function createCommentIndexes(mongo: Db) {
   // UNIQUE { id }
   await createIndex({ tenantID: 1, id: 1 }, { unique: true });
 
+  // Facility for counting the tags against a story.
+  await createIndex(
+    {
+      tenantID: 1,
+      storyID: 1,
+      "tags.type": 1,
+      status: 1,
+    },
+    {
+      background: true,
+      partialFilterExpression: {
+        "tags.type": { $exists: true },
+      },
+    }
+  );
+
   const variants = createConnectionOrderVariants<Readonly<Comment>>([
     { createdAt: -1 },
     { createdAt: 1 },
@@ -608,9 +631,6 @@ export const retrieveCommentStoryConnection = (
     filter: {
       ...input.filter,
       storyID,
-      // Only get Comments that are top level. If the client wants to load another
-      // layer, they can request another nested connection.
-      parentID: null,
     },
   });
 
@@ -873,13 +893,154 @@ export async function mergeManyCommentStories(
   );
 }
 
-/**
- * getLatestRevision will get the latest revision from a Comment.
- *
- * @param comment the comment that contains the revisions
- */
-export function getLatestRevision(
-  comment: Pick<Comment, "revisions">
-): Revision {
-  return comment.revisions[comment.revisions.length - 1];
+export async function addCommentTag(
+  mongo: Db,
+  tenantID: string,
+  commentID: string,
+  tag: CommentTag
+) {
+  const result = await collection(mongo).findOneAndUpdate(
+    {
+      tenantID,
+      id: commentID,
+      tags: {
+        $not: {
+          $eq: {
+            type: tag.type,
+          },
+        },
+      },
+    },
+    {
+      $push: {
+        tags: tag,
+      },
+    },
+    {
+      // False to return the updated document instead of the original
+      // document.
+      returnOriginal: false,
+    }
+  );
+  if (!result.value) {
+    const comment = await retrieveComment(mongo, tenantID, commentID);
+    if (!comment) {
+      throw new CommentNotFoundError(commentID);
+    }
+
+    if (comment.tags.some(({ type }) => type === tag.type)) {
+      return comment;
+    }
+
+    throw new Error("could not add a tag for an unexpected reason");
+  }
+
+  return result.value;
+}
+
+export async function removeCommentTag(
+  mongo: Db,
+  tenantID: string,
+  commentID: string,
+  tagType: GQLTAG
+) {
+  const result = await collection(mongo).findOneAndUpdate(
+    {
+      tenantID,
+      id: commentID,
+    },
+    {
+      $pull: {
+        tags: { type: tagType },
+      },
+    },
+    {
+      // False to return the updated document instead of the original
+      // document.
+      returnOriginal: false,
+    }
+  );
+  if (!result.value) {
+    const comment = await retrieveComment(mongo, tenantID, commentID);
+    if (!comment) {
+      throw new CommentNotFoundError(commentID);
+    }
+
+    throw new Error("could not add a tag for an unexpected reason");
+  }
+
+  return result.value;
+}
+
+export async function retrieveStoryCommentTagCounts(
+  mongo: Db,
+  tenantID: string,
+  storyIDs: string[]
+): Promise<GQLCommentTagCounts[]> {
+  // Build up the $match query.
+  const $match: FilterQuery<Comment> = {
+    tenantID,
+    // We're filtering only for featured comments for now because that's all
+    // that is returned by the tag counts at the moment. If we ever extend this
+    // we should switch this out to something like
+    // `"tags.type": { $exists: true }` to ensure that we are using the
+    // specified index.
+    "tags.type": GQLTAG.FEATURED,
+    // Only show visible comment's tag counts.
+    status: { $in: VISIBLE_STATUSES },
+  };
+  if (storyIDs.length > 1) {
+    $match.storyID = { $in: storyIDs };
+  } else {
+    $match.storyID = storyIDs[0];
+  }
+
+  // Get the start time.
+  const startTime = performanceNow();
+
+  // Load the counts from the database for this particular tag query.
+  const cursor = await collection<{
+    _id: { tag: GQLTAG; storyID: string };
+    total: number;
+  }>(mongo).aggregate([
+    { $match },
+    { $unwind: "$tags" },
+    {
+      $group: {
+        _id: { tag: "$tags.type", storyID: "$storyID" },
+        total: { $sum: 1 },
+      },
+    },
+  ]);
+
+  // Get all of the counts.
+  const tags = await cursor.toArray();
+
+  // Compute the end time.
+  const responseTime = Math.round(performanceNow() - startTime);
+
+  // Logging at the info level here to ensure we track any degrading performance
+  // issues from this query.
+  logger.info({ responseTime, filter: $match }, "counting tags");
+
+  // For each of the storyIDs...
+  return storyIDs.map(storyID => {
+    // Get the tags associated with this storyID.
+    const tagCounts = tags.filter(({ _id }) => _id.storyID === storyID) || [];
+
+    // Then remap these tags to strip the storyID as the returned order already
+    // preserves the storyID information.
+    return tagCounts.reduce(
+      (counts, { _id: { tag: code }, total }) => ({
+        ...counts,
+        [code]: total,
+      }),
+      // Keep this collection of empty tag counts up to date to ensure we
+      // provide an accurate model. The type system should warn you if there is
+      // missing/extra tags here.
+      {
+        [GQLTAG.FEATURED]: 0,
+      }
+    );
+  });
 }
diff --git a/src/core/server/models/comment/tag.ts b/src/core/server/models/comment/tag.ts
index 7d682ddb8..15ee7e6fa 100644
--- a/src/core/server/models/comment/tag.ts
+++ b/src/core/server/models/comment/tag.ts
@@ -1,35 +1,15 @@
-/**
- * COMMENT_TAG_TYPE is the type of tag that can be added to a Comment.
- */
-export enum COMMENT_TAG_TYPE {
-  /**
-   * STAFF is used for comments written by staff members.
-   */
-  STAFF = "STAFF",
-
-  /**
-   * FEATURED is used when a given comment has been featured.
-   */
-  FEATURED = "FEATURED",
-}
-
-/**
- * COMMENT_TAG_TYPE_TRANSLATIONS is the set of translation keys associated with
- * a given
- */
-export const COMMENT_TAG_TYPE_TRANSLATIONS: Record<COMMENT_TAG_TYPE, string> = {
-  STAFF: "tags-staff",
-  FEATURED: "tags-featured",
-};
+import { GQLTAG } from "coral-server/graph/tenant/schema/__generated__/types";
 
 /**
  * CommentTag is used to represent a given Tag added to a Comment.
  */
 export interface CommentTag {
+  // TODO: (wyattjoh) rename `type` to `code`
+
   /**
    * type represents a specific tag that can be added to a Comment.
    */
-  type: COMMENT_TAG_TYPE;
+  type: GQLTAG;
 
   /**
    * createdBy is the ID of the user that created the Tag. If this tag was
diff --git a/src/core/server/models/user/index.ts b/src/core/server/models/user/index.ts
index d79eec768..0622f9b1e 100644
--- a/src/core/server/models/user/index.ts
+++ b/src/core/server/models/user/index.ts
@@ -300,6 +300,7 @@ export async function createUserIndexes(mongo: Db) {
   // UNIQUE { profiles.type, profiles.id }
   await createIndex(
     { tenantID: 1, "profiles.type": 1, "profiles.id": 1 },
+    // TODO: (wyattjoh) change the `partialFilterExpression` to `{ "profiles.id": { $exists: true } }`
     { unique: true, partialFilterExpression: { profiles: { $exists: true } } }
   );
 
diff --git a/src/core/server/services/comments/index.ts b/src/core/server/services/comments/index.ts
index c3cf1dead..d6e7fd580 100644
--- a/src/core/server/services/comments/index.ts
+++ b/src/core/server/services/comments/index.ts
@@ -8,12 +8,14 @@ import {
   filterDuplicateActions,
 } from "coral-server/models/action/comment";
 import {
+  addCommentTag,
   createComment,
   CreateCommentInput,
   editComment,
   EditCommentInput,
   getLatestRevision,
   pushChildCommentIDOntoParent,
+  removeCommentTag,
   retrieveComment,
   validateEditable,
 } from "coral-server/models/comment";
@@ -32,6 +34,7 @@ import {
   CoralError,
   StoryNotFoundError,
 } from "coral-server/errors";
+import { GQLTAG } from "coral-server/graph/tenant/schema/__generated__/types";
 import {
   hasAncestors,
   hasVisibleStatus,
@@ -415,3 +418,54 @@ export function getCommentEditableUntilDate(
       .toJSDate()
   );
 }
+
+export async function addTag(
+  mongo: Db,
+  tenant: Tenant,
+  commentID: string,
+  commentRevisionID: string,
+  user: User,
+  tagType: GQLTAG,
+  now = new Date()
+) {
+  const comment = await retrieveComment(mongo, tenant.id, commentID);
+  if (!comment) {
+    throw new CommentNotFoundError(commentID);
+  }
+
+  // Check to see if the selected comment revision is the latest one.
+  const revision = getLatestRevision(comment);
+  if (revision.id !== commentRevisionID) {
+    throw new Error("revision id does not match latest revision");
+  }
+
+  // Check to see if this tag is already on this comment.
+  if (comment.tags.some(({ type }) => type === tagType)) {
+    return comment;
+  }
+
+  return addCommentTag(mongo, tenant.id, commentID, {
+    type: tagType,
+    createdBy: user.id,
+    createdAt: now,
+  });
+}
+
+export async function removeTag(
+  mongo: Db,
+  tenant: Tenant,
+  commentID: string,
+  tagType: GQLTAG
+) {
+  const comment = await retrieveComment(mongo, tenant.id, commentID);
+  if (!comment) {
+    throw new CommentNotFoundError(commentID);
+  }
+
+  // Check to see if this tag is even on this comment.
+  if (comment.tags.every(({ type }) => type !== tagType)) {
+    return comment;
+  }
+
+  return removeCommentTag(mongo, tenant.id, commentID, tagType);
+}
diff --git a/src/core/server/services/comments/pipeline/phases/staff.ts b/src/core/server/services/comments/pipeline/phases/staff.ts
index af284e11e..cef1a4efd 100755
--- a/src/core/server/services/comments/pipeline/phases/staff.ts
+++ b/src/core/server/services/comments/pipeline/phases/staff.ts
@@ -1,8 +1,8 @@
 import {
   GQLCOMMENT_STATUS,
+  GQLTAG,
   GQLUSER_ROLE,
 } from "coral-server/graph/tenant/schema/__generated__/types";
-import { COMMENT_TAG_TYPE } from "coral-server/models/comment/tag";
 import {
   IntermediateModerationPhase,
   IntermediatePhaseResult,
@@ -18,7 +18,7 @@ export const staff: IntermediateModerationPhase = ({
       status: GQLCOMMENT_STATUS.APPROVED,
       tags: [
         {
-          type: COMMENT_TAG_TYPE.STAFF,
+          type: GQLTAG.STAFF,
           createdAt: now,
         },
       ],
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 771127327..ff3c94d2b 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -12,16 +12,21 @@ general-userBoxAuthenticated-signedInAs =
 general-userBoxAuthenticated-notYou =
   Not you? <button>Sign Out</button>
 
-general-tabBar-commentsTab = { $commentCount ->
-        [-1] Comments
-        [1] { SHORT_NUMBER($commentCount) } Comment
-        *[other] { SHORT_NUMBER($commentCount) } Comments
-    }
+general-tabBar-commentsTab = Comments
 general-tabBar-myProfileTab = My Profile
 general-tabBar-configure = Configure
 
 ## Comments Tab
 
+comments-allCommentsTab = All Comments
+comments-featuredTab = Featured
+comments-featuredCommentTooltip-how = How is a comment featured?
+comments-featuredCommentTooltip-handSelectedComments =
+  Comments are hand selected by our team as worth reading.
+comments-featuredCommentTooltip-toggleButton =
+  .aria-label = Toggle featured comments tooltip
+
+
 comments-streamQuery-storyNotFound = Story not found
 
 comments-postCommentForm-submit = Submit
@@ -108,6 +113,8 @@ comments-userIgnorePopover-cancel = Cancel
 
 comments-moderationDropdown-popover =
   .description = A popover menu to moderate the comment
+comments-moderationDropdown-feature = Feature
+comments-moderationDropdown-unfeature = Un-Feature
 comments-moderationDropdown-approve = Approve
 comments-moderationDropdown-approved = Approved
 comments-moderationDropdown-reject = Reject
@@ -119,8 +126,18 @@ comments-moderationDropdown-caretButton =
 comments-rejectedTombstone =
   You have rejected this comment. <TextLink>Go to Moderate to review this decision.</TextLink>
 
+comments-featuredTag = Featured
+comments-staffTag = Staff
+
+### Featured Comments
+comments-featured-gotoConversation = Go to Conversation
+comments-featured-replies = Replies
+
 ## Profile Tab
 
+profile-myCommentsTab = My Comments
+profile-settingsTab = Settings
+
 ### Comment History
 profile-historyComment-viewConversation = View Conversation
 profile-historyComment-replies = Replies {$replyCount}
diff --git a/src/locales/pt-BR/stream.ftl b/src/locales/pt-BR/stream.ftl
index 8962a734e..08124c17d 100644
--- a/src/locales/pt-BR/stream.ftl
+++ b/src/locales/pt-BR/stream.ftl
@@ -12,10 +12,7 @@ general-userBoxAuthenticated-signedInAs =
 general-userBoxAuthenticated-notYou =
   Não é você? <button>Sair</button>
 
-general-tabBar-commentsTab = { $commentCount ->
-        [-1] Comentário
-        [1] { SHORT_NUMBER($commentCount) } Comentário
-        *[other] { SHORT_NUMBER($commentCount) } Comentários
+general-tabBar-commentsTab = Comentários
     }
 general-tabBar-myProfileTab = Meu Perfil
 general-tabBar-configure = Configurações