diff --git a/.env b/.env
new file mode 100644
index 00000000..7b8a211f
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+NODE_PATH=src/
diff --git a/package.json b/package.json
index 1b12593b..2d7ee0c4 100644
--- a/package.json
+++ b/package.json
@@ -6,13 +6,18 @@
   "dependencies": {
     "flat": "^2.0.1",
     "grid-styled": "^2.0.0-4",
+    "hidden-styled": "^1.0.0-0",
     "normalize.css": "^7.0.0",
+    "palx": "^1.0.2",
+    "polished": "^1.2.1",
     "react": "^15.6.1",
+    "react-create-component-from-tag-prop": "^1.2.1",
     "react-dom": "^15.6.1",
     "react-intl": "^2.3.0",
     "react-responsive": "^1.3.0",
     "react-router-dom": "^4.1.1",
-    "styled-components": "^2.1.0"
+    "styled-components": "^2.1.0",
+    "styled-system": "^1.0.0-4"
   },
   "devDependencies": {
     "gh-pages": "^1.0.0",
diff --git a/public/index.html b/public/index.html
index 7bee0271..da8b2169 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta name="theme-color" content="#4990e2">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Skycoin</title>
   </head>
   <body>
     <noscript>
diff --git a/public/manifest.json b/public/manifest.json
index be607e41..179da5f2 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Skycoin",
+  "name": "Skycoin",
   "icons": [
     {
       "src": "favicon.ico",
@@ -11,5 +11,5 @@
   "start_url": "./index.html",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#4990e2"
 }
diff --git a/src/components/App/App.js b/src/components/App/App.js
index 1f612e34..cad77954 100644
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -1,20 +1,41 @@
 import React from 'react';
 import flatten from 'flat';
+import values from 'lodash/values';
 import { ThemeProvider } from 'styled-components';
-import { IntlProvider } from 'react-intl';
+import { IntlProvider, addLocaleData } from 'react-intl';
+import zh from 'react-intl/locale-data/zh';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+} from 'react-router-dom';
 
-import { BREAKPOINTS } from '../../config';
-import en from '../../locales/en';
-import Router from '../Router';
+import { COLORS, BREAKPOINTS, SPACE, FONT_SIZES } from 'config';
+import * as locales from 'locales';
+import Routes from '../Routes';
+
+addLocaleData([...zh]);
 
 const theme = {
-  breakpoints: BREAKPOINTS,
+  colors: flatten(COLORS),
+  breakpoints: values(BREAKPOINTS),
+  space: SPACE,
+  fontSizes: FONT_SIZES,
 };
 
-export default () => (
-  <IntlProvider locale="en" messages={flatten(en)}>
+const Root = ({ locale, ...props }) => (
+  <IntlProvider locale={locale} messages={flatten(locales[locale])}>
     <ThemeProvider theme={theme}>
-      <Router />
+      <Routes {...props} />
     </ThemeProvider>
   </IntlProvider>
 );
+
+export default () => (
+  <Router>
+    <Switch>
+      <Route path="/cn" render={props => <Root {...props} locale="zh" />} />
+      <Route path="/" render={props => <Root {...props} locale="en" />} />
+    </Switch>
+  </Router>
+);
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index 32bc917e..e24d1aaf 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -1,11 +1,34 @@
-import styled from 'styled-components';
-
-export default styled.button`
-  appearance: none;
-  background: none;
-  border-radius: 1000px;
-  border: 1px solid;
-  padding: 0.75em 1.5em;
-  line-height: 1em;
+import styled, { css } from 'styled-components';
+import { space, width, fontSize, color } from 'styled-system';
+import { rem } from 'polished';
+
+import media from 'utils/media';
+import { FONT_FAMILIES, FONT_SIZES, SPACE, BORDER_RADIUS, BOX_SHADOWS } from 'config';
+
+export default styled.a`
+  display: inline-block;
+  border: 1px solid transparent;
   cursor: pointer;
+  line-height: 1;
+  font-weight: 600;
+
+  border-radius: ${props => props.pill ? BORDER_RADIUS.pill : BORDER_RADIUS.base};
+  box-shadow: ${BOX_SHADOWS.base};
+  font-family: ${FONT_FAMILIES.mono};
+  font-size: ${rem(FONT_SIZES[3])};
+  padding: ${rem(SPACE[3])} ${rem(SPACE[6])};
+
+  ${fontSize}
+  ${color}
+  ${space}
+  ${width}
+
+  ${props => props.outlined && css`
+    border: 1px solid currentColor;
+    box-shadow: none;
+  `}
+
+  ${props => props.big && media.sm.css`
+    padding: ${rem(SPACE[4])} ${rem(SPACE[7])};
+  `}
 `;
diff --git a/src/components/Buy/Buy.js b/src/components/Buy/Buy.js
index a3dc6d6b..5d4fae85 100644
--- a/src/components/Buy/Buy.js
+++ b/src/components/Buy/Buy.js
@@ -1,7 +1,10 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import Button from '../Button';
 
-export default () => (
-  <Button>Buy Skycoin</Button>
+export default (props) => (
+  <Button {...props}>
+    <FormattedMessage id="buy" />
+  </Button>
 );
diff --git a/src/components/Container/Container.js b/src/components/Container/Container.js
index adc0f926..9316c417 100644
--- a/src/components/Container/Container.js
+++ b/src/components/Container/Container.js
@@ -1,7 +1,10 @@
 import styled from 'styled-components';
+import { rem } from 'polished';
+
+import { SPACE } from 'config';
 
 export default styled.div`
   margin: 0 auto;
-  max-width: 60em;
-  padding: 0 1em;
+  max-width: 60rem;
+  padding: 0 ${rem(SPACE[4])};
 `;
diff --git a/src/components/Distribution/Distribution.js b/src/components/Distribution/Distribution.js
new file mode 100644
index 00000000..11495ad8
--- /dev/null
+++ b/src/components/Distribution/Distribution.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => (
+  <div>Distribution</div>
+);
diff --git a/src/components/Distribution/index.js b/src/components/Distribution/index.js
new file mode 100644
index 00000000..e4d0c8aa
--- /dev/null
+++ b/src/components/Distribution/index.js
@@ -0,0 +1 @@
+export { default } from './Distribution';
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 894ee630..b0e0a31f 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -1,20 +1,30 @@
 import React from 'react';
+import styled from 'styled-components';
 import { Flex, Box } from 'grid-styled';
+import { rem } from 'polished';
 
+import { SPACE } from 'config';
 import Container from '../Container';
 import Logo from '../Logo';
-import Navigation from '../Navigation';
+import Navigation from './components/Navigation';
+
+const Header = styled.div`
+  padding: ${rem(SPACE[6])} 0;
+  width: 100%;
+`;
 
 export default () => (
-  <Container>
-    <Flex align="center">
-      <Box width={1/3}>
-        <Logo />
-      </Box>
+  <Header>
+    <Container>
+      <Flex align="center" wrap>
+        <Box width={[1/1, 1/3]}>
+          <Logo />
+        </Box>
 
-      <Box width={2/3}>
-        <Navigation />
-      </Box>
-    </Flex>
-  </Container>
+        <Box width={[1/1, 2/3]}>
+          <Navigation />
+        </Box>
+      </Flex>
+    </Container>
+  </Header>
 );
diff --git a/src/components/Header/components/Navigation/Navigation.js b/src/components/Header/components/Navigation/Navigation.js
new file mode 100644
index 00000000..6b34d7d3
--- /dev/null
+++ b/src/components/Header/components/Navigation/Navigation.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import { rem } from 'polished';
+import Hide from 'hidden-styled'
+
+import media from 'utils/media';
+import { SPACE, FONT_SIZES, FONT_FAMILIES } from 'config';
+import Buy from 'components/Buy';
+
+const Navigation = styled.div`
+  font-size: ${rem(FONT_SIZES[1])};
+  padding-top: ${rem(SPACE[4])};
+  text-align: left;
+
+  ${media.sm.css`
+    font-size: ${rem(FONT_SIZES[3])};
+    padding-top: 0;
+    text-align: right;
+  `}
+`;
+
+const StyledLink = styled(Link)`
+  margin-right: ${rem(SPACE[5])};
+  font-family: ${FONT_FAMILIES.mono};
+  color: white;
+  text-decoration: none;
+  font-weight: 600;
+
+  ${media.sm.css`
+    margin-right: 0;
+    margin-left: ${rem(SPACE[7])};
+  `}
+
+  ${media.md.css`
+    margin-left: 0;
+    margin-right: ${rem(SPACE[7])};
+  `}
+`;
+
+const InlineHide = Hide.extend`
+  display: inline;
+  color: red;
+`;
+
+export default () => (
+  <Navigation>
+    <StyledLink to="/">
+      <FormattedMessage id="header.navigation.distribution" />
+    </StyledLink>
+
+    <StyledLink to="/">
+      <FormattedMessage id="header.navigation.downloads" />
+    </StyledLink>
+
+    <StyledLink to="/">
+      <FormattedMessage id="header.navigation.blog" />
+    </StyledLink>
+
+    <InlineHide xs sm>
+      <Buy color="white" pill outlined />
+    </InlineHide>
+  </Navigation>
+);
diff --git a/src/components/Navigation/index.js b/src/components/Header/components/Navigation/index.js
similarity index 100%
rename from src/components/Navigation/index.js
rename to src/components/Header/components/Navigation/index.js
diff --git a/src/components/Heading/Heading.js b/src/components/Heading/Heading.js
new file mode 100644
index 00000000..2623bd7f
--- /dev/null
+++ b/src/components/Heading/Heading.js
@@ -0,0 +1,20 @@
+import styled, { css } from 'styled-components';
+import { space, width, fontSize, color } from 'styled-system';
+import createComponentFromTagProp from 'react-create-component-from-tag-prop';
+
+import { FONT_FAMILIES } from 'config';
+
+const Heading = createComponentFromTagProp({
+  tag: 'h2',
+  prop: 'as',
+});
+
+export default styled(Heading)`
+  ${fontSize}
+  ${color}
+  ${space}
+  ${width}
+
+  font-family: ${FONT_FAMILIES.mono};
+  line-height: 1.5;
+`;
diff --git a/src/components/Heading/index.js b/src/components/Heading/index.js
new file mode 100644
index 00000000..b8610c27
--- /dev/null
+++ b/src/components/Heading/index.js
@@ -0,0 +1 @@
+export { default } from './Heading';
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 6d9afb91..4fcd4d29 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,15 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
 
-import Header from '../Header';
-
-const Home = styled.div`
-  background-color: #4990e2;
-  padding: 1rem 0;
-`;
+import Hero from './components/Hero';
 
 export default () => (
-  <Home>
-    <Header />
-  </Home>
+  <div>
+    <Hero />
+  </div>
 );
diff --git a/src/components/Home/components/Hero/Hero.js b/src/components/Home/components/Hero/Hero.js
new file mode 100644
index 00000000..7e6cd733
--- /dev/null
+++ b/src/components/Home/components/Hero/Hero.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Flex, Box } from 'grid-styled';
+
+import { COLORS } from 'config';
+import media from 'utils/media';
+import Header from 'components/Header';
+import Map from './components/Map';
+import Introduction from './components/Introduction';
+import Announcement from './components/Announcement';
+
+const Hero = styled.div`
+  background-image: linear-gradient(-110deg, ${COLORS.base}, ${COLORS.violet[4]});
+  position: relative;
+  height: 33rem;
+  z-index: -1;
+
+  ${media.sm.css`
+    height: 40rem;
+  `}
+
+  ${media.md.css`
+    height: 48rem;
+  `}
+`;
+
+const StyledFlex = styled(Flex)`
+  height: 100%;
+`;
+
+export default () => (
+  <Hero>
+    <Map />
+
+    <StyledFlex column justify="space-between">
+      <Box>
+        <Header />
+      </Box>
+      <Box>
+        <Introduction />
+      </Box>
+      <Box>
+        <Announcement />
+      </Box>
+    </StyledFlex>
+  </Hero>
+);
diff --git a/src/components/Home/components/Hero/components/Announcement/Announcement.js b/src/components/Home/components/Hero/components/Announcement/Announcement.js
new file mode 100644
index 00000000..cb0b4f39
--- /dev/null
+++ b/src/components/Home/components/Hero/components/Announcement/Announcement.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { Flex, Box } from 'grid-styled';
+import { rem } from 'polished';
+import { FormattedMessage } from 'react-intl';
+
+import Container from 'components/Container';
+import Text from 'components/Text';
+import megaphone from './megaphone.png';
+
+const Announcement = styled.div`
+  background-color: rgba(0, 0, 0, 0.25);
+  width: 100%;
+`;
+
+const StyledLink = styled(Link)`
+  color: white;
+`;
+
+const Icon = styled.img.attrs({
+  src: megaphone,
+})`
+  width: ${rem(32)};
+`;
+
+export default () => (
+  <Announcement>
+    <Container>
+      <Flex align="center">
+        <Box mr={4}>
+          <Icon />
+        </Box>
+
+        <Box>
+          <Text color="white" fontSize={[1, 3]} heavy py={4} m={0}>
+            <FormattedMessage id="home.hero.announcement" />
+          </Text>
+        </Box>
+      </Flex>
+    </Container>
+  </Announcement>
+)
diff --git a/src/components/Home/components/Hero/components/Announcement/index.js b/src/components/Home/components/Hero/components/Announcement/index.js
new file mode 100644
index 00000000..396eed77
--- /dev/null
+++ b/src/components/Home/components/Hero/components/Announcement/index.js
@@ -0,0 +1 @@
+export { default } from './Announcement';
diff --git a/src/components/Home/components/Hero/components/Announcement/megaphone.png b/src/components/Home/components/Hero/components/Announcement/megaphone.png
new file mode 100644
index 00000000..c3f602b5
Binary files /dev/null and b/src/components/Home/components/Hero/components/Announcement/megaphone.png differ
diff --git a/src/components/Home/components/Hero/components/Introduction/Introduction.js b/src/components/Home/components/Hero/components/Introduction/Introduction.js
new file mode 100644
index 00000000..35274c5c
--- /dev/null
+++ b/src/components/Home/components/Hero/components/Introduction/Introduction.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Container from 'components/Container';
+import Button from 'components/Button';
+import Heading from 'components/Heading';
+import Text from 'components/Text';
+
+export default () => (
+  <Container>
+    <Heading as="h1" color="white" fontSize={[5, 6, 7]} mb={7}>
+      <FormattedMessage id="home.hero.heading.0" />
+      <br />
+      <FormattedMessage id="home.hero.heading.1" defaultMessage=" " />
+    </Heading>
+
+    <Button color="violet.5" bg="white" mr={[2, 5]} big fontSize={[1, 3]}>
+      <FormattedMessage id="home.hero.buy" />
+    </Button>
+
+    <Button color="white" big outlined fontSize={[1, 3]}>
+      <FormattedMessage id="home.hero.wallet.get" />
+    </Button>
+
+    <Text heavy color="white" fontSize={[1, 3]} mt={7}>
+      <FormattedMessage id="home.hero.wallet.blurb.0" />
+      <br />
+      <FormattedMessage id="home.hero.wallet.blurb.1" />
+    </Text>
+  </Container>
+);
diff --git a/src/components/Home/components/Hero/components/Introduction/index.js b/src/components/Home/components/Hero/components/Introduction/index.js
new file mode 100644
index 00000000..519afb57
--- /dev/null
+++ b/src/components/Home/components/Hero/components/Introduction/index.js
@@ -0,0 +1 @@
+export { default } from './Introduction';
diff --git a/src/components/Home/components/Hero/components/Map/Map.js b/src/components/Home/components/Hero/components/Map/Map.js
new file mode 100644
index 00000000..4c2db828
--- /dev/null
+++ b/src/components/Home/components/Hero/components/Map/Map.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+import map from './map.png';
+
+export default styled.div`
+  background-image: url(${map});
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  position: absolute;
+  height: 75%;
+  width: 95%;
+  top: 12.5%;
+  left: 2.5%;
+  pointer-events: none;
+  z-index: -1;
+`;
diff --git a/src/components/Home/components/Hero/components/Map/index.js b/src/components/Home/components/Hero/components/Map/index.js
new file mode 100644
index 00000000..84bebe9d
--- /dev/null
+++ b/src/components/Home/components/Hero/components/Map/index.js
@@ -0,0 +1 @@
+export { default } from './Map';
diff --git a/src/components/Home/components/Hero/components/Map/map.png b/src/components/Home/components/Hero/components/Map/map.png
new file mode 100644
index 00000000..d6b927ae
Binary files /dev/null and b/src/components/Home/components/Hero/components/Map/map.png differ
diff --git a/src/components/Home/components/Hero/index.js b/src/components/Home/components/Hero/index.js
new file mode 100644
index 00000000..9c292bc0
--- /dev/null
+++ b/src/components/Home/components/Hero/index.js
@@ -0,0 +1 @@
+export { default } from './Hero';
diff --git a/src/components/Logo/Logo.js b/src/components/Logo/Logo.js
index 7ff8deb6..56695e91 100644
--- a/src/components/Logo/Logo.js
+++ b/src/components/Logo/Logo.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import { rem } from 'polished';
 
 import logo from './logo.svg';
 
@@ -8,7 +9,7 @@ const Logo = styled.img.attrs({
   src: logo,
   alt: 'Skycoin',
 })`
-  height: 2.125rem;
+  height: ${rem(34)};
 `;
 
 export default (props) => (
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
deleted file mode 100644
index 0750770d..00000000
--- a/src/components/Navigation/Navigation.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Link } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
-
-import Buy from '../Buy';
-
-const Navigation = styled.div`
-  text-align: right;
-  font-size: 15px;
-
-  ${'' /* TODO: refactor */}
-  &, a, button {
-    color: white;
-  }
-`;
-
-const StyledLink = styled(Link)`
-  margin-right: 1.5rem;
-`
-
-export default () => (
-  <Navigation>
-    <StyledLink to="/">
-      <FormattedMessage id="navigation.distribution" />
-    </StyledLink>
-    <StyledLink to="/">
-      <FormattedMessage id="navigation.how_it_works" />
-    </StyledLink>
-    <StyledLink to="/">
-      <FormattedMessage id="navigation.blog" />
-    </StyledLink>
-    <Buy />
-  </Navigation>
-);
diff --git a/src/components/Router/Router.js b/src/components/Router/Router.js
deleted file mode 100644
index 468ab11f..00000000
--- a/src/components/Router/Router.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import {
-  BrowserRouter as Router,
-  Route,
-} from 'react-router-dom';
-
-import Home from '../Home';
-
-export default () => (
-  <Router>
-    <Route exact path="/" component={Home} />
-  </Router>
-)
diff --git a/src/components/Router/index.js b/src/components/Router/index.js
deleted file mode 100644
index 1c664800..00000000
--- a/src/components/Router/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Router';
diff --git a/src/components/Routes/Routes.js b/src/components/Routes/Routes.js
new file mode 100644
index 00000000..06b56d1a
--- /dev/null
+++ b/src/components/Routes/Routes.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import {
+  Switch,
+  Route,
+} from 'react-router-dom';
+import { resolve } from 'path';
+
+import Home from '../Home';
+import Distribution from '../Distribution';
+
+export default ({ match }) => (
+  <Switch>
+    <Route path={match.url} exact component={Home} />
+    <Route path={resolve(match.url, 'distribution')} exact component={Distribution} />
+  </Switch>
+);
diff --git a/src/components/Routes/index.js b/src/components/Routes/index.js
new file mode 100644
index 00000000..edc668a3
--- /dev/null
+++ b/src/components/Routes/index.js
@@ -0,0 +1 @@
+export { default } from './Routes';
diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js
new file mode 100644
index 00000000..b48b2f0c
--- /dev/null
+++ b/src/components/Text/Text.js
@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components';
+import { rem } from 'polished';
+import { space, width, fontSize, color } from 'styled-system';
+
+import { FONT_FAMILIES } from 'config';
+
+export default styled.p`
+  ${fontSize}
+  ${color}
+  ${space}
+  ${width}
+
+  font-family: ${FONT_FAMILIES.sans};
+  font-weight: ${props => props.heavy ? 500 : 300};
+  line-height: ${rem(28)};
+`;
diff --git a/src/components/Text/index.js b/src/components/Text/index.js
new file mode 100644
index 00000000..ae48b297
--- /dev/null
+++ b/src/components/Text/index.js
@@ -0,0 +1 @@
+export { default } from './Text';
diff --git a/src/config.js b/src/config.js
index a9ddf5fe..28e63067 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1 +1,25 @@
-export const BREAKPOINTS = [0, 36, 48, 62, 75];
+import palx from 'palx';
+
+export const COLORS = palx('#4990e2');
+export const SPACE = [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72];
+export const FONT_SIZES = [11, 13, 14, 15, 17, 24, 28, 36, 40];
+
+export const BREAKPOINTS = {
+  sm: 40,
+  md: 52,
+  lg: 64,
+};
+
+export const FONT_FAMILIES = {
+  mono: '"Space Mono", monospace',
+  sans: '"Avenir Next", sans-serif',
+};
+
+export const BORDER_RADIUS = {
+  base: '4px',
+  pill: '1000px',
+};
+
+export const BOX_SHADOWS = {
+  base: '0 1px 2px rgba(0, 0, 0, 0.25)',
+};
diff --git a/src/index.css b/src/index.css
index 60893de5..8d96a28c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,8 @@
+@import url('https://fonts.googleapis.com/css?family=Space+Mono:700');
+
 html {
   box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
 }
 
 * {
diff --git a/src/locales/en.js b/src/locales/en.js
index ce84934d..361be8b5 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -1,7 +1,27 @@
 export default {
-  navigation: {
-    distribution: 'Distribution',
-    how_it_works: 'How it works',
-    blog: 'Blog',
+  buy: 'Buy Skycoin',
+  header: {
+    navigation: {
+      distribution: 'Distribution',
+      downloads: 'Downloads',
+      blog: 'Blog',
+    },
   },
+  home: {
+    hero: {
+      heading: [
+        'Foundations for',
+        'the next internet.',
+      ],
+      buy: 'Buy Skycoin',
+      wallet: {
+        get: 'Get Wallet',
+        blurb: [
+          'Wallet allows you to hold and secure Skycoin.',
+          'It\'s fast, secure, and free.',
+        ]
+      },
+      announcement: 'The next distribution event will begin on 31st May 2017. 100 coins will be distributed.',
+    }
+  }
 };
diff --git a/src/locales/index.js b/src/locales/index.js
new file mode 100644
index 00000000..f39671a1
--- /dev/null
+++ b/src/locales/index.js
@@ -0,0 +1,2 @@
+export { default as en } from './en';
+export { default as zh } from './zh';
diff --git a/src/locales/zh.js b/src/locales/zh.js
new file mode 100644
index 00000000..49bca859
--- /dev/null
+++ b/src/locales/zh.js
@@ -0,0 +1,26 @@
+export default {
+  buy: '购买Skycoin',
+  header: {
+    navigation: {
+      distribution: '分配',
+      downloads: '下载',
+      blog: '博客',
+    },
+  },
+  home: {
+    hero: {
+      heading: [
+        '下一个互联网的基础。',
+      ],
+      buy: '购买Skycoin',
+      wallet: {
+        get: '获取电子钱包',
+        blurb: [
+          '电子钱包允许您握住并固定Skycoin。',
+          '它是快速，安全和免费的。',
+        ]
+      },
+      announcement: '下一个发行活动将于2017年5月31日开始。将分发100枚硬币。',
+    }
+  }
+};
diff --git a/src/utils/media/index.js b/src/utils/media/index.js
new file mode 100644
index 00000000..a4ea5ec0
--- /dev/null
+++ b/src/utils/media/index.js
@@ -0,0 +1 @@
+export { default } from './media';
diff --git a/src/utils/media/media.js b/src/utils/media/media.js
new file mode 100644
index 00000000..6c9023b8
--- /dev/null
+++ b/src/utils/media/media.js
@@ -0,0 +1,11 @@
+import mapValues from 'lodash/mapValues';
+import { css } from 'styled-components';
+import { BREAKPOINTS } from 'config';
+
+export default mapValues(BREAKPOINTS, breakpoint => ({
+  css: (...args) => css`
+    @media (min-width: ${breakpoint}rem) {
+      ${css(...args)}
+    }
+  `,
+}));
diff --git a/yarn.lock b/yarn.lock
index 5a0fb739..b0587b1f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -263,6 +263,13 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
+async-to-gen@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/async-to-gen/-/async-to-gen-1.3.0.tgz#ec1ab301ca5881de64e8ad654cd96bfd5fcc4366"
+  dependencies:
+    babylon "^6.14.0"
+    magic-string "^0.19.0"
+
 async@2.1.4, async@^2.1.2, async@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
@@ -942,7 +949,7 @@ babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24
     lodash "^4.2.0"
     to-fast-properties "^1.0.1"
 
-babylon@^6.11.0, babylon@^6.13.0, babylon@^6.17.0, babylon@^6.17.2:
+babylon@^6.11.0, babylon@^6.13.0, babylon@^6.14.0, babylon@^6.17.0, babylon@^6.17.2:
   version "6.17.4"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a"
 
@@ -1155,6 +1162,10 @@ bytes@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.3.0.tgz#d5b680a165b6201739acb611542aabc2d8ceb070"
 
+bytes@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
+
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
@@ -1256,6 +1267,10 @@ chokidar@^1.4.3, chokidar@^1.6.0:
   optionalDependencies:
     fsevents "^1.0.0"
 
+chroma-js@^1.2.1:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-1.3.4.tgz#93a7c19f287960285cc3fdebb205b8ea1a0f04f9"
+
 ci-info@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.0.0.tgz#dc5285f2b4e251821683681c381c3388f46ec534"
@@ -2810,6 +2825,12 @@ he@1.1.x:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
+hidden-styled@^1.0.0-0:
+  version "1.0.0-0"
+  resolved "https://registry.yarnpkg.com/hidden-styled/-/hidden-styled-1.0.0-0.tgz#dddf7a0c60658d8a7fadfabfb7a3ca04894200f5"
+  dependencies:
+    styled-components "^2.1.0"
+
 history@^4.5.1, history@^4.6.0:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/history/-/history-4.6.3.tgz#6d723a8712c581d6bef37e8c26f4aedc6eb86967"
@@ -2960,6 +2981,10 @@ iconv-lite@0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
 
+iconv-lite@0.4.15:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+
 iconv-lite@^0.4.17, iconv-lite@~0.4.13:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
@@ -3095,6 +3120,10 @@ is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
+is-async-supported@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-async-supported/-/is-async-supported-1.2.0.tgz#20d58ac4d6707eb1cb3712dd38480c0536f27c07"
+
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -3329,7 +3358,7 @@ isomorphic-fetch@^2.1.1:
     node-fetch "^1.0.1"
     whatwg-fetch ">=0.10.0"
 
-isstream@~0.1.2:
+isstream@0.1.2, isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
@@ -3846,6 +3875,10 @@ lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
+lodash.omit@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
+
 lodash.template@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
@@ -3903,6 +3936,12 @@ macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
 
+magic-string@^0.19.0:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.19.1.tgz#14d768013caf2ec8fdea16a49af82fc377e75201"
+  dependencies:
+    vlq "^0.2.1"
+
 makeerror@1.0.x:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
@@ -3961,6 +4000,17 @@ methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
 
+micro@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/micro/-/micro-6.2.1.tgz#064d9e807cf8d132a820efc2ace7bad8d03a5c54"
+  dependencies:
+    async-to-gen "1.3.0"
+    is-async-supported "1.2.0"
+    isstream "0.1.2"
+    media-typer "0.3.0"
+    minimist "1.2.0"
+    raw-body "2.2.0"
+
 micromatch@^2.1.5, micromatch@^2.3.11:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
@@ -4036,7 +4086,7 @@ minimist@0.0.8, minimist@~0.0.1:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
-minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
+minimist@1.2.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
@@ -4360,6 +4410,13 @@ pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
 
+palx@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/palx/-/palx-1.0.2.tgz#5a0f59ac542a6a9dd7422f29ed3a31bab5bfe0c4"
+  dependencies:
+    chroma-js "^1.2.1"
+    micro "^6.1.0"
+
 param-case@2.1.x:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
@@ -4487,6 +4544,10 @@ pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
 
+polished@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-1.2.1.tgz#83c18a85bf9d7023477cfc7049763b657d50f0f7"
+
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -4919,6 +4980,14 @@ range-parser@^1.0.3, range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
 
+raw-body@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.2.0.tgz#994976cf6a5096a41162840492f0bdc5d6e7fb96"
+  dependencies:
+    bytes "2.4.0"
+    iconv-lite "0.4.15"
+    unpipe "1.0.0"
+
 rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
@@ -4928,6 +4997,13 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-create-component-from-tag-prop@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-create-component-from-tag-prop/-/react-create-component-from-tag-prop-1.2.1.tgz#d93c304b279a3160e6eca3b8e3a2348bdca11a59"
+  dependencies:
+    lodash.omit "^4.5.0"
+    react "^15.5.4"
+
 react-dev-utils@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-3.0.0.tgz#3677f37718ba0cae892ba9c01fe54d1622e6ef7c"
@@ -5070,7 +5146,7 @@ react-snapshot@^1.1.0:
     react "^15.3.0"
     react-dom "^15.3.0"
 
-react@^15.3.0, react@^15.6.1:
+react@^15.3.0, react@^15.5.4, react@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
   dependencies:
@@ -5770,7 +5846,7 @@ styled-components@^2.0.1, styled-components@^2.1.0:
     stylis "^3.0.19"
     supports-color "^3.2.3"
 
-styled-system@^1.0.0-2:
+styled-system@^1.0.0-2, styled-system@^1.0.0-4:
   version "1.0.0-4"
   resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-1.0.0-4.tgz#cc881fb392b794f3619f9f1300e254e5711dac27"
   dependencies:
@@ -6030,7 +6106,7 @@ universalify@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.0.tgz#9eb1c4651debcc670cc94f1a75762332bb967778"
 
-unpipe@~1.0.0:
+unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
 
@@ -6154,6 +6230,10 @@ verror@1.3.6:
   dependencies:
     extsprintf "1.0.2"
 
+vlq@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.2.tgz#e316d5257b40b86bb43cb8d5fea5d7f54d6b0ca1"
+
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
