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 02f3c7726..9253404bd 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,7 +2,7 @@
 
 exports[`renders correctly on big screens 1`] = `
 <div
-  className="Flex-root TopBar-root Flex-itemGutter Flex-alignCenter Flex-directionRow"
+  className="Flex-root TopBar-root Flex-itemGutter Flex-alignBaseline Flex-directionRow"
 >
   <div>
     Hello World
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 065e376b5..688e88d38 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -43,12 +43,12 @@ exports[`loads more comments 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       >
         <div
           role="article"
@@ -77,7 +77,7 @@ exports[`loads more comments 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       >
         <div
           role="article"
@@ -106,7 +106,7 @@ exports[`loads more comments 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       >
         <div
           role="article"
@@ -182,12 +182,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       >
         <div
           role="article"
@@ -216,7 +216,7 @@ exports[`renders comment stream 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       >
         <div
           role="article"
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 290be7545..2088396f4 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -43,12 +43,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       >
         <div
           role="article"
@@ -77,7 +77,7 @@ exports[`renders comment stream 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       >
         <div
           role="article"
@@ -108,7 +108,7 @@ exports[`renders comment stream 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
             id="talk-comments-replyList-log--comment-with-replies"
             role="log"
           >
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index 0290e7f21..89e42ee20 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -43,12 +43,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       >
         <div
           role="article"
@@ -77,7 +77,7 @@ exports[`renders comment stream 1`] = `
         </div>
       </div>
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       >
         <div
           role="article"
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 3fcf31abb..15220f28c 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -43,12 +43,12 @@ exports[`renders comment stream 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       >
         <div
           role="article"
@@ -79,7 +79,7 @@ exports[`renders comment stream 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
             id="talk-comments-replyList-log--comment-0"
             role="log"
           >
@@ -174,12 +174,12 @@ exports[`show all replies 1`] = `
     </form>
     <div
       aria-live="polite"
-      className="Flex-root Flex-itemGutter Flex-directionColumn"
+      className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       id="talk-comments-stream-log"
       role="log"
     >
       <div
-        className="Flex-root Flex-itemGutter Flex-directionColumn"
+        className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
       >
         <div
           role="article"
@@ -210,7 +210,7 @@ exports[`show all replies 1`] = `
           className="Indent-root Indent-level0"
         >
           <div
-            className="Flex-root Flex-itemGutter Flex-directionColumn"
+            className="Flex-root Flex-itemGutter Flex-alignFlexStart Flex-directionColumn"
             id="talk-comments-replyList-log--comment-0"
             role="log"
           >
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index 240e13f9e..4a5abbc08 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -47,8 +47,9 @@ const Flex: StatelessComponent<InnerProps> = props => {
   } = props;
 
   let alignItemsWithDefault = alignItems;
-  if (!direction || !direction.startsWith("column")) {
-    alignItemsWithDefault = "center";
+  if (!alignItems) {
+    alignItemsWithDefault =
+      direction && direction.startsWith("column") ? "flex-start" : "center";
   }
 
   const classObject: Record<string, boolean> = {
diff --git a/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx b/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx
index d81075019..bdeb29df6 100644
--- a/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx
+++ b/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx
@@ -9,7 +9,7 @@ it("renders correctly", () => {
       {({ toggleShow, show }) => (
         <div>
           {show && <div>SHOW ME</div>}
-          <button onClick={toggleShow}>Click me and I disapear</button>
+          <button onClick={toggleShow}>Click me and I disappear</button>
         </div>
       )}
     </ToggleShow>
diff --git a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
index 4fc58d41e..05ab31e56 100644
--- a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
+++ b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
@@ -5,18 +5,22 @@ menu: UI Kit
 
 import { Playground } from 'docz'
 import ToggleShow from './ToggleShow'
+import Button from '../Button'
+import Flex from '../Flex'
 
 # ToggleShow
-A Component that provides a render function to display nodes
+A render props component to manage visible state.
 
 ## Basic usage
 <Playground>
   <ToggleShow>
     {({ toggleShow, show }) => (
-      <div>
-        {show && <div>SHOW ME</div>}
-        <button onClick={toggleShow}>ClickMe and I disapear</button>
-      </div>
+      <Flex itemGutter direction="column">
+        {show && <div>Hello World!</div>}
+        <Button onClick={toggleShow} variant="filled" color="primary">
+          Toggle Show
+        </Button>
+      </Flex>
     )}
   </ToggleShow>
 </Playground>
diff --git a/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap b/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap
index 323274282..b4754816e 100644
--- a/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap
+++ b/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap
@@ -8,7 +8,7 @@ exports[`renders correctly 1`] = `
   <button
     onClick={[Function]}
   >
-    Click me and I disapear
+    Click me and I disappear
   </button>
 </div>
 `;