diff --git a/website/contents/properties/layout-direction.md b/website/contents/properties/layout-direction.md
index e9d6f8e9..e53a8e68 100644
--- a/website/contents/properties/layout-direction.md
+++ b/website/contents/properties/layout-direction.md
@@ -1,7 +1,7 @@
 ---
 path: "docs/layout-direction"
 title: "Layout Direction"
-hasPlayground: true
+hasPlayground: false
 ---
 
 ## Layout Direction
@@ -17,7 +17,7 @@ to the `CalculateLayout` call or by setting the direction on the root node.
 **LTR (DEFAULT)** Text and children and laid our from left to right. Margin and
 padding applied the start of an element are applied on the left side.
 
-**RTL (DEFAULT)** Text and children and laid our from right to left. Margin and
+**RTL** Text and children and laid our from right to left. Margin and
 padding applied the start of an element are applied on the right side.
 
 <controls prop="layoutDirection"></controls>
diff --git a/website/contents/properties/min-max.md b/website/contents/properties/min-max.md
index b5d39084..b439d168 100644
--- a/website/contents/properties/min-max.md
+++ b/website/contents/properties/min-max.md
@@ -9,7 +9,7 @@ hasPlayground: true
 All the following properties set the maximum and minimum size constraints of an element.
 These properties have higher priority than all other properties and will always be respected.
 Constraints can be specified as either absolute pixel values or as percentages of their
-parent's size. By default all these constraints are undefined.
+parent's size. By default all these constraints are `undefined`.
 
 ### Max Width
 
diff --git a/website/src/components/Playground/CodeGenerators.js b/website/src/components/Playground/CodeGenerators.js
index 46e127cb..24e0b687 100644
--- a/website/src/components/Playground/CodeGenerators.js
+++ b/website/src/components/Playground/CodeGenerators.js
@@ -138,7 +138,7 @@ export default class CodeGenerators extends Component<Props, State> {
           </div>
         )}
       </Modal>,
-      <Dropdown overlay={menu} key="dropdown">
+      <Dropdown overlay={menu} key="dropdown" trigger="click">
         <Button>
           Get Code <Icon type="down" />
         </Button>
diff --git a/website/src/components/Playground/Editor.css b/website/src/components/Playground/Editor.css
index 5b54be30..4e8aafa5 100644
--- a/website/src/components/Playground/Editor.css
+++ b/website/src/components/Playground/Editor.css
@@ -23,9 +23,12 @@
 }
 
 .Editor h2 {
-  font-size: 16px;
   margin-bottom: 8px;
-  margin-top: 30px;
+  margin-top: 20px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #444950;
+  text-transform: uppercase;
 }
 
 .Editor h2:first-child {
diff --git a/website/src/components/Playground/Editor.js b/website/src/components/Playground/Editor.js
index e7c1a970..72c38aa3 100644
--- a/website/src/components/Playground/Editor.js
+++ b/website/src/components/Playground/Editor.js
@@ -68,7 +68,7 @@ export default class Editor extends Component<Props> {
               onChange={this.props.onChangeSetting}
             />
             <h2>
-              Flex direction
+              Flex Direction
               <InfoText doclink="/docs/flex-direction">
                 Defines the direction of the main-axis
               </InfoText>
@@ -130,7 +130,7 @@ export default class Editor extends Component<Props> {
             </Row>
 
             <h2>
-              Flex wrap
+              Flex Wrap
               <InfoText doclink="/docs/flex-wrap">
                 Wrapping behaviour when child nodes don't fit into a single line
               </InfoText>
@@ -144,7 +144,7 @@ export default class Editor extends Component<Props> {
           </TabPane>
           <TabPane tab="Alignment" key="2">
             <h2>
-              Justify content
+              Justify Content
               <InfoText doclink="/docs/justify-content">
                 Aligns child nodes along the main-axis
               </InfoText>
@@ -157,7 +157,7 @@ export default class Editor extends Component<Props> {
             />
 
             <h2>
-              Align items
+              Align Items
               <InfoText doclink="/docs/align-items">
                 Aligns child nodes along the cross-axis
               </InfoText>
@@ -170,7 +170,7 @@ export default class Editor extends Component<Props> {
             />
 
             <h2>
-              Align self
+              Align Self
               <InfoText doclink="/docs/align-items">
                 Override align items of parent
               </InfoText>
@@ -183,7 +183,7 @@ export default class Editor extends Component<Props> {
             />
 
             <h2>
-              Align content
+              Align Content
               <InfoText doclink="/docs/align-content">
                 Alignment of lines along the cross-axis when wrapping
               </InfoText>
@@ -197,7 +197,7 @@ export default class Editor extends Component<Props> {
           </TabPane>
           <TabPane tab="Layout" key="3">
             <h2>
-              Width &times; height
+              Width &times; Height
               <InfoText doclink="/docs/width-height">
                 Dimensions of the node
               </InfoText>
@@ -226,7 +226,7 @@ export default class Editor extends Component<Props> {
             </Row>
 
             <h2>
-              Aspect ratio
+              Aspect Ratio
               <InfoText doclink="/docs/aspect-ratio">
                 Width/Height aspect ratio of node
               </InfoText>
@@ -240,7 +240,6 @@ export default class Editor extends Component<Props> {
               onChange={this.props.onChangeLayout}
             />
 
-            <h2>Box model</h2>
             {['padding', 'border', 'margin'].map(property => (
               <EditValue
                 property={property}
@@ -251,7 +250,7 @@ export default class Editor extends Component<Props> {
               />
             ))}
             <h2>
-              Position
+              Position Type
               <InfoText doclink="/docs/absolute-position">
                 Relative position offsets the node from it's calculated
                 position. Absolute position removes the node from the flexbox
diff --git a/website/src/components/Playground/YogaEnumSelect.js b/website/src/components/Playground/YogaEnumSelect.js
index 83ed8c98..73a99b4f 100644
--- a/website/src/components/Playground/YogaEnumSelect.js
+++ b/website/src/components/Playground/YogaEnumSelect.js
@@ -75,6 +75,7 @@ export default class YogaEnumSelect extends Component<Props> {
     return this.values.length > 3 ? (
       <div className="YogaEnumSelect">
         <Dropdown
+          trigger="click"
           disabled={props.disabled}
           overlay={
             <Menu onClick={this.handleMenuClick}>
diff --git a/website/src/components/Playground/YogaPositionEditor.css b/website/src/components/Playground/YogaPositionEditor.css
index 43f81476..9cc210e9 100644
--- a/website/src/components/Playground/YogaPositionEditor.css
+++ b/website/src/components/Playground/YogaPositionEditor.css
@@ -26,6 +26,7 @@
   justify-content: space-between;
   align-items: center;
   flex-direction: row;
-  font-size: 16px;
-  font-weight: bold;
+  font-size: 12px;
+  font-weight: 700;
+  color: #444950;
 }
diff --git a/website/src/components/Playground/YogaPositionEditor.js b/website/src/components/Playground/YogaPositionEditor.js
index 9e3cc8c2..85d81042 100644
--- a/website/src/components/Playground/YogaPositionEditor.js
+++ b/website/src/components/Playground/YogaPositionEditor.js
@@ -53,7 +53,7 @@ export default class YogaPositionEditor extends Component<Props> {
               onChange(property, value.set('left', e.target.value))
             }
           />
-          {property}
+          {property.toUpperCase()}
           <Input
             type="text"
             value={value.right}
diff --git a/website/src/templates/index.css b/website/src/templates/index.css
index 4732abf4..958ad617 100644
--- a/website/src/templates/index.css
+++ b/website/src/templates/index.css
@@ -41,10 +41,11 @@
 }
 
 .doc-block h3 {
-  color: #444950;
-  font-size: 16px;
-  font-weight: 700;
   line-height: 180%;
+  font-size: 14px;
+  font-weight: 700;
+  color: #444950;
+  text-transform: uppercase;
 }
 
 .doc-block p {