diff --git a/web/cashtab/src/components/Common/ApiError.js b/web/cashtab/src/components/Common/ApiError.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab/src/components/Common/ApiError.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { CashLoader } from '@components/Common/CustomIcons';
+import { AlertMsg } from '@components/Common/Atoms';
+
+export const ApiError = () => {
+    return (
+        <>
+            <AlertMsg>
+                <b>API connection lost.</b>
+                <br /> Re-establishing connection...
+            </AlertMsg>
+            <CashLoader />
+        </>
+    );
+};
diff --git a/web/cashtab/src/components/Common/Atoms.js b/web/cashtab/src/components/Common/Atoms.js
--- a/web/cashtab/src/components/Common/Atoms.js
+++ b/web/cashtab/src/components/Common/Atoms.js
@@ -48,7 +48,7 @@
 `;
 
 export const AlertMsg = styled.p`
-    color: ${props => props.theme.forms.error};
+    color: ${props => props.theme.forms.error} !important;
 `;
 
 export const ConvertAmount = styled.div`
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
@@ -19,7 +19,6 @@
     SmartButton,
 } from '@components/Common/PrimaryButton';
 import {
-    CashLoader,
     ThemedCopyOutlined,
     ThemedWalletOutlined,
     ThemedDollarOutlined,
@@ -27,6 +26,7 @@
 import { ReactComponent as Trashcan } from '@assets/trashcan.svg';
 import { ReactComponent as Edit } from '@assets/edit.svg';
 import { Event } from '@utils/GoogleAnalytics';
+import { ApiError } from '@components/Common/ApiError';
 
 const { Panel } = Collapse;
 
@@ -474,12 +474,7 @@
                 <ThemedWalletOutlined /> Manage Wallets
             </h2>
             {apiError ? (
-                <>
-                    <CashLoader />
-                    <p style={{ color: 'red' }}>
-                        <b>An error occured on our end. Reconnecting...</b>
-                    </p>
-                </>
+                <ApiError />
             ) : (
                 <>
                     <PrimaryButton onClick={() => updateSavedWalletsOnCreate()}>
diff --git a/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap b/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap
--- a/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap
+++ b/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Configure with a wallet 1`] = `
 <div
-  className="sc-kGXeez ldTGry"
+  className="sc-kEYyzF jqzglm"
 >
   <h2>
     <span
@@ -110,7 +110,7 @@
     </div>
   </div>
   <div
-    className="sc-kpOJdX eglhol"
+    className="sc-kkGfuU lbBTMM"
   />
   <h2>
     <span
@@ -188,7 +188,7 @@
      Import Wallet
   </button>
   <div
-    className="sc-kpOJdX eglhol"
+    className="sc-kkGfuU lbBTMM"
   />
   <h2>
     <span
@@ -305,11 +305,11 @@
     </div>
   </div>
   <div
-    className="sc-kpOJdX eglhol"
+    className="sc-kkGfuU lbBTMM"
   />
   [
   <a
-    className="sc-jzJRlG lcaLuD"
+    className="sc-dxgOiQ jbuVAx"
     href="https://docs.cashtabapp.com/docs/"
     rel="noreferrer"
     target="_blank"
@@ -323,7 +323,7 @@
 
 exports[`Configure without a wallet 1`] = `
 <div
-  className="sc-kGXeez ldTGry"
+  className="sc-kEYyzF jqzglm"
 >
   <h2>
     <span
@@ -393,7 +393,7 @@
     </div>
   </div>
   <div
-    className="sc-kpOJdX eglhol"
+    className="sc-kkGfuU lbBTMM"
   />
   <h2>
     <span
@@ -471,7 +471,7 @@
      Import Wallet
   </button>
   <div
-    className="sc-kpOJdX eglhol"
+    className="sc-kkGfuU lbBTMM"
   />
   <h2>
     <span
@@ -588,11 +588,11 @@
     </div>
   </div>
   <div
-    className="sc-kpOJdX eglhol"
+    className="sc-kkGfuU lbBTMM"
   />
   [
   <a
-    className="sc-jzJRlG lcaLuD"
+    className="sc-dxgOiQ jbuVAx"
     href="https://docs.cashtabapp.com/docs/"
     rel="noreferrer"
     target="_blank"
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,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { WalletContext } from '@utils/context';
 import { Form, notification, message, Modal, Alert } from 'antd';
-import { CashLoader } from '@components/Common/CustomIcons';
 import { Row, Col } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import PrimaryButton, {
@@ -31,6 +30,7 @@
 } from '@components/Common/Atoms';
 import { getWalletState } from '@utils/cashMethods';
 import { CashReceivedNotificationIcon } from '@components/Common/CustomIcons';
+import { ApiError } from '@components/Common/ApiError';
 
 // Note jestBCH is only used for unit tests; BCHJS must be mocked for jest
 const SendBCH = ({ jestBCH, passLoadingStatus }) => {
@@ -510,21 +510,7 @@
                                 type="warning"
                             />
                         )}
-                        {apiError && (
-                            <>
-                                <CashLoader />
-                                <p
-                                    style={{
-                                        color: 'red',
-                                    }}
-                                >
-                                    <b>
-                                        An error occured on our end.
-                                        Reconnecting...
-                                    </b>
-                                </p>
-                            </>
-                        )}
+                        {apiError && <ApiError />}
                     </Form>
                 </Col>
             </Row>
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
@@ -13,7 +13,6 @@
 import PrimaryButton, {
     SecondaryButton,
 } from '@components/Common/PrimaryButton';
-import { CashLoader } from '@components/Common/CustomIcons';
 import {
     FormItemWithMaxAddon,
     FormItemWithQRCodeAddon,
@@ -37,6 +36,7 @@
     convertEtokenToSimpleledger,
 } from '@utils/cashMethods';
 import { TokenReceivedNotificationIcon } from '@components/Common/CustomIcons';
+import { ApiError } from '@components/Common/ApiError';
 
 const SendToken = ({ tokenId, jestBCH, passLoadingStatus }) => {
     const { wallet, apiError } = React.useContext(WalletContext);
@@ -363,7 +363,6 @@
                                             <SecondaryButton>
                                                 Send {token.info.tokenName}
                                             </SecondaryButton>
-                                            {apiError && <CashLoader />}
                                         </>
                                     ) : (
                                         <PrimaryButton onClick={() => submit()}>
@@ -378,18 +377,7 @@
                                         type="warning"
                                     />
                                 )}
-                                {apiError && (
-                                    <p
-                                        style={{
-                                            color: 'red',
-                                        }}
-                                    >
-                                        <b>
-                                            An error occured on our end.
-                                            Reconnecting...
-                                        </b>
-                                    </p>
-                                )}
+                                {apiError && <ApiError />}
                             </Form>
                             {tokenStats !== null && (
                                 <Descriptions
diff --git a/web/cashtab/src/components/Tokens/Tokens.js b/web/cashtab/src/components/Tokens/Tokens.js
--- a/web/cashtab/src/components/Tokens/Tokens.js
+++ b/web/cashtab/src/components/Tokens/Tokens.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { CashLoader } from '@components/Common/CustomIcons';
 import { WalletContext } from '@utils/context';
 import { fromSmallestDenomination, getWalletState } from '@utils/cashMethods';
 import CreateTokenForm from '@components/Tokens/CreateTokenForm';
@@ -9,6 +8,7 @@
 import { BalanceHeader } from '@components/Common/BalanceHeader';
 import { BalanceHeaderFiat } from '@components/Common/BalanceHeaderFiat';
 import { ZeroBalanceHeader, AlertMsg } from '@components/Common/Atoms';
+import { ApiError } from '@components/Common/ApiError';
 
 const Tokens = ({ jestBCH, passLoadingStatus }) => {
     /*
@@ -60,19 +60,7 @@
                     )}
                 </>
             )}
-            {apiError && (
-                <>
-                    <p
-                        style={{
-                            color: 'red',
-                        }}
-                    >
-                        <b>An error occurred on our end.</b>
-                        <br></br> Re-establishing connection...
-                    </p>
-                    <CashLoader />
-                </>
-            )}
+            {apiError && <ApiError />}
             <CreateTokenForm
                 BCH={BCH}
                 getRestUrl={getRestUrl}
diff --git a/web/cashtab/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap b/web/cashtab/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap
--- a/web/cashtab/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap
+++ b/web/cashtab/src/components/Tokens/__tests__/__snapshots__/Tokens.test.js.snap
@@ -60,7 +60,7 @@
     </div>
   </div>,
   <p
-    className="sc-kGXeez jIhfat"
+    className="sc-kGXeez gsczLr"
   >
     You need at least
      
@@ -140,7 +140,7 @@
     </div>
   </div>,
   <p
-    className="sc-kGXeez jIhfat"
+    className="sc-kGXeez gsczLr"
   >
     You need at least
      
@@ -318,7 +318,7 @@
     </div>
   </div>,
   <p
-    className="sc-kGXeez jIhfat"
+    className="sc-kGXeez gsczLr"
   >
     You need at least
      
@@ -398,7 +398,7 @@
     </div>
   </div>,
   <p
-    className="sc-kGXeez jIhfat"
+    className="sc-kGXeez gsczLr"
   >
     You need at least
      
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
@@ -7,7 +7,7 @@
 import { Link } from 'react-router-dom';
 import TokenList from './TokenList';
 import TxHistory from './TxHistory';
-import { CashLoader } from '@components/Common/CustomIcons';
+import { ApiError } from '@components/Common/ApiError';
 import { BalanceHeader } from '@components/Common/BalanceHeader';
 import { BalanceHeaderFiat } from '@components/Common/BalanceHeaderFiat';
 import { LoadingCtn, ZeroBalanceHeader } from '@components/Common/Atoms';
@@ -213,15 +213,7 @@
                     )}
                 </>
             )}
-            {apiError && (
-                <>
-                    <p style={{ color: 'red' }}>
-                        <b>An error occurred on our end.</b>
-                        <br></br> Re-establishing connection...
-                    </p>
-                    <CashLoader />
-                </>
-            )}
+            {apiError && <ApiError />}
 
             {wallet && ((wallet.Path245 && wallet.Path145) || wallet.Path1899) && (
                 <>