diff --git a/doc/md/predicates.md b/doc/md/predicates.md
index 7d96ca0fb..39fee5f5d 100755
--- a/doc/md/predicates.md
+++ b/doc/md/predicates.md
@@ -23,15 +23,15 @@ title: Predicates
 
 ## Edge Predicates
 
-- **HasEdge**. For example, for edge named `owenr` of type `Pet`, use:
+- **HasEdge**. For example, for edge named `owner` of type `Pet`, use:
 
   ```go
    client.Pet.
 		Query().
 		Where(user.HasOwner()).
 		All(ctx)
-  ``` 
-  
+  ```
+
 - **HasEdgeWith**. Add list of predicates for edge predicate.
 
   ```go
@@ -39,7 +39,7 @@ title: Predicates
 		Query().
 		Where(user.HasOwnerWith(user.Name("a8m"))).
 		All(ctx)
-  ``` 
+  ```
 
 
 ## Negation (NOT)
diff --git a/doc/website/core/Footer.js b/doc/website/core/Footer.js
index cbec9e5b0..2a4c8411a 100755
--- a/doc/website/core/Footer.js
+++ b/doc/website/core/Footer.js
@@ -27,16 +27,6 @@ class Footer extends React.Component {
     return (
       <footer className="nav-footer" id="footer">
         <section className="sitemap">
-          <a href={this.props.config.baseUrl} className="nav-home">
-            {this.props.config.footerIcon && (
-              <img
-                src={this.props.config.baseUrl + this.props.config.footerIcon}
-                alt={this.props.config.title}
-                width="66"
-                height="58"
-              />
-            )}
-          </a>
           <div>
             <h5>Docs</h5>
             <a href={this.docUrl('doc1.html', this.props.language)}>
diff --git a/doc/website/pages/en/index.js b/doc/website/pages/en/index.js
index f50cabe2d..166c09d0c 100755
--- a/doc/website/pages/en/index.js
+++ b/doc/website/pages/en/index.js
@@ -15,9 +15,14 @@ const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 
+const arrow = '\u2192';
+
 const Block = props => (
   <div className="block">
-    <div className="blockTitle">{props.title}</div>
+    <div className="blockTitle">
+      <div className="blockTitleText">{props.title}</div>{' '}
+      <div className="yellowArrow">{arrow}</div>
+    </div>
     <div className="blockContent">{props.content}</div>
   </div>
 );
@@ -100,10 +105,13 @@ class HomeSplash extends React.Component {
             <a href="./docs/getting-started">
               <div className="gettingStartedButtonText">
                 <div className="gettingStartedText">{'Getting Started '}</div>
-                <div className="gettingStartedButtonArrow">→</div>
+                <div className="gettingStartedButtonArrow">{arrow}</div>
               </div>
             </a>
           </div>
+          <div className="gopherGraph">
+            <img src="https://entgo.io/assets/gopher_graph.png" />
+          </div>
           <Features />
         </div>
       </SplashContainer>
diff --git a/doc/website/static/css/custom.css b/doc/website/static/css/custom.css
index 5d47aa9a0..5fc510dc3 100755
--- a/doc/website/static/css/custom.css
+++ b/doc/website/static/css/custom.css
@@ -13,6 +13,29 @@
   src: local('Calibre Light'), url('../font/CalibreLight.woff') format('woff');
 }
 
+@font-face {
+  font-family: 'Calibre Regular';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Calibre Regular'),
+    url('../font/CalibreRegular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Calibre Thin';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Calibre Thin'), url('../font/CalibreThin.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Calibre Thin Italic';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Calibre Thin Italic'),
+    url('../font/CalibreThinItalic.woff') format('woff');
+}
+
 @font-face {
   font-family: 'Calibre Light Italic';
   font-style: normal;
@@ -44,6 +67,14 @@
     url('../font/CalibreMediumItalic.woff') format('woff');
 }
 
+@font-face {
+  font-family: 'Calibre Regular Italic';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Calibre Regular Italic'),
+    url('../font/CalibreRegularItalic.woff') format('woff');
+}
+
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
 }
 
@@ -51,14 +82,14 @@
 }
 
 @media only screen and (max-width: 1023px) {
+  .docsNavContainer {
+    position: absolute;
+  }
 }
 
 @media only screen and (min-width: 1400px) {
 }
 
-@media only screen and (min-width: 1500px) {
-}
-
 body {
   background: #3d3e3f;
 }
@@ -71,8 +102,18 @@ body {
   background: #3d3e3f;
 }
 
-.navigationSlider .slidingNav ul {
-  background: #3d3e3f;
+.sideNavVisible .fixedHeaderContainer {
+  background: white;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.sideNavVisible.navigationSlider .slidingNav ul {
+  background: white;
+}
+
+.sideNavVisible .navigationSlider .slidingNav ul li a {
+  color: #3d3e3f !important;
 }
 
 .navigationSlider .slidingNav ul li > a:focus,
@@ -86,7 +127,7 @@ body {
 .toc .toggleNav ul li.navListItemActive a,
 .toc .toggleNav ul li a:hover,
 .toc .toggleNav ul li a:focus {
-  color: #4d8eaa;
+  font-family: 'Calibre Regular', sans-serif;
 }
 
 .imageAlignTop .blockImage {
@@ -105,12 +146,14 @@ body {
 }
 
 .projectDesc {
-  font-family: 'Calibre Light Italic';
-  font-size: 29px;
+  font-family: 'Calibre Light Italic', sans-serif;
+  font-size: 26px;
   line-height: 34px;
   color: white;
   text-align: left;
+  margin-left: 5px;
   max-width: 520px;
+  margin-bottom: 19px;
 }
 
 @media only screen and (min-width: 480px) {
@@ -120,32 +163,36 @@ body {
 }
 
 .homeContainer {
-  padding: 0 15%;
-  padding-bottom: 20px;
+  padding: 0 15% 20px;
 }
 
 .features {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
-  margin: 100px auto;
-  margin-bottom: 0px;
+  margin: 100px auto 0;
 }
 
 .block {
-  width: 290px;
+  width: 320px;
 }
 
-.blockTitle {
-  font-family: 'Calibre Medium Italic';
-  font-size: 24px;
+.navigationSlider .slidingNav ul li a {
+  height: 22px;
+}
+
+.block .blockTitle {
+  font-family: 'Calibre Light Italic', sans-serif;
+  line-height: 26px;
+  font-size: 23px;
   color: #ffe800;
-  margin-bottom: 13px;
+  margin-bottom: 10px;
+  display: inline-block;
 }
 
 .blockContent {
-  font-family: 'Calibre Light';
-  font-size: 24px;
+  font-family: 'Calibre Thin', sans-serif;
+  font-size: 22px;
   line-height: 26px;
   color: white;
 }
@@ -153,24 +200,25 @@ body {
 .gettingStartedButton {
   display: inline-block;
   border-radius: 31px;
-  padding: 15px 15px 7px 25px;
+  padding: 11px 15px 5px 22px;
   background-image: linear-gradient(to right, #85c3e1, #29bbaf);
 }
 
 .gettingStartedText {
-  font-family: 'Calibre Semibold';
-  font-size: 28px;
+  font-family: 'Calibre Regular', sans-serif;
+  letter-spacing: 0.03mm;
+  font-size: 27px;
   color: white;
   line-height: 35px;
 }
 
 .gettingStartedButtonArrow {
-  font-family: 'Calibre Bold';
+  font-family: 'Calibre Medium', sans-serif;
   line-height: 35px;
   font-size: 35px;
   color: white;
   margin-top: 7px;
-  margin-left: 15px;
+  margin-left: 9px;
 }
 
 .homeContainer {
@@ -186,10 +234,10 @@ body {
 .projectTitle p {
   display: inline-block;
   color: white;
-  font-family: 'Calibre Medium';
+  font-family: 'Calibre Medium', sans-serif;
   font-size: 56px;
   margin-left: 15px;
-  margin-bottom: 20px;
+  margin-bottom: 8px;
 }
 
 .navigationSlider .slidingNav ul li {
@@ -201,8 +249,8 @@ body {
 
 .navigationSlider .slidingNav ul li a {
   color: white;
-  font-family: 'Calibre Light';
-  font-size: 24px;
+  font-family: 'Calibre Thin', sans-serif;
+  font-size: 22px;
   padding: 0;
 }
 
@@ -212,7 +260,7 @@ body {
 
 .navigationSlider .slidingNav ul li a:hover {
   background-color: transparent;
-  color: #4d8eaa;
+  font-family: 'Calibre Light', sans-serif;
 }
 
 .headerWrapper.wrapper {
@@ -234,7 +282,7 @@ body .homeContainer .homeWrapper {
 }
 
 .homeContainer .homeWrapper {
-  padding: 2em 10px 0 10px;
+  padding: 3em 10px 0 10px;
 }
 
 a {
@@ -286,13 +334,17 @@ a {
     justify-content: center;
   }
 
+  .fixedHeaderContainer {
+    position: initial;
+  }
+
   .headerWrapper.wrapper {
     align-items: center;
     justify-content: flex-start;
   }
 
   .navPusher {
-    padding-top: 50px;
+    padding-top: 0;
     position: relative;
   }
 
@@ -310,7 +362,7 @@ a {
   }
 
   .projectTitle p {
-    margin-left: 0px;
+    margin-left: 0;
     margin-top: 20px;
   }
 
@@ -320,6 +372,11 @@ a {
 
   .fixedHeaderContainer {
     margin-top: 0 !important;
+    overflow-x: hidden;
+  }
+
+  .sideNavVisible.separateOnPageNav .fixedHeaderContainer {
+    width: 100vw;
   }
 
   .navigationSlider .slidingNav ul li {
@@ -342,6 +399,11 @@ html {
   width: 100%;
 }
 
+.gopherGraph {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .wrapper.homeWrapper {
   display: block !important;
 }
@@ -372,7 +434,7 @@ header > .navigationSlider {
  Docs Page
 */
 .sideNavVisible header > .navigationSlider {
-  margin-left: auto;
+  margin-left: 0;
 }
 
 .sideNavVisible .fixedHeaderContainer a {
@@ -386,13 +448,20 @@ header > .navigationSlider {
 .sideNavVisible .fixedHeaderContainer {
   display: flex;
   align-items: center;
-  position: fixed;
   margin-top: 0;
   padding: 0;
 }
 
 .sideNavVisible .navigationWrapper.navigationSlider {
   align-self: flex-end;
+  align-items: center;
+  display: flex;
+}
+
+@media only screen and (min-width: 1024px) {
+  .navigationSlider {
+    height: 12px;
+  }
 }
 
 .sideNavVisible .headerWrapper.wrapper {
@@ -404,11 +473,70 @@ header > .navigationSlider {
   width: 100vw;
 }
 
+.sideNavVisible .headerWrapper.wrapper header > a {
+  width: 288px;
+}
+
+.sideNavVisible .headerWrapper.wrapper header a {
+}
+
 .navigationSlider .slidingNav ul {
-  margin-top: 0px;
+  background: transparent;
+}
+
+.sideNavVisible .navigationSlider .slidingNav ul {
+  background: white;
+  margin-top: 0;
 }
 
 ul,
 ol {
-  margin-bottom: 0px;
+  margin-bottom: 0;
+}
+
+@media only screen and (min-width: 1425px) {
+  .homeContainer {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 0 50px;
+  }
+
+  .fixedHeaderContainer {
+    margin: 100px auto 0 auto;
+    width: 1100px;
+    padding: 0 0;
+  }
+
+  .sideNavVisible.separateOnPageNav .fixedHeaderContainer {
+    margin-top: 35px;
+    width: 100vw;
+  }
+}
+
+.sideNavVisible .navigationSlider .slidingNav ul li a {
+  font-family: 'Calibre Light', sans-serif;
+}
+
+.yellowArrow {
+  display: inline-block;
+  font-family: 'Calibre Light', sans-serif;
+  height: 26px;
+  position: relative;
+  top: 4px;
+  left: 5px;
+  font-size: 30px;
+}
+
+.blockTitleText {
+  display: inline;
+}
+
+.nav-footer .sitemap {
+  max-width: 1100px;
+  font-family: 'Calibre Light', sans-serif;
+  font-size: 18px;
+}
+
+.nav-footer .copyright {
+  margin: 0 auto 10px;
 }
diff --git a/doc/website/static/font/CalibreRegular.woff b/doc/website/static/font/CalibreRegular.woff
new file mode 100644
index 000000000..9816891bb
Binary files /dev/null and b/doc/website/static/font/CalibreRegular.woff differ
diff --git a/doc/website/static/font/CalibreRegularItalic.woff b/doc/website/static/font/CalibreRegularItalic.woff
new file mode 100644
index 000000000..7deb8c7ca
Binary files /dev/null and b/doc/website/static/font/CalibreRegularItalic.woff differ
diff --git a/doc/website/static/font/CalibreThin.woff b/doc/website/static/font/CalibreThin.woff
new file mode 100644
index 000000000..f018b6be4
Binary files /dev/null and b/doc/website/static/font/CalibreThin.woff differ
diff --git a/doc/website/static/font/CalibreThinItalic.woff b/doc/website/static/font/CalibreThinItalic.woff
new file mode 100644
index 000000000..d9b4ccd04
Binary files /dev/null and b/doc/website/static/font/CalibreThinItalic.woff differ
diff --git a/doc/website/static/img/favicon.ico b/doc/website/static/img/favicon.ico
index 7fc8afaf8..574415efc 100644
Binary files a/doc/website/static/img/favicon.ico and b/doc/website/static/img/favicon.ico differ