diff --git a/web/cashtab/config/webpack.config.js b/web/cashtab/config/webpack.config.js
--- a/web/cashtab/config/webpack.config.js
+++ b/web/cashtab/config/webpack.config.js
@@ -31,6 +31,7 @@
 const workboxPlugin = require('workbox-webpack-plugin');
 
 const postcssNormalize = require('postcss-normalize');
+const hooks = require('html-webpack-plugin/lib/hooks');
 
 const appPackageJson = require(paths.appPackageJson);
 
@@ -415,6 +416,10 @@
                 // Support React Native Web
                 // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
                 'react-native': 'react-native-web',
+                '@hooks': path.resolve(paths.appPath, 'src/hooks/'),
+                '@components': path.resolve(paths.appPath, 'src/components/'),
+                '@utils': path.resolve(paths.appPath, 'src/utils/'),
+                '@assets': path.resolve(paths.appPath, 'src/assets/'),
             },
             plugins: [
                 // Adds support for installing with Plug'n'Play, leading to faster installs and adding
diff --git a/web/cashtab/package.json b/web/cashtab/package.json
--- a/web/cashtab/package.json
+++ b/web/cashtab/package.json
@@ -166,7 +166,11 @@
         "modulePaths": [],
         "moduleNameMapper": {
             "^react-native$": "react-native-web",
-            "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+            "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+            "^@components(.*)$": "<rootDir>/src/components$1",
+            "^@assets(.*)$": "<rootDir>/src/assets$1",
+            "^@utils(.*)$": "<rootDir>/src/utils$1",
+            "^@hooks(.*)$": "<rootDir>/src/hooks$1"
         },
         "moduleFileExtensions": [
             "web.js",
diff --git a/web/cashtab/src/components/App.js b/web/cashtab/src/components/App.js
--- a/web/cashtab/src/components/App.js
+++ b/web/cashtab/src/components/App.js
@@ -8,15 +8,15 @@
     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 ABC from '../assets/bitcoinabclogo.png';
+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 ABC from '@assets/bitcoinabclogo.png';
 import './App.css';
-import { WalletContext } from '../utils/context';
+import { WalletContext } from '@utils/context';
 import {
     Route,
     Redirect,
diff --git a/web/cashtab/src/components/Common/EnhancedInputs.js b/web/cashtab/src/components/Common/EnhancedInputs.js
--- a/web/cashtab/src/components/Common/EnhancedInputs.js
+++ b/web/cashtab/src/components/Common/EnhancedInputs.js
@@ -3,8 +3,8 @@
 import { DollarOutlined, WalletOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import { ScanQRCode } from './ScanQRCode';
-import useBCH from '../../hooks/useBCH';
-import { currency } from '../Common/Ticker.js';
+import useBCH from '@hooks/useBCH';
+import { currency } from '@components/Common/Ticker.js';
 
 export const InputAddonText = styled.span`
     width: 100%;
diff --git a/web/cashtab/src/components/Common/QRCode.js b/web/cashtab/src/components/Common/QRCode.js
--- a/web/cashtab/src/components/Common/QRCode.js
+++ b/web/cashtab/src/components/Common/QRCode.js
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import RawQRCode from 'qrcode.react';
-import { currency } from '../Common/Ticker.js';
+import { currency } from '@components/Common/Ticker.js';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { Event } from '../../utils/GoogleAnalytics';
+import { Event } from '@utils/GoogleAnalytics';
 
 export const StyledRawQRCode = styled(RawQRCode)`
     cursor: pointer;
diff --git a/web/cashtab/src/components/Common/ScanQRCode.js b/web/cashtab/src/components/Common/ScanQRCode.js
--- a/web/cashtab/src/components/Common/ScanQRCode.js
+++ b/web/cashtab/src/components/Common/ScanQRCode.js
@@ -3,8 +3,8 @@
 import { QrcodeOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import { BrowserQRCodeReader } from '@zxing/library';
-import { currency } from '../Common/Ticker.js';
-import { Event } from '../../utils/GoogleAnalytics';
+import { currency } from '@components/Common/Ticker.js';
+import { Event } from '@utils/GoogleAnalytics';
 
 const StyledScanQRCode = styled.span`
     display: block;
diff --git a/web/cashtab/src/components/Common/Ticker.js b/web/cashtab/src/components/Common/Ticker.js
--- a/web/cashtab/src/components/Common/Ticker.js
+++ b/web/cashtab/src/components/Common/Ticker.js
@@ -1,5 +1,5 @@
-import mainLogo from '../../assets/12-bitcoin-cash-square-crop.svg';
-import tokenLogo from '../../assets/simple-ledger-protocol-logo.png';
+import mainLogo from '@assets/12-bitcoin-cash-square-crop.svg';
+import tokenLogo from '@assets/simple-ledger-protocol-logo.png';
 
 export const currency = {
     name: 'Bitcoin ABC',
diff --git a/web/cashtab/src/components/Configure/Configure.js b/web/cashtab/src/components/Configure/Configure.js
--- a/web/cashtab/src/components/Configure/Configure.js
+++ b/web/cashtab/src/components/Configure/Configure.js
@@ -9,17 +9,16 @@
     CopyOutlined,
     LockOutlined,
 } from '@ant-design/icons';
-
-import { WalletContext } from '../../utils/context';
-import { StyledCollapse } from '../Common/StyledCollapse';
+import { WalletContext } from '@utils/context';
+import { StyledCollapse } from '@components/Common/StyledCollapse';
 import PrimaryButton, {
     SecondaryButton,
     SmartButton,
-} from '../Common/PrimaryButton';
-import { CashLoader, CashLoadingIcon } from '../Common/CustomIcons';
-import { ReactComponent as Trashcan } from '../../assets/trashcan.svg';
-import { ReactComponent as Edit } from '../../assets/edit.svg';
-import { Event } from '../../utils/GoogleAnalytics';
+} from '@components/Common/PrimaryButton';
+import { CashLoader,  CashLoadingIcon  } from '@components/Common/CustomIcons';
+import { ReactComponent as Trashcan } from '@assets/trashcan.svg';
+import { ReactComponent as Edit } from '@assets/edit.svg';
+import { Event } from '@utils/GoogleAnalytics';
 
 const { Panel } = Collapse;
 
diff --git a/web/cashtab/src/components/OnBoarding/OnBoarding.js b/web/cashtab/src/components/OnBoarding/OnBoarding.js
--- a/web/cashtab/src/components/OnBoarding/OnBoarding.js
+++ b/web/cashtab/src/components/OnBoarding/OnBoarding.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { WalletContext } from '../../utils/context';
+import { WalletContext } from '@utils/context';
 import { Input, Form, Modal } from 'antd';
 import {
     ExclamationCircleOutlined,
@@ -8,13 +8,13 @@
     ImportOutlined,
     LockOutlined,
 } from '@ant-design/icons';
-import StyledOnboarding from '../Common/StyledOnBoarding';
+import StyledOnboarding from '@components/Common/StyledOnBoarding';
 import PrimaryButton, {
     SecondaryButton,
     SmartButton,
-} from '../Common/PrimaryButton';
-import { currency } from '../Common/Ticker.js';
-import { Event } from '../../utils/GoogleAnalytics';
+} from '@components/Common/PrimaryButton';
+import { currency } from '@components/Common/Ticker.js';
+import { Event } from '@utils/GoogleAnalytics';
 
 export const WelcomeText = styled.p`
     color: #444;
diff --git a/web/cashtab/src/components/Send/Send.js b/web/cashtab/src/components/Send/Send.js
--- a/web/cashtab/src/components/Send/Send.js
+++ b/web/cashtab/src/components/Send/Send.js
@@ -1,20 +1,22 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { WalletContext } from '../../utils/context';
+import { WalletContext } from '@utils/context';
 import { Form, notification, message, Spin } from 'antd';
-import { CashLoader, CashLoadingIcon } from '../Common/CustomIcons';
+import { CashLoader,  CashLoadingIcon  } from '@components/Common/CustomIcons';
 import { Row, Col } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
-import PrimaryButton, { SecondaryButton } from '../Common/PrimaryButton';
+import PrimaryButton, {
+    SecondaryButton,
+} from '@components/Common/PrimaryButton';
 import {
     SendBchInput,
     FormItemWithQRCodeAddon,
-} from '../Common/EnhancedInputs';
-import useBCH from '../../hooks/useBCH';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
+} from '@components/Common/EnhancedInputs';
+import useBCH from '@hooks/useBCH';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import { isMobile, isIOS, isSafari } from 'react-device-detect';
-import { currency } from '../Common/Ticker.js';
-import { Event } from '../../utils/GoogleAnalytics';
+import { currency } from '@components/Common/Ticker.js';
+import { Event } from '@utils/GoogleAnalytics';
 export const BalanceHeader = styled.div`
     p {
         color: #777;
diff --git a/web/cashtab/src/components/Send/SendToken.js b/web/cashtab/src/components/Send/SendToken.js
--- a/web/cashtab/src/components/Send/SendToken.js
+++ b/web/cashtab/src/components/Send/SendToken.js
@@ -1,23 +1,23 @@
 import React, { useState, useEffect } from 'react';
-import { WalletContext } from '../../utils/context';
+import { WalletContext } from '@utils/context';
 import { Form, notification, message, Spin, Row, Col } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
-import PrimaryButton, { SecondaryButton } from '../Common/PrimaryButton';
-import { CashLoader, CashLoadingIcon } from '../Common/CustomIcons';
+import PrimaryButton, { SecondaryButton } from '@components/Common/PrimaryButton';
+import { CashLoader, CashLoadingIcon } from '@components/Common/CustomIcons';
 import {
     FormItemWithMaxAddon,
     FormItemWithQRCodeAddon,
-} from '../Common/EnhancedInputs';
-import useBCH from '../../hooks/useBCH';
+} from '@components/Common/EnhancedInputs';
+import useBCH from '@hooks/useBCH';
 import { BalanceHeader } from './Send';
 import { Redirect } from 'react-router-dom';
-import useWindowDimensions from '../../hooks/useWindowDimensions';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import { isMobile, isIOS, isSafari } from 'react-device-detect';
 import { Img } from 'react-image';
 import makeBlockie from 'ethereum-blockies-base64';
 import BigNumber from 'bignumber.js';
-import { currency } from '../Common/Ticker.js';
-import { Event } from '../../utils/GoogleAnalytics';
+import { currency } from '@components/Common/Ticker.js';
+import { Event } from '@utils/GoogleAnalytics';
 
 const SendToken = ({ tokenId }) => {
     const { wallet, tokens, slpBalancesAndUtxos, apiError } = React.useContext(
diff --git a/web/cashtab/src/components/Wallet/TokenList.js b/web/cashtab/src/components/Wallet/TokenList.js
--- a/web/cashtab/src/components/Wallet/TokenList.js
+++ b/web/cashtab/src/components/Wallet/TokenList.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import TokenListItem from './TokenListItem';
 import { Link } from 'react-router-dom';
-import { currency } from '../Common/Ticker.js';
+import { currency } from '@components/Common/Ticker.js';
 
 const TokenList = ({ tokens }) => {
     return (
diff --git a/web/cashtab/src/components/Wallet/TokenListItem.js b/web/cashtab/src/components/Wallet/TokenListItem.js
--- a/web/cashtab/src/components/Wallet/TokenListItem.js
+++ b/web/cashtab/src/components/Wallet/TokenListItem.js
@@ -2,7 +2,7 @@
 import styled from 'styled-components';
 import makeBlockie from 'ethereum-blockies-base64';
 import { Img } from 'react-image';
-import { currency } from '../Common/Ticker';
+import { currency } from '@components/Common/Ticker';
 
 const TokenIcon = styled.div`
     height: 32px;
diff --git a/web/cashtab/src/components/Wallet/Wallet.js b/web/cashtab/src/components/Wallet/Wallet.js
--- a/web/cashtab/src/components/Wallet/Wallet.js
+++ b/web/cashtab/src/components/Wallet/Wallet.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 import { LinkOutlined, LoadingOutlined } from '@ant-design/icons';
-import { WalletContext } from '../../utils/context';
-import { OnBoarding } from '../OnBoarding/OnBoarding';
-import { QRCode } from '../Common/QRCode';
-import { currency } from '../Common/Ticker.js';
+import { WalletContext } from '@utils/context';
+import { OnBoarding } from '@components/OnBoarding/OnBoarding';
+import { QRCode } from '@components/Common/QRCode';
+import { currency } from '@components/Common/Ticker.js';
 import { Link } from 'react-router-dom';
 import TokenList from './TokenList';
-import { CashLoader } from '../Common/CustomIcons';
+import { CashLoader } from '@components/Common/CustomIcons';
 
 export const LoadingCtn = styled.div`
     width: 100%;
diff --git a/web/cashtab/src/components/__tests__/NotFound.test.js b/web/cashtab/src/components/__tests__/NotFound.test.js
--- a/web/cashtab/src/components/__tests__/NotFound.test.js
+++ b/web/cashtab/src/components/__tests__/NotFound.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import NotFound from '../NotFound';
+import NotFound from '@components/NotFound';
 
 test('Render NotFound component', () => {
     const component = renderer.create(<NotFound />);
diff --git a/web/cashtab/src/hooks/useBCH.js b/web/cashtab/src/hooks/useBCH.js
--- a/web/cashtab/src/hooks/useBCH.js
+++ b/web/cashtab/src/hooks/useBCH.js
@@ -1,5 +1,5 @@
 import BigNumber from 'bignumber.js';
-import { currency } from '../components/Common/Ticker';
+import { currency } from '@components/Common/Ticker';
 
 export default function useBCH() {
     const DUST = 0.000005;
diff --git a/web/cashtab/src/hooks/useWallet.js b/web/cashtab/src/hooks/useWallet.js
--- a/web/cashtab/src/hooks/useWallet.js
+++ b/web/cashtab/src/hooks/useWallet.js
@@ -3,12 +3,12 @@
 import React, { useState, useEffect } from 'react';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import { notification } from 'antd';
-import useAsyncTimeout from './useAsyncTimeout';
-import usePrevious from './usePrevious';
-import useBCH from '../hooks/useBCH';
+import useAsyncTimeout from '@hooks/useAsyncTimeout';
+import usePrevious from '@hooks/usePrevious';
+import useBCH from '@hooks/useBCH';
 import BigNumber from 'bignumber.js';
 import localforage from 'localforage';
-import { currency } from '../components/Common/Ticker';
+import { currency } from '@components/Common/Ticker';
 import _ from 'lodash';
 
 const useWallet = () => {