diff --git a/web/cashtab/src/assets/styles/theme.js b/web/cashtab/src/assets/styles/theme.js
index f887f4b48..e705ffc57 100644
--- a/web/cashtab/src/assets/styles/theme.js
+++ b/web/cashtab/src/assets/styles/theme.js
@@ -1,3 +1,6 @@
 export const theme = {
     iconOutlined: '#3e3f42',
+    formBorders: '#e7edf3',
+    formAddonBackground: '#f4f4f4',
+    formAddonForeground: '#3e3f42',
 };
diff --git a/web/cashtab/src/components/App.css b/web/cashtab/src/components/App.css
index 6a93f313f..ce6fd4716 100644
--- a/web/cashtab/src/components/App.css
+++ b/web/cashtab/src/components/App.css
@@ -1,148 +1,141 @@
 @import '~antd/dist/antd.less';
 @import '~@fortawesome/fontawesome-free/css/all.css';
 @import url('https://fonts.googleapis.com/css?family=Khula&display=swap&.css');
 
 /* Hide up and down arros on input type="number" */
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
 
 /* Hide up and down arros on input type="number" */
 /* Firefox */
 input[type='number'] {
     -moz-appearance: textfield;
 }
 
 html,
 body {
     max-width: 100%;
     overflow-x: hidden;
 }
 
 /* Hide scroll bars on antd modals*/
 .ant-modal-wrap.ant-modal-centered::-webkit-scrollbar {
     display: none;
 }
 
 /* ITEMS BELOW TO BE MOVED TO STYLED COMPONENTS*/
 
-/* EnhancedInputs.js */
-.ant-input-group-addon {
-    background-color: #f4f4f4 !important;
-    border: 1px solid rgb(234, 237, 243);
-    color: #3e3f42 !important;
-}
-
 /* useWallet.js, useBCH.js */
 @media (max-width: 768px) {
     .ant-notification {
         width: 100%;
         top: 20px !important;
         max-width: unset;
         margin-right: 0;
     }
 }
 
 /* OK and Cancel button colors on Modals*/
 .ant-card-actions > li > span:hover,
 .ant-btn:hover,
 .ant-btn:focus {
     color: #f59332;
     transition: color 0.3s;
     background-color: white;
 }
 .ant-btn {
     border-radius: 8px;
     background-color: #fff;
     color: rgb(62, 63, 66);
     font-weight: bold;
 }
 
 /*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/src/components/Common/EnhancedInputs.js b/web/cashtab/src/components/Common/EnhancedInputs.js
index d61b93d63..9ae8a5b44 100644
--- a/web/cashtab/src/components/Common/EnhancedInputs.js
+++ b/web/cashtab/src/components/Common/EnhancedInputs.js
@@ -1,186 +1,208 @@
 import * as React from 'react';
 import { Form, Input, Select } from 'antd';
 import {
     ThemedDollarOutlined,
     ThemedWalletOutlined,
 } from '@components/Common/CustomIcons';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components/macro';
 import { ScanQRCode } from './ScanQRCode';
 import useBCH from '@hooks/useBCH';
 import { currency } from '@components/Common/Ticker.js';
 
+export const AntdFormCss = css`
+    .ant-input-group-addon {
+        background-color: ${props =>
+            props.theme.formAddonBackground} !important;
+        border: 1px solid ${props => props.theme.formBorders};
+        color: ${props => props.theme.formAddonForeground} !important;
+    }
+`;
+export const AntdFormWrapper = styled.div`
+    ${AntdFormCss}
+`;
+
 export const InputAddonText = styled.span`
     width: 100%;
     height: 100%;
     display: block;
 
     ${props =>
         props.disabled
             ? `
       cursor: not-allowed;
       `
             : `cursor: pointer;`}
 `;
 
 export const InputNumberAddonText = styled.span`
-    background-color: #f4f4f4 !important;
-    border: 1px solid rgb(234, 237, 243);
-    color: #3e3f42 !important;
-    height: 50px;
-    line-height: 47px;
+           background-color: ${props =>
+               props.theme.formAddonBackground} !important;
+           border: border: 1px solid ${props => props.theme.formBorders};
+           color: ${props => props.theme.formAddonForeground} !important;
+           height: 50px;
+           line-height: 47px;
 
-    * {
-        color: #3e3f42 !important;
-    }
-    ${props =>
-        props.disabled
-            ? `
+           * {
+               color: ${props => props.theme.formAddonForeground} !important;
+           }
+           ${props =>
+               props.disabled
+                   ? `
       cursor: not-allowed;
       `
-            : `cursor: pointer;`}
-`;
+                   : `cursor: pointer;`}
+       `;
 
 export const SendBchInput = ({
     onMax,
     inputProps,
     selectProps,
     ...otherProps
 }) => {
     const { Option } = Select;
     const currencies = [
         {
             value: currency.ticker,
             label: currency.ticker,
         },
         { value: 'USD', label: 'USD' },
     ];
     const currencyOptions = currencies.map(currency => {
         return (
             <Option
                 key={currency.value}
                 value={currency.value}
                 className="selectedCurrencyOption"
                 style={{
                     textAlign: 'left',
                     backgroundColor: 'white',
                     color: ' #3e3f42',
                 }}
             >
                 {currency.label}
             </Option>
         );
     });
 
     const CurrencySelect = (
         <Select
             defaultValue={currency.ticker}
             className="select-after"
             style={{ width: '30%' }}
             {...selectProps}
         >
             {currencyOptions}
         </Select>
     );
     return (
         <Form.Item {...otherProps}>
             <Input.Group compact>
                 <Input
                     style={{ width: '60%', textAlign: 'left' }}
                     type="number"
                     step={
                         inputProps.dollar === 1
                             ? 0.01
                             : 1 / 10 ** currency.cashDecimals
                     }
                     prefix={
                         inputProps.dollar === 1 ? (
                             <ThemedDollarOutlined />
                         ) : (
                             <img
                                 src={currency.logo}
                                 alt=""
                                 width={16}
                                 height={16}
                             />
                         )
                     }
                     {...inputProps}
                 />
                 {CurrencySelect}
                 <InputNumberAddonText
                     style={{ width: '10%', height: '60px', lineHeight: '60px' }}
                     disabled={!!(inputProps || {}).disabled}
                     onClick={!(inputProps || {}).disabled && onMax}
                 >
                     max
                 </InputNumberAddonText>
             </Input.Group>
         </Form.Item>
     );
 };
 
 export const FormItemWithMaxAddon = ({ onMax, inputProps, ...otherProps }) => {
     return (
-        <Form.Item {...otherProps}>
-            <Input
-                type="number"
-                prefix={
-                    <img src={currency.logo} alt="" width={16} height={16} />
-                }
-                addonAfter={
-                    <InputAddonText
-                        disabled={!!(inputProps || {}).disabled}
-                        onClick={!(inputProps || {}).disabled && onMax}
-                    >
-                        max
-                    </InputAddonText>
-                }
-                {...inputProps}
-            />
-        </Form.Item>
+        <AntdFormWrapper>
+            <Form.Item {...otherProps}>
+                <Input
+                    type="number"
+                    prefix={
+                        <img
+                            src={currency.logo}
+                            alt=""
+                            width={16}
+                            height={16}
+                        />
+                    }
+                    addonAfter={
+                        <InputAddonText
+                            disabled={!!(inputProps || {}).disabled}
+                            onClick={!(inputProps || {}).disabled && onMax}
+                        >
+                            max
+                        </InputAddonText>
+                    }
+                    {...inputProps}
+                />
+            </Form.Item>
+        </AntdFormWrapper>
     );
 };
 
 // loadWithCameraOpen prop: if true, load page with camera scanning open
 export const FormItemWithQRCodeAddon = ({
     onScan,
     loadWithCameraOpen,
     inputProps,
     ...otherProps
 }) => {
     return (
-        <Form.Item {...otherProps}>
-            <Input
-                prefix={<ThemedWalletOutlined />}
-                autoComplete="off"
-                addonAfter={
-                    <ScanQRCode
-                        loadWithCameraOpen={loadWithCameraOpen}
-                        onScan={onScan}
-                    />
-                }
-                {...inputProps}
-            />
-        </Form.Item>
+        <AntdFormWrapper>
+            <Form.Item {...otherProps}>
+                <Input
+                    prefix={<ThemedWalletOutlined />}
+                    autoComplete="off"
+                    addonAfter={
+                        <ScanQRCode
+                            loadWithCameraOpen={loadWithCameraOpen}
+                            onScan={onScan}
+                        />
+                    }
+                    {...inputProps}
+                />
+            </Form.Item>
+        </AntdFormWrapper>
     );
 };
 
 export const AddressValidators = () => {
     const { BCH } = useBCH();
 
     return {
         safelyDetectAddressFormat: value => {
             try {
                 return BCH.Address.detectAddressFormat(value);
             } catch (error) {
                 return null;
             }
         },
         isSLPAddress: value =>
             AddressValidators.safelyDetectAddressFormat(value) === 'slpaddr',
         isBCHAddress: value =>
             AddressValidators.safelyDetectAddressFormat(value) === 'cashaddr',
         isLegacyAddress: value =>
             AddressValidators.safelyDetectAddressFormat(value) === 'legacy',
     }();
 };