diff --git a/frontend/components/TotalAssetsDetails.js b/frontend/components/TotalAssetsDetails.js
new file mode 100644
index 000000000..48a6fec55
--- /dev/null
+++ b/frontend/components/TotalAssetsDetails.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import CardContent from "@material-ui/core/CardContent";
+import Card from "@material-ui/core/Card";
+import {makeStyles} from "@material-ui/core/styles";
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Avatar from '@material-ui/core/Avatar';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        margin: theme.spacing(1),
+    },
+    cardContent: {}
+}));
+
+const logoCurrencies = {
+    "BTC": true,
+    "ETH": true,
+    "BCH": true,
+    "LTC": true,
+    "USDT": true,
+    "BNB": true,
+    "COMP": true,
+    "XRP": true,
+    "LINK": true,
+    "DOT": true,
+    "SXP": true,
+    "DAI": true,
+}
+
+export default function TotalAssetsDetails({assets}) {
+    const classes = useStyles();
+
+    const sortedAssets = [];
+    for (let k in assets) {
+        sortedAssets.push(assets[k]);
+    }
+    sortedAssets.sort((a, b) => {
+        if (a.inUSD > b.inUSD) {
+            return -1
+        }
+
+        if (a.inUSD < b.inUSD) {
+            return 1
+        }
+
+        return 0;
+    })
+
+    const items = sortedAssets.map((a) => {
+        return (
+            <ListItem key={a.currency} dense>
+                {
+                    (a.currency in logoCurrencies) ? (
+                        <ListItemAvatar>
+                            <Avatar alt={a.currency} src={`/images/${a.currency.toLowerCase()}-logo.svg`}/>
+                        </ListItemAvatar>
+                    ) : (
+                        <ListItemAvatar>
+                            <Avatar alt={a.currency}/>
+                        </ListItemAvatar>
+                    )
+                }
+                <ListItemText dense primary={`${a.currency} ${a.total}`} secondary={`USD =~ ${a.inUSD}`}/>
+            </ListItem>
+        )
+    })
+
+    return (
+        <Card className={classes.root} variant="outlined">
+            <CardContent className={classes.cardContent}>
+                <List dense>
+                    {items}
+                </List>
+            </CardContent>
+        </Card>
+    );
+
+}
diff --git a/frontend/components/TotalAssetsPie.js b/frontend/components/TotalAssetsPie.js
index 13059ae43..48f58bbb5 100644
--- a/frontend/components/TotalAssetsPie.js
+++ b/frontend/components/TotalAssetsPie.js
@@ -3,6 +3,9 @@ import React, {useEffect, useState} from 'react';
 import {ResponsivePie} from '@nivo/pie';
 import {queryAssets} from '../api/bbgo';
 import {currencyColor} from '../src/utils';
+import CardContent from "@material-ui/core/CardContent";
+import Card from "@material-ui/core/Card";
+import {makeStyles} from "@material-ui/core/styles";
 
 function reduceAssetsBy(assets, field, minimum) {
     let as = []
@@ -29,55 +32,64 @@ function reduceAssetsBy(assets, field, minimum) {
     return as
 }
 
-export default function TotalAssetsPie() {
-    const [assets, setAssets] = useState({})
+const useStyles = makeStyles((theme) => ({
+    root: {
+        margin: theme.spacing(1),
+    },
+    cardContent: {
+        height: 350,
+    }
+}));
 
-    useEffect(() => {
-        queryAssets((assets) => {
-            setAssets(assets)
-        })
-    }, [])
-
-    return <ResponsivePie
-        data={reduceAssetsBy(assets, "inUSD", 2)}
-        margin={{top: 40, right: 80, bottom: 80, left: 0}}
-        padding={0.2}
-        innerRadius={0.8}
-        padAngle={1.0}
-        valueFormat=" >-$f"
-        colors={{datum: 'data.color'}}
-        // colors={{scheme: 'nivo'}}
-        cornerRadius={0.1}
-        borderWidth={1}
-        borderColor={{from: 'color', modifiers: [['darker', 0.2]]}}
-        radialLabelsSkipAngle={10}
-        radialLabelsTextColor="#333333"
-        radialLabelsLinkColor={{from: 'color'}}
-        sliceLabelsSkipAngle={30}
-        sliceLabelsTextColor="#fff"
-        legends={[
-            {
-                anchor: 'right',
-                direction: 'column',
-                justify: false,
-                translateX: 30,
-                translateY: 0,
-                itemsSpacing: 5,
-                itemWidth: 120,
-                itemHeight: 24,
-                itemTextColor: '#999',
-                itemOpacity: 1,
-                symbolSize: 18,
-                symbolShape: 'circle',
-                effects: [
-                    {
-                        on: 'hover',
-                        style: {
-                            itemTextColor: '#000'
+export default function TotalAssetsPie({ assets }) {
+    const classes = useStyles();
+    return (
+        <Card className={classes.root} variant="outlined">
+            <CardContent className={classes.cardContent}>
+                <ResponsivePie
+                    data={reduceAssetsBy(assets, "inUSD", 2)}
+                    margin={{top: 20, right: 80, bottom: 10, left: 0}}
+                    padding={0.1}
+                    innerRadius={0.8}
+                    padAngle={1.0}
+                    valueFormat=" >-$f"
+                    colors={{datum: 'data.color'}}
+                    // colors={{scheme: 'nivo'}}
+                    cornerRadius={0.1}
+                    borderWidth={1}
+                    borderColor={{from: 'color', modifiers: [['darker', 0.2]]}}
+                    radialLabelsSkipAngle={10}
+                    radialLabelsTextColor="#333333"
+                    radialLabelsLinkColor={{from: 'color'}}
+                    sliceLabelsSkipAngle={30}
+                    sliceLabelsTextColor="#fff"
+                    legends={[
+                        {
+                            anchor: 'right',
+                            direction: 'column',
+                            justify: false,
+                            translateX: 70,
+                            translateY: 0,
+                            itemsSpacing: 5,
+                            itemWidth: 80,
+                            itemHeight: 24,
+                            itemTextColor: '#999',
+                            itemOpacity: 1,
+                            symbolSize: 18,
+                            symbolShape: 'circle',
+                            effects: [
+                                {
+                                    on: 'hover',
+                                    style: {
+                                        itemTextColor: '#000'
+                                    }
+                                }
+                            ]
                         }
-                    }
-                ]
-            }
-        ]}
-    />
+                    ]}
+                />
+            </CardContent>
+        </Card>
+    );
+
 }
diff --git a/frontend/components/TotalAssetsSummary.js b/frontend/components/TotalAssetsSummary.js
index 59179ef8e..6ddf14230 100644
--- a/frontend/components/TotalAssetsSummary.js
+++ b/frontend/components/TotalAssetsSummary.js
@@ -1,5 +1,4 @@
 import {useEffect, useState} from "react";
-import {queryAssets} from "../api/bbgo";
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import Typography from '@material-ui/core/Typography';
@@ -19,18 +18,8 @@ function aggregateAssetsBy(assets, field) {
 }
 
 const useStyles = makeStyles((theme) => ({
-    paper: {
-        marginTop: theme.spacing(3),
-        marginBottom: theme.spacing(3),
-        padding: theme.spacing(2),
-    },
     root: {
-        minWidth: 275,
-    },
-    bullet: {
-        display: 'inline-block',
-        margin: '0 2px',
-        transform: 'scale(0.8)',
+        margin: theme.spacing(1),
     },
     title: {
         fontSize: 14,
@@ -40,16 +29,8 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
-export default function TotalAssetSummary() {
+export default function TotalAssetSummary({ assets }) {
     const classes = useStyles();
-    const [assets, setAssets] = useState({})
-
-    useEffect(() => {
-        queryAssets((assets) => {
-            setAssets(assets)
-        })
-    }, [])
-
     return <Card className={classes.root} variant="outlined">
         <CardContent>
             <Typography className={classes.title} color="textSecondary" gutterBottom>
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 616faa460..d66344fa6 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {useRouter} from 'next/router';
 
 import {makeStyles} from '@material-ui/core/styles';
@@ -9,26 +9,23 @@ import Paper from '@material-ui/core/Paper';
 
 import TotalAssetsPie from '../components/TotalAssetsPie';
 import TotalAssetSummary from '../components/TotalAssetsSummary';
+import TotalAssetDetails from '../components/TotalAssetsDetails';
 
 import TradingVolumePanel from '../components/TradingVolumePanel';
 import ExchangeSessionTabPanel from '../components/ExchangeSessionTabPanel';
 
 import DashboardLayout from '../layouts/DashboardLayout';
 
-import {querySessions} from "../api/bbgo";
+import {queryAssets, querySessions} from "../api/bbgo";
 
 const useStyles = makeStyles((theme) => ({
-    paper: {
-        height: 140,
-        width: 200,
-    },
-    totalAssetsBox: {
-        height: 300,
-    },
     totalAssetsSummary: {
         margin: theme.spacing(2),
         padding: theme.spacing(2),
     },
+    grid: {
+        flexGrow: 1,
+    },
     control: {
         padding: theme.spacing(2),
     },
@@ -40,12 +37,14 @@ export default function Home() {
     const classes = useStyles();
     const router = useRouter();
 
+    const [assets, setAssets] = useState({})
     const [sessions, setSessions] = React.useState([])
 
     React.useEffect(() => {
         querySessions((sessions) => {
             if (sessions && sessions.length > 0) {
                 setSessions(sessions)
+                queryAssets(setAssets)
             } else {
                 router.push("/setup");
             }
@@ -66,6 +65,8 @@ export default function Home() {
         );
     }
 
+    console.log("index: assets", assets)
+
     return (
         <DashboardLayout>
             <Paper className={classes.totalAssetsSummary}>
@@ -73,17 +74,25 @@ export default function Home() {
                     Total Assets
                 </Typography>
 
-                <Grid container spacing={3}>
-                    <Grid item xs={12} md={3}>
-                        <TotalAssetSummary/>
-                    </Grid>
+                <div className={classes.grid}>
+                    <Grid container
+                          direction="row"
+                          justify="space-around"
+                          alignItems="flex-start"
+                          spacing={1}>
+                        <Grid item xs={12} md={3}>
+                            <TotalAssetSummary assets={assets}/>
+                        </Grid>
 
-                    <Grid item xs={12} md={6}>
-                        <Box className={classes.totalAssetsBox}>
-                            <TotalAssetsPie/>
-                        </Box>
+                        <Grid item xs={12} md={6}>
+                            <TotalAssetsPie assets={assets}/>
+                        </Grid>
+
+                        <Grid item xs={12} md={3}>
+                            <TotalAssetDetails assets={assets}/>
+                        </Grid>
                     </Grid>
-                </Grid>
+                </div>
             </Paper>
 
             <TradingVolumePanel/>
diff --git a/frontend/public/images/bch-logo.svg b/frontend/public/images/bch-logo.svg
new file mode 100644
index 000000000..127da329c
--- /dev/null
+++ b/frontend/public/images/bch-logo.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#8DC351;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<circle class="st0" cx="16" cy="16" r="16"/>
+	<path class="st1" d="M21.2,10.5c-0.8-2-2.7-2.1-5-1.7L15.4,6l-1.7,0.5l0.8,2.7c-0.4,0.1-0.9,0.3-1.4,0.4l-0.8-2.8l-1.7,0.5l0.8,2.8
+		c-0.4,0.1-0.7,0.2-1.1,0.3l0,0L8,11.2L8.5,13c0,0,1.3-0.4,1.2-0.4c0.7-0.2,1,0.1,1.2,0.5l0.9,3.2c0,0,0.1,0,0.2,0l-0.2,0.1l1.3,4.5
+		c0,0.2,0,0.6-0.5,0.8c0,0-1.2,0.4-1.2,0.4l0.2,2.1l2.2-0.6c0.4-0.1,0.8-0.2,1.2-0.3l0.8,2.8l1.7-0.5l-0.8-2.8
+		c0.5-0.1,0.9-0.2,1.4-0.4l0.8,2.8l1.7-0.5l-0.8-2.8c2.8-1,4.6-2.3,4.1-5.1c-0.4-2.2-1.7-2.9-3.5-2.8C21.4,13,21.8,12,21.2,10.5
+		L21.2,10.5z M20.6,17.3c0.6,2.1-3.1,2.9-4.3,3.3l-1.1-3.8C16.4,16.5,19.9,15.1,20.6,17.3L20.6,17.3z M18.2,12.2
+		c0.6,1.9-2.5,2.6-3.5,2.9l-1-3.4C14.7,11.4,17.7,10.2,18.2,12.2L18.2,12.2z"/>
+</g>
+</svg>
diff --git a/frontend/public/images/bnb-logo.svg b/frontend/public/images/bnb-logo.svg
new file mode 100644
index 000000000..91a66e05f
--- /dev/null
+++ b/frontend/public/images/bnb-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500.01 2500"><defs><style>.cls-1{fill:#f3ba2f;}</style></defs><title>bi</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M764.48,1050.52,1250,565l485.75,485.73,282.5-282.5L1250,0,482,768l282.49,282.5M0,1250,282.51,967.45,565,1249.94,282.49,1532.45Zm764.48,199.51L1250,1935l485.74-485.72,282.65,282.35-.14.15L1250,2500,482,1732l-.4-.4,282.91-282.12M1935,1250.12l282.51-282.51L2500,1250.1,2217.5,1532.61Z"/><path class="cls-1" d="M1536.52,1249.85h.12L1250,963.19,1038.13,1175h0l-24.34,24.35-50.2,50.21-.4.39.4.41L1250,1536.81l286.66-286.66.14-.16-.26-.14"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/public/images/btc-logo.svg b/frontend/public/images/btc-logo.svg
new file mode 100644
index 000000000..2b75c99bc
--- /dev/null
+++ b/frontend/public/images/btc-logo.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2019 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 4091.27 4091.73"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1421344023328">
+   <path fill="#F7931A" fill-rule="nonzero" d="M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z"/>
+   <path fill="white" fill-rule="nonzero" d="M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z"/>
+  </g>
+ </g>
+</svg>
diff --git a/frontend/public/images/comp-logo.svg b/frontend/public/images/comp-logo.svg
new file mode 100644
index 000000000..0face3c9d
--- /dev/null
+++ b/frontend/public/images/comp-logo.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#070A0E;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#00D395;}
+</style>
+<path class="st0" d="M1000,2000c552.3,0,1000-447.7,1000-1000S1552.3,0,1000,0S0,447.7,0,1000S447.7,2000,1000,2000z"/>
+<path class="st1" d="M577.7,1335.3c-29.9-18.3-48.2-50.8-48.2-85.8v-195.4c0-23.2,18.9-42,42.1-41.9c7.4,0,14.7,2,21.1,5.7
+	l440.9,257.1c25.8,15,41.7,42.6,41.7,72.5v202.4c0.1,27.8-22.4,50.4-50.2,50.4c-9.3,0-18.5-2.6-26.4-7.4L577.7,1335.3z
+	 M1234.9,964.4c25.8,15,41.6,42.7,41.7,72.5v410.8c0,12.1-6.5,23.3-17.1,29.2l-96.5,54.3c-1.2,0.7-2.5,1.2-3.9,1.6v-228.1
+	c0-29.5-15.5-56.9-40.9-72.1L731,1001V743.5c0-23.2,18.9-42,42.1-41.9c7.4,0,14.7,2,21.1,5.7L1234.9,964.4z M1427.9,661
+	c25.9,15,41.8,42.7,41.8,72.6v600c-0.1,12.3-6.9,23.6-17.7,29.5l-91.5,49.4V994.8c0-29.5-15.5-56.8-40.7-72L924,685.4V441.2
+	c0-7.4,2-14.7,5.6-21.1c11.7-20,37.4-26.8,57.4-15.2L1427.9,661z"/>
+</svg>
diff --git a/frontend/public/images/dai-logo.svg b/frontend/public/images/dai-logo.svg
new file mode 100644
index 000000000..2ae2e32ff
--- /dev/null
+++ b/frontend/public/images/dai-logo.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2019 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 444.44 444.44"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <path fill="#F5AC37" fill-rule="nonzero" d="M222.22 0c122.74,0 222.22,99.5 222.22,222.22 0,122.74 -99.48,222.22 -222.22,222.22 -122.72,0 -222.22,-99.49 -222.22,-222.22 0,-122.72 99.5,-222.22 222.22,-222.22z"/>
+  <path fill="#FEFEFD" fill-rule="nonzero" d="M230.41 237.91l84.44 0c1.8,0 2.65,0 2.78,-2.36 0.69,-8.59 0.69,-17.23 0,-25.83 0,-1.67 -0.83,-2.36 -2.64,-2.36l-168.05 0c-2.08,0 -2.64,0.69 -2.64,2.64l0 24.72c0,3.19 0,3.19 3.33,3.19l82.78 0zm77.79 -59.44c0.24,-0.63 0.24,-1.32 0,-1.94 -1.41,-3.07 -3.08,-6 -5.02,-8.75 -2.92,-4.7 -6.36,-9.03 -10.28,-12.92 -1.85,-2.35 -3.99,-4.46 -6.39,-6.25 -12.02,-10.23 -26.31,-17.47 -41.67,-21.11 -7.75,-1.74 -15.67,-2.57 -23.61,-2.5l-74.58 0c-2.08,0 -2.36,0.83 -2.36,2.64l0 49.3c0,2.08 0,2.64 2.64,2.64l160.27 0c0,0 1.39,-0.28 1.67,-1.11l-0.68 0zm0 88.33c-2.36,-0.26 -4.74,-0.26 -7.1,0l-154.02 0c-2.08,0 -2.78,0 -2.78,2.78l0 48.2c0,2.22 0,2.78 2.78,2.78l71.11 0c3.4,0.26 6.8,0.02 10.13,-0.69 10.32,-0.74 20.47,-2.98 30.15,-6.67 3.52,-1.22 6.92,-2.81 10.13,-4.72l0.97 0c16.67,-8.67 30.21,-22.29 38.75,-39.01 0,0 0.97,-2.1 -0.12,-2.65zm-191.81 78.75l0 -0.83 0 -32.36 0 -10.97 0 -32.64c0,-1.81 0,-2.08 -2.22,-2.08l-30.14 0c-1.67,0 -2.36,0 -2.36,-2.22l0 -26.39 32.22 0c1.8,0 2.5,0 2.5,-2.36l0 -26.11c0,-1.67 0,-2.08 -2.22,-2.08l-30.14 0c-1.67,0 -2.36,0 -2.36,-2.22l0 -24.44c0,-1.53 0,-1.94 2.22,-1.94l29.86 0c2.08,0 2.64,0 2.64,-2.64l0 -74.86c0,-2.22 0,-2.78 2.78,-2.78l104.16 0c7.56,0.3 15.07,1.13 22.5,2.5 15.31,2.83 30.02,8.3 43.47,16.11 8.92,5.25 17.13,11.59 24.44,18.89 5.5,5.71 10.46,11.89 14.86,18.47 4.37,6.67 8,13.8 10.85,21.25 0.35,1.94 2.21,3.25 4.15,2.92l24.86 0c3.19,0 3.19,0 3.33,3.06l0 22.78c0,2.22 -0.83,2.78 -3.06,2.78l-19.17 0c-1.94,0 -2.5,0 -2.36,2.5 0.76,8.46 0.76,16.95 0,25.41 0,2.36 0,2.64 2.65,2.64l21.93 0c0.97,1.25 0,2.5 0,3.76 0.14,1.61 0.14,3.24 0,4.85l0 16.81c0,2.36 -0.69,3.06 -2.78,3.06l-26.25 0c-1.83,-0.35 -3.61,0.82 -4.03,2.64 -6.25,16.25 -16.25,30.82 -29.17,42.5 -4.72,4.25 -9.68,8.25 -14.86,11.94 -5.56,3.2 -10.97,6.53 -16.67,9.17 -10.49,4.72 -21.49,8.2 -32.78,10.41 -10.72,1.92 -21.59,2.79 -32.5,2.64l-96.39 0 0 -0.14z"/>
+ </g>
+</svg>
diff --git a/frontend/public/images/dot-logo.svg b/frontend/public/images/dot-logo.svg
new file mode 100644
index 000000000..89d0e71a0
--- /dev/null
+++ b/frontend/public/images/dot-logo.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1871.3 2503" style="enable-background:new 0 0 1871.3 2503;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1E1E1E;}
+	.st1{fill:#E6007A;}
+</style>
+<title>polkadot</title>
+<path class="st0" d="M948.2,0C425.4,2.1,2.1,425.4,0,948.2c0,104.7,16.9,208.7,50,308c24.7,67.6,98,104,166.8,83.1
+	c66.5-25.5,101.8-98.2,80.6-166.2c-28.1-77.4-40.6-159.5-36.9-241.7c11.4-377.6,326.7-674.5,704.3-663.1s674.5,326.7,663.1,704.3
+	c-10.7,353.5-289.1,640.6-642.2,662.1c0,0-133.1,8.1-199.3,16.2c-24.4,3.5-48.6,8.3-72.5,14.4c-3.4,3.5-8.9,3.5-12.4,0.1
+	c0,0-0.1-0.1-0.1-0.1c-2.4-3.1-2.4-7.5,0-10.6l20.6-112.4L847,980.1c15-70.2-29.7-139.3-99.9-154.3c-70.2-15-139.3,29.7-154.3,99.9
+	c0,0-297.3,1376.1-297.3,1388.6c-17,66.9,23.4,134.9,90.3,151.9c0.7,0.2,1.5,0.4,2.2,0.5h6.9c66.8,17.3,135-22.9,152.2-89.7
+	c0.3-1.1,0.6-2.2,0.8-3.4c-0.2-2.1-0.2-4.2,0-6.2c3.7-16.2,41.2-199.3,41.2-199.3c28.4-138.2,139.8-244.1,279.2-265.5
+	c28.7-4.4,149.3-12.5,149.3-12.5c520.8-51.9,900.9-516.2,848.9-1037C1819.1,378.1,1425.6,12.4,948.2,0z"/>
+<path class="st1" d="M1005.7,2186.3c-85.5-17.8-169.1,37.1-186.9,122.5c-0.2,0.8-0.3,1.6-0.5,2.4c-18.5,84.9,35.3,168.8,120.3,187.3
+	c0.1,0,0.2,0,0.3,0.1h4.4c83.2,20.1,166.9-31.1,186.9-114.2c0.2-0.6,0.3-1.3,0.5-1.9v-8.7C1145.4,2288,1090.6,2205.7,1005.7,2186.3z
+	"/>
+</svg>
diff --git a/frontend/public/images/eth-logo.svg b/frontend/public/images/eth-logo.svg
new file mode 100644
index 000000000..684e96873
--- /dev/null
+++ b/frontend/public/images/eth-logo.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2019 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
+viewBox="0 0 784.37 1277.39"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <g id="Layer_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1421394342400">
+   <g>
+    <polygon fill="#343434" fill-rule="nonzero" points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54 "/>
+    <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33 "/>
+    <polygon fill="#3C3C3B" fill-rule="nonzero" points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89 "/>
+    <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89 "/>
+    <polygon fill="#141414" fill-rule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33 "/>
+    <polygon fill="#393939" fill-rule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33 "/>
+   </g>
+  </g>
+ </g>
+</svg>
diff --git a/frontend/public/images/link-logo.svg b/frontend/public/images/link-logo.svg
new file mode 100644
index 000000000..bf4cd5374
--- /dev/null
+++ b/frontend/public/images/link-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.8 43.6"><defs><style>.cls-1{fill:#2a5ada;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M18.9,0l-4,2.3L4,8.6,0,10.9V32.7L4,35l11,6.3,4,2.3,4-2.3L33.8,35l4-2.3V10.9l-4-2.3L22.9,2.3ZM8,28.1V15.5L18.9,9.2l10.9,6.3V28.1L18.9,34.4Z"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/public/images/ltc-logo.svg b/frontend/public/images/ltc-logo.svg
new file mode 100644
index 000000000..13e76a40e
--- /dev/null
+++ b/frontend/public/images/ltc-logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82.6 82.6"><title>litecoin-ltc-logo</title><circle cx="41.3" cy="41.3" r="36.83" style="fill:#fff"/><path d="M41.3,0A41.3,41.3,0,1,0,82.6,41.3h0A41.18,41.18,0,0,0,41.54,0ZM42,42.7,37.7,57.2h23a1.16,1.16,0,0,1,1.2,1.12v.38l-2,6.9a1.49,1.49,0,0,1-1.5,1.1H23.2l5.9-20.1-6.6,2L24,44l6.6-2,8.3-28.2a1.51,1.51,0,0,1,1.5-1.1h8.9a1.16,1.16,0,0,1,1.2,1.12v.38L43.5,38l6.6-2-1.4,4.8Z" style="fill:#345d9d"/></svg>
\ No newline at end of file
diff --git a/frontend/public/images/sxp-logo.svg b/frontend/public/images/sxp-logo.svg
new file mode 100644
index 000000000..27a498349
--- /dev/null
+++ b/frontend/public/images/sxp-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 593.21 593.21"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#fff;fill-rule:evenodd;}</style><linearGradient id="linear-gradient" x1="5686.65" y1="-2326.29" x2="12487" y2="-6979.17" gradientTransform="matrix(0.07, 0, 0, -0.07, -357.65, -38.39)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff3b3b"/><stop offset="1" stop-color="#ff9914"/></linearGradient></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Layer_1-3" data-name="Layer_1"><circle class="cls-1" cx="296.6" cy="296.6" r="296.6"/><path class="cls-2" d="M285.86,107a75.41,75.41,0,0,0-45.34,22.25c-9.09,9-17.7,18.24-26.91,27.33-4.61,4.73-9.27,9.33-13.93,14s-9.8,9.63-14.64,14.53-8.86,9.2-13.34,13.75c-7,7-14,14-21,21.07-5.37,5.55-10.62,11.28-15.93,16.82-3.13,3.31-6.5,6.38-9.45,9.86a83.1,83.1,0,0,0-18.83,52.67c0,1.13,0,2.29.07,3.41A68.86,68.86,0,0,0,115,334.2a119.77,119.77,0,0,0,10.44,16.71c2.6,3.66,4.49,3.6,7.91.77a17,17,0,0,0,1.83-1.77c3.37-3.55,6.67-7.09,10.1-10.63,4.84-5.08,9.8-10.15,14.64-15.29s10.09-10.8,15.17-16.11c2.42-2.6,5-5,7.44-7.56,5.19-5.49,10.27-11.15,15.46-16.58s10.45-10.51,15.53-15.82,11.33-11.81,17.05-17.71,10.57-10.86,15.88-16.29c6.91-7.15,13.64-14.47,20.48-21.61,4.25-4.37,8.62-8.56,12.87-12.87,5.9-5.9,11.39-11.8,17.18-17.7s10.09-9.86,15.05-14.94Q328.66,150,345.24,133a23.64,23.64,0,0,0,2-2.24c2.72-3.43,2.95-4.19-.41-6.61a105.84,105.84,0,0,0-16.41-10.63,77.1,77.1,0,0,0-32.67-7.26h-.56a90.26,90.26,0,0,0-11.28.71l-.06-.06Zm97.69,72.66h-.71a33.33,33.33,0,0,0-25.44,11.81,24.63,24.63,0,0,1-1.77,1.77l-18.06,17.71c-5.9,5.91-12.28,12.34-18.48,18.54-5.13,5.13-10.27,10.15-15.34,15.29s-10.51,10.86-16,16.23-11.33,11-17,16.53l-20.13,20.3L213.2,335.27q-24.8,24.9-49.53,49.7c-3.18,3.13-3.24,3.54,0,6.9,7.91,8,15.94,15.94,23.61,24a31.64,31.64,0,0,0,17.83,9.5,42.26,42.26,0,0,0,19.42-.65,29.56,29.56,0,0,0,12.75-6.79L256.88,399c4.6-4.42,9.27-8.79,13.81-13.28,9.09-9,18.06-18.06,27.15-27,7.38-7.26,14.94-14.46,22.43-21.72L351,307.05c9.56-9.39,19.18-18.83,28.86-28.22A6.32,6.32,0,0,1,391,280.08a43.17,43.17,0,0,1,7.55,24.4,44.26,44.26,0,0,1-.23,4.46A40.72,40.72,0,0,1,388,332.55c-7.09,7.62-14.64,14.82-22,22.14-5.25,5.19-10.62,10.27-15.88,15.52-6.79,6.73-13.46,13.58-20.25,20.31-1,1.12-1.94,2.3-3,3.36l-6.67,6.91c-5,5-10.09,9.86-15,14.87S294.65,426.53,289.4,432c-.47.53-1,.88-1.47,1.35-5.91,5.49-11.34,11-16.95,16.53-2.65,2.6-5.19,5.25-7.79,7.85-4.48,4.55-9.09,9-13.4,13.64-2.65,2.77-2.65,4.48.48,6.67a112.39,112.39,0,0,0,16.35,10.44,82.41,82.41,0,0,0,45.62,6.49,74.59,74.59,0,0,0,41.33-18.83c8.73-7.67,16.53-16.29,24.67-24.55,5.9-5.91,11.81-12.22,18.12-18.3l17.06-17.18c5.2-5.25,10.33-10.51,15.59-15.7s11.8-11.39,17.7-17.24,11.81-11.8,17.71-18.06a136.64,136.64,0,0,0,13-15.35,83.71,83.71,0,0,0,13.41-37.12,82.31,82.31,0,0,0,0-19.84,82.94,82.94,0,0,0-12.46-32.88,95.35,95.35,0,0,0-16.52-19c-16.35-16.23-32.65-32.58-48.64-49.17a37.19,37.19,0,0,0-27.65-12.34h-.22l-1.77.24Z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/frontend/public/images/usdt-logo.svg b/frontend/public/images/usdt-logo.svg
new file mode 100644
index 000000000..e53082240
--- /dev/null
+++ b/frontend/public/images/usdt-logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 339.43 295.27"><title>tether-usdt-logo</title><path d="M62.15,1.45l-61.89,130a2.52,2.52,0,0,0,.54,2.94L167.95,294.56a2.55,2.55,0,0,0,3.53,0L338.63,134.4a2.52,2.52,0,0,0,.54-2.94l-61.89-130A2.5,2.5,0,0,0,275,0H64.45a2.5,2.5,0,0,0-2.3,1.45h0Z" style="fill:#50af95;fill-rule:evenodd"/><path d="M191.19,144.8v0c-1.2.09-7.4,0.46-21.23,0.46-11,0-18.81-.33-21.55-0.46v0c-42.51-1.87-74.24-9.27-74.24-18.13s31.73-16.25,74.24-18.15v28.91c2.78,0.2,10.74.67,21.74,0.67,13.2,0,19.81-.55,21-0.66v-28.9c42.42,1.89,74.08,9.29,74.08,18.13s-31.65,16.24-74.08,18.12h0Zm0-39.25V79.68h59.2V40.23H89.21V79.68H148.4v25.86c-48.11,2.21-84.29,11.74-84.29,23.16s36.18,20.94,84.29,23.16v82.9h42.78V151.83c48-2.21,84.12-11.73,84.12-23.14s-36.09-20.93-84.12-23.15h0Zm0,0h0Z" style="fill:#fff;fill-rule:evenodd"/></svg>
\ No newline at end of file
diff --git a/frontend/public/images/xrp-logo.svg b/frontend/public/images/xrp-logo.svg
new file mode 100644
index 000000000..9a2c7c632
--- /dev/null
+++ b/frontend/public/images/xrp-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 424"><defs><style>.cls-1{fill:#23292f;}</style></defs><title>x</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M437,0h74L357,152.48c-55.77,55.19-146.19,55.19-202,0L.94,0H75L192,115.83a91.11,91.11,0,0,0,127.91,0Z"/><path class="cls-1" d="M74.05,424H0L155,270.58c55.77-55.19,146.19-55.19,202,0L512,424H438L320,307.23a91.11,91.11,0,0,0-127.91,0Z"/></g></g></svg>
\ No newline at end of file