diff --git a/website/src/components/Page.css b/website/src/components/Page.css
index 70c80ebe..96250b29 100644
--- a/website/src/components/Page.css
+++ b/website/src/components/Page.css
@@ -1,14 +1,20 @@
-@import url('https://fonts.googleapis.com/css?family=Barlow');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans|Source+Code+Pro');
+
 
 html,
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Barlow', sans-serif;
+  font-family: 'Open Sans', sans-serif;
   color: #303845;
   font-size: 16px;
 }
 
+code,
+pre {
+  font-family: 'Source Code Pro', monospace;
+}
+
 h1,
 h2 {
   font-weight: 500;
diff --git a/website/src/components/Page.js b/website/src/components/Page.js
index 0b010288..8cf386b9 100644
--- a/website/src/components/Page.js
+++ b/website/src/components/Page.js
@@ -25,14 +25,6 @@ type Props = {|
 
 export default (props: Props) => (
   <div className={`Page ${props.className || ''}`}>
-    {/* <Head>
-      <link
-        rel="stylesheet"
-        href="//cdnjs.cloudflare.com/ajax/libs/antd/3.2.0/antd.min.css"
-      />
-      <link href="//fonts.googleapis.com/css?family=Barlow" rel="stylesheet" />
-      <title>Yoga Layout{props.title ? ` | ${props.title}` : ''}</title>
-    </Head> */}
     <Toolbar />
     <div className={`PageContent ${props.withSpacing ? 'withSpacing' : ''}`}>
       {props.children}
diff --git a/website/src/components/Toolbar.css b/website/src/components/Toolbar.css
index 3b980a3b..b96e6a9f 100644
--- a/website/src/components/Toolbar.css
+++ b/website/src/components/Toolbar.css
@@ -1,37 +1,24 @@
 .Toolbar {
-  border-bottom: 1px solid #dddfe2;
-  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
-  background: white;
-  height: 50px;
-  padding: 0 10px;
-  padding-bottom: 1px;
-  z-index: 4;
   display: flex;
+  padding: 20px 15px;
+  z-index: 4;
   align-items: center;
+  background-color: white;
 }
 
 .Toolbar .logo {
   display: flex;
-  height: 100%;
   align-items: center;
   text-decoration: none;
-  margin-left: 5px;
 }
 
 .Toolbar a {
   margin: 0 15px;
+  color: #606770;
 }
 
-.Toolbar h1 {
-  font-size: 20px;
-  margin: 0;
-  padding: 0;
-  margin-left: 3px;
-  white-space: nowrap;
-}
-
-.Toolbar .ToolbarSpacer {
-  flex-grow: 1;
+.Toolbar a:hover {
+  color: #8FD0C6;
 }
 
 .Toolbar .ToolbarToggle {
diff --git a/website/src/components/Toolbar.js b/website/src/components/Toolbar.js
index 07d53903..3adb6763 100644
--- a/website/src/components/Toolbar.js
+++ b/website/src/components/Toolbar.js
@@ -29,12 +29,12 @@ export default class Toolbar extends Component<Props> {
             width="42"
             alt="Yoga logo"
           />
-          <h1>Yoga Layout</h1>
         </Link>
-        <div className="ToolbarSpacer" />
+        
         <Link to="/docs">Docs</Link>
         <Link to="/playground">Playground</Link>
         <a href="https://github.com/facebook/yoga">GitHub</a>
+
         {this.props.onShowCode && (
           <a className="ToolbarToggle" onClick={this.props.onShowCode}>
             <Icon type={'code-o'} />
