diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index f9a39f44..cc490772 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -24,7 +24,7 @@ module.exports = ({ config }) => {
   });
 
   config.module.rules.push({
-    test: /\.(svg)$/,
+    test: /\.(svg|png|jpg)$/i,
     use: [
       {
         loader: 'url-loader',
diff --git a/src/inputs/Select/dai.png b/src/inputs/Select/dai.png
new file mode 100644
index 00000000..06cff708
Binary files /dev/null and b/src/inputs/Select/dai.png differ
diff --git a/src/inputs/Select/gnosis.png b/src/inputs/Select/gnosis.png
new file mode 100644
index 00000000..13b3380e
Binary files /dev/null and b/src/inputs/Select/gnosis.png differ
diff --git a/src/inputs/Select/index.tsx b/src/inputs/Select/index.tsx
index 1a3a6c02..a8cb2973 100644
--- a/src/inputs/Select/index.tsx
+++ b/src/inputs/Select/index.tsx
@@ -4,13 +4,15 @@ import FormControl from '@material-ui/core/FormControl';
 import SelectMUI from '@material-ui/core/Select';
 import styled from 'styled-components';
 
+import { Text } from '../../dataDisplay';
+
 const IconImg = styled.img`
   width: 20px;
   margin-right: 10px;
 `;
 
 const StyledSelect = styled(SelectMUI)`
-  background-color: #e8e7e6;
+  background-color: ${(props) => props.theme.colors.separator};
   border-radius: 5px;
   height: 56px;
   width: 140px;
@@ -22,18 +24,40 @@ const StyledSelect = styled(SelectMUI)`
   }
 
   .MuiSelect-selectMenu {
-    font-family: ${(p) => p.theme.fonts.fontFamily};
+    font-family: ${(props) => props.theme.fonts.fontFamily};
+  }
+
+  &.MuiInput-underline:hover:not(.Mui-disabled):before {
+    border-bottom: 2px solid ${(props) => props.theme.colors.primary};
+  }
+  &.MuiInput-underline:after {
+    border-bottom: 2px solid ${(props) => props.theme.colors.primary};
   }
 `;
 
+export type SelectItem = {
+  id: string;
+  label: string;
+  subLabel?: string;
+  iconUrl?: string;
+};
+
 type Props = {
-  items: Array<{ id: string; label: string; iconUrl?: string }>;
+  items: Array<SelectItem>;
   activeItemId: string;
   onItemClick: (id: string) => void;
   id?: string;
+  fallbackImage?: string;
 };
 
-function Select({ items, activeItemId, onItemClick, id, ...rest }: Props) {
+function Select({
+  items,
+  activeItemId,
+  onItemClick,
+  id,
+  fallbackImage,
+  ...rest
+}: Props) {
   const [open, setOpen] = React.useState(false);
 
   const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
@@ -48,6 +72,15 @@ function Select({ items, activeItemId, onItemClick, id, ...rest }: Props) {
     setOpen(true);
   };
 
+  const onFallbackImage: React.ReactEventHandler<HTMLImageElement> = (e) => {
+    if (!fallbackImage) {
+      return;
+    }
+
+    (e.target as HTMLImageElement).onerror = null;
+    (e.target as HTMLImageElement).src = fallbackImage;
+  };
+
   return (
     <div>
       <FormControl>
@@ -63,8 +96,23 @@ function Select({ items, activeItemId, onItemClick, id, ...rest }: Props) {
           {items.map((i) => {
             return (
               <MenuItem value={i.id} key={i.id}>
-                {i.iconUrl && <IconImg alt={i.label} src={i.iconUrl} />}
-                <span>{i.label}</span>
+                {i.iconUrl && (
+                  <IconImg
+                    alt={i.label}
+                    onError={onFallbackImage}
+                    src={i.iconUrl}
+                  />
+                )}
+                <div>
+                  <Text size="sm" color="text">
+                    {i.label}
+                  </Text>
+                  {i.subLabel && (
+                    <Text size="sm" color="secondary" strong>
+                      {i.subLabel}
+                    </Text>
+                  )}
+                </div>
               </MenuItem>
             );
           })}
diff --git a/src/inputs/Select/select.stories.tsx b/src/inputs/Select/select.stories.tsx
index ae7f6492..bdcc6ace 100644
--- a/src/inputs/Select/select.stories.tsx
+++ b/src/inputs/Select/select.stories.tsx
@@ -1,21 +1,26 @@
 import React, { useState } from 'react';
 
-import Select from './';
+import gnoIcon from './gnosis.png';
+import daiIcon from './dai.png';
+import tokenPlaceholder from './token-placeholder.svg';
+import Select, { SelectItem } from './';
 
 export default {
   title: 'Inputs/Select',
   component: Select,
   parameters: {
-    componentSubtitle: 'Checkbox Input.'
+    componentSubtitle: 'Select Input.'
   }
 };
 
-const items = [
-  { id: '1', label: 'ETH' },
-  { id: '2', label: 'GNO' }
-];
-
 export const select = () => {
+  const items: Array<SelectItem> = [
+    { id: '1', label: 'DAI', subLabel: 'stablecoin', iconUrl: daiIcon },
+    { id: '2', label: 'GNO', iconUrl: gnoIcon },
+    { id: '2', label: 'BrokenImage', iconUrl: 'https://broken-image.test' },
+    { id: '3', label: 'without icon' }
+  ];
+
   const [activeItemId, setActiveItemId] = useState('');
   return (
     <Select
@@ -23,7 +28,8 @@ export const select = () => {
       activeItemId={activeItemId}
       onItemClick={(id) => {
         setActiveItemId(id);
-      }}
+      }}      
+      fallbackImage={tokenPlaceholder} // image source or URL
     />
   );
 };
diff --git a/src/inputs/Select/token-placeholder.svg b/src/inputs/Select/token-placeholder.svg
new file mode 100644
index 00000000..2074cc46
--- /dev/null
+++ b/src/inputs/Select/token-placeholder.svg
@@ -0,0 +1 @@
+<svg height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="nonzero"><circle cx="13" cy="13" fill="#E8E7E6" r="13"/><path d="m12.9800266 4.09134443c-.0615216.00319594-.1222455.01997459-.1765755.04953761-.05433.02956221-.1014704.07190818-.1374265.12224554l-6.1059363 8.59150972c-.04873785.0687133-.07590285.1526054-.07590285.2373076 0 .0838943.027165.1685862.07590285.2373076l6.1059363 8.5898734c.0375515.0527326.0878889.096678.1462136.1262403.0575269.0295622.1222455.0455429.1877618.0455429.0647186 0 .1302349-.0159797.1877618-.0455429.057527-.0295623.1078623-.0735077.1462136-.1262403l6.1059363-8.5898734c.0487379-.0687132.0759028-.1526054.0759028-.2373076 0-.0838942-.0271649-.1685862-.0759028-.2373076l-6.1073681-8.59150972c-.039151-.05592949-.093481-.10067268-.1542049-.13103259-.0615217-.02956221-.1302349-.04394343-.1981484-.04074851zm.0191757 1.7729551 2.2890102 6.81773647h-4.5774068zm-1.2160533 1.05305516-1.93513509 5.76476311h-2.16199071zm2.4330066 0 4.0971462 5.76476311h-2.1619907zm-6.53015285 6.58292421h2.16117254l1.93513511 5.7631268zm3.02494615 0h4.5774068l-2.2890102 6.8161001zm5.4403622 0h2.1611726l-4.0963281 5.7631268z" fill="#B2B5B2"/></g></svg>
\ No newline at end of file
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
index 369058f7..9d85b1f8 100644
--- a/src/typings/index.d.ts
+++ b/src/typings/index.d.ts
@@ -1,3 +1,4 @@
+declare module "*.png"
 declare module '*.svg' {
   import React = require('react');
 
diff --git a/webpack.config.js b/webpack.config.js
index fed6228c..2e930385 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -24,7 +24,7 @@ module.exports = {
         }
       },
       {
-        test: /\.(svg)$/i,
+        test: /\.(svg|png|jpg)$/i,
         use: {
           loader: 'url-loader',
           options: {}