diff --git a/web/cashtab/extension/public/manifest.json b/web/cashtab/extension/public/manifest.json
--- a/web/cashtab/extension/public/manifest.json
+++ b/web/cashtab/extension/public/manifest.json
@@ -3,7 +3,7 @@
 
     "name": "Cashtab",
     "description": "A browser-integrated BCHA wallet from Bitcoin ABC",
-    "version": "0.0.7",
+    "version": "0.0.8",
     "content_scripts": [
         {
             "matches": ["file://*/*", "http://*/*", "https://*/*"],
diff --git a/web/cashtab/extension/src/components/App.css b/web/cashtab/extension/src/components/App.css
--- a/web/cashtab/extension/src/components/App.css
+++ b/web/cashtab/extension/src/components/App.css
@@ -2,24 +2,17 @@
 @import '~@fortawesome/fontawesome-free/css/all.css';
 @import url('https://fonts.googleapis.com/css?family=Khula&display=swap&.css');
 
-@font-face {
-    font-family: 'Roboto Mono';
-    src: local('Roboto Mono'),
-        url(../assets/fonts/RobotoMono-Regular.ttf) format('truetype');
-    font-weight: normal;
+/* Hide scrollbars but keep functionality*/
+/* Hide scrollbar for Chrome, Safari and Opera */
+body::-webkit-scrollbar {
+    display: none;
 }
 
-aside::-webkit-scrollbar {
-    width: 0.3em;
-}
-aside::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px #13171f;
-}
-aside::-webkit-scrollbar-thumb {
-    background-color: darkgrey;
-    outline: 1px solid slategrey;
+/* Hide scrollbar for IE, Edge and Firefox */
+body {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
 }
-
 /* Hide up and down arros on input type="number" */
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
@@ -42,327 +35,14 @@
     overflow-x: hidden;
 }
 
-body::-webkit-scrollbar {
+/* Hide scroll bars on antd modals*/
+.ant-modal-wrap.ant-modal-centered::-webkit-scrollbar {
     display: none;
 }
 
-.App {
-    text-align: center;
-    font-family: 'Gilroy', sans-serif;
-    background-color: #fbfbfd;
-}
-.App-logo {
-    width: 100%;
-    display: block;
-}
-
-.logo img {
-    width: 100%;
-    min-width: 193px;
-    display: block;
-    padding-left: 24px;
-    padding-right: 34px;
-    padding-top: 24px;
-    max-width: 200px;
-}
-.ant-list-item-meta .ant-list-item-meta-content {
-    display: flex;
-}
-
-#react-qrcode-logo {
-    border-radius: 8px;
-}
-.App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
-}
-
-.App-link {
-    color: #f59332;
-}
-.ant-menu-item-group-title {
-    padding-left: 30px;
-    font-size: 20px !important;
-    font-weight: 500 !important;
-}
-
-.ant-menu-item > span {
-    font-size: 14px !important;
-    font-weight: 500 !important;
-}
-
-.ant-card-actions > li > span:hover,
-.ant-btn:hover,
-.ant-btn:focus {
-    color: #f59332;
-    transition: color 0.3s;
-    background-color: white;
-}
-
-.ant-card-actions > li {
-    color: #3e3f42;
-}
-.anticon {
-    color: #3e3f42;
-}
-.ant-list-item-meta-description,
-.ant-list-item-meta-title {
-    color: #3e3f42;
-}
-
-.ant-list-item-meta-description > :first-child {
-    right: 20px !important;
-    position: absolute;
-}
-
-.ant-modal-body .ant-list-item-meta {
-    height: 85px;
-    width: 85px;
-    padding-left: 10px;
-    padding-top: 10px;
-    padding-bottom: 20px;
-    overflow: visible !important;
-}
-
-/* .ant-radio-group-solid .ant-radio-button-wrapper {
-  margin-top: 0px;
-}
-
-.ant-radio-group-solid .ant-radio-button-wrapper-checked {
-  border: none !important;
-  box-shadow: none !important;
-} */
-.identicon {
-    border-radius: 50%;
-    width: 200px;
-    height: 200px;
-    margin-top: -75px;
-    margin-left: -75px;
-    margin-bottom: 20px;
-    box-shadow: 1px 1px 2px 1px #444;
-}
-.ant-list-item-meta {
-    width: 40px;
-    height: 40px;
-}
-
-/* .ant-radio-group-solid .ant-radio-button-wrapper-checked {
-  background: #ff8d00 !important;
-}
-
-.ant-radio-group.ant-radio-group-solid.ant-radio-group-small {
-  font-size: 14px !important;
-  font-weight: 600 !important;
-  vertical-align: middle;
-  border-radius: 100px;
-  overflow: auto;
-  background: rgba(255, 255, 255, 0.5) !important;
-  margin-top: 14px;
-  margin-bottom: 10px;
-  cursor: pointer;
-} */
-
-.ant-checkbox-inner {
-    border: 1px solid #eaedf3 !important;
-    background: white;
-}
-
-.ant-checkbox-inner::after {
-    border-color: white !important;
-}
-
-.ant-card-bordered {
-    border: 1px solid rgb(234, 237, 243);
-    border-radius: 8px;
-}
-
-.ant-card-actions {
-    border-top: 1px solid rgb(234, 237, 243);
-    border-bottom: 1px solid rgb(234, 237, 243);
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.35);
-}
-
-.ant-input-group-addon {
-    background-color: #f4f4f4 !important;
-    border: 1px solid rgb(234, 237, 243);
-    color: #3e3f42 !important;
-
-    * {
-        color: #3e3f42 !important;
-    }
-}
-
-.ant-menu-item.ant-menu-item-selected > * {
-    color: #fff !important;
-}
-
-.ant-menu-item.ant-menu-item-selected {
-    border: 0;
-    overflow: hidden;
-    text-align: left;
-    padding-left: 28px;
-    background-color: rgba(255, 255, 255, 0.2) !important;
-}
-
-.ant-btn {
-    border-radius: 8px;
-    background-color: #fff;
-    color: rgb(62, 63, 66);
-    font-weight: bold;
-}
-
-.ant-card-actions > li:not(:last-child) {
-    border-right: 0;
-}
-.ant-list-item-meta-avatar > img {
-    margin-left: -12px;
-    transform: translate(0, -6px);
-}
-
-.ant-list-item-meta-avatar > svg {
-    margin-right: -70px;
-}
-
-/* Removing these for ABC SLP warning
-.ant-alert-warning {
-  background-color: #20242d;
-  border: 1px solid #17171f;
-  border-radius: 0;
-}
-
-.ant-alert-message {
-  color: #fff;
-}
-*/
-
-.ant-layout-sider-dark {
-    background: linear-gradient(0deg, #040c3c, #212c6e);
-}
-
-.ant-menu-dark {
-    background: none;
-}
-
-.ant-layout-sider-zero-width-trigger.ant-layout-sider-zero-width-trigger-left
-    .anticon.anticon-bars {
-    color: #fff;
-    transform: scale(1.3);
-}
-
-.ant-layout-sider-zero-width-trigger.ant-layout-sider-zero-width-trigger-left {
-    background: #3e3f42;
-    border-radius: 0 8px 8px 0;
-}
-
-.ant-btn-group .ant-btn-primary:first-child:not(:last-child) {
-    border-right-color: transparent !important;
-}
-
-.ant-btn-group .ant-btn-primary:last-child:not(:first-child),
-.ant-btn-group .ant-btn-primary + .ant-btn-primary {
-    border-left-color: #20242d !important;
-}
-
-.audit {
-    a,
-    a:active {
-        color: #46464a;
-    }
-
-    a:hover {
-        color: #111117;
-    }
-}
-
-.dividends {
-    a,
-    a:active {
-        color: #111117;
-    }
-
-    a:hover {
-        color: #46464a;
-    }
-}
-
-.ant-popover-inner-content {
-    color: white;
-}
-
-.ant-modal-body .ant-card {
-    max-width: 100%;
-}
-
-.ant-upload.ant-upload-drag {
-    border: 1px solid #eaedf3;
-    border-radius: 8px;
-    background: #d3d3d3;
-}
-
-.ant-upload-list-item:hover .ant-upload-list-item-info {
-    background-color: #ffffff;
-}
-
-/* .ant-radio-button-wrapper {
-  border: none;
-}
-
-.ant-radio-button-wrapper-checked {
-  border-radius: none !important;
-} */
-
-/* .ant-radio-button-wrapper:first-child, .ant-radio-button-wrapper:last-child {
-  border-radius: 0 0 0 0;
-} */
-
-.ant-radio-group {
-    width: 100%;
-    margin-top: 10px;
-}
-
-.ant-radio-button-wrapper {
-    background: rgba(255, 255, 255, 0.2);
-    width: 104px;
-    border: none;
-    text-align: center;
-    color: #fff;
-}
-
-.ant-radio-button-wrapper:hover {
-    color: #fff;
-    background: rgba(255, 255, 255, 0.3);
-}
-
-.ant-radio-group-small .ant-radio-button-wrapper {
-    height: 35px;
-    line-height: 35px;
-}
-
-.ant-radio-button-wrapper-checked {
-    background: #ff8d00 !important;
-    border: none !important;
-}
-
-.ant-radio-button-wrapper:first-child {
-    border-radius: 100px 0 0 100px;
-}
-
-.ant-radio-button-wrapper:last-child {
-    border-radius: 0 100px 100px 0;
-}
-
-::selection {
-    background-color: #ff8d00;
-}
+/* ITEMS BELOW TO BE MOVED TO STYLED COMPONENTS*/
 
+/* useWallet.js, useBCH.js */
 @media (max-width: 768px) {
     .ant-notification {
         width: 100%;
@@ -371,100 +51,3 @@
         margin-right: 0;
     }
 }
-
-@media (max-width: 350px) {
-    .ant-select-selection-selected-value {
-        font-size: 10px;
-    }
-}
-
-/*Custom color for CashSpin*/
-.ant-spin > span > svg {
-    fill: #ff8d00;
-}
-
-/*Custom Input Fields */
-input.ant-input,
-.ant-select-selection {
-    background-color: #fff !important;
-    box-shadow: none !important;
-    border-radius: 4px;
-    font-weight: bold;
-    color: rgb(62, 63, 66);
-    opacity: 1;
-    height: 50px;
-}
-
-.ant-select-selection:hover {
-    border: 1px solid #eaedf3;
-}
-
-.ant-select-selection-selected-value {
-    color: rgb(62, 63, 66);
-}
-
-.ant-select-dropdown-menu-item {
-    color: #444;
-    background-color: #fff;
-}
-
-.ant-select-dropdown-menu-item-active,
-.ant-select-dropdown-menu-item:hover {
-    color: #fff;
-    background-color: #ff8d00 !important;
-}
-.selectedCurrencyOption:hover {
-    color: #fff !important;
-    background-color: #ff8d00 !important;
-}
-.ant-input-affix-wrapper {
-    background-color: #fff;
-    border: 1px solid #eaedf3 !important;
-}
-input.ant-input,
-.ant-select-selection {
-    border: none;
-}
-.ant-input::placeholder {
-    text-align: left;
-}
-.ant-select-selector {
-    height: 60px !important;
-    border: 1px solid #eaedf3 !important;
-}
-
-/*Revs with updated Antd*/
-.ant-select-single .ant-select-selector .ant-select-selection-item,
-.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
-    line-height: 60px;
-    text-align: left;
-    color: #3e3f42;
-    font-weight: bold;
-}
-
-/* Handle new antd error formatting */
-.ant-form-item-has-error
-    > div
-    > div.ant-form-item-control-input
-    > div
-    > span
-    > span
-    > span.ant-input-affix-wrapper {
-    background-color: #fff;
-    border-color: #f04134 !important;
-}
-
-.ant-form-item-has-error .ant-input,
-.ant-form-item-has-error .ant-input-affix-wrapper,
-.ant-form-item-has-error .ant-input:hover,
-.ant-form-item-has-error .ant-input-affix-wrapper:hover {
-    background-color: #fff;
-    border-color: #f04134 !important;
-}
-
-.ant-form-item-has-error
-    .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input)
-    .ant-select-selector {
-    background-color: #fff;
-    border-color: #f04134 !important;
-}
diff --git a/web/cashtab/extension/src/components/App.js b/web/cashtab/extension/src/components/App.js
--- a/web/cashtab/extension/src/components/App.js
+++ b/web/cashtab/extension/src/components/App.js
@@ -1,22 +1,23 @@
 import React from 'react';
 import 'antd/dist/antd.less';
 import '../index.css';
-import styled from 'styled-components';
-import { Tabs } from 'antd';
+import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
+import { theme } from '@assets/styles/theme';
 import {
     FolderOpenFilled,
     CaretRightOutlined,
     SettingFilled,
 } from '@ant-design/icons';
-import Wallet from './Wallet/Wallet';
-import Send from './Send/Send';
-import SendToken from './Send/SendToken';
-import Configure from './Configure/Configure';
-import NotFound from './NotFound';
-import CashTab from '../assets/cashtab.png';
-import PopOut from '../assets/popout.svg';
+import Wallet from '@components/Wallet/Wallet';
+import Send from '@components/Send/Send';
+import SendToken from '@components/Send/SendToken';
+import Configure from '@components/Configure/Configure';
+import NotFound from '@components/NotFound';
+import CashTab from '@assets/cashtab.png';
+import PopOut from '@assets/popout.svg';
 import './App.css';
-import { WalletContext } from '../utils/context';
+import { WalletContext } from '@utils/context';
+import WalletLabel from '@components/Common/WalletLabel.js';
 import {
     Route,
     Redirect,
@@ -27,10 +28,42 @@
 
 import fbt from 'fbt';
 
-const { TabPane } = Tabs;
+const GlobalStyle = createGlobalStyle`    
+    .ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button, .ant-modal > button, .ant-modal-confirm-btns > button, .ant-modal-footer > button {
+        border-radius: 8px;
+        background-color: ${props => props.theme.modals.buttons.background};
+        color: ${props => props.theme.wallet.text.secondary};
+        font-weight: bold;
+    }    
+    
+    .ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button:hover,.ant-modal-confirm-btns > button:hover, .ant-modal-footer > button:hover {
+        color: ${props => props.theme.primary};
+        transition: color 0.3s;
+        background-color: ${props => props.theme.modals.buttons.background};
+    }   
+    .selectedCurrencyOption {
+        text-align: left;
+        color: ${props => props.theme.wallet.text.secondary} !important;
+        background-color: ${props => props.theme.contrast} !important;
+    }
+    .cashLoadingIcon {
+        color: ${props => props.theme.primary} !important
+        font-size: 48px !important;
+    }
+    .selectedCurrencyOption:hover {
+        color: ${props => props.theme.contrast} !important;
+        background-color: ${props => props.theme.primary} !important;
+    }
+`;
+
+const CustomApp = styled.div`
+    text-align: center;
+    font-family: 'Gilroy', sans-serif;
+    background-color: ${props => props.theme.app.background};
+`;
 
 const Footer = styled.div`
-    background-color: #fff;
+    background-color: ${props => props.theme.footer.background};
     border-radius: 20px;
     position: fixed;
     bottom: 0;
@@ -38,54 +71,7 @@
     @media (max-width: 768px) {
         width: 100%;
     }
-    border-top: 1px solid #e2e2e2;
-    .ant-tabs-nav-list {
-    }
-    .ant-tabs-top > .ant-tabs-nav::before,
-    .ant-tabs-bottom > .ant-tabs-nav::before,
-    .ant-tabs-top > div > .ant-tabs-nav::before,
-    .ant-tabs-bottom > div > .ant-tabs-nav::before {
-        border-bottom: none;
-    }
-    .ant-tabs-tab {
-        padding: 24px 12px 12px 12px;
-        margin: 0 24px;
-        @media (max-width: 360px) {
-            margin: 0 12px;
-        }
-        span {
-            font-size: 12px;
-            font-weight: bold;
-        }
-        .anticon {
-            display: block;
-            color: rgb(148, 148, 148);
-            font-size: 24px;
-            margin-left: 8px;
-            margin-bottom: 3px;
-        }
-    }
-    .ant-tabs-tab:hover {
-        color: #ff8d00;
-        .anticon {
-            color: #ff8d00;
-        }
-    }
-    .ant-tabs-tab-active > div > span {
-        color: #ff8d00;
-    }
-    .ant-tabs-tab-active.ant-tabs-tab {
-        color: #ff8d00;
-        .anticon {
-            color: #ff8d00;
-        }
-    }
-    .ant-tabs-ink-bar {
-        display: none !important;
-    }
-    .ant-tabs-nav {
-        margin: -3.5px 0 0 0;
-    }
+    border-top: 1px solid ${props => props.theme.wallet.borders.color};
 `;
 
 const OpenInTabBtn = styled.button`
@@ -95,6 +81,36 @@
 const ExtTabImg = styled.img`
     max-width: 20px;
 `;
+export const NavButton = styled.button`
+    :focus,
+    :active {
+        outline: none;
+    }
+    cursor: pointer;
+    padding: 24px 12px 12px 12px;
+    margin: 0 28px;
+    @media (max-width: 360px) {
+        margin: 0 12px;
+    }
+    background-color: ${props => props.theme.footer.background};
+    border: none;
+    font-size: 12px;
+    font-weight: bold;
+    .anticon {
+        display: block;
+        color: ${props => props.theme.footer.navIconInactive};
+        font-size: 24px;
+        margin-bottom: 6px;
+    }
+    ${({ active, ...props }) =>
+        active &&
+        `    
+        color: ${props.theme.primary};
+        .anticon {
+            color: ${props.theme.primary};
+        }
+  `}
+`;
 
 export const WalletBody = styled.div`
     display: flex;
@@ -102,20 +118,18 @@
     justify-content: center;
     width: 100%;
     min-height: 100vh;
-    background: linear-gradient(270deg, #040c3c, #212c6e);
+    background: ${props => props.theme.app.sidebars};
 `;
-
 export const WalletCtn = styled.div`
     position: relative;
     width: 500px;
-    background-color: #fff;
+    background-color: ${props => props.theme.footerBackground};
     min-height: 100vh;
-    padding-top: 30px;
-    padding: 10px 30px 100px 30px;
-    background: #fff;
-    -webkit-box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1);
-    -moz-box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1);
-    box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1);
+    padding: 10px 30px 120px 30px;
+    background: ${props => props.theme.wallet.background};
+    -webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
+    -moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
+    box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
     @media (max-width: 768px) {
         width: 100%;
         -webkit-box-shadow: none;
@@ -132,13 +146,13 @@
     padding: 20px 0 30px;
     margin-bottom: 20px;
     justify-content: space-between;
-    border-bottom: 1px solid #e2e2e2;
+    border-bottom: 1px solid ${props => props.theme.wallet.borders.color};
 
     a {
-        color: #848484;
+        color: ${props => props.theme.wallet.text.secondary};
 
         :hover {
-            color: #ff8d00;
+            color: ${props => props.theme.primary};
         }
     }
 
@@ -175,91 +189,72 @@
     };
 
     return (
-        <div className="App">
-            <WalletBody>
-                <WalletCtn>
-                    <HeaderCtn>
-                        <CashTabLogo src={CashTab} alt="cashtab" />
-                        <OpenInTabBtn
-                            data-tip="Open in tab"
-                            onClick={() => openInTab()}
-                        >
-                            <ExtTabImg src={PopOut} alt="Open in tab" />
-                        </OpenInTabBtn>
-                    </HeaderCtn>
-                    <Switch>
-                        <Route path="/wallet">
-                            <Wallet />
-                        </Route>
-                        <Route path="/send">
-                            <Send />
-                        </Route>
-                        <Route
-                            path="/send-token/:tokenId"
-                            render={props => (
-                                <SendToken
-                                    tokenId={props.match.params.tokenId}
-                                />
-                            )}
-                        />
-                        <Route path="/configure">
-                            <Configure />
-                        </Route>
-                        <Redirect exact from="/" to="/wallet" />
-                        <Route component={NotFound} />
-                    </Switch>
-                </WalletCtn>
-                {wallet ? (
-                    <Footer>
-                        <Tabs
-                            activeKey={selectedKey}
-                            tabPosition="bottom"
-                            centered
-                        >
-                            <TabPane
-                                tab={
-                                    <span
-                                        onClick={() => history.push('/wallet')}
-                                    >
-                                        <FolderOpenFilled />
-                                        <fbt desc="Wallet menu button">
-                                            Wallet
-                                        </fbt>
-                                    </span>
-                                }
-                                key="wallet"
-                            />
-                            <TabPane
-                                tab={
-                                    <span onClick={() => history.push('/send')}>
-                                        <CaretRightOutlined />
-                                        <fbt desc="Send menu button">Send</fbt>
-                                    </span>
-                                }
-                                key="send"
-                                disabled={!wallet}
+        <ThemeProvider theme={theme}>
+            <GlobalStyle />
+            <CustomApp>
+                <WalletBody>
+                    <WalletCtn>
+                        <HeaderCtn>
+                            <CashTabLogo src={CashTab} alt="cashtab" />
+                            <OpenInTabBtn
+                                data-tip="Open in tab"
+                                onClick={() => openInTab()}
+                            >
+                                <ExtTabImg src={PopOut} alt="Open in tab" />
+                            </OpenInTabBtn>
+                        </HeaderCtn>
+                        <WalletLabel name={wallet.name}></WalletLabel>
+                        <Switch>
+                            <Route path="/wallet">
+                                <Wallet />
+                            </Route>
+                            <Route path="/send">
+                                <Send />
+                            </Route>
+                            <Route
+                                path="/send-token/:tokenId"
+                                render={props => (
+                                    <SendToken
+                                        tokenId={props.match.params.tokenId}
+                                    />
+                                )}
                             />
-                            <TabPane
-                                tab={
-                                    <span
-                                        onClick={() =>
-                                            history.push('/configure')
-                                        }
-                                    >
-                                        <SettingFilled />
-                                        <fbt desc="Settings menu button">
-                                            Settings
-                                        </fbt>
-                                    </span>
-                                }
-                                key="configure"
-                                disabled={!wallet}
-                            />
-                        </Tabs>
-                    </Footer>
-                ) : null}
-            </WalletBody>
-        </div>
+                            <Route path="/configure">
+                                <Configure />
+                            </Route>
+                            <Redirect exact from="/" to="/wallet" />
+                            <Route component={NotFound} />
+                        </Switch>
+                    </WalletCtn>
+                    {wallet ? (
+                        <Footer>
+                            <NavButton
+                                active={selectedKey === 'wallet'}
+                                onClick={() => history.push('/wallet')}
+                            >
+                                <FolderOpenFilled />
+                                <fbt desc="Wallet menu button">Wallet</fbt>
+                            </NavButton>
+
+                            <NavButton
+                                active={selectedKey === 'send'}
+                                onClick={() => history.push('/send')}
+                            >
+                                <CaretRightOutlined />
+                                <fbt desc="Send menu button">Send</fbt>
+                            </NavButton>
+                            <NavButton
+                                active={selectedKey === 'configure'}
+                                onClick={() => history.push('/configure')}
+                            >
+                                <SettingFilled />
+                                <fbt desc="Settings menu button">Settings</fbt>
+                            </NavButton>
+                        </Footer>
+                    ) : null}
+                </WalletBody>
+            </CustomApp>
+        </ThemeProvider>
     );
 };