diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
index 2e6694137..9ce1f79c5 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
@@ -2,28 +2,20 @@
 
 exports[`renders correctly on big screens 1`] = `
 <div
-  className="Flex-root TopBar-root"
+  className="Flex-root TopBar-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
 >
-  <div
-    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders correctly on small screens 1`] = `
 <div
-  className="Flex-root TopBar-root"
+  className="Flex-root TopBar-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
 >
-  <div
-    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
diff --git a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
index 3ff2461f0..8e8929149 100644
--- a/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
@@ -2,10 +2,8 @@
 
 exports[`renders correctly 1`] = `
 <Indent>
-  <withPropsOnChange(Flex)
-    direction="column"
+  <withPropsOnChange(HorizontalGutter)
     id="talk-comments-replyList-log--comment-id"
-    itemGutter={true}
     role="log"
   >
     <Relay(CommentContainer)
@@ -24,16 +22,14 @@ exports[`renders correctly 1`] = `
       }
       key="comment-2"
     />
-  </withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
 </Indent>
 `;
 
 exports[`when there is more disables load more button 1`] = `
 <Indent>
-  <withPropsOnChange(Flex)
-    direction="column"
+  <withPropsOnChange(HorizontalGutter)
     id="talk-comments-replyList-log--comment-id"
-    itemGutter={true}
     role="log"
   >
     <Relay(CommentContainer)
@@ -66,16 +62,14 @@ exports[`when there is more disables load more button 1`] = `
         Show All Replies
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
 </Indent>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
 <Indent>
-  <withPropsOnChange(Flex)
-    direction="column"
+  <withPropsOnChange(HorizontalGutter)
     id="talk-comments-replyList-log--comment-id"
-    itemGutter={true}
     role="log"
   >
     <Relay(CommentContainer)
@@ -108,6 +102,6 @@ exports[`when there is more renders a load more button 1`] = `
         Show All Replies
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
 </Indent>
 `;
diff --git a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
index 01026fb09..c7b0d358f 100644
--- a/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
@@ -1,26 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<withPropsOnChange(Flex)
+<withPropsOnChange(HorizontalGutter)
   className="Stream-root"
-  direction="column"
-  itemGutter={true}
+  size="double"
 >
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
-  <withContext(createMutationContainer(PostCommentFormContainer))
-    assetID="asset-id"
-    signedIn={false}
-  />
-  <withPropsOnChange(Flex)
+  <withPropsOnChange(HorizontalGutter)
+    size="half"
+  >
+    <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer))))))))) />
+    <PostCommentFormFake />
+  </withPropsOnChange(HorizontalGutter)>
+  <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
-    direction="column"
     id="talk-comments-stream-log"
-    itemGutter={true}
     role="log"
   >
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -37,10 +33,8 @@ exports[`renders correctly 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    </withPropsOnChange(HorizontalGutter)>
+    <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -57,32 +51,28 @@ exports[`renders correctly 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-  </withPropsOnChange(Flex)>
-</withPropsOnChange(Flex)>
+    </withPropsOnChange(HorizontalGutter)>
+  </withPropsOnChange(HorizontalGutter)>
+</withPropsOnChange(HorizontalGutter)>
 `;
 
 exports[`when there is more disables load more button 1`] = `
-<withPropsOnChange(Flex)
+<withPropsOnChange(HorizontalGutter)
   className="Stream-root"
-  direction="column"
-  itemGutter={true}
+  size="double"
 >
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
-  <withContext(createMutationContainer(PostCommentFormContainer))
-    assetID="asset-id"
-    signedIn={false}
-  />
-  <withPropsOnChange(Flex)
+  <withPropsOnChange(HorizontalGutter)
+    size="half"
+  >
+    <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer))))))))) />
+    <PostCommentFormFake />
+  </withPropsOnChange(HorizontalGutter)>
+  <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
-    direction="column"
     id="talk-comments-stream-log"
-    itemGutter={true}
     role="log"
   >
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -99,10 +89,8 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    </withPropsOnChange(HorizontalGutter)>
+    <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -119,7 +107,7 @@ exports[`when there is more disables load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
+    </withPropsOnChange(HorizontalGutter)>
     <Localized
       id="comments-stream-loadMore"
     >
@@ -134,31 +122,27 @@ exports[`when there is more disables load more button 1`] = `
         Load More
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
-</withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
+</withPropsOnChange(HorizontalGutter)>
 `;
 
 exports[`when there is more renders a load more button 1`] = `
-<withPropsOnChange(Flex)
+<withPropsOnChange(HorizontalGutter)
   className="Stream-root"
-  direction="column"
-  itemGutter={true}
+  size="double"
 >
-  <withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(UserBoxContainer)))))) />
-  <withContext(createMutationContainer(PostCommentFormContainer))
-    assetID="asset-id"
-    signedIn={false}
-  />
-  <withPropsOnChange(Flex)
+  <withPropsOnChange(HorizontalGutter)
+    size="half"
+  >
+    <withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer))))))))) />
+    <PostCommentFormFake />
+  </withPropsOnChange(HorizontalGutter)>
+  <withPropsOnChange(HorizontalGutter)
     aria-live="polite"
-    direction="column"
     id="talk-comments-stream-log"
-    itemGutter={true}
     role="log"
   >
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
       <Relay(CommentContainer)
@@ -175,10 +159,8 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
-    <withPropsOnChange(Flex)
-      direction="column"
-      itemGutter={true}
+    </withPropsOnChange(HorizontalGutter)>
+    <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
       <Relay(CommentContainer)
@@ -195,7 +177,7 @@ exports[`when there is more renders a load more button 1`] = `
           }
         }
       />
-    </withPropsOnChange(Flex)>
+    </withPropsOnChange(HorizontalGutter)>
     <Localized
       id="comments-stream-loadMore"
     >
@@ -210,6 +192,6 @@ exports[`when there is more renders a load more button 1`] = `
         Load More
       </withPropsOnChange(Button)>
     </Localized>
-  </withPropsOnChange(Flex)>
-</withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
+</withPropsOnChange(HorizontalGutter)>
 `;
diff --git a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
index 2021b7c31..492657d72 100644
--- a/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+++ b/src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <withPropsOnChange(Flex)
+  alignItems="center"
   itemGutter={true}
 >
   <MatchMediaWithContext
@@ -12,14 +13,14 @@ exports[`renders correctly 1`] = `
     >
       <withPropsOnChange(Typography)
         className="UserBoxUnauthenticated-joinText"
-        component="span"
+        container="span"
         variant="bodyCopyBold"
       >
         Join the conversation
       </withPropsOnChange(Typography)>
     </Localized>
     <withPropsOnChange(Typography)
-      component="span"
+      container="span"
       variant="bodyCopyBold"
     >
       |
diff --git a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
index 80834ae74..3c650a5af 100644
--- a/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=720,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
     focus={false}
     href="/auth.html?view=SIGN_IN"
     onBlur={[Function]}
diff --git a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
index c8dda11c7..b95cc19ce 100644
--- a/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
+++ b/src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
@@ -13,6 +13,7 @@ exports[`init local state 1`] = `
     \\"__id\\": \\"client:root.local\\",
     \\"__typename\\": \\"Local\\",
     \\"authToken\\": \\"\\",
+    \\"authRevision\\": 0,
     \\"network\\": {
       \\"__ref\\": \\"client:root.local.network\\"
     },
diff --git a/src/core/client/ui/components/Flex/Flex.spec.tsx b/src/core/client/ui/components/Flex/Flex.spec.tsx
index 5c68f0de0..eaa7cf0b6 100644
--- a/src/core/client/ui/components/Flex/Flex.spec.tsx
+++ b/src/core/client/ui/components/Flex/Flex.spec.tsx
@@ -55,7 +55,7 @@ it("renders with item gutter", () => {
   expect(renderer.toJSON()).toMatchSnapshot();
 });
 
-it("renders with halfe item gutter", () => {
+it("renders with half item gutter", () => {
   const props: PropTypesOf<typeof Flex> = {
     itemGutter: "half",
   };
diff --git a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
index d96f60ebd..b4b24209e 100644
--- a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
+++ b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
@@ -2,70 +2,60 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionRow"
 >
-  <div
-    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders with half item gutter 1`] = `
+<div
+  className="Flex-root Flex-flex Flex-halfItemGutter"
+>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders with halfe item gutter 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-halfItemGutter"
 >
-  <div
-    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders with item gutter 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-itemGutter"
 >
-  <div
-    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders with wrap 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-wrap"
 >
-  <div
-    className="Flex-flex Flex-wrap Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
 
 exports[`renders with wrap reverse 1`] = `
 <div
-  className="Flex-root"
+  className="Flex-root Flex-flex Flex-wrapReverse"
 >
-  <div
-    className="Flex-flex Flex-wrapReverse Flex-alignCenter"
-  >
-    <div>
-      Hello World
-    </div>
+  <div>
+    Hello World
   </div>
 </div>
 `;
diff --git a/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap b/src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap
index ddbd6c222..874adc015 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="FormField-root FormField-itemGutter"
+  className="HorizontalGutter-root FormField-root HorizontalGutter-half"
 >
   Form Components should go here
 </div>
@@ -10,7 +10,7 @@ exports[`renders correctly 1`] = `
 
 exports[`works with multiple form components 1`] = `
 <div
-  className="FormField-root FormField-itemGutter"
+  className="HorizontalGutter-root FormField-root HorizontalGutter-half"
 >
   <label
     className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"