diff --git a/package.json b/package.json
index e7a4bb8..9da51f9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
+  "author": "Alec Sloan <sloan.alec@gmail.com> (https://alecsloan.codes/)",
   "name": "cryptolio",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "private": true,
   "dependencies": {
     "@material-ui/core": "latest",
diff --git a/src/App.js b/src/App.js
index 168ffbb..4656276 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,3 @@
-import AssetCard from './Components/AssetCard.js'
 import Header from './Components/Header.js'
 import Hotkeys from 'react-hot-keys'
 import React, { Component } from 'react'
@@ -8,48 +7,14 @@ import { createMuiTheme } from '@material-ui/core/styles'
 import { ThemeProvider } from '@material-ui/styles'
 
 import './styles/App.css'
-import { CssBaseline, Grid, IconButton, Snackbar } from '@material-ui/core'
+import { CssBaseline, IconButton, Snackbar } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
 import { Alert } from '@material-ui/lab'
 import AssetPanel from './Components/AssetPanel'
 import * as CoinGecko from './Util/CoinGecko'
 import * as CoinMarketCap from './Util/CoinMarketCap'
 import * as Theme from './Theme'
-import AssetTable from './Components/AssetTable'
-import PortfolioDonutChart from './Components/PortfolioDonutChart'
-import PortfolioAreaStackChart from './Components/PortfolioAreaStackChart'
-
-function CardRow (props) {
-  const cards = []
-
-  let assets = props.assets
-
-  if (!assets) { return null }
-
-  if (props.settings.sorting === 'price') {
-    assets = assets.sort((a, b) => b.price - a.price)
-  } else if (props.settings.sorting === 'market_cap') {
-    assets = assets.sort((a, b) => b.market_cap - a.market_cap)
-  } else if (props.settings.sorting === 'percent_change_1h') {
-    assets = assets.sort((a, b) => b.percent_change_1h - a.percent_change_1h)
-  } else if (props.settings.sorting === 'percent_change_24h') {
-    assets = assets.sort((a, b) => b.percent_change_24h - a.percent_change_24h)
-  } else if (props.settings.sorting === 'percent_change_7d') {
-    assets = assets.sort((a, b) => b.percent_change_7d - a.percent_change_7d)
-  } else {
-    assets = assets.sort((a, b) => ((b.holdings || 0.000001) * b.price) - ((a.holdings || 0.000001) * a.price))
-  }
-
-  assets.forEach(asset => {
-    cards.push(
-      <Grid item xs={12} sm={6} md={4} key={asset.symbol}>
-        <AssetCard asset={asset} key={asset.symbol} renderStyle={props.renderStyle} settings={props.settings} setAssetPanelShown={props.setAssetPanelShown.bind(this)} />
-      </Grid>
-    )
-  })
-
-  return <Grid container spacing={2}>{cards}</Grid>
-}
+import LayoutHandler from './Components/LayoutHandler'
 
 class App extends Component {
   constructor (props) {
@@ -63,13 +28,13 @@ class App extends Component {
       balanceChangeTimeframe: 'percent_change_24h',
       currency: 'USD',
       datasource: 'coinmarketcap',
-      days: 7,
       decimals2: 100,
       decimals3: 1,
       decimals4: null,
       fetchInterval: 300000,
       portfolioBreakdown: "none",
       renderStyle: (window.innerWidth <= 500) ? 'table' : 'card:classic',
+      renderSubStyle: 'table',
       show1hChange: true,
       show24hChange: true,
       show7dChange: true,
@@ -309,28 +274,8 @@ class App extends Component {
           <CssBaseline />
 
           <Header addCrypto={this.addCrypto.bind(this)} assets={this.state.data.assets} availableAssets={this.state.data.availableAssets} editSetting={this.editSetting.bind(this)} refreshData={this.fetchAssetData.bind(this)} settings={this.state.settings} toggleShowSettings={this.toggleShowSettings.bind(this)} updatingData={this.state.updatingData || false} />
-          <hr hidden={(this.state.settings.renderStyle === 'table' && window.innerWidth <= 500)} />
-          {
-            this.state.settings.portfolioBreakdown === "stacked_line"
-            ? <PortfolioAreaStackChart assets={this.state.data.assets} days={this.state.settings.days || 7} settings={this.state.settings}/>
-            : null
-          }
-          <Grid container style={{ width: '99%' }}>
-            {
-              this.state.settings.portfolioBreakdown === "donut"
-                ? <Grid item xs={12} md={2}>
-                    <PortfolioDonutChart assets={this.state.data.assets} settings={this.state.settings} />
-                  </Grid>
-                : null
-            }
-            <Grid item xs={12} md={this.state.settings.portfolioBreakdown === "donut" ? 10 : 12}>
-              {
-                (!this.state.settings.renderStyle || this.state.settings.renderStyle.includes('card'))
-                  ? <CardRow assets={this.state.data.assets} renderStyle={this.state.settings.renderStyle} settings={this.state.settings} setAssetPanelShown={this.setAssetPanelShown.bind(this)} />
-                  : <AssetTable assets={this.state.data.assets} editSetting={this.editSetting.bind(this)} settings={this.state.settings} setAssetPanelShown={this.setAssetPanelShown.bind(this)} />
-              }
-            </Grid>
-          </Grid>
+          <hr hidden={window.innerWidth <= 500} />
+          <LayoutHandler assets={this.state.data.assets} editSetting={this.editSetting.bind(this)} settings={this.state.settings} setAssetPanelShown={this.setAssetPanelShown.bind(this)} />
           <Settings data={this.state.data} editSetting={this.editSetting.bind(this)} settings={this.state.settings} showSettings={this.state.showSettings} theme={this.state.settings.theme} toggleShowSettings={this.toggleShowSettings.bind(this)} uploadData={this.uploadData.bind(this)} />
           <AssetPanel asset={this.state.assetPanelShown} editSetting={this.editSetting.bind(this)} settings={this.state.settings} removeCrypto={this.removeCrypto.bind(this)} setAssetPanelShown={this.setAssetPanelShown.bind(this)} updateExitPlan={this.updateExitPlan.bind(this)} updateHoldings={this.updateHoldings.bind(this)} updateInterest={this.updateInterest.bind(this)} />
           <Hotkeys
diff --git a/src/Components/AssetCard.js b/src/Components/AssetCard.js
index dcd66ec..f8018c9 100644
--- a/src/Components/AssetCard.js
+++ b/src/Components/AssetCard.js
@@ -50,7 +50,7 @@ class AssetCard extends Component {
   }
 
   render () {
-    const renderStyle = this.props.renderStyle.replace('card:', '')
+    const renderStyle = (this.props.renderStyle || this.props.settings.renderStyle).replace('card:', '')
 
     const price = this.props.asset.price
 
diff --git a/src/Components/LayoutHandler.js b/src/Components/LayoutHandler.js
new file mode 100644
index 0000000..055ee55
--- /dev/null
+++ b/src/Components/LayoutHandler.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import CardGrid from '../Layouts/CardGrid'
+import AssetTable from '../Layouts/AssetTable'
+import PortfolioAreaStackChart from './PortfolioAreaStackChart'
+import PortfolioDonutChart from './PortfolioDonutChart'
+
+function LayoutHandler (props) {
+  let assets = props.assets
+
+  if (props.settings.sorting === 'price') {
+    assets = assets.sort((a, b) => b.price - a.price)
+  } else if (props.settings.sorting === 'market_cap') {
+    assets = assets.sort((a, b) => b.market_cap - a.market_cap)
+  } else if (props.settings.sorting === 'percent_change_1h') {
+    assets = assets.sort((a, b) => b.percent_change_1h - a.percent_change_1h)
+  } else if (props.settings.sorting === 'percent_change_24h') {
+    assets = assets.sort((a, b) => b.percent_change_24h - a.percent_change_24h)
+  } else if (props.settings.sorting === 'percent_change_7d') {
+    assets = assets.sort((a, b) => b.percent_change_7d - a.percent_change_7d)
+  } else {
+    assets = assets.sort((a, b) => ((b.holdings || 0.000001) * b.price) - ((a.holdings || 0.000001) * a.price))
+  }
+
+  switch (props.renderStyle || props.settings.renderStyle) {
+    case "card:classic":
+    case "card:compact":
+      return <CardGrid assets={assets} renderStyle={props.renderStyle || props.settings.renderStyle} settings={props.settings} setAssetPanelShown={props.setAssetPanelShown.bind(this)} />
+    case "portfolio:chart":
+      return <PortfolioAreaStackChart assets={assets} editSetting={props.editSetting.bind(this)} settings={props.settings} setAssetPanelShown={props.setAssetPanelShown.bind(this)} />
+    case "portfolio:donut":
+      return <PortfolioDonutChart assets={assets} editSetting={props.editSetting.bind(this)} settings={props.settings} setAssetPanelShown={props.setAssetPanelShown.bind(this)} />
+    case "table":
+    default:
+      return <AssetTable assets={assets} editSetting={props.editSetting.bind(this)} settings={props.settings} setAssetPanelShown={props.setAssetPanelShown.bind(this)} />
+  }
+}
+
+export default LayoutHandler
diff --git a/src/Components/PortfolioAreaStackChart.js b/src/Components/PortfolioAreaStackChart.js
index 1cfad44..eb173b4 100644
--- a/src/Components/PortfolioAreaStackChart.js
+++ b/src/Components/PortfolioAreaStackChart.js
@@ -5,6 +5,11 @@ import * as CoinMarketCap from '../Util/CoinMarketCap'
 import * as CoinGecko from '../Util/CoinGecko'
 import abbreviate from 'number-abbreviate'
 import { Skeleton } from '@material-ui/lab'
+import { Grid } from '@material-ui/core'
+import TimeframeSelector from './TimeframeSelector'
+import SortSelector from './SortSelector'
+import LayoutHandler from './LayoutHandler'
+import MobileAssetCardGallery from '../Layouts/MobileAssetCardGallery'
 
 class PortfolioAreaStackChart extends Component {
   constructor (props) {
@@ -69,14 +74,25 @@ class PortfolioAreaStackChart extends Component {
     }
 
     this.state = {
-      hasAssets: props.assets.filter(asset => asset.holdings > 0).length > 0,
       option: option
     }
 
     this.getData(props.settings, props.assets);
   }
 
-  async getData (settings, assets, days = 7) {
+  async getData (settings, assets) {
+    let days = 7
+
+    if (settings.balanceChangeTimeframe === "percent_change_1h") {
+      days = .0417
+    }
+    else if (settings.balanceChangeTimeframe === "percent_change_24h") {
+      days = 1
+    }
+    else {
+      days = Number(settings.balanceChangeTimeframe.replace(/[^0-9]/g, ''))
+    }
+
     const currency = settings.currency
     const assetsHeld = assets.filter(asset => asset.holdings > 0).sort((a, b) => (b.holdings * b.price) - (a.holdings  * a.price))
 
@@ -110,7 +126,7 @@ class PortfolioAreaStackChart extends Component {
 
         if (this.props.settings.datasource === 'coinmarketcap') {
           for (let [key, value] of Object.entries(assetData)) {
-            const index = key
+            const i = key
 
             if (assetsHeld.length > 1) {
               key = value.timestamp
@@ -119,13 +135,24 @@ class PortfolioAreaStackChart extends Component {
               value = value[currency][0]
             }
 
-            let date = `${new Date(key).getMonth() + 1}/${new Date(key).getDate()}`;
+            if (days > 29) {
+              let date = `${new Date(key).getMonth() + 1}/${new Date(key).getDate()}`;
 
-            if (!dates.includes(date)) {
-              dates.push(date);
+              if (!dates.includes(date)) {
+                dates.push(date);
+              }
             }
+            else if (index === 0) {
+              let date = new Date(key)
+              let min = date.getMinutes()
+
+              date.setMinutes(Math.ceil(min / 10) * 10)
+              date.setSeconds(0)
 
-            if (Number(index) === assetData.length - 1) {
+              dates.push(date.toLocaleString());
+            }
+
+            if (Number(i) === assetData.length - 1) {
               values.push(asset.price * asset.holdings)
             } else {
               values.push(value * asset.holdings);
@@ -134,7 +161,6 @@ class PortfolioAreaStackChart extends Component {
         }
         else {
           assetData.map((granularDataset) => {
-
             if (index === 0) {
               let date = new Date(granularDataset[0])
               let min = date.getMinutes()
@@ -178,8 +204,8 @@ class PortfolioAreaStackChart extends Component {
   UNSAFE_componentWillReceiveProps (nextProps, nextContext) {
     const assetsHeld = nextProps.assets.filter(asset => asset.holdings > 0)
 
-    if (nextProps.days || assetsHeld.length === 0) {
-      this.getData(nextProps.settings, nextProps.assets, nextProps.days);
+    if (nextProps.settings || assetsHeld.length === 0) {
+      this.getData(nextProps.settings, nextProps.assets);
     }
   }
 
@@ -195,6 +221,22 @@ class PortfolioAreaStackChart extends Component {
           style={{ height: '100%', minHeight: '300px' }}
         />
         <Skeleton animation="wave" className="m-auto" hidden={this.state.option.series} height={300} width={'90%'} />
+
+        <Grid container>
+          <Grid item xs={6}>
+            <TimeframeSelector balanceChangeTimeframe={this.props.settings.balanceChangeTimeframe} editSetting={this.props.editSetting} />
+          </Grid>
+
+          <Grid item xs={6}>
+            <SortSelector editSetting={this.props.editSetting} sorting={this.props.settings.sorting} />
+          </Grid>
+        </Grid>
+
+        {
+          (window.innerWidth <= 500 && this.props.assets.length > 0)
+            ? <MobileAssetCardGallery assets={this.props.assets} settings={this.props.settings} setAssetPanelShown={this.props.setAssetPanelShown.bind(this)} />
+            : <LayoutHandler assets={this.props.assets} editSetting={this.props.editSetting.bind(this)} renderStyle={this.props.settings.renderSubStyle || "card:classic"} settings={this.props.settings} setAssetPanelShown={this.props.setAssetPanelShown.bind(this)} />
+        }
       </div>
     )
   }
diff --git a/src/Components/PortfolioDonutChart.js b/src/Components/PortfolioDonutChart.js
index 096b11b..3a85637 100644
--- a/src/Components/PortfolioDonutChart.js
+++ b/src/Components/PortfolioDonutChart.js
@@ -1,6 +1,9 @@
 import React from 'react'
 import ReactECharts from 'echarts-for-react';
 import * as Util from '../Util/index'
+import { Grid } from '@material-ui/core'
+import LayoutHandler from './LayoutHandler'
+import MobileAssetTable from '../Layouts/MobileAssetTable'
 
 function PortfolioDonutChart (props) {
   const option = {
@@ -49,9 +52,18 @@ function PortfolioDonutChart (props) {
   }
 
   return (
-    props.settings.portfolioBreakdown === "donut"
-      ? <ReactECharts option={option} style={{ height: '100%', minHeight: '300px' }} />
-      : null
+    <Grid container style={{ width: '99%' }}>
+      <Grid item xs={12} md={2}>
+        <ReactECharts option={option} style={{ height: '100%', minHeight: '300px' }} />
+      </Grid>
+      <Grid item xs={12} md={10}>
+        {
+          (window.innerWidth <= 500 && props.assets.length > 0)
+            ? <MobileAssetTable {...props} />
+            : <LayoutHandler assets={props.assets} editSetting={props.editSetting.bind(this)} renderStyle={props.settings.renderSubStyle || "card:classic"} settings={props.settings} setAssetPanelShown={props.setAssetPanelShown.bind(this)} />
+        }
+      </Grid>
+    </Grid>
   )
 }
 
diff --git a/src/Components/Settings.js b/src/Components/Settings.js
index d87c0cc..27125da 100644
--- a/src/Components/Settings.js
+++ b/src/Components/Settings.js
@@ -163,89 +163,34 @@ class Settings extends Component {
               />
             </Grid>
             <Grid item xs={12} md={6}>
-              <FormControlLabel
-                className='m-0 w-100'
-                control={
-                  <Select
-                    className='w-100'
-                    onChange={event => this.props.editSetting('renderStyle', event.target.value)}
-                    value={this.props.settings.renderStyle}
-                    variant='outlined'
-                  >
-                    <MenuItem key='card-classic' value='card:classic'>Classic Card</MenuItem>
-                    <MenuItem key='card-compact' value='card:compact'>Compact Card</MenuItem>
-                    <MenuItem key='table' value='table'>Table</MenuItem>
-                  </Select>
-                }
+              <TextField
+                className='w-100'
                 label='Asset Display Style'
-                labelPlacement='top'
-                value='top'
-              />
-              <FormControlLabel
-                className='m-0 w-100'
-                control={
-                  <Select
-                    className='w-100'
-                    onChange={event => this.props.editSetting('sorting', event.target.value)}
-                    value={this.props.settings.sorting}
-                    variant='outlined'
-                  >
-                    <MenuItem key='balance' value='balance'>Balance</MenuItem>
-                    <MenuItem key='market_cap' value='market_cap'>Market Cap</MenuItem>
-                    <MenuItem key='price' value='price'>Price</MenuItem>
-                    <MenuItem key='percent_change_1h' value='percent_change_1h'>1 Hour Change</MenuItem>
-                    <MenuItem key='percent_change_24h' value='percent_change_24h'>24 Hour Change</MenuItem>
-                    <MenuItem key='percent_change_7d' value='percent_change_7d'>7 Day Change</MenuItem>
-                  </Select>
-                }
-                hidden={(this.props.settings.renderStyle === 'table' && window.innerWidth <= 500)}
-                label='Sort By'
-                labelPlacement='top'
-                value='top'
-              />
-              <FormControlLabel
-                className='m-0 w-100'
-                control={
-                  <Select
-                    className='w-100'
-                    onChange={event => this.props.editSetting('portfolioBreakdown', event.target.value)}
-                    value={this.props.settings.portfolioBreakdown}
-                    variant='outlined'
-                  >
-                    <MenuItem key='none' value='none'>None</MenuItem>
-                    <MenuItem key='stacked_line' value='stacked_line'>Stacked Line</MenuItem>
-                    <MenuItem key='donut' value='donut'>Donut</MenuItem>
-                  </Select>
-                }
-                hidden={(this.props.settings.renderStyle === 'table' && window.innerWidth <= 500)}
-                label='Portfolio Breakdown'
-                labelPlacement='top'
-                value='top'
-              />
-              <FormControlLabel
-                className='m-0 w-100'
-                control={
-                  <Select
-                    className='w-100'
-                    onChange={event => this.props.editSetting('days', event.target.value)}
-                    size={'small'}
-                    value={this.props.settings.days || 7}
-                    variant='outlined'
-                  >
-                    <MenuItem key='7' value='7'>7 Days</MenuItem>
-                    <MenuItem key='14' value='14'>14 Days</MenuItem>
-                    <MenuItem key='30' value='30'>30 Days</MenuItem>
-                    <MenuItem key='60' value='60'>60 Days</MenuItem>
-                    <MenuItem key='90' value='90'>90 Days</MenuItem>
-                    <MenuItem key='120' value='120'>120 Days</MenuItem>
-                    <MenuItem key='365' value='365'>365 Days</MenuItem>
-                  </Select>
-                }
-                hidden={this.props.settings.portfolioBreakdown !== "stacked_line"}
-                label='Portfolio Chart Time Span'
-                labelPlacement='top'
-                value='top'
-              />
+                onChange={event => this.props.editSetting('renderStyle', event.target.value)}
+                select
+                value={this.props.settings.renderStyle}
+                variant='outlined'
+              >
+                <MenuItem key='card-classic' value='card:classic'>Classic Card</MenuItem>
+                <MenuItem key='card-compact' value='card:compact'>Compact Card</MenuItem>
+                <MenuItem key='portfolio-chart' value='portfolio:chart'>Portfolio Chart</MenuItem>
+                <MenuItem key='portfolio-donut' value='portfolio:donut'>Portfolio Donut</MenuItem>
+                <MenuItem key='table' value='table'>Table</MenuItem>
+              </TextField>
+
+              <TextField
+                className='w-100'
+                hidden={window.innerWidth <= 500 || !this.props.settings.renderStyle.includes("portfolio")}
+                label='Asset Display Sub-Style'
+                onChange={event => this.props.editSetting('renderSubStyle', event.target.value)}
+                select
+                value={this.props.settings.renderSubStyle}
+                variant='outlined'
+              >
+                <MenuItem key='card-classic' value='card:classic'>Classic Card</MenuItem>
+                <MenuItem key='card-compact' value='card:compact'>Compact Card</MenuItem>
+                <MenuItem key='table' value='table'>Table</MenuItem>
+              </TextField>
             </Grid>
           </Grid>
           <Grid className='mb-4' container>
diff --git a/src/Components/SortSelector.js b/src/Components/SortSelector.js
new file mode 100644
index 0000000..bbf70ec
--- /dev/null
+++ b/src/Components/SortSelector.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import MenuItem from '@material-ui/core/MenuItem'
+import { TextField } from '@material-ui/core'
+
+function SortSelector (props) {
+
+  return (
+    <TextField
+      className={window.innerWidth <= 500 ? 'w-100' : 'w-50'}
+      onChange={event => props.editSetting('sorting', event.target.value)}
+      label='Sort'
+      select
+      size='small'
+      value={props.sorting}
+      variant='outlined'
+    >
+      <MenuItem key='balance' value='balance'>Balance</MenuItem>
+      <MenuItem key='market_cap' value='market_cap'>Market Cap</MenuItem>
+      <MenuItem key='price' value='price'>Price</MenuItem>
+      <MenuItem key='percent_change_1h' value='percent_change_1h'>1 Hour Change</MenuItem>
+      <MenuItem key='percent_change_24h' value='percent_change_24h'>24 Hour Change</MenuItem>
+      <MenuItem key='percent_change_7d' value='percent_change_7d'>7 Day Change</MenuItem>
+    </TextField>
+  )
+}
+
+export default SortSelector
diff --git a/src/Components/TimeframeSelector.js b/src/Components/TimeframeSelector.js
new file mode 100644
index 0000000..894602e
--- /dev/null
+++ b/src/Components/TimeframeSelector.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import MenuItem from '@material-ui/core/MenuItem'
+import { TextField } from '@material-ui/core'
+
+function TimeframeSelector (props) {
+
+  return (
+    <TextField
+      className={window.innerWidth <= 500 ? 'w-100' : 'w-50'}
+      onChange={event => props.editSetting('balanceChangeTimeframe', event.target.value)}
+      label='Timeframe'
+      select
+      size='small'
+      value={props.balanceChangeTimeframe || 'percent_change_7d'}
+      variant='outlined'
+    >
+      <MenuItem key='percent_change_24h' value='percent_change_24h'>24 Hour</MenuItem>
+      <MenuItem key='percent_change_7d' value='percent_change_7d'>7 Day</MenuItem>
+      <MenuItem key='percent_change_14d' value='percent_change_14d'>14 Day</MenuItem>
+      <MenuItem key='percent_change_30d' value='percent_change_30d'>30 Day</MenuItem>
+      <MenuItem key='percent_change_60d' value='percent_change_60d'>60 Day</MenuItem>
+      <MenuItem key='percent_change_90d' value='percent_change_90d'>90 Day</MenuItem>
+      <MenuItem key='percent_change_120d' value='percent_change_120d'>120 Day</MenuItem>
+      <MenuItem key='percent_change_365d' value='percent_change_365d'>1 Year</MenuItem>
+    </TextField>
+  )
+}
+
+export default TimeframeSelector
diff --git a/src/Components/AssetTable.js b/src/Layouts/AssetTable.js
similarity index 99%
rename from src/Components/AssetTable.js
rename to src/Layouts/AssetTable.js
index 3d461fd..7d388c4 100644
--- a/src/Components/AssetTable.js
+++ b/src/Layouts/AssetTable.js
@@ -2,7 +2,7 @@ import React from 'react'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import '../styles/Card.css'
 import { Box, CircularProgress, colors, IconButton, Typography } from '@material-ui/core'
-import * as Util from '../Util/index'
+import * as Util from '../Util'
 import abbreviate from 'number-abbreviate'
 import { DataGrid } from '@material-ui/data-grid'
 import { Delete } from '@material-ui/icons'
@@ -200,6 +200,7 @@ function AssetTable (props) {
   return (
     <DataGrid
       autoHeight
+      className="m-2"
       columns={columns}
       hideFooterSelectedRowCount={true}
       onCellClick = {(cell) => {
diff --git a/src/Layouts/CardGrid.js b/src/Layouts/CardGrid.js
new file mode 100644
index 0000000..f4ed592
--- /dev/null
+++ b/src/Layouts/CardGrid.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import '../styles/Card.css'
+import { Grid } from '@material-ui/core'
+import AssetCard from '../Components/AssetCard'
+
+function CardGrid (props) {
+  const cards = []
+
+  let assets = props.assets
+
+  if (!assets) { return null }
+
+  assets.forEach(asset => {
+    cards.push(
+      <Grid item xs={12} sm={6} md={4} key={asset.symbol}>
+        <AssetCard asset={asset} key={asset.symbol} renderStyle={props.renderStyle || props.settings.renderStyle} settings={props.settings} setAssetPanelShown={props.setAssetPanelShown.bind(this)} />
+      </Grid>
+    )
+  })
+
+  return <Grid container spacing={2}>{cards}</Grid>
+}
+
+export default CardGrid
diff --git a/src/Layouts/MobileAssetCardGallery.js b/src/Layouts/MobileAssetCardGallery.js
new file mode 100644
index 0000000..74e82e0
--- /dev/null
+++ b/src/Layouts/MobileAssetCardGallery.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import '../styles/Card.css'
+import { Grid } from '@material-ui/core'
+import AssetCard from '../Components/AssetCard'
+import { ArrowBack, ArrowForward } from '@material-ui/icons'
+import IconButton from '@material-ui/core/IconButton'
+
+function MobileAssetCardGallery (props) {
+  const [index, setIndex] = React.useState(0)
+
+  function getAssetCard(delta) {
+    if (index > 0 && delta === -1) {
+      setIndex(index - 1)
+    }
+    else if (index < props.assets.length -1 && delta === 1) {
+      setIndex(index + 1)
+    }
+  }
+
+  console.log(index)
+  return (
+    <div>
+      <AssetCard asset={props.assets[index]} key={props.assets[index].symbol} renderStyle={props.renderStyle || "card:compact"} settings={props.settings} setAssetPanelShown={props.setAssetPanelShown.bind(this)} />
+      <Grid container>
+        <Grid item style={{display: 'flex', justifyContent: 'center'}} xs={6}>
+          <IconButton
+            aria-label='mode'
+            className='p-1 pull-left'
+            color='inherit'
+            disabled={index === 0}
+            onClick={() => getAssetCard(-1)}
+            title='Previous'
+          >
+            <ArrowBack />
+          </IconButton>
+        </Grid>
+        <Grid item style={{display: 'flex', justifyContent: 'center'}} xs={6}>
+          <IconButton
+            aria-label='mode'
+            className='p-1 pull-left'
+            color='inherit'
+            disabled={index === props.assets.length - 1}
+            onClick={() => getAssetCard(1)}
+            title='Next'
+          >
+            <ArrowForward />
+          </IconButton>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+export default MobileAssetCardGallery
diff --git a/src/Components/MobileAssetTable.js b/src/Layouts/MobileAssetTable.js
similarity index 99%
rename from src/Components/MobileAssetTable.js
rename to src/Layouts/MobileAssetTable.js
index 2a4d075..cbdeefb 100644
--- a/src/Components/MobileAssetTable.js
+++ b/src/Layouts/MobileAssetTable.js
@@ -2,7 +2,7 @@ import React from 'react'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import '../styles/Card.css'
 import { Box, colors, Grid, TextField } from '@material-ui/core'
-import * as Util from '../Util/index'
+import * as Util from '../Util'
 import { DataGrid } from '@material-ui/data-grid'
 import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab'
 import MenuItem from '@material-ui/core/MenuItem'
diff --git a/src/Util/CoinMarketCap.js b/src/Util/CoinMarketCap.js
index 959116b..ed9268d 100644
--- a/src/Util/CoinMarketCap.js
+++ b/src/Util/CoinMarketCap.js
@@ -93,15 +93,20 @@ export const getAvailableAssets = async () => {
 export const getHistoricalAssetData = async (currency, symbols, days = 7) => {
   if (!currency || !symbols) { return }
 
-  let interval = 'daily';
-  let time_end = (new Date().getTime() / 1000).toFixed(0);
-  let time_start = time_end - (86400 * days);
+  let interval = 'hourly'
+
+  if (days > 29) {
+    interval = 'daily'
+  }
+
+  let time_end = (new Date().getTime() / 1000).toFixed(0)
+  let time_start = time_end - Math.round(86400 * days)
 
   try {
     return await window.fetch(`${CORS_PROXY}https://web-api.coinmarketcap.com/v1/cryptocurrency/quotes/historical?format=chart_crypto_details&symbol=${symbols}&convert=${currency}&interval=${interval}&time_end=${time_end}&time_start=${time_start}`)
       .then(res => res.json())
       .then(response => {
-        return response.data || null;
+        return response.data || null
       })
   } catch (e) {
     console.log('Error getting Coinmarketcap historical data:', e)
diff --git a/src/styles/App.css b/src/styles/App.css
index 886e556..da07ed2 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -1,8 +1,13 @@
-.page {
+.header {
   margin: auto;
   max-width: 1200px;
 }
 
+.page {
+  margin: auto;
+  max-width: 1400px;
+}
+
 body {
   text-align: center;
 }
diff --git a/src/styles/Card.css b/src/styles/Card.css
index 678827e..caee4ec 100644
--- a/src/styles/Card.css
+++ b/src/styles/Card.css
@@ -5,6 +5,7 @@
 .card {
   border: 0;
   height: 100%;
+  margin: 8px;
 }
 
 .card:hover .settings{