diff --git a/docs/assets/css/frappe_theme.css b/docs/assets/css/frappe_theme.css
index 5624f32..a54e5c4 100755
--- a/docs/assets/css/frappe_theme.css
+++ b/docs/assets/css/frappe_theme.css
@@ -4,7 +4,7 @@ Custom CSS
 
 ---------------------------------------*/
 body {
-  font-family: "proxima-nova", sans-serif;
+  font-family: "Rubik", sans-serif;
   font-size: 15px;
   color: #6c7680;
   text-rendering: optimizeLegibility !important;
@@ -13,7 +13,7 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 p.lead {
-  font-family: "proxima-nova", sans-serif;
+  font-family: "Rubik", sans-serif;
 }
 h1,
 h2,
@@ -28,13 +28,13 @@ h6,
 .h6,
 .sans,
 blockquote {
-  font-family: "proxima-nova", sans-serif;
+  font-family: "Rubik", sans-serif;
   color: #36414C;
 }
 button,
 .button,
 .btn {
-  font-family: "proxima-nova", sans-serif;
+  font-family: "Rubik", sans-serif;
 }
 .page-header-block,
 .page-header-actions {
@@ -98,7 +98,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: 700;
+  font-weight: 500;
 }
 p.description,
 p.description a {
@@ -184,9 +184,7 @@ blockquote p {
   padding: 130px 0px 100px;
   margin-top: -60px;
 }
-h1 {
-  font-size: 2.13em;
-}
+
 .navbar {
   background-color: transparent;
 }
@@ -245,7 +243,7 @@ h1 {
 }
 .hero {
   padding: 70px 0;
-  font-size: 1.6em;
+  font-size: 1em;
   font-weight: 300;
   text-align: center;
 }
@@ -690,4 +688,4 @@ article hr + h3 {
 
 .jumbotron {
   margin-bottom: 0;
-}
\ No newline at end of file
+}
diff --git a/docs/index.html b/docs/index.html
index 14219c2..52e52ee 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -8,7 +8,7 @@
     <meta name="description" content="A simple, responsive, modern charts library for the web.">
 
     <link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen">
-    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/css?family=Rubik:400,500,700" rel="stylesheet"> 
     <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
     <link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen">
     <link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
@@ -22,11 +22,11 @@
 
   <body>
     <div class="container">
-      <div class="row hero" style="padding-top: 30px; padding-bottom: 0px;">
+      <div class="row hero" style="padding-top: 10px; padding-bottom: 0px;">
         <div class="jumbotron" style="background: transparent;">
+        <img src="https://raw.githubusercontent.com/frappe/design/master/logos/frappe-charts-symbol.svg?sanitize=true" width="50px" height="auto" style="padding-bottom:1em;">
           <h1>Frappé Charts</h1>
-          <p class="mt-2">GitHub-inspired simple and modern charts for the web</p>
-          <p class="mt-2">with zero dependencies.</p>
+          <p>GitHub-inspired simple and modern charts for the web</br>with zero dependencies.</p>
           <!--<p class="mt-2">Because dumb charts are hard to come by.</p>-->
         </div>
 
