diff --git a/src/components/SelectCurrency/index.js b/src/components/SelectCurrency/index.js
index 47633469..6635f5b6 100644
--- a/src/components/SelectCurrency/index.js
+++ b/src/components/SelectCurrency/index.js
@@ -33,13 +33,13 @@ const SelectCurrency = ({ onChange, value, t, placeholder, currencies, ...props
   const options = currencies ? currencies.map(c => ({ ...c, value: c.id, label: c.name })) : []
   return (
     <Select
-      {...props}
       value={value}
       renderOption={renderOption}
       renderValue={renderOption}
       options={options}
       placeholder={placeholder || t('common:selectCurrency')}
       onChange={onChange}
+      {...props}
     />
   )
 }
diff --git a/src/components/SelectExchange.js b/src/components/SelectExchange.js
index 8ae03f4c..602958d8 100644
--- a/src/components/SelectExchange.js
+++ b/src/components/SelectExchange.js
@@ -2,19 +2,12 @@
 import React, { Component } from 'react'
 import type { Currency } from '@ledgerhq/live-common/lib/types'
 import type { Exchange } from '@ledgerhq/live-common/lib/countervalues/types'
-import Select from 'components/base/LegacySelect'
-import Box from 'components/base/Box'
+
+import Select from 'components/base/Select'
+import Spinner from 'components/base/Spinner'
 import Text from 'components/base/Text'
 import CounterValues from 'helpers/countervalues'
 
-const renderItem = ex => (
-  <Box grow horizontal alignItems="center" flow={2}>
-    <Text ff="Open Sans|SemiBold" color="dark" fontSize={4}>
-      {ex.name}
-    </Text>
-  </Box>
-)
-
 class ExchangeSelect extends Component<
   {
     from: Currency,
@@ -82,27 +75,24 @@ class ExchangeSelect extends Component<
   }
 
   render() {
-    const { onChange, exchangeId, style } = this.props
+    const { onChange, exchangeId, style, ...props } = this.props
     const { exchanges, error } = this.state
+
+    const options = exchanges ? exchanges.map(e => ({ value: e.id, label: e.name, ...e })) : []
+
     return exchanges && exchanges.length > 0 ? (
       <Select
-        style={style}
-        value={exchanges.find(e => e.id === exchangeId)}
-        renderSelected={renderItem}
-        renderItem={renderItem}
-        keyProp="id"
-        items={exchanges}
-        fontSize={4}
+        value={options.find(e => e.id === exchangeId)}
+        options={options}
         onChange={onChange}
+        {...props}
       />
     ) : error ? (
       <Text ff="Open Sans|SemiBold" color="dark" fontSize={4}>
         Failed to load.
       </Text>
     ) : (
-      <Text ff="Open Sans|SemiBold" color="dark" fontSize={4}>
-        Loading...
-      </Text>
+      <Spinner color="grey" size={24} />
     )
   }
 }
diff --git a/src/components/SettingsPage/sections/Currencies.js b/src/components/SettingsPage/sections/Currencies.js
index c619d309..6fc3f33b 100644
--- a/src/components/SettingsPage/sections/Currencies.js
+++ b/src/components/SettingsPage/sections/Currencies.js
@@ -114,6 +114,7 @@ class TabCurrencies extends PureComponent<Props, State> {
         <Body>
           <Row title="Exchange" desc="The exchange to use">
             <ExchangeSelect
+              small
               from={currency}
               to={counterValueCurrency}
               exchangeId={exchange}
diff --git a/src/components/base/Select/createStyles.js b/src/components/base/Select/createStyles.js
index 0760bd74..03645c2d 100644
--- a/src/components/base/Select/createStyles.js
+++ b/src/components/base/Select/createStyles.js
@@ -3,13 +3,22 @@
 import { colors } from 'styles/theme'
 import { ff } from 'styles/helpers'
 
-export default ({ width, minWidth }: { width: number, minWidth: number }) => ({
+export default ({
+  width,
+  minWidth,
+  small,
+}: {
+  width: number,
+  minWidth: number,
+  small: boolean,
+}) => ({
   control: (styles: Object, { isFocused }: Object) => ({
     ...styles,
     width,
     minWidth,
     ...ff('Open Sans|SemiBold'),
-    height: 40,
+    height: small ? 34 : 40,
+    minHeight: 'unset',
     backgroundColor: 'white',
     cursor: 'pointer',
     ...(isFocused
@@ -60,6 +69,6 @@ export default ({ width, minWidth }: { width: number, minWidth: number }) => ({
   }),
   container: (styles: Object) => ({
     ...styles,
-    fontSize: 13,
+    fontSize: small ? 12 : 13,
   }),
 })
diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index 5b458bd0..910d6a58 100644
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@@ -18,11 +18,12 @@ type Props = {
   renderValue: Option => Node,
 
   // optional
-  placeholder?: string,
-  isClearable?: boolean,
-  isDisabled?: boolean,
-  isLoading?: boolean,
-  isSearchable?: boolean,
+  placeholder: string,
+  isClearable: boolean,
+  isDisabled: boolean,
+  isLoading: boolean,
+  isSearchable: boolean,
+  small: boolean,
   width: number,
   minWidth: number,
 }
@@ -54,6 +55,7 @@ class Select extends Component<Props> {
       renderValue,
       width,
       minWidth,
+      small,
       ...props
     } = this.props
 
@@ -64,7 +66,7 @@ class Select extends Component<Props> {
         classNamePrefix="select"
         options={options}
         components={createRenderers({ renderOption, renderValue })}
-        styles={createStyles({ width, minWidth })}
+        styles={createStyles({ width, minWidth, small })}
         placeholder={placeholder}
         isDisabled={isDisabled}
         isLoading={isLoading}
