diff --git a/README.md b/README.md
index ddc4bc9..b60c28f 100644
--- a/README.md
+++ b/README.md
@@ -59,11 +59,15 @@ Out of the box, we get:
 
 Read more about [Next's Routing](https://github.com/zeit/next.js#routing)
 
+## Install npm packages
+
+`yarn install`
+
 ## Available Scripts
 
 In the project directory, you can run:
 
-### `npm run dev`
+### `yarn dev`
 
 Runs the app in the development mode.<br>
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -71,12 +75,12 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.<br>
 You will also see any errors in the console.
 
-### `npm run build`
+### `yarn build`
 
 Builds the app for production to the `.next` folder.<br>
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
-### `npm run start`
+### `yarn start`
 
 Starts the application in production mode.
 The application should be compiled with \`next build\` first.
diff --git a/components/footer.js b/components/footer.js
index d6e9b27..31a3911 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -28,7 +28,7 @@ const Footer = ({}) => (
   <FooterStyled>
     <MyContainer flexDirection={['column', 'row']} py={4}>
       <Link fontWeight={2} fontSize={0} href='//consensys.design/' target='_blank' rel='noopener'>Made by ConsenSys Design</Link>
-      <Text fontWeight={0} fontSize={0} color='#888D95'>© 2018 ConsenSys Inc.</Text>
+      <Text fontWeight={0} fontSize={0} color='#888D95'>© 2019 ConsenSys Inc.</Text>
     </MyContainer>
   </FooterStyled>
 )
diff --git a/components/header.js b/components/header.js
index a73d392..aadfae4 100644
--- a/components/header.js
+++ b/components/header.js
@@ -3,14 +3,15 @@ import React from 'react'
 import Text from './Text'
 import Heading from './Heading'
 import Button from './Button'
+import Link from './Link'
 
 const Header = ({}) => (
   <header>
-    <Heading.h1 fontSize={[5, 7]} pr={[3, 6]}>Rimble Design System</Heading.h1>
-    <Text.p fontSize={2} mt={3} mb={5} pr={[3, 6]}>Adaptable components and design standards for decentralized applications.</Text.p>
-
-    <Button as="a" href="#getting-started" width={['100%', 'auto']} mr={[0, 3]} mb={[3, 0]}>Get Started</Button>
-    <Button.outline as="a" href='//consensys.github.io/rimble-ui/' target='_blank' rel='noopener' width={['100%', 'auto']}>Documentation</Button.outline>
+    <Heading.h1 fontSize={[5, 7]} pr={[3, 6]}>Hi, we're Rimble 👋</Heading.h1>
+    <Heading.h2 fontSize={[2, 3]} my={3} pr={[3, 6]}>
+      A growing open-source library of components and guides for helping you make dApps everyone can use. We put out React components to help you <Link href="#build">build</Link> and guides to help you <Link href="#learn">learn.
+      </Link>
+    </Heading.h2>
   </header>
 );
 
diff --git a/components/nav.js b/components/nav.js
index 2e859cd..d088c8a 100644
--- a/components/nav.js
+++ b/components/nav.js
@@ -51,7 +51,7 @@ const Nav = () => (
     <Container>
       <NavList display='flex' flex='row nowrap'>
         <li>
-          <Heading.h1 fontSize={[1, 2]} fontWeight={1} color={'mid-grey'}>Rimble Design System</Heading.h1>
+          <Heading.h1 fontSize={[1, 2]} fontWeight={1} color={'mid-grey'}>Rimble 🚀</Heading.h1>
         </li>
         <NavMenu></NavMenu>
       </NavList>
diff --git a/components/navMenu.js b/components/navMenu.js
index 19740f1..ed21d76 100644
--- a/components/navMenu.js
+++ b/components/navMenu.js
@@ -100,13 +100,7 @@ class Menu extends Component {
         <StyledList hidden={!this.state.isOpen} >
           <ul>
             <li>
-              <Text fontSize={1} fontWeight={1} color={'mid-grey'}>v0.6.0</Text>
-            </li>
-            <li>
-              <Link href='//github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Github</Link>
-            </li>
-            <li>
-              <Link href='//consensys.github.io/rimble-ui/' target='_blank' rel='noopener'>Documentation</Link>
+              <Link href='https://consensys.github.io/rimble-app-demo/' target='_blank' rel='noopener'>Try demo</Link>
             </li>
           </ul>
         </StyledList>
diff --git a/pages/_document.js b/pages/_document.js
index 4a7d39e..69f8887 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -13,7 +13,7 @@ export default class MyDocument extends Document {
     return (
       <html lang='en'>
         <Head>
-          <title>Rimble Design System</title>
+          <title>Rimble component library</title>
           {this.props.styleTags}
         </Head>
         <body>
diff --git a/pages/index.js b/pages/index.js
index 15e6c7a..92e667b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,6 +7,7 @@ import ThemeProvider from '../components/ThemeProvider'
 import Typography from '../components/typography'
 import Container from '../components/Container'
 import CodeBlock from '../components/CodeBlock'
+import Button from '../components/Button'
 import Heading from '../components/Heading'
 import Text from '../components/Text'
 import Hr from '../components/Hr'
@@ -47,89 +48,126 @@ const Masthead = styled(Flex)`
   ${backgroundImage}
 `
 
-const exampleCode = `
-import React, { Component } from 'react'
 
-import { Button } from 'rimble-ui'
-
-class Example extends Component {
-  render () {
-    return (
-      <Button size={'medium'}>
-        Click me!
-      </Button>
-    )
-  }
-}
-`
 
 const Home = () => (
   <ThemeProvider>
     <React.Fragment>
       <Typography />
-      <Head title="Rimble Design System" />
+      <Head title="Rimble – Open-source components and guides for building amazing dApps" />
       <Nav/>
       <main role="main">
-        <Masthead backgroundImage={['none', 'none', 'url("/static/svg/fig-bg.svg")']} >
+        <Masthead backgroundImage={['url("/static/svg/fig-1.svg")']} >
           <Container>
             <Header/>
           </Container>
         </Masthead>
-        <section>
+
+
+
+
+        <section id="build">
           <Container>
             <Box my={5}>
-              <Heading.h1 fontSize={[3, 4]}>Why Rimble?</Heading.h1>
+              <Heading.h3 mt={3} fontSize={[3, 4]} >Build 👷‍♀️</Heading.h3>
               <Hr/>
-              <Text.p fontSize={[1, 2]}>
-                Decentralized applications (dApps) require users to learn new patterns and they present new hurdles for designers and front-end developers. Rimble is here to make life easier for everyone. As an open source project, Rimble aims to create common dApp UX patterns, validated through user research, and built for developers.
-              </Text.p>
-
+              <Text.p>Your backlog is already *this* big. And we've already designed, tested and built these. Makes sense right?</Text.p>
               <Flex mt={4} width={1} flexDirection={['column', 'row']}>
-                <Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
+                <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
                   <Flex my={3}>
                     <ReactSVG src='static/svg/fig-1.svg' />
                   </Flex>
-                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Flexible</Heading.h2>
-                  <Text.p>Your tech stack and workflow are yours to decide. We impose as few constraints as possible. </Text.p>
+                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble UI</Heading.h2>
+                  <Text.p>Clean, customisable building blocks for putting your interface together, including UI for Ethereum concepts.</Text.p>
+                  <Button.outline mt={3} mr={5} mb={5} href='https://github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Get the code</Button.outline>
+                  <Link mt={3} ml={5} mb={5} href='https://consensys.github.io/rimble-ui/?path=/story/getting-started--welcome' target='_blank' rel='noopener'>Read the docs</Link>
                 </Box>
-                <Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
+                <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
                   <Flex my={3}>
                     <ReactSVG src='static/svg/fig-2.svg' />
                   </Flex>
-                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Research-driven</Heading.h2>
-                  <Text.p>We are constantly talking to dApp designers, developers, and users to understand common challenges and effective UI patterns. </Text.p>
-                </Box>
-                <Box flex={'1 1 auto'} width={[1, 1/3]} >
-                  <Flex my={3}>
-                    <ReactSVG src='static/svg/fig-3.svg' />
-                  </Flex>
-                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Human</Heading.h2>
-                  <Text.p>Blockchain is confusing. We are a dedicated team, invested in being understandable and approachable.</Text.p>
+                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble Web3</Heading.h2>
+                  <Text.p>Drop-in components that solve an Ethereum UX problem out of the box. Configure some inputs and you're ready.   </Text.p>
+                  <Button.outline mt={3} mr={5} href='https://github.com/ConsenSys/rimble-web3-components' target='_blank' rel='noopener'>Get the code</Button.outline>
+                  <Link disabled mt={3} ml={5} href='https://rimble-web3-components.netlify.com/?path=/story/connectionbanner--wrong-network-default' target='_blank' rel='noopener'>Docs coming soon!</Link>
                 </Box>
               </Flex>
             </Box>
           </Container>
         </section>
+
+        <section>
+          <Container>
+          <Heading.h3 fontSize={[3, 4]} id="learn">Learn 🤓</Heading.h3>
+
+          <Text.p>Research-led guides for creating user-friendly blockchain experiences</Text.p>
+          <Hr/>
+          <Flex mt={4} width={1} flexDirection={['column', 'row']}>
+            <Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
+              <Flex my={3}>
+                <ReactSVG src='static/svg/fig-3.svg' />
+              </Flex>
+              <Heading.h2 fontSize={[2, 3]} fontWeight={1}>UX</Heading.h2>
+              <Text.p>In-depth pieces on designing patterns that help your users navigate Ethereum.</Text.p>
+              <Link disabled mt={3} ml={5} href='#' target='_blank' rel='noopener'>Guide coming soon!</Link>
+            </Box>
+            <Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
+              <Flex my={3}>
+                <ReactSVG src='static/svg/fig-4.svg' />
+              </Flex>
+              <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Content</Heading.h2>
+              <Text.p>Tips on designing dApps that talk sense – how to design the words in your dApp. </Text.p>
+              <Link disabled mt={3} ml={5} href='#' target='_blank' rel='noopener'>Guide coming soon!</Link>
+            </Box>
+            <Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
+              <Flex my={3}>
+                <ReactSVG src='static/svg/fig-3.svg' />
+              </Flex>
+              <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Design</Heading.h2>
+              <Text.p>Guidelines for styling Rimble components to fit your product's brand.</Text.p>
+              <Link disabled mt={3} ml={5} href='#' target='_blank' rel='noopener'>Guide coming soon!</Link>
+            </Box>
+          </Flex>
+
+          </Container>
+        </section>
+
+
         <section>
           <Container>
             <Box my={5}>
-              {/* body section */}
-              <Heading.h1 id='getting-started' fontSize={[3, 4]}>Getting Started</Heading.h1>
+              <Heading.h1 fontSize={[3, 4]}>Why Rimble? 🤔</Heading.h1>
               <Hr/>
-              <Heading.h2 fontSize={2} fontWeight={1}>Installation</Heading.h2>
-              <CodeBlock code={'$ npm install --save rimble-ui styled-components'} />
-              <Heading.h2 fontSize={2} fontWeight={1}>Usage</Heading.h2>
-              <CodeBlock code={exampleCode} />
+              <Flex mt={4} width={1} flexDirection={['column', 'row']}>
+                <Box alignItems="center" justifyContent="center" flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                    <ReactSVG src='static/svg/fig-3.svg' />
+                </Box>
+                <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                  <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Solve the problems you care about, not the blockchain ones</Heading.h2>
+                  <Text.p>Don't let blockchain usability issues get in the way of your vision.</Text.p>
+                </Box>
+              </Flex>
+              <Flex mt={4} width={1} flexDirection={['column', 'row']}>
+                <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                <Heading.h2 fontSize={[2, 3]} fontWeight={1}>Got more ideas than time?</Heading.h2>
+                <Text.p>Rimble helps those with more ideas than time – our components include functionality out of the box that we've already designed, tested and iterated on. </Text.p>
+                </Box>
+                <Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
+                    <ReactSVG src='static/svg/fig-3.svg' />
+                </Box>
+              </Flex>
             </Box>
           </Container>
         </section>
+
+
         <section>
           <Container>
             <Box my={5}>
-              <Heading.h1 fontSize={[3, 4]}>Made by ConsenSys Design</Heading.h1>
+              <Heading.h1 fontSize={[3, 4]}>Contribute to Rimble 🏅</Heading.h1>
               <Hr/>
               <Text.p>
-                Rimble is created by <Link href='//consensys.design/' target='_blank' rel='noopener'>ConsenSys Design.</Link> Want to help us define the roadmap? Submit feedback or feature requests on the <Link href='//github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Rimble</Link> GitHub page.
+                 Want to help us define the roadmap? Submit feedback or feature requests on our GitHub pages.
               </Text.p>
             </Box>
           </Container>
diff --git a/static/svg/baseline-menu-24px.svg b/static/svg/baseline-menu-24px.svg
index fd6e253..14f99cd 100644
--- a/static/svg/baseline-menu-24px.svg
+++ b/static/svg/baseline-menu-24px.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
diff --git a/static/svg/fig-4.svg b/static/svg/fig-4.svg
new file mode 100644
index 0000000..a2cf804
--- /dev/null
+++ b/static/svg/fig-4.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="72px" height="72px" viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 7</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Style-1-Copy-5" transform="translate(-880.000000, -997.000000)" fill-rule="nonzero">
+            <g id="Group-7" transform="translate(880.000000, 997.000000)">
+                <g id="Group-4">
+                    <polygon id="Triangle-Copy-132" fill="#28C081" opacity="0.830301339" transform="translate(18.000000, 54.000000) scale(-1, 1) translate(-18.000000, -54.000000) " points="-1.26750944e-14 72 -3.90002904e-15 36 36 36"></polygon>
+                    <polygon id="Triangle-Copy-133" fill="#28C081" points="36 72 36 36 72 36"></polygon>
+                    <polygon id="Triangle-Copy-134" fill="#28C081" opacity="0.772823661" transform="translate(54.000000, 18.000000) scale(-1, -1) translate(-54.000000, -18.000000) " points="36 36 36 -1.42108547e-14 72 -5.35080135e-15"></polygon>
+                    <polygon id="Triangle-Copy-135" fill="#28C081" transform="translate(18.000000, 18.000000) scale(1, -1) translate(-18.000000, -18.000000) " points="-1.26750944e-14 36 -3.90002904e-15 -1.42108547e-14 36 -5.35080135e-15"></polygon>
+                    <polygon id="Triangle-Copy-138" fill="#28C081" opacity="0.823214286" transform="translate(18.000000, 18.000000) scale(-1, 1) translate(-18.000000, -18.000000) " points="-1.26750944e-14 36 -3.90002904e-15 -1.42108547e-14 36 -5.35080135e-15"></polygon>
+                    <polygon id="Triangle-Copy-139" fill="#28C081" points="36 14 22 0 36 0"></polygon>
+                    <polygon id="Triangle-Copy-142" fill="#FFFFFF" transform="translate(7.000000, 7.000000) scale(-1, 1) rotate(-270.000000) translate(-7.000000, -7.000000) " points="0 14 3.41252541e-15 0 14 3.44557631e-15"></polygon>
+                    <polygon id="Triangle-Copy-146" fill="#28C081" opacity="0.823214286" points="36 36 36 -1.42108547e-14 72 -5.35080135e-15"></polygon>
+                    <polygon id="Triangle-Copy-147" fill="#28C081" points="36 14 36 0 50 3.44557631e-15"></polygon>
+                    <polygon id="Triangle-Copy-149" fill="#28C081" opacity="0.726339286" points="36 47 36 36 47 36"></polygon>
+                    <polygon id="Triangle-Copy-148" fill="#FFFFFF" transform="translate(65.000000, 7.000000) rotate(-270.000000) translate(-65.000000, -7.000000) " points="58 14 58 0 72 3.44557631e-15"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/static/svg/fig-bg.svg b/static/svg/fig-bg.svg
index 0af0e01..a6cc927 100644
--- a/static/svg/fig-bg.svg
+++ b/static/svg/fig-bg.svg
@@ -23,4 +23,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>