diff --git a/src/components/SettingsPage/Display.js b/src/components/SettingsPage/Display.js
deleted file mode 100644
index db3f7dc6..00000000
--- a/src/components/SettingsPage/Display.js
+++ /dev/null
@@ -1,98 +0,0 @@
-// @flow
-
-import React, { PureComponent } from 'react'
-
-import type { SettingsDisplay, T } from 'types/common'
-
-import Box, { Card } from 'components/base/Box'
-import Button from 'components/base/Button'
-import Label from 'components/base/Label'
-import Select from 'components/base/Select'
-
-type InputValue = SettingsDisplay
-
-type Props = {
-  t: T,
-  settings: SettingsDisplay,
-  onSaveSettings: Function,
-}
-
-type State = {
-  inputValue: InputValue,
-}
-
-class TabProfile extends PureComponent<Props, State> {
-  state = {
-    inputValue: {
-      language: this.props.settings.language,
-    },
-  }
-
-  getDatas() {
-    const { t } = this.props
-
-    return {
-      languages: [
-        {
-          key: 'en',
-          name: t('language:en'),
-        },
-        {
-          key: 'fr',
-          name: t('language:fr'),
-        },
-      ],
-    }
-  }
-
-  handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>
-    this.setState(prev => ({
-      inputValue: {
-        ...prev.inputValue,
-        [key]: value,
-      },
-    }))
-
-  handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
-    e.preventDefault()
-
-    const { onSaveSettings } = this.props
-    const { inputValue } = this.state
-
-    onSaveSettings({
-      ...inputValue,
-    })
-  }
-
-  render() {
-    const { t } = this.props
-    const { inputValue } = this.state
-
-    const { languages } = this.getDatas()
-
-    const currentLanguage = languages.find(l => l.key === inputValue.language)
-
-    return (
-      <form onSubmit={this.handleSubmit}>
-        <Card flow={3}>
-          <Box flow={1}>
-            <Label>{t('settings:display.language')}</Label>
-            <Select
-              onChange={item => this.handleChangeInput('language')(item.key)}
-              renderSelected={item => item && item.name}
-              value={currentLanguage}
-              items={languages}
-            />
-          </Box>
-          <Box horizontal justifyContent="flex-end">
-            <Button primary type="submit">
-              {t('common:save')}
-            </Button>
-          </Box>
-        </Card>
-      </form>
-    )
-  }
-}
-
-export default TabProfile
diff --git a/src/components/SettingsPage/Money.js b/src/components/SettingsPage/Money.js
deleted file mode 100644
index 9028d1c6..00000000
--- a/src/components/SettingsPage/Money.js
+++ /dev/null
@@ -1,88 +0,0 @@
-// @flow
-
-import React, { PureComponent } from 'react'
-import { getFiatUnit } from '@ledgerhq/currencies'
-
-import type { SettingsMoney, T } from 'types/common'
-
-import Box, { Card } from 'components/base/Box'
-import Button from 'components/base/Button'
-import Label from 'components/base/Label'
-import Select from 'components/base/Select'
-
-const counterValues = ['USD', 'EUR', 'JPY', 'GBP'].sort().map(c => {
-  const { name } = getFiatUnit(c)
-  return {
-    key: c,
-    name,
-  }
-})
-
-type InputValue = SettingsMoney
-
-type Props = {
-  t: T,
-  settings: SettingsMoney,
-  onSaveSettings: Function,
-}
-
-type State = {
-  inputValue: InputValue,
-}
-
-class TabProfile extends PureComponent<Props, State> {
-  state = {
-    inputValue: {
-      counterValue: this.props.settings.counterValue,
-    },
-  }
-
-  handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>
-    this.setState(prev => ({
-      inputValue: {
-        ...prev.inputValue,
-        [key]: value,
-      },
-    }))
-
-  handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
-    e.preventDefault()
-
-    const { onSaveSettings } = this.props
-    const { inputValue } = this.state
-
-    onSaveSettings({
-      ...inputValue,
-    })
-  }
-
-  render() {
-    const { t } = this.props
-    const { inputValue } = this.state
-
-    const currentCounterValues = counterValues.find(l => l.key === inputValue.counterValue)
-
-    return (
-      <form onSubmit={this.handleSubmit}>
-        <Card flow={3}>
-          <Box flow={1}>
-            <Label>{t('settings:display.counterValue')}</Label>
-            <Select
-              onChange={item => this.handleChangeInput('counterValue')(item.key)}
-              renderSelected={item => item && item.name}
-              value={currentCounterValues}
-              items={counterValues}
-            />
-          </Box>
-          <Box horizontal justifyContent="flex-end">
-            <Button primary type="submit">
-              {t('common:save')}
-            </Button>
-          </Box>
-        </Card>
-      </form>
-    )
-  }
-}
-
-export default TabProfile
diff --git a/src/components/SettingsPage/Profile.js b/src/components/SettingsPage/Profile.js
deleted file mode 100644
index 1b7b50fe..00000000
--- a/src/components/SettingsPage/Profile.js
+++ /dev/null
@@ -1,124 +0,0 @@
-// @flow
-
-import React, { PureComponent } from 'react'
-import { connect } from 'react-redux'
-import bcrypt from 'bcryptjs'
-
-import get from 'lodash/get'
-import set from 'lodash/set'
-
-import { setEncryptionKey } from 'helpers/db'
-
-import type { SettingsProfile, T } from 'types/common'
-
-import { unlock } from 'reducers/application'
-
-import Box, { Card } from 'components/base/Box'
-import Input from 'components/base/Input'
-import CheckBox from 'components/base/CheckBox'
-import Button from 'components/base/Button'
-import Label from 'components/base/Label'
-
-type InputValue = SettingsProfile
-
-type Props = {
-  t: T,
-  settings: SettingsProfile,
-  onSaveSettings: Function,
-  unlock: Function,
-}
-type State = {
-  inputValue: InputValue,
-}
-
-const mapDispatchToProps = {
-  unlock,
-}
-
-class TabProfile extends PureComponent<Props, State> {
-  state = {
-    inputValue: {
-      password: {
-        ...this.props.settings.password,
-        value: undefined,
-      },
-    },
-  }
-
-  handleChangeInput = (key: string) => (value: $Values<InputValue>) =>
-    this.setState(prev => ({
-      inputValue: {
-        ...set(prev.inputValue, key, value),
-      },
-    }))
-
-  handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
-    e.preventDefault()
-
-    const { onSaveSettings, unlock } = this.props
-    const { inputValue } = this.state
-
-    const settings = {
-      ...inputValue,
-      password: {
-        ...inputValue.password,
-        value: '',
-      },
-    }
-
-    const password = get(inputValue, 'password', {})
-
-    if (password.state === true && password.value.trim() !== '') {
-      settings.password.value = bcrypt.hashSync(password.value, 8)
-      setEncryptionKey('accounts', password.value)
-    } else {
-      setEncryptionKey('accounts', undefined)
-    }
-
-    unlock()
-
-    onSaveSettings(settings)
-  }
-
-  render() {
-    const { t } = this.props
-    const { inputValue } = this.state
-
-    const isPasswordChecked = get(inputValue, 'password.state', false)
-    return (
-      <form onSubmit={this.handleSubmit}>
-        <Card flow={3}>
-          <label>
-            <Box
-              horizontal
-              alignItems="center"
-              flow={2}
-              style={{ cursor: 'pointer' }}
-              onClick={() => this.handleChangeInput('password.state')(!isPasswordChecked)}
-            >
-              <CheckBox isChecked={isPasswordChecked} />
-              <div>{t('settings:profile.protectWithPassword')}</div>
-            </Box>
-          </label>
-          {get(inputValue, 'password.state') === true && (
-            <Box flow={1}>
-              <Label>{t('settings:profile.password')}</Label>
-              <Input
-                value={get(inputValue, 'password.value', '')}
-                onChange={this.handleChangeInput('password.value')}
-                type="password"
-              />
-            </Box>
-          )}
-          <Box horizontal justifyContent="flex-end">
-            <Button primary type="submit">
-              {t('common:save')}
-            </Button>
-          </Box>
-        </Card>
-      </form>
-    )
-  }
-}
-
-export default connect(null, mapDispatchToProps)(TabProfile)
diff --git a/src/components/SettingsPage/SettingsSection.js b/src/components/SettingsPage/SettingsSection.js
new file mode 100644
index 00000000..d555dc5a
--- /dev/null
+++ b/src/components/SettingsPage/SettingsSection.js
@@ -0,0 +1,95 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import { rgba } from 'styles/helpers'
+
+import Box, { Card } from 'components/base/Box'
+
+export const SettingsSection = styled(Card).attrs({ p: 0 })``
+
+const SettingsSectionHeaderContainer = styled(Box).attrs({
+  p: 4,
+  horizontal: true,
+  align: 'center',
+})`
+  border-bottom: 1px solid ${p => p.theme.colors.lightFog};
+  line-height: normal;
+`
+
+const RoundIconContainer = styled(Box).attrs({
+  align: 'center',
+  justify: 'center',
+  bg: p => rgba(p.theme.colors.wallet, 0.2),
+  color: 'wallet',
+})`
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+`
+
+export const SettingsSectionBody = styled(Box)`
+  > * + * {
+    border-top: 1px solid ${p => p.theme.colors.lightFog};
+  }
+`
+
+export function SettingsSectionHeader({
+  title,
+  desc,
+  icon,
+}: {
+  title: string,
+  desc: string,
+  icon: any,
+}) {
+  return (
+    <SettingsSectionHeaderContainer>
+      <RoundIconContainer mr={3}>{icon}</RoundIconContainer>
+      <Box>
+        <Box ff="Museo Sans|Regular" color="dark">
+          {title}
+        </Box>
+        <Box ff="Open Sans" fontSize={3}>
+          {desc}
+        </Box>
+      </Box>
+    </SettingsSectionHeaderContainer>
+  )
+}
+
+const SettingsSectionRowContainer = styled(Box).attrs({ p: 4, horizontal: true, align: 'center' })`
+  cursor: ${p => (p.onClick ? 'pointer' : '')};
+`
+
+export function SettingsSectionRow({
+  title,
+  desc,
+  children,
+  onClick,
+}: {
+  title: string,
+  desc: string,
+  children?: any,
+  onClick?: ?Function,
+}) {
+  return (
+    <SettingsSectionRowContainer onClick={onClick}>
+      <Box grow>
+        <Box ff="Open Sans|SemiBold" color="dark" fontSize={4}>
+          {title}
+        </Box>
+        <Box ff="Open Sans" fontSize={3} color="grey">
+          {desc}
+        </Box>
+      </Box>
+      <Box>{children}</Box>
+    </SettingsSectionRowContainer>
+  )
+}
+
+SettingsSectionRow.defaultProps = {
+  children: null,
+  onClick: null,
+}
diff --git a/src/components/SettingsPage/index.js b/src/components/SettingsPage/index.js
index cfcc4bbf..3c8bd4b6 100644
--- a/src/components/SettingsPage/index.js
+++ b/src/components/SettingsPage/index.js
@@ -4,7 +4,6 @@ import React, { PureComponent } from 'react'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
 import { translate } from 'react-i18next'
-import moment from 'moment'
 
 import type { Settings, T } from 'types/common'
 import type { SaveSettings } from 'actions/settings'
@@ -16,10 +15,10 @@ import { fetchCounterValues } from 'actions/counterValues'
 import Pills from 'components/base/Pills'
 import Box from 'components/base/Box'
 
-import TabDisplay from './Display'
-import TabProfile from './Profile'
-import TabTools from './Tools'
-import TabMoney from './Money'
+import SectionDisplay from './sections/Display'
+import SectionCurrencies from './sections/Currencies'
+import SectionProfile from './sections/Profile'
+import SectionAbout from './sections/About'
 
 const mapStateToProps = state => ({
   settings: state.settings,
@@ -55,68 +54,45 @@ class SettingsPage extends PureComponent<Props, State> {
   }
 
   handleSaveSettings = newSettings => {
-    const { fetchCounterValues, saveSettings, i18n, settings } = this.props
+    const { fetchCounterValues, saveSettings, settings } = this.props
 
     saveSettings(newSettings)
 
-    if (newSettings.language !== settings.language) {
-      i18n.changeLanguage(newSettings.language)
-      moment.locale(newSettings.language)
-    }
-
     if (newSettings.counterValue !== settings.counterValue) {
       fetchCounterValues()
     }
   }
 
   render() {
-    const { settings, t } = this.props
+    const { settings, t, i18n, saveSettings } = this.props
     const { tab } = this.state
 
     const props = {
       t,
       settings,
-      onSaveSettings: this.handleSaveSettings,
+      saveSettings,
     }
 
     this._items = [
       {
         key: 'display',
         label: t('settings:tabs.display'),
-        value: () => <TabDisplay {...props} />,
-      },
-      {
-        key: 'money',
-        label: t('settings:tabs.money'),
-        value: () => <TabMoney {...props} />,
-      },
-      {
-        key: 'material',
-        isDisabled: true,
-        label: t('settings:tabs.material'),
-        value: () => <div>{'Matériel'}</div>,
+        value: () => <SectionDisplay {...props} i18n={i18n} />,
       },
       {
-        key: 'app',
-        isDisabled: true,
-        label: t('settings:tabs.app'),
-        value: () => <div>{'App (beta)'}</div>,
-      },
-      {
-        key: 'tools',
-        label: t('settings:tabs.tools'),
-        value: () => <TabTools {...props} />,
-      },
-      {
-        key: 'blockchain',
-        isDisabled: true,
-        label: t('settings:tabs.blockchain'),
-        value: () => <div>{'Blockchain'}</div>,
+        key: 'currencies',
+        label: t('settings:tabs.currencies'),
+        value: () => <SectionCurrencies {...props} />,
       },
       {
         key: 'profile',
         label: t('settings:tabs.profile'),
-        value: () => <TabProfile {...props} />,
+        value: () => <SectionProfile {...props} />,
+      },
+      {
+        key: 'about',
+        label: t('settings:tabs.about'),
+        value: () => <SectionAbout {...props} />,
       },
     ]
 
@@ -124,10 +100,10 @@ class SettingsPage extends PureComponent<Props, State> {
 
     return (
       <Box>
-        <Box fontSize={7} mb={4}>
+        <Box ff="Museo Sans|Regular" color="dark" fontSize={7} mb={5}>
           {t('settings:title')}
         </Box>
-        <Pills mb={6} items={this._items} activeKey={item.key} onChange={this.handleChangeTab} />
+        <Pills mb={4} items={this._items} activeKey={item.key} onChange={this.handleChangeTab} />
         {item.value && item.value()}
       </Box>
     )
diff --git a/src/components/SettingsPage/sections/About.js b/src/components/SettingsPage/sections/About.js
new file mode 100644
index 00000000..e8fba224
--- /dev/null
+++ b/src/components/SettingsPage/sections/About.js
@@ -0,0 +1,62 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { shell } from 'electron'
+
+import type { T } from 'types/common'
+
+import IconHelp from 'icons/Help'
+import IconChevronRight from 'icons/ChevronRight'
+
+import {
+  SettingsSection as Section,
+  SettingsSectionHeader as Header,
+  SettingsSectionBody as Body,
+  SettingsSectionRow as Row,
+} from '../SettingsSection'
+
+type Props = {
+  t: T,
+}
+
+class SectionAbout extends PureComponent<Props> {
+  handleOpenLink = (url: string) => () => shell.openExternal(url)
+
+  render() {
+    const { t } = this.props
+    return (
+      <Section>
+        <Header
+          icon={<IconHelp size={16} />}
+          title={t('settings:tabs.about')}
+          desc="Lorem ipsum dolor sit amet"
+        />
+        <Body>
+          <Row
+            onClick={this.handleOpenLink('http://google.com')}
+            title={t('settings:about.faq')}
+            desc={t('settings:about.faqDesc')}
+          >
+            <IconChevronRight size={16} />
+          </Row>
+          <Row
+            onClick={this.handleOpenLink('http://google.com')}
+            title={t('settings:about.contactUs')}
+            desc={t('settings:about.contactUsDesc')}
+          >
+            <IconChevronRight size={16} />
+          </Row>
+          <Row
+            onClick={this.handleOpenLink('http://google.com')}
+            title={t('settings:about.terms')}
+            desc={t('settings:about.termsDesc')}
+          >
+            <IconChevronRight size={16} />
+          </Row>
+        </Body>
+      </Section>
+    )
+  }
+}
+
+export default SectionAbout
diff --git a/src/components/SettingsPage/sections/Currencies.js b/src/components/SettingsPage/sections/Currencies.js
new file mode 100644
index 00000000..4a6590a4
--- /dev/null
+++ b/src/components/SettingsPage/sections/Currencies.js
@@ -0,0 +1,53 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+
+import type { T } from 'types/common'
+
+import IconCurrencies from 'icons/Currencies'
+
+import {
+  SettingsSection as Section,
+  SettingsSectionHeader as Header,
+  SettingsSectionBody as Body,
+  SettingsSectionRow as Row,
+} from '../SettingsSection'
+
+type Props = {
+  t: T,
+}
+
+class TabCurrencies extends PureComponent<Props> {
+  render() {
+    const { t } = this.props
+    return (
+      <Section>
+        <Header
+          icon={<IconCurrencies size={16} />}
+          title={t('settings:tabs.currencies')}
+          desc="Lorem ipsum dolor sit amet"
+        />
+        <Body>
+          <Row
+            title={t('settings:currencies.confirmationsToSpend')}
+            desc={t('settings:currencies.confirmationsToSpendDesc')}
+          />
+          <Row
+            title={t('settings:currencies.confirmationsNb')}
+            desc={t('settings:currencies.confirmationsNbDesc')}
+          />
+          <Row
+            title={t('settings:currencies.transactionsFees')}
+            desc={t('settings:currencies.transactionsFeesDesc')}
+          />
+          <Row
+            title={t('settings:currencies.explorer')}
+            desc={t('settings:currencies.explorerDesc')}
+          />
+        </Body>
+      </Section>
+    )
+  }
+}
+
+export default TabCurrencies
diff --git a/src/components/SettingsPage/sections/Display.js b/src/components/SettingsPage/sections/Display.js
new file mode 100644
index 00000000..d2373463
--- /dev/null
+++ b/src/components/SettingsPage/sections/Display.js
@@ -0,0 +1,93 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import moment from 'moment'
+
+import type { Settings, T } from 'types/common'
+
+import Select from 'components/base/Select'
+import IconDisplay from 'icons/Display'
+
+import {
+  SettingsSection as Section,
+  SettingsSectionHeader as Header,
+  SettingsSectionBody as Body,
+  SettingsSectionRow as Row,
+} from '../SettingsSection'
+
+type Props = {
+  t: T,
+  settings: Settings,
+  saveSettings: Function,
+  i18n: Object,
+}
+
+type State = {
+  cachedLanguageKey: string,
+}
+
+class TabProfile extends PureComponent<Props, State> {
+  state = {
+    cachedLanguageKey: this.props.settings.language,
+  }
+
+  getDatas() {
+    const { t } = this.props
+    return {
+      languages: [{ key: 'en', name: t('language:en') }, { key: 'fr', name: t('language:fr') }],
+    }
+  }
+
+  handleChangeLanguage = (languageKey: string) => {
+    const { i18n, saveSettings } = this.props
+    this.setState({ cachedLanguageKey: languageKey })
+    window.requestIdleCallback(() => {
+      i18n.changeLanguage(languageKey)
+      moment.locale(languageKey)
+      saveSettings({ language: languageKey })
+    })
+  }
+
+  render() {
+    const { t } = this.props
+    const { cachedLanguageKey } = this.state
+    const { languages } = this.getDatas()
+    const currentLanguage = languages.find(l => l.key === cachedLanguageKey)
+
+    return (
+      <Section>
+        <Header
+          icon={<IconDisplay size={16} />}
+          title={t('settings:tabs.display')}
+          desc="Lorem ipsum dolor sit amet"
+        />
+        <Body>
+          <Row
+            title={t('settings:display.counterValue')}
+            desc={t('settings:display.counterValueDesc')}
+          >
+            {'-'}
+          </Row>
+          <Row title={t('settings:display.language')} desc={t('settings:display.languageDesc')}>
+            <Select
+              style={{ minWidth: 130 }}
+              small
+              onChange={item => this.handleChangeLanguage(item.key)}
+              renderSelected={item => item && item.name}
+              value={currentLanguage}
+              items={languages}
+            />
+          </Row>
+          <Row title={t('settings:display.region')} desc={t('settings:display.regionDesc')}>
+            {'-'}
+          </Row>
+          <Row title={t('settings:display.stock')} desc={t('settings:display.stockDesc')}>
+            {'-'}
+          </Row>
+        </Body>
+      </Section>
+    )
+  }
+}
+
+export default TabProfile
diff --git a/src/components/SettingsPage/sections/Profile.js b/src/components/SettingsPage/sections/Profile.js
new file mode 100644
index 00000000..95655ef6
--- /dev/null
+++ b/src/components/SettingsPage/sections/Profile.js
@@ -0,0 +1,56 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+
+// import type { Settings, T } from 'types/common'
+import type { T } from 'types/common'
+
+import { unlock } from 'reducers/application'
+
+import IconUser from 'icons/User'
+
+import {
+  SettingsSection as Section,
+  SettingsSectionHeader as Header,
+  SettingsSectionBody as Body,
+  SettingsSectionRow as Row,
+} from '../SettingsSection'
+
+type Props = {
+  t: T,
+  // settings: Settings,
+  // onSaveSettings: Function,
+  // unlock: Function,
+}
+
+type State = {}
+
+const mapDispatchToProps = {
+  unlock,
+}
+
+class TabProfile extends PureComponent<Props, State> {
+  state = {}
+
+  render() {
+    const { t } = this.props
+
+    return (
+      <Section>
+        <Header
+          icon={<IconUser size={16} />}
+          title={t('settings:tabs.profile')}
+          desc="Lorem ipsum dolor sit amet"
+        />
+        <Body>
+          <Row title={t('settings:display.language')} desc={t('settings:display.languageDesc')}>
+            noetuhnoeth
+          </Row>
+        </Body>
+      </Section>
+    )
+  }
+}
+
+export default connect(null, mapDispatchToProps)(TabProfile)
diff --git a/src/components/SettingsPage/Tools.js b/src/components/SettingsPage/sections/Tools.js
similarity index 100%
rename from src/components/SettingsPage/Tools.js
rename to src/components/SettingsPage/sections/Tools.js
diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index ab74e11d..f9b3985b 100644
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@@ -34,20 +34,21 @@ type Props = {
   searchable?: boolean,
   value?: Object | null,
   disabled: boolean,
+  small?: boolean,
 }
 
 const Container = styled(Box).attrs({ relative: true, color: 'graphite' })``
 
 const TriggerBtn = styled(Box).attrs({
   alignItems: 'center',
-  ff: 'Open Sans|SemiBold',
+  ff: p => (p.small ? 'Open Sans' : 'Open Sans|SemiBold'),
   flow: 2,
-  fontSize: 4,
+  fontSize: p => (p.small ? 3 : 4),
   horizontal: true,
   px: 3,
 })`
   ${space};
-  height: 40px;
+  height: ${p => (p.small ? '34' : '40')}px;
   background: ${p => (p.disabled ? p.theme.colors.lightGrey : p.bg || p.theme.colors.white)};
   border-bottom-left-radius: ${p => (p.flatLeft ? 0 : p.theme.radii[1])}px;
   border-bottom-right-radius: ${p => (p.flatRight ? 0 : p.theme.radii[1])}px;
@@ -149,6 +150,7 @@ class Select extends PureComponent<Props> {
   static defaultProps = {
     bg: undefined,
     disabled: false,
+    small: false,
     fakeFocusRight: false,
     flatLeft: false,
     flatRight: false,
@@ -251,6 +253,7 @@ class Select extends PureComponent<Props> {
       renderSelected,
       searchable,
       value,
+      small,
       ...props
     } = this.props
 
@@ -276,7 +279,7 @@ class Select extends PureComponent<Props> {
           if (disabled) {
             return (
               <Container {...getRootProps({ refKey: 'innerRef' })}>
-                <TriggerBtn disabled bg={props.bg} tabIndex={0}>
+                <TriggerBtn disabled bg={props.bg} tabIndex={0} small={small}>
                   {renderSelectedItem({ selectedItem, renderSelected, placeholder })}
                 </TriggerBtn>
               </Container>
@@ -308,6 +311,7 @@ class Select extends PureComponent<Props> {
                   flatLeft={flatLeft}
                   flatRight={flatRight}
                   tabIndex={0}
+                  small={small}
                 >
                   <Box grow>
                     {renderSelectedItem({ selectedItem, renderSelected, placeholder })}
diff --git a/src/icons/Currencies.js b/src/icons/Currencies.js
new file mode 100644
index 00000000..6447551e
--- /dev/null
+++ b/src/icons/Currencies.js
@@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    <path
+      fill="currentColor"
+      d="M8 5.581c-3.865 0-7-1.083-7-2.79C1 1.083 4.135 0 8 0s7 1.083 7 2.79c0 1.708-3.135 2.791-7 2.791zm-7-2.79c0-.309.241-.558.538-.558.298 0 .539.25.539.558v10.418c0 .28.516.704 1.517 1.05 1.142.396 2.714.625 4.406.625 1.692 0 3.264-.23 4.406-.625 1.001-.346 1.517-.77 1.517-1.05V2.791c0-.309.241-.558.539-.558.297 0 .538.25.538.558v10.418C15 14.921 11.88 16 8 16s-7-1.08-7-2.79V2.79zM13.923 8c0-.308.241-.558.539-.558.297 0 .538.25.538.558 0 1.711-3.12 2.79-7 2.79S1 9.712 1 8c0-.308.241-.558.538-.558.298 0 .539.25.539.558 0 .28.516.704 1.517 1.05 1.142.395 2.714.624 4.406.624 1.692 0 3.264-.229 4.406-.624 1.001-.346 1.517-.77 1.517-1.05zM8 4.465c1.682 0 3.254-.23 4.399-.625 1.004-.347 1.524-.772 1.524-1.05 0-.277-.52-.702-1.524-1.048-1.145-.396-2.717-.626-4.399-.626s-3.254.23-4.399.626c-1.004.346-1.524.771-1.524 1.049 0 .277.52.702 1.524 1.049 1.145.395 2.717.625 4.399.625z"
+    />
+  </svg>
+)
diff --git a/src/icons/Display.js b/src/icons/Display.js
new file mode 100644
index 00000000..0251d1e4
--- /dev/null
+++ b/src/icons/Display.js
@@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" width={size} height={size} {...p}>
+    <path
+      fill="currentColor"
+      d="M3.2 2.26c-.552 0-1 .471-1 1.051v6.547c0 .58.448 1.05 1 1.05h9.6c.552 0 1-.47 1-1.05V3.31c0-.58-.448-1.05-1-1.05H3.2zm5.4 9.909v1.57h1.96c.331 0 .6.283.6.63 0 .349-.269.631-.6.631H5.44c-.331 0-.6-.282-.6-.63 0-.348.269-.63.6-.63H7.4v-1.571H3.2c-1.215 0-2.2-1.035-2.2-2.311V3.31C1 2.035 1.985 1 3.2 1h9.6C14.015 1 15 2.035 15 3.311v6.547c0 1.276-.985 2.311-2.2 2.311H8.6z"
+    />
+  </svg>
+)
diff --git a/src/icons/Help.js b/src/icons/Help.js
new file mode 100644
index 00000000..ca30247f
--- /dev/null
+++ b/src/icons/Help.js
@@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    <path
+      fill="currentColor"
+      d="M3.3 4.007a6.167 6.167 0 1 0 .707-.707l2.135 2.135a3.167 3.167 0 1 1-.707.707L3.3 4.007zM8 15.167A7.167 7.167 0 1 1 8 .833a7.167 7.167 0 0 1 0 14.334zm0-5a2.167 2.167 0 1 0 0-4.334 2.167 2.167 0 0 0 0 4.334zm1.387-4.054c0-.128.048-.256.146-.353l2.353-2.354a.5.5 0 0 1 .708.708L10.24 6.467a.5.5 0 0 1-.707-.707l2.827-2.827a.5.5 0 0 1 .707.707L10.24 6.467a.5.5 0 0 1-.853-.354zm.146 4.127a.5.5 0 0 1 .707-.707l2.827 2.827a.5.5 0 1 1-.707.707L9.533 10.24zM3.64 13.067a.5.5 0 1 1-.707-.707L5.76 9.533a.5.5 0 1 1 .707.707L3.64 13.067z"
+    />
+  </svg>
+)
diff --git a/src/types/common.js b/src/types/common.js
index 11181284..1789bfcf 100644
--- a/src/types/common.js
+++ b/src/types/common.js
@@ -12,23 +12,15 @@ export type Devices = Array<Device>
 
 // -------------------- Settings
 
-export type SettingsProfile = {
+export type Settings = {
+  language: string,
+  counterValue: string,
   password: {
-    state: boolean,
+    isEnabled: boolean,
     value: string,
   },
 }
 
-export type SettingsDisplay = {
-  language: string,
-}
-
-export type SettingsMoney = {
-  counterValue: string,
-}
-
-export type Settings = SettingsProfile & SettingsDisplay & SettingsMoney
-
 export type T = (?string, ?Object) => string
 
 // -------------------- Manager
diff --git a/static/i18n/en/settings.yml b/static/i18n/en/settings.yml
index 3957a724..1e7843ec 100644
--- a/static/i18n/en/settings.yml
+++ b/static/i18n/en/settings.yml
@@ -1,16 +1,34 @@
 title: Settings
 tabs:
   display: Display
-  money: Money
-  material: Material
-  app: App (beta)
-  tools: Tools
-  blockchain: Blockchain
+  currencies: Currencies
   profile: Profile
+  about: About
 display:
-  language: Language
-  counterValue: Counter Value
-  orderAccounts: Order accounts
+  language: Interface language
+  languageDesc: Lorem ipsum dolor sit amet
+  counterValue: Countervalue
+  counterValueDesc: Lorem ipsum dolor sit amet
+  region: Region
+  regionDesc: Lorem ipsum dolor sit amet
+  stock: Stock market indicators
+  stockDesc: Lorem ipsum dolor sit amet
+currencies:
+  confirmationsToSpend: Confirmations to spend
+  confirmationsToSpendDesc: Lorem ipsum dolor sit amet
+  confirmationsNb: Number of confirmations
+  confirmationsNbDesc: Lorem ipsum dolor sit amet
+  transactionsFees: Transactions fees
+  transactionsFeesDesc: Lorem ipsum dolor sit amet
+  explorer: Blockchain explorer
+  explorerDesc: Lorem ipsum dolor sit amet
 profile:
   protectWithPassword: Protect local data with a password
   password: Password
+about:
+  faq: FAQ
+  faqDesc: Lorem ipsum dolor sit amet
+  contactUs: Contact us
+  contactUsDesc: Lorem ipsum dolor sit amet
+  terms: Terms and Privacy policy
+  termsDesc: Lorem ipsum dolor sit amet