diff --git a/src/core/client/ui/components/FormField/FormField.mdx b/src/core/client/ui/components/FormField/FormField.mdx
index 3dc055085..cfd503953 100644
--- a/src/core/client/ui/components/FormField/FormField.mdx
+++ b/src/core/client/ui/components/FormField/FormField.mdx
@@ -5,32 +5,18 @@ menu: UI Kit
 
 import { Playground, PropsTable } from 'docz'
 import FormField from './FormField'
-import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
 
-# Flex
+# FormField
 
-`FormField` is to be used with Form Components `flexbox`.
+`FormField` is to be used with Form Components: `InputLabel`, `InputDescription`, `TextField`, `ValidationMessage`, etc.
+FormField manages the gutters between inner elements. It's a form field wrapper of the `Flex` Component.
 
 ## Justify content
 <Playground>
-  <FormField>
-  </FormField>
-</Playground>
-
-## Align items
-<Playground>
-  <Flex alignItems="center" itemGutter>
-    <Button variant="filled">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>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled">Push Me</Button>
-    <Button variant="filled">Push Me</Button>
-  </Flex>
+    <FormField>
+      <InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
+      <TextField/>
+      <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
+    </FormField>
 </Playground>
diff --git a/src/core/client/ui/components/InputDescription/InputDescription.mdx b/src/core/client/ui/components/InputDescription/InputDescription.mdx
index c27a460be..7a68cc49f 100644
--- a/src/core/client/ui/components/InputDescription/InputDescription.mdx
+++ b/src/core/client/ui/components/InputDescription/InputDescription.mdx
@@ -4,7 +4,7 @@ menu: UI Kit
 ---
 
 import { Playground, PropsTable } from 'docz'
-import { InputDescription } from '../core/client/ui/components'
+import InputDescription from './InputDescription'
 
 # Flex
 
@@ -12,7 +12,5 @@ import { InputDescription } from '../core/client/ui/components'
 
 ## Align items
 <Playground>
-  <Flex alignItems="center" itemGutter>
-    <InputDescription>This is a description</Button>
-  </Flex>
+  <InputDescription>This is a description</InputDescription>
 </Playground>
diff --git a/src/core/client/ui/components/Spinner/Spinner.css b/src/core/client/ui/components/Spinner/Spinner.css
new file mode 100644
index 000000000..5dd6c6acf
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/Spinner.css
@@ -0,0 +1,68 @@
+.root {
+  display: block;
+  text-align: center;
+}
+
+.spinner {
+  animation: rotator 1.4s linear infinite;
+}
+
+@keyframes rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+.path {
+  stroke: var(--palette-primary-main);
+  stroke-dasharray: 187;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
+}
+
+@keyframes colors {
+  0% {
+    stroke: var(--palette-primary-main);
+  }
+  100% {
+    stroke: var(--palette-primary-light);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 187;
+  }
+  50% {
+    stroke-dashoffset: 46.75;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: 187;
+    transform: rotate(450deg);
+  }
+}
+
+@keyframes fullRotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Hack for IE and Edge as they don't support css animations on SVG elements. */
+_:-ms-lang(x),
+.path {
+  stroke-dasharray: 160;
+}
+
+_:-ms-lang(x),
+.spinner {
+  animation: fullRotator 1.4s linear infinite;
+}
diff --git a/src/core/client/ui/components/Spinner/Spinner.mdx b/src/core/client/ui/components/Spinner/Spinner.mdx
new file mode 100644
index 000000000..66ef80309
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/Spinner.mdx
@@ -0,0 +1,15 @@
+---
+name: Spinner
+menu: UI Kit
+---
+
+import { Playground } from "docz"
+import Spinner from "./Spinner"
+
+# Spinner
+
+## Basic usage
+
+<Playground>
+  <Spinner />
+</Playground>
diff --git a/src/core/client/ui/components/Spinner/Spinner.tsx b/src/core/client/ui/components/Spinner/Spinner.tsx
new file mode 100644
index 000000000..2edb5e029
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/Spinner.tsx
@@ -0,0 +1,46 @@
+import cn from "classnames";
+import React, { StatelessComponent } from "react";
+import { withStyles } from "talk-ui/hocs";
+import * as styles from "./Spinner.css";
+
+export interface SpinnerProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+}
+
+const Spinner: StatelessComponent<SpinnerProps> = props => {
+  const { className, classes } = props;
+
+  const rootClassName = cn(classes.root, className);
+
+  return (
+    <div className={rootClassName}>
+      <svg
+        className={styles.spinner}
+        width="40px"
+        height="40px"
+        viewBox="0 0 66 66"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          className={styles.path}
+          fill="none"
+          strokeWidth="6"
+          strokeLinecap="round"
+          cx="33"
+          cy="33"
+          r="30"
+        />
+      </svg>
+    </div>
+  );
+};
+
+const enhanced = withStyles(styles)(Spinner);
+export default enhanced;
diff --git a/src/core/client/ui/components/Spinner/index.ts b/src/core/client/ui/components/Spinner/index.ts
new file mode 100644
index 000000000..66d1096a0
--- /dev/null
+++ b/src/core/client/ui/components/Spinner/index.ts
@@ -0,0 +1 @@
+export { default } from "./Spinner";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 76efab87c..52ebe6a79 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -16,3 +16,4 @@ export { default as ClickOutside } from "./ClickOutside";
 export { default as Popup } from "./Popup";
 export { default as FormField } from "./FormField";
 export { default as InputDescription } from "./InputDescription";
+export { default as Spinner } from "./Spinner";
diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx
index b114cf7e1..547d33701 100644
--- a/src/docs/forms.mdx
+++ b/src/docs/forms.mdx
@@ -10,13 +10,13 @@ Let's build some forms! We will use the following compoenents `InputLabel`, `Typ
 ### Examples
 
 import { Playground, PropsTable } from 'docz'
-import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+import { InputLabel, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'
 
 # InputLabel
 
 ## Simple Form
 <Playground>
-  <Flex>
+  <Flex itemGutter direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
 
     <FormField>
@@ -26,14 +26,13 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
 
     <FormField>
       <InputLabel>Username</InputLabel>
-      <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
       <TextField/>
     </FormField>
 
-
     <FormField>
       <InputLabel>Password</InputLabel>
-      <Typography>Must be at least 8 characters</Typography>
+      <InputDescription>Must be at least 8 characters</InputDescription>
       <TextField/>
     </FormField>
 
@@ -42,14 +41,14 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
       <TextField/>
     </FormField>
 
-    <Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
+    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
   </Flex>
 </Playground>
 
 ## Simple Form with error
 
 <Playground>
-  <Flex>
+  <Flex itemGutter direction="column">
     <Typography variant="heading1">Sign up to join the conversation</Typography>
 
     <FormField>
@@ -59,7 +58,7 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
 
     <FormField>
       <InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
-      <Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
+      <InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
       <TextField/>
       <ValidationMessage>Invalid characters. Try again.</ValidationMessage>
     </FormField>
@@ -67,7 +66,7 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
 
     <FormField>
       <InputLabel>Password</InputLabel>
-      <Typography>Must be at least 8 characters</Typography>
+      <InputDescription>Must be at least 8 characters</InputDescription>
       <TextField/>
     </FormField>
 
@@ -76,6 +75,6 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
       <TextField/>
     </FormField>
 
-    <Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
+    <Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
   </Flex>
 </Playground>