diff --git a/web/cashtab/src/assets/styles/theme.js b/web/cashtab/src/assets/styles/theme.js
--- 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
--- a/web/cashtab/src/components/App.css
+++ b/web/cashtab/src/components/App.css
@@ -29,13 +29,6 @@
 
 /* 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 {
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
@@ -4,11 +4,23 @@
     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%;
@@ -23,22 +35,23 @@
 `;
 
 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,
@@ -121,23 +134,30 @@
 
 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>
     );
 };
 
@@ -149,19 +169,21 @@
     ...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>
     );
 };