diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js
deleted file mode 100644
index a9881a2f..00000000
--- a/src/components/DashboardPage/AccountCard.js
+++ /dev/null
@@ -1,103 +0,0 @@
-// @flow
-
-import React, { PureComponent } from 'react'
-import styled from 'styled-components'
-
-import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
-
-import Chart from 'components/base/Chart'
-import Bar from 'components/base/Bar'
-import Box, { Card } from 'components/base/Box'
-import CalculateBalance from 'components/CalculateBalance'
-import FormattedVal from 'components/base/FormattedVal'
-import Ellipsis from 'components/base/Ellipsis'
-import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon'
-import DeltaChange from '../DeltaChange'
-
-const Wrapper = styled(Card).attrs({
-  p: 4,
-  flex: 1,
-})`
-  cursor: ${p => (p.onClick ? 'pointer' : 'default')};
-`
-
-class AccountCard extends PureComponent<{
-  counterValue: Currency,
-  account: Account,
-  onClick?: Account => void,
-  daysCount: number,
-}> {
-  render() {
-    const { counterValue, account, onClick, daysCount, ...props } = this.props
-    return (
-      <Wrapper onClick={onClick ? () => onClick(account) : null} {...props}>
-        <Box flow={4}>
-          <Box horizontal ff="Open Sans|SemiBold" flow={3} alignItems="center">
-            <Box
-              alignItems="center"
-              justifyContent="center"
-              style={{ color: account.currency.color }}
-            >
-              <CryptoCurrencyIcon currency={account.currency} size={20} />
-            </Box>
-            <Box grow>
-              <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="graphite">
-                {account.currency.name}
-              </Box>
-              <Ellipsis fontSize={4} color="dark">
-                {account.name}
-              </Ellipsis>
-            </Box>
-          </Box>
-          <Bar size={1} color="fog" />
-          <Box justifyContent="center">
-            <FormattedVal
-              alwaysShowSign={false}
-              color="dark"
-              unit={account.unit}
-              showCode
-              val={account.balance}
-            />
-          </Box>
-        </Box>
-        <CalculateBalance counterValue={counterValue} accounts={[account]} daysCount={daysCount}>
-          {({ isAvailable, balanceHistory, balanceStart, balanceEnd }) => (
-            <Box flow={4}>
-              <Box flow={2} horizontal>
-                <Box justifyContent="center">
-                  {isAvailable ? (
-                    <FormattedVal
-                      animateTicker
-                      unit={counterValue.units[0]}
-                      val={balanceEnd}
-                      alwaysShowSign={false}
-                      showCode
-                      fontSize={3}
-                      color="graphite"
-                    />
-                  ) : null}
-                </Box>
-                <Box grow justifyContent="center">
-                  {isAvailable && !balanceStart.isZero() ? (
-                    <DeltaChange from={balanceStart} to={balanceEnd} alwaysShowSign fontSize={3} />
-                  ) : null}
-                </Box>
-              </Box>
-              <Chart
-                data={balanceHistory}
-                color={account.currency.color}
-                height={52}
-                hideAxis
-                isInteractive={false}
-                id={`account-chart-${account.id}`}
-                unit={account.unit}
-              />
-            </Box>
-          )}
-        </CalculateBalance>
-      </Wrapper>
-    )
-  }
-}
-
-export default AccountCard
diff --git a/src/components/DashboardPage/AccountCard/Header.js b/src/components/DashboardPage/AccountCard/Header.js
new file mode 100644
index 00000000..642ec56e
--- /dev/null
+++ b/src/components/DashboardPage/AccountCard/Header.js
@@ -0,0 +1,33 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import type { CryptoCurrency } from '@ledgerhq/live-common/lib/types'
+import Box from 'components/base/Box'
+import Ellipsis from 'components/base/Ellipsis'
+import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon'
+
+class AccountCardHeader extends PureComponent<{
+  currency: CryptoCurrency,
+  accountName: string,
+}> {
+  render() {
+    const { currency, accountName } = this.props
+    return (
+      <Box horizontal ff="Open Sans|SemiBold" flow={3} alignItems="center">
+        <Box alignItems="center" justifyContent="center" style={{ color: currency.color }}>
+          <CryptoCurrencyIcon currency={currency} size={20} />
+        </Box>
+        <Box grow>
+          <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="graphite">
+            {currency.name}
+          </Box>
+          <Ellipsis fontSize={4} color="dark">
+            {accountName}
+          </Ellipsis>
+        </Box>
+      </Box>
+    )
+  }
+}
+
+export default AccountCardHeader
diff --git a/src/components/DashboardPage/AccountCard/index.js b/src/components/DashboardPage/AccountCard/index.js
new file mode 100644
index 00000000..25dc16d4
--- /dev/null
+++ b/src/components/DashboardPage/AccountCard/index.js
@@ -0,0 +1,94 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+
+import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
+
+import Chart from 'components/base/Chart'
+import Bar from 'components/base/Bar'
+import Box, { Card } from 'components/base/Box'
+import CalculateBalance from 'components/CalculateBalance'
+import FormattedVal from 'components/base/FormattedVal'
+import DeltaChange from 'components/DeltaChange'
+import AccountCardHeader from './Header'
+
+const Wrapper = styled(Card).attrs({
+  p: 4,
+  flex: 1,
+})`
+  cursor: ${p => (p.onClick ? 'pointer' : 'default')};
+`
+
+class AccountCard extends PureComponent<{
+  counterValue: Currency,
+  account: Account,
+  onClick: Account => void,
+  daysCount: number,
+}> {
+  renderBody = ({ isAvailable, balanceHistory, balanceStart, balanceEnd }: *) => {
+    const { counterValue, account } = this.props
+    return (
+      <Box flow={4}>
+        <Box flow={2} horizontal>
+          <Box justifyContent="center">
+            {isAvailable ? (
+              <FormattedVal
+                animateTicker
+                unit={counterValue.units[0]}
+                val={balanceEnd}
+                alwaysShowSign={false}
+                showCode
+                fontSize={3}
+                color="graphite"
+              />
+            ) : null}
+          </Box>
+          <Box grow justifyContent="center">
+            {isAvailable && !balanceStart.isZero() ? (
+              <DeltaChange from={balanceStart} to={balanceEnd} alwaysShowSign fontSize={3} />
+            ) : null}
+          </Box>
+        </Box>
+        <Chart
+          data={balanceHistory}
+          color={account.currency.color}
+          height={52}
+          hideAxis
+          isInteractive={false}
+          id={`account-chart-${account.id}`}
+          unit={account.unit}
+        />
+      </Box>
+    )
+  }
+  onClick = () => {
+    const { account, onClick } = this.props
+    onClick(account)
+  }
+  render() {
+    const { counterValue, account, onClick, daysCount, ...props } = this.props
+    return (
+      <Wrapper onClick={this.onClick} {...props}>
+        <Box flow={4}>
+          <AccountCardHeader accountName={account.name} currency={account.currency} />
+          <Bar size={1} color="fog" />
+          <Box justifyContent="center">
+            <FormattedVal
+              alwaysShowSign={false}
+              color="dark"
+              unit={account.unit}
+              showCode
+              val={account.balance}
+            />
+          </Box>
+        </Box>
+        <CalculateBalance counterValue={counterValue} accounts={[account]} daysCount={daysCount}>
+          {this.renderBody}
+        </CalculateBalance>
+      </Wrapper>
+    )
+  }
+}
+
+export default AccountCard
diff --git a/src/components/DashboardPage/AccountCardList.js b/src/components/DashboardPage/AccountCardList.js
new file mode 100644
index 00000000..eee7321e
--- /dev/null
+++ b/src/components/DashboardPage/AccountCardList.js
@@ -0,0 +1,66 @@
+// @flow
+
+import React, { Component } from 'react'
+import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
+
+import Box from 'components/base/Box'
+import AccountCard from './AccountCard'
+import AccountCardListHeader from './AccountCardListHeader'
+import AccountCardPlaceholder from './AccountCardPlaceholder'
+
+type Props = {
+  accounts: Account[],
+  onAccountClick: Account => void,
+  counterValue: Currency,
+  daysCount: number,
+}
+
+class AccountCardList extends Component<Props> {
+  render() {
+    const { accounts, counterValue, daysCount, onAccountClick } = this.props
+
+    return (
+      <Box flow={4}>
+        <AccountCardListHeader accountsLength={accounts.length} />
+        <Box
+          horizontal
+          flexWrap="wrap"
+          justifyContent="flex-start"
+          alignItems="center"
+          style={{ margin: '0 -16px' }}
+        >
+          {accounts
+            .map(account => ({
+              key: account.id,
+              account,
+            }))
+            .concat(
+              Array(3 - (accounts.length % 3))
+                .fill(null)
+                .map((_, i) => ({
+                  key: `placeholder_${i}`,
+                  withPlaceholder: i === 0,
+                })),
+            )
+            .map(item => (
+              <Box key={item.key} flex="33%" p={16}>
+                {item.account ? (
+                  <AccountCard
+                    key={item.account.id}
+                    counterValue={counterValue}
+                    account={item.account}
+                    daysCount={daysCount}
+                    onClick={onAccountClick}
+                  />
+                ) : item.withPlaceholder ? (
+                  <AccountCardPlaceholder />
+                ) : null}
+              </Box>
+            ))}
+        </Box>
+      </Box>
+    )
+  }
+}
+
+export default AccountCardList
diff --git a/src/components/DashboardPage/AccountCardListHeader.js b/src/components/DashboardPage/AccountCardListHeader.js
new file mode 100644
index 00000000..9da0fde5
--- /dev/null
+++ b/src/components/DashboardPage/AccountCardListHeader.js
@@ -0,0 +1,33 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+import type { T } from 'types/common'
+
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+import AccountsOrder from './AccountsOrder'
+
+type Props = {
+  t: T,
+  accountsLength: number,
+}
+
+class AccountCardListHeader extends PureComponent<Props> {
+  render() {
+    const { accountsLength, t } = this.props
+
+    return (
+      <Box horizontal alignItems="flex-end">
+        <Text color="dark" ff="Museo Sans" fontSize={6}>
+          {t('app:dashboard.accounts.title', { count: accountsLength })}
+        </Text>
+        <Box ml="auto" horizontal flow={1}>
+          <AccountsOrder />
+        </Box>
+      </Box>
+    )
+  }
+}
+
+export default translate()(AccountCardListHeader)
diff --git a/src/components/DashboardPage/AccountCardPlaceholder.js b/src/components/DashboardPage/AccountCardPlaceholder.js
new file mode 100644
index 00000000..1936fe4d
--- /dev/null
+++ b/src/components/DashboardPage/AccountCardPlaceholder.js
@@ -0,0 +1,64 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import { translate } from 'react-i18next'
+import styled from 'styled-components'
+
+import { openModal } from 'reducers/modals'
+import { MODAL_ADD_ACCOUNTS } from 'config/constants'
+import type { T } from 'types/common'
+import { i } from 'helpers/staticPath'
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+
+const Wrapper = styled(Box).attrs({
+  p: 4,
+  flex: 1,
+  alignItems: 'center',
+})`
+  border: 1px dashed ${p => p.theme.colors.fog};
+  border-radius: 4px;
+  height: 215px;
+`
+
+class AccountCardPlaceholder extends PureComponent<{
+  t: T,
+  openModal: string => void,
+}> {
+  onAddAccounts = () => this.props.openModal(MODAL_ADD_ACCOUNTS)
+
+  render() {
+    const { t } = this.props
+    return (
+      <Wrapper>
+        <Box mt={2}>
+          <img alt="" src={i('empty-account-tile.svg')} />
+        </Box>
+        <Box
+          ff="Open Sans"
+          fontSize={3}
+          color="grey"
+          pb={2}
+          mt={3}
+          textAlign="center"
+          style={{ maxWidth: 150 }}
+        >
+          {t('app:dashboard.emptyAccountTile.desc')}
+        </Box>
+        <Button primary onClick={this.onAddAccounts}>
+          {t('app:dashboard.emptyAccountTile.createAccount')}
+        </Button>
+      </Wrapper>
+    )
+  }
+}
+
+export default translate()(
+  connect(
+    null,
+    {
+      openModal,
+    },
+  )(AccountCardPlaceholder),
+)
diff --git a/src/components/DashboardPage/CurrentGreetings.js b/src/components/DashboardPage/CurrentGreetings.js
new file mode 100644
index 00000000..da4896b8
--- /dev/null
+++ b/src/components/DashboardPage/CurrentGreetings.js
@@ -0,0 +1,31 @@
+// @flow
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+import type { T } from 'types/common'
+
+import Text from 'components/base/Text'
+
+const getCurrentGreetings = () => {
+  const localTimeHour = new Date().getHours()
+  const afternoon_breakpoint = 12
+  const evening_breakpoint = 17
+  if (localTimeHour >= afternoon_breakpoint && localTimeHour < evening_breakpoint) {
+    return 'app:dashboard.greeting.afternoon'
+  } else if (localTimeHour >= evening_breakpoint) {
+    return 'app:dashboard.greeting.evening'
+  }
+  return 'app:dashboard.greeting.morning'
+}
+
+class CurrentGettings extends PureComponent<{ t: T }> {
+  render() {
+    const { t } = this.props
+    return (
+      <Text color="dark" ff="Museo Sans" fontSize={7}>
+        {t(getCurrentGreetings())}
+      </Text>
+    )
+  }
+}
+
+export default translate()(CurrentGettings)
diff --git a/src/components/DashboardPage/SummaryDesc.js b/src/components/DashboardPage/SummaryDesc.js
new file mode 100644
index 00000000..ff8c5f3e
--- /dev/null
+++ b/src/components/DashboardPage/SummaryDesc.js
@@ -0,0 +1,22 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+import type { T } from 'types/common'
+import Text from 'components/base/Text'
+
+class SummaryDesc extends PureComponent<{
+  t: T,
+  totalAccounts: number,
+}> {
+  render() {
+    const { totalAccounts, t } = this.props
+    return (
+      <Text color="grey" fontSize={5} ff="Museo Sans|Light">
+        {t('app:dashboard.summary', { count: totalAccounts })}
+      </Text>
+    )
+  }
+}
+
+export default translate()(SummaryDesc)
diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js
index 384f6d71..2b3b6340 100644
--- a/src/components/DashboardPage/index.js
+++ b/src/components/DashboardPage/index.js
@@ -5,7 +5,6 @@ import uniq from 'lodash/uniq'
 import { compose } from 'redux'
 import { translate } from 'react-i18next'
 import { connect } from 'react-redux'
-import styled from 'styled-components'
 import { push } from 'react-router-redux'
 import { createStructuredSelector } from 'reselect'
 import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
@@ -14,11 +13,8 @@ import type { T } from 'types/common'
 import { colors } from 'styles/theme'
 
 import { accountsSelector } from 'reducers/accounts'
-import { openModal } from 'reducers/modals'
-import { MODAL_ADD_ACCOUNTS } from 'config/constants'
 import {
   counterValueCurrencySelector,
-  localeSelector,
   selectedTimeRangeSelector,
   timeRangeDaysByKey,
 } from 'reducers/settings'
@@ -32,27 +28,23 @@ import UpdateNotifier from 'components/UpdateNotifier'
 import BalanceInfos from 'components/BalanceSummary/BalanceInfos'
 import BalanceSummary from 'components/BalanceSummary'
 import Box from 'components/base/Box'
-import { i } from 'helpers/staticPath'
 import PillsDaysCount from 'components/PillsDaysCount'
-import Text from 'components/base/Text'
 import OperationsList from 'components/OperationsList'
 import StickyBackToTop from 'components/StickyBackToTop'
-import Button from 'components/base/Button'
-import AccountCard from './AccountCard'
-import AccountsOrder from './AccountsOrder'
 import EmptyState from './EmptyState'
+import CurrentGreetings from './CurrentGreetings'
+import SummaryDesc from './SummaryDesc'
+import AccountCardList from './AccountCardList'
 
 const mapStateToProps = createStructuredSelector({
   accounts: accountsSelector,
   counterValue: counterValueCurrencySelector,
-  locale: localeSelector,
   selectedTimeRange: selectedTimeRangeSelector,
 })
 
 const mapDispatchToProps = {
   push,
   saveSettings,
-  openModal,
 }
 
 type Props = {
@@ -62,41 +54,33 @@ type Props = {
   counterValue: Currency,
   selectedTimeRange: TimeRange,
   saveSettings: ({ selectedTimeRange: TimeRange }) => *,
-  openModal: string => void,
 }
 
 class DashboardPage extends PureComponent<Props> {
   onAccountClick = account => this.props.push(`/account/${account.id}`)
 
-  handleGreeting = () => {
-    const localTimeHour = new Date().getHours()
-    const afternoon_breakpoint = 12
-    const evening_breakpoint = 17
-
-    if (localTimeHour >= afternoon_breakpoint && localTimeHour < evening_breakpoint) {
-      return 'app:dashboard.greeting.afternoon'
-    } else if (localTimeHour >= evening_breakpoint) {
-      return 'app:dashboard.greeting.evening'
-    }
-    return 'app:dashboard.greeting.morning'
-  }
-
   handleChangeSelectedTime = item => {
     this.props.saveSettings({ selectedTimeRange: item.key })
   }
 
-  _cacheBalance = null
+  renderHeader = ({ isAvailable, totalBalance, selectedTimeRange, sinceBalance, refBalance }) => (
+    <BalanceInfos
+      t={this.props.t}
+      counterValue={this.props.counterValue}
+      isAvailable={isAvailable}
+      totalBalance={totalBalance}
+      since={selectedTimeRange}
+      sinceBalance={sinceBalance}
+      refBalance={refBalance}
+    />
+  )
 
   render() {
-    const { accounts, t, counterValue, selectedTimeRange, openModal } = this.props
+    const { accounts, t, counterValue, selectedTimeRange } = this.props
     const daysCount = timeRangeDaysByKey[selectedTimeRange]
-    const timeFrame = this.handleGreeting()
-    const imagePath = i('empty-account-tile.svg')
     const totalAccounts = accounts.length
     const totalCurrencies = uniq(accounts.map(a => a.currency.id)).length
     const totalOperations = accounts.reduce((sum, a) => sum + a.operations.length, 0)
-    const displayOperationsHelper = (account: Account) => account.operations.length > 0
-    const displayOperations = accounts.some(displayOperationsHelper)
 
     return (
       <Fragment>
@@ -113,12 +97,8 @@ class DashboardPage extends PureComponent<Props> {
             <Fragment>
               <Box horizontal alignItems="flex-end">
                 <Box grow>
-                  <Text color="dark" ff="Museo Sans" fontSize={7}>
-                    {t(timeFrame)}
-                  </Text>
-                  <Text color="grey" fontSize={5} ff="Museo Sans|Light">
-                    {t('app:dashboard.summary', { count: totalAccounts })}
-                  </Text>
+                  <CurrentGreetings />
+                  <SummaryDesc totalAccounts={totalAccounts} />
                 </Box>
                 <Box>
                   <PillsDaysCount
@@ -127,105 +107,33 @@ class DashboardPage extends PureComponent<Props> {
                   />
                 </Box>
               </Box>
-              <Fragment>
-                <BalanceSummary
-                  counterValue={counterValue}
-                  chartId="dashboard-chart"
-                  chartColor={colors.wallet}
+
+              <BalanceSummary
+                counterValue={counterValue}
+                chartId="dashboard-chart"
+                chartColor={colors.wallet}
+                accounts={accounts}
+                selectedTimeRange={selectedTimeRange}
+                daysCount={daysCount}
+                renderHeader={this.renderHeader}
+              />
+
+              <AccountCardList
+                onAccountClick={this.onAccountClick}
+                accounts={accounts}
+                daysCount={daysCount}
+                counterValue={counterValue}
+              />
+
+              {totalOperations > 0 && (
+                <OperationsList
+                  onAccountClick={this.onAccountClick}
                   accounts={accounts}
-                  selectedTimeRange={selectedTimeRange}
-                  daysCount={daysCount}
-                  renderHeader={({
-                    isAvailable,
-                    totalBalance,
-                    selectedTimeRange,
-                    sinceBalance,
-                    refBalance,
-                  }) => (
-                    <BalanceInfos
-                      t={t}
-                      counterValue={counterValue}
-                      isAvailable={isAvailable}
-                      totalBalance={totalBalance}
-                      since={selectedTimeRange}
-                      sinceBalance={sinceBalance}
-                      refBalance={refBalance}
-                    />
-                  )}
+                  title={t('app:dashboard.recentActivity')}
+                  withAccount
                 />
-                <Box flow={4}>
-                  <Box horizontal alignItems="flex-end">
-                    <Text color="dark" ff="Museo Sans" fontSize={6}>
-                      {t('app:dashboard.accounts.title', { count: accounts.length })}
-                    </Text>
-                    <Box ml="auto" horizontal flow={1}>
-                      <AccountsOrder />
-                    </Box>
-                  </Box>
-                  <Box
-                    horizontal
-                    flexWrap="wrap"
-                    justifyContent="flex-start"
-                    alignItems="center"
-                    style={{ margin: '0 -16px' }}
-                  >
-                    {accounts
-                      .concat(
-                        Array(3 - (accounts.length % 3))
-                          .fill(null)
-                          .map((_, i) => i === 0),
-                      )
-                      .map((account, i) => (
-                        <Box
-                          key={typeof account === 'object' ? account.id : `placeholder_${i}`}
-                          flex="33%"
-                          p={16}
-                        >
-                          {account ? (
-                            typeof account === 'object' ? (
-                              <AccountCard
-                                key={account.id}
-                                counterValue={counterValue}
-                                account={account}
-                                daysCount={daysCount}
-                                onClick={this.onAccountClick}
-                              />
-                            ) : (
-                              <Wrapper>
-                                <Box mt={2}>
-                                  <img alt="" src={imagePath} />
-                                </Box>
-                                <Box
-                                  ff="Open Sans"
-                                  fontSize={3}
-                                  color="grey"
-                                  pb={2}
-                                  mt={3}
-                                  textAlign="center"
-                                  style={{ maxWidth: 150 }}
-                                >
-                                  {t('app:dashboard.emptyAccountTile.desc')}
-                                </Box>
-                                <Button primary onClick={() => openModal(MODAL_ADD_ACCOUNTS)}>
-                                  {t('app:dashboard.emptyAccountTile.createAccount')}
-                                </Button>
-                              </Wrapper>
-                            )
-                          ) : null}
-                        </Box>
-                      ))}
-                  </Box>
-                </Box>
-                {displayOperations && (
-                  <OperationsList
-                    onAccountClick={this.onAccountClick}
-                    accounts={accounts}
-                    title={t('app:dashboard.recentActivity')}
-                    withAccount
-                  />
-                )}
-                <StickyBackToTop />
-              </Fragment>
+              )}
+              <StickyBackToTop />
             </Fragment>
           ) : (
             <EmptyState />
@@ -243,13 +151,3 @@ export default compose(
   ),
   translate(),
 )(DashboardPage)
-
-const Wrapper = styled(Box).attrs({
-  p: 4,
-  flex: 1,
-  alignItems: 'center',
-})`
-  border: 1px dashed ${p => p.theme.colors.fog};
-  border-radius: 4px;
-  height: 215px;
-`