diff --git a/.babelrc b/.babelrc
index 487714b6..730f18c9 100644
--- a/.babelrc
+++ b/.babelrc
@@ -15,5 +15,5 @@
     "react",
     "stage-0"
   ],
-  "plugins": [["module-resolver", { "root": ["src"] }], "recharts"]
+  "plugins": [["module-resolver", { "root": ["src"] }], "recharts", "styled-components"]
 }
diff --git a/package.json b/package.json
index 343eb359..9c97d946 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "@fortawesome/react-fontawesome": "^0.0.17",
     "@ledgerhq/common": "2.3.0",
     "@ledgerhq/currencies": "^2.3.0",
-    "@ledgerhq/hw-app-btc": "^3.0.2",
+    "@ledgerhq/hw-app-btc": "^3.0.8",
     "@ledgerhq/hw-app-eth": "^3.0.0",
     "@ledgerhq/hw-transport": "^3.0.0",
     "@ledgerhq/hw-transport-node-hid": "^3.0.0",
@@ -105,6 +105,7 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-recharts": "^1.1.1",
+    "babel-plugin-styled-components": "^1.5.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.24.1",
diff --git a/src/components/GlobalSearch.js b/src/components/GlobalSearch.js
index 361c5d4b..cadda611 100644
--- a/src/components/GlobalSearch.js
+++ b/src/components/GlobalSearch.js
@@ -17,7 +17,7 @@ const Input = styled.input`
   }
 `
 
-class GlobalSearch extends PureComponent {
+class GlobalSearch extends PureComponent<{}> {
   _input = null
 
   focusInput = () => {
diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js
index 1014730a..9ab932e8 100644
--- a/src/components/SideBar/Item.js
+++ b/src/components/SideBar/Item.js
@@ -28,17 +28,20 @@ const mapDispatchToProps = {
 }
 
 const Container = styled(Tabbable).attrs({
-  horizontal: true,
   align: 'center',
-  px: 2,
-  py: 1,
-  flow: 2,
+  borderRadius: 1,
+  ff: 'Open Sans|SemiBold',
+  flow: 3,
+  horizontal: true,
+  px: 3,
 })`
-  border-radius: 5px;
   cursor: pointer;
-  color: ${p => (p.isActive ? p.theme.colors.shark : p.theme.colors.grey)};
-  background: ${p => (p.isActive ? p.theme.colors.argile : '')};
+  color: ${p => p.theme.colors.dark};
+  opacity: ${p => (p.isActive ? 1 : 0.4)};
+  background: ${p => (p.isActive ? p.theme.colors.paleGrey : '')};
+  height: ${p => (p.big ? 50 : 36)}px;
   outline: none;
+
   &:hover,
   &:focus {
     background: ${p => (p.isActive ? p.theme.colors.argile : p.theme.colors.cream)};
@@ -51,16 +54,18 @@ type Props = {
   modal?: string | null,
   desc?: string | null,
   icon?: string | null,
+  big?: boolean,
   location: Location,
   push: Function,
   openModal: Function,
 }
 
-function Item({ children, desc, icon, linkTo, push, location, modal, openModal }: Props) {
+function Item({ big, children, desc, icon, linkTo, push, location, modal, openModal }: Props) {
   const { pathname } = location
   const isActive = pathname === linkTo
   return (
     <Container
+      big={big}
       onClick={
         linkTo
           ? isActive ? undefined : () => push(linkTo)
@@ -68,24 +73,23 @@ function Item({ children, desc, icon, linkTo, push, location, modal, openModal }
       }
       isActive={isActive}
     >
-      {icon && <Icon fontSize={2} color={isActive ? 'blue' : void 0} name={icon} />}
-      <div>
-        <Text fontSize={1} fontWeight="bold">
-          {children}
-        </Text>
+      {icon && <Icon fontSize={5} color={isActive ? 'blue' : void 0} name={icon} />}
+      <Box justify="center">
+        <Text fontSize={4}>{children}</Text>
         {desc && (
-          <Box color="steel" fontSize={0}>
+          <Box color="steel" fontSize={3}>
             {desc}
           </Box>
         )}
-      </div>
+      </Box>
     </Container>
   )
 }
 
 Item.defaultProps = {
-  icon: null,
+  big: false,
   desc: null,
+  icon: null,
   linkTo: null,
   modal: null,
 }
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
index 7e68309e..8eeb3398 100644
--- a/src/components/SideBar/index.js
+++ b/src/components/SideBar/index.js
@@ -18,20 +18,20 @@ import { getVisibleAccounts } from 'reducers/accounts'
 import { formatBTC } from 'helpers/format'
 
 import Box, { Tabbable } from 'components/base/Box'
-import Bar from 'components/base/Bar'
 import GrowScroll from 'components/base/GrowScroll'
 import Icon from 'components/base/Icon'
 import Text from 'components/base/Text'
 import Item from './Item'
 
 const CapsSubtitle = styled(Box).attrs({
-  px: 3,
-  fontSize: 0,
-  color: 'grey',
+  color: 'dark',
+  ff: 'Museo Sans|ExtraBold',
+  fontSize: 1,
+  px: 4,
 })`
   cursor: default;
+  letter-spacing: 2px;
   text-transform: uppercase;
-  font-weight: bold;
 `
 
 const Container = styled(Box)`
@@ -84,10 +84,10 @@ class SideBar extends PureComponent<Props> {
 
     return (
       <Container bg="white">
-        <Box flow={3} pt={4} grow>
-          <Box flow={2}>
+        <Box flow={7} pt={8} grow>
+          <Box flow={4}>
             <CapsSubtitle>{t('sidebar.menu')}</CapsSubtitle>
-            <Box px={2} flow={1}>
+            <Box px={4} flow={2}>
               <Item icon="chart-bar" linkTo="/">
                 {t('dashboard.title')}
               </Item>
@@ -102,21 +102,21 @@ class SideBar extends PureComponent<Props> {
               </Item>
             </Box>
           </Box>
-          <Bar color="cream" mx={3} size={2} />
-          <Box flow={2} grow>
+          <Box flow={4} grow pt={1}>
             <CapsSubtitle horizontal align="center">
               <Box grow>{t('sidebar.accounts')}</Box>
               <PlusBtn onClick={() => openModal(MODAL_ADD_ACCOUNT)}>
                 <Icon name="plus-circle" />
               </PlusBtn>
             </CapsSubtitle>
-            <GrowScroll pb={2} px={2} flow={1}>
+            <GrowScroll pb={4} px={4} flow={2}>
               {accounts.map(account => (
                 <Item
-                  linkTo={`/account/${account.id}`}
+                  big
                   desc={formatBTC(account.data ? account.data.balance : 0)}
-                  key={account.id}
                   icon={{ iconName: 'btc', prefix: 'fab' }}
+                  key={account.id}
+                  linkTo={`/account/${account.id}`}
                 >
                   {account.name}
                 </Item>
diff --git a/src/components/base/Box/index.js b/src/components/base/Box/index.js
index 2a3601ff..1aa4cb48 100644
--- a/src/components/base/Box/index.js
+++ b/src/components/base/Box/index.js
@@ -5,33 +5,30 @@ import styled from 'styled-components'
 import {
   alignItems,
   borderColor,
+  borderRadius,
   borderWidth,
   color,
+  flex,
   fontSize,
-  fontWeight,
   justifyContent,
   space,
-  flex,
 } from 'styled-system'
 
-import Text from 'components/base/Text'
-
-import { space as spaceScale } from 'styles/theme'
+import fontFamily from 'styles/styled/fontFamily'
 
-function getSpace(n) {
-  return `${spaceScale[n] || n}px`
-}
+import Text from 'components/base/Text'
 
 const Box = styled.div`
-  ${space};
-  ${flex};
-  ${fontSize};
-  ${fontWeight};
-  ${color};
   ${alignItems};
-  ${justifyContent};
   ${borderColor};
+  ${borderRadius};
   ${borderWidth};
+  ${color};
+  ${flex};
+  ${fontFamily};
+  ${fontSize};
+  ${justifyContent};
+  ${space};
 
   display: flex;
   flex-shrink: ${p => (p.noShrink === true ? '0' : p.shrink === true ? '1' : '')};
@@ -51,8 +48,8 @@ const Box = styled.div`
     `};
 
   > * + * {
-    margin-top: ${p => (!p.horizontal && p.flow ? getSpace(p.flow) : '')};
-    margin-left: ${p => (p.horizontal && p.flow ? getSpace(p.flow) : '')};
+    margin-top: ${p => (!p.horizontal && p.flow ? `${p.theme.space[p.flow]}px` : '')};
+    margin-left: ${p => (p.horizontal && p.flow ? `${p.theme.space[p.flow]}px` : '')};
   }
 `
 
diff --git a/src/styles/global.js b/src/styles/global.js
index d56e70d9..c2ee932d 100644
--- a/src/styles/global.js
+++ b/src/styles/global.js
@@ -44,16 +44,26 @@ const fonts = {
       weight: 100,
       file: 'museosans/MuseoSans-ExtraLight',
     },
-    {
-      style: 'italic',
-      weight: 100,
-      file: 'museosans/MuseoSans-ExtraLightItalic',
-    },
     {
       style: 'normal',
       weight: 300,
       file: 'museosans/MuseoSans-Light',
     },
+    {
+      style: 'normal',
+      weight: 500,
+      file: 'museosans/MuseoSans-Regular',
+    },
+    {
+      style: 'normal',
+      weight: 700,
+      file: 'museosans/MuseoSans-Bold',
+    },
+    {
+      style: 'normal',
+      weight: 900,
+      file: 'museosans/MuseoSans-ExtraBold',
+    },
   ],
 }
 
@@ -70,6 +80,7 @@ injectGlobal`
   ${transformFonts(fonts)};
 
   * {
+    -webkit-font-smoothing: antialiased;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
diff --git a/src/styles/styled/fontFamily.js b/src/styles/styled/fontFamily.js
new file mode 100644
index 00000000..1533fc91
--- /dev/null
+++ b/src/styles/styled/fontFamily.js
@@ -0,0 +1,16 @@
+export default props => {
+  const prop = props.ff
+
+  if (!prop) {
+    return null
+  }
+
+  const [font, type = 'Regular'] = prop.split('|')
+  const { style, weight } = props.theme.fontFamilies[font][type]
+
+  return {
+    fontFamily: font,
+    fontWeight: weight,
+    fontStyle: style,
+  }
+}
diff --git a/src/styles/theme.js b/src/styles/theme.js
index c6143812..bc3df347 100644
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -2,13 +2,64 @@
 
 export const space = [0, 5, 10, 15, 20, 30, 40, 50, 70]
 export const fontSizes = [8, 9, 10, 11, 13, 16, 18, 32]
+export const radii = [0, 4]
+
+export const fontFamilies = {
+  'Open Sans': {
+    Light: {
+      weight: 300,
+      style: 'normal',
+    },
+    Regular: {
+      weight: 400,
+      style: 'normal',
+    },
+    SemiBold: {
+      weight: 600,
+      style: 'normal',
+    },
+    Bold: {
+      weight: 700,
+      style: 'normal',
+    },
+    ExtraBold: {
+      weight: 800,
+      style: 'normal',
+    },
+  },
+
+  'Museo Sans': {
+    ExtraLight: {
+      weight: 100,
+      style: 'normal',
+    },
+    Light: {
+      weight: 300,
+      style: 'normal',
+    },
+    Regular: {
+      weight: 500,
+      style: 'normal',
+    },
+    Bold: {
+      weight: 700,
+      style: 'normal',
+    },
+    ExtraBold: {
+      weight: 900,
+      style: 'normal',
+    },
+  },
+}
 
 export default {
   sizes: {
-    sideBarWidth: 250,
+    sideBarWidth: 230,
   },
-  space,
+  radii,
+  fontFamilies,
   fontSizes,
+  space,
   colors: {
     transparent: 'transparent',
 
@@ -29,7 +80,9 @@ export default {
     shark: '#666666',
     steel: '#767676',
 
+    dark: '#1d2028',
     dodgerBlue: '#4b84ff',
+    paleGrey: '#f7f8fa',
     warmGrey: '#999999',
   },
 }
diff --git a/yarn.lock b/yarn.lock
index 025c2200..a136fc74 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -38,6 +38,12 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/helper-annotate-as-pure@^7.0.0-beta.37":
+  version "7.0.0-beta.39"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.39.tgz#cf9506c721c838806ca5eabe15783507ba2edce0"
+  dependencies:
+    "@babel/types" "7.0.0-beta.39"
+
 "@babel/helper-function-name@7.0.0-beta.36":
   version "7.0.0-beta.36"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.36.tgz#366e3bc35147721b69009f803907c4d53212e88d"
@@ -97,6 +103,14 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@7.0.0-beta.39":
+  version "7.0.0-beta.39"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.39.tgz#2ea0d97efe4781688751edc68cde640d6559938c"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@fortawesome/fontawesome-common-types@^0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.2.tgz#d6aa075058f0c984d6e2ebcbc0052c1f7f9bea72"
@@ -152,9 +166,9 @@
   dependencies:
     querystring "^0.2.0"
 
-"@ledgerhq/hw-app-btc@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-btc/-/hw-app-btc-3.0.2.tgz#4bad5d65eeef3711083d681a19d58c63cc12fe02"
+"@ledgerhq/hw-app-btc@^3.0.8":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-btc/-/hw-app-btc-3.0.8.tgz#13609bcd59ebbb6d1246f88eb37e93091d466493"
   dependencies:
     "@ledgerhq/hw-transport" "^3.0.0"
     create-hash "^1.1.3"
@@ -1124,6 +1138,14 @@ babel-plugin-recharts@^1.1.1:
     babel-types "^6.19.0"
     babylon "^6.14.1"
 
+babel-plugin-styled-components@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.5.0.tgz#4549f28a19fb05170aa9ee429b4de0eac2d2401d"
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0-beta.37"
+    babel-types "^6.26.0"
+    stylis "^3.0.0"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -8827,7 +8849,7 @@ stylis-rule-sheet@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c"
 
-stylis@^3.4.0:
+stylis@^3.0.0, stylis@^3.4.0:
   version "3.4.8"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.8.tgz#94380babbcd4c75726215794ca985b38ec96d1a3"