diff --git a/src/components/AccountDetails/AccountDetails.tsx b/src/components/AccountDetails/AccountDetails.tsx
index f1c2642f3..6ab6e9bac 100755
--- a/src/components/AccountDetails/AccountDetails.tsx
+++ b/src/components/AccountDetails/AccountDetails.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { useActiveWeb3React } from 'hooks';
 import { AppDispatch } from 'state';
 import { Box, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { clearAllTransactions } from 'state/transactions/actions';
 import { shortenAddress, getEtherscanLink } from 'utils';
 import { SUPPORTED_WALLETS } from 'constants/index';
@@ -56,6 +56,7 @@ const AccountDetails: React.FC<AccountDetailsProps> = ({
 }) => {
   const { chainId, account, connector } = useActiveWeb3React();
   const classes = useStyles();
+  const { palette } = useTheme();
   const dispatch = useDispatch<AppDispatch>();
 
   function formatConnectorName() {
@@ -81,7 +82,12 @@ const AccountDetails: React.FC<AccountDetailsProps> = ({
         <Typography variant='h5'>Account</Typography>
         <Close style={{ cursor: 'pointer' }} onClick={toggleWalletModal} />
       </Box>
-      <Box mt={2} padding={2} borderRadius={10} bgcolor='#282d3d'>
+      <Box
+        mt={2}
+        padding={2}
+        borderRadius={10}
+        bgcolor={palette.secondary.dark}
+      >
         <Box display='flex' justifyContent='space-between' alignItems='center'>
           {formatConnectorName()}
           {connector !== injected &&
diff --git a/src/components/AccountDetails/CopyHelper.tsx b/src/components/AccountDetails/CopyHelper.tsx
index ea7ef5eb2..1ca6fd9be 100755
--- a/src/components/AccountDetails/CopyHelper.tsx
+++ b/src/components/AccountDetails/CopyHelper.tsx
@@ -10,7 +10,7 @@ const useStyles = makeStyles(({ palette }) => ({
     display: 'flex',
     cursor: 'pointer',
     '&:hover, &:active, &:focus': {
-      color: palette.text.secondary,
+      color: 'white',
     },
   },
 }));
diff --git a/src/components/AddLiquidity/AddLiquidity.tsx b/src/components/AddLiquidity/AddLiquidity.tsx
index 6cfe619e6..5548e7e76 100755
--- a/src/components/AddLiquidity/AddLiquidity.tsx
+++ b/src/components/AddLiquidity/AddLiquidity.tsx
@@ -7,7 +7,7 @@ import {
   ConfirmationModalContent,
   DoubleCurrencyLogo,
 } from 'components';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useWalletModalToggle } from 'state/application/hooks';
 import { TransactionResponse } from '@ethersproject/providers';
 import { BigNumber } from '@ethersproject/bignumber';
@@ -41,7 +41,7 @@ import {
 import { wrappedCurrency } from 'utils/wrappedCurrency';
 import { ReactComponent as AddLiquidityIcon } from 'assets/images/AddLiquidityIcon.svg';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   exchangeSwap: {
     cursor: 'pointer',
     display: 'flex',
@@ -58,10 +58,10 @@ const useStyles = makeStyles(({ breakpoints }) => ({
       fontSize: 18,
       fontWeight: 600,
       width: (props: any) => (props.showApproveFlow ? '48%' : '100%'),
-      backgroundImage: 'linear-gradient(to bottom, #448aff, #004ce6)',
+      backgroundImage: `linear-gradient(to bottom, ${palette.primary.main}, #004ce6)`,
       '&.Mui-disabled': {
-        backgroundImage: 'linear-gradient(to bottom, #282d3d, #1d212c)',
-        color: '#696c80',
+        backgroundImage: `linear-gradient(to bottom, ${palette.secondary.dark}, #1d212c)`,
+        color: palette.text.secondary,
         opacity: 0.5,
       },
       '& .content': {
@@ -85,7 +85,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     '& p': {
       display: 'flex',
       alignItems: 'center',
-      color: '#c7cad9',
+      color: palette.text.primary,
       '& svg': {
         marginLeft: 8,
         width: 16,
@@ -106,6 +106,7 @@ const AddLiquidity: React.FC<{
   currency1?: Currency;
 }> = ({ currency0, currency1 }) => {
   const classes = useStyles({});
+  const { palette } = useTheme();
   const [addLiquidityErrorMessage, setAddLiquidityErrorMessage] = useState<
     string | null
   >(null);
@@ -398,7 +399,7 @@ const AddLiquidity: React.FC<{
             size={48}
           />
         </Box>
-        <Box mb={6} color='#c7cad9' textAlign='center'>
+        <Box mb={6} color={palette.text.primary} textAlign='center'>
           <Typography variant='h6'>
             Supplying {parsedAmounts[Field.CURRENCY_A]?.toSignificant()}&nbsp;
             {currencies[Field.CURRENCY_A]?.symbol}&nbsp;and&nbsp;
@@ -410,7 +411,7 @@ const AddLiquidity: React.FC<{
             {currencies[Field.CURRENCY_B]?.symbol} LP Tokens
           </Typography>
         </Box>
-        <Box mb={3} color='#696c80' textAlign='center'>
+        <Box mb={3} color={palette.text.secondary} textAlign='center'>
           <Typography variant='body2'>
             {`Output is estimated. If the price changes by more than ${allowedSlippage /
               100}% your transaction will revert.`}
diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
index 806539b39..755d3b517 100644
--- a/src/components/AreaChart/AreaChart.tsx
+++ b/src/components/AreaChart/AreaChart.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles(({ palette }) =>
       marginRight: 8,
       '& p': {
         fontSize: 12,
-        color: '#626680',
+        color: palette.text.disabled,
       },
     },
     yAxis: {
@@ -31,7 +31,7 @@ const useStyles = makeStyles(({ palette }) =>
       '& p': {
         fontSize: 10,
         fontWeight: 500,
-        color: '#626680',
+        color: palette.text.disabled,
       },
     },
   }),
diff --git a/src/components/BarChart/BarChart.tsx b/src/components/BarChart/BarChart.tsx
index cd291595c..33e137ede 100755
--- a/src/components/BarChart/BarChart.tsx
+++ b/src/components/BarChart/BarChart.tsx
@@ -9,7 +9,7 @@ export interface BarChartProps {
   onHover: (index: number) => void;
 }
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   barChartItem: {
     background:
       'linear-gradient(to bottom, #64fbd3, #00cff3 34%, #0098ff 63%, #004ce6)',
@@ -28,7 +28,7 @@ const useStyles = makeStyles(({}) => ({
     marginRight: 8,
     '& p': {
       fontSize: 12,
-      color: '#626680',
+      color: palette.text.disabled,
     },
   },
 }));
diff --git a/src/components/ColoredSlider/ColoredSlider.tsx b/src/components/ColoredSlider/ColoredSlider.tsx
index 9f5756fee..ade99a4d7 100644
--- a/src/components/ColoredSlider/ColoredSlider.tsx
+++ b/src/components/ColoredSlider/ColoredSlider.tsx
@@ -65,7 +65,7 @@ const ColoredSlider = withStyles((theme: Theme) => ({
   thumb: {
     height: 20,
     width: 20,
-    backgroundColor: '#448aff',
+    backgroundColor: theme.palette.primary.main,
     marginTop: -9,
     marginLeft: 0,
     boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.15)',
@@ -97,7 +97,7 @@ const ColoredSlider = withStyles((theme: Theme) => ({
   rail: {
     height: 2,
     borderRadius: 4,
-    background: '#1b1e29',
+    background: theme.palette.background.paper,
     width: 'calc(100% + 16px)',
   },
 }))(Slider);
diff --git a/src/components/ConfirmSwapModal/FormattedPriceImpact.tsx b/src/components/ConfirmSwapModal/FormattedPriceImpact.tsx
index fc1f43286..34c0a658e 100755
--- a/src/components/ConfirmSwapModal/FormattedPriceImpact.tsx
+++ b/src/components/ConfirmSwapModal/FormattedPriceImpact.tsx
@@ -1,4 +1,5 @@
 import { Typography } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import { Percent } from '@uniswap/sdk';
 import React from 'react';
 import { ONE_BIPS } from '../../constants';
@@ -10,6 +11,7 @@ import { warningSeverity } from '../../utils/prices';
 const FormattedPriceImpact: React.FC<{ priceImpact?: Percent }> = ({
   priceImpact,
 }) => {
+  const { palette } = useTheme();
   const severity = warningSeverity(priceImpact);
   return (
     <Typography
@@ -22,7 +24,7 @@ const FormattedPriceImpact: React.FC<{ priceImpact?: Percent }> = ({
             ? 'yellow'
             : severity === 1
             ? 'black'
-            : '#0fc679',
+            : palette.success.main,
       }}
     >
       {priceImpact
diff --git a/src/components/ConfirmSwapModal/SwapModalHeader.tsx b/src/components/ConfirmSwapModal/SwapModalHeader.tsx
index ab52e976a..22302247e 100755
--- a/src/components/ConfirmSwapModal/SwapModalHeader.tsx
+++ b/src/components/ConfirmSwapModal/SwapModalHeader.tsx
@@ -16,7 +16,7 @@ const useStyles = makeStyles(({ palette }) => ({
     flexDirection: 'column',
     alignItems: 'center',
     '& p': {
-      color: '#c7cad9',
+      color: palette.text.primary,
     },
     '& svg': {
       margin: '12px 0',
@@ -30,7 +30,7 @@ const useStyles = makeStyles(({ palette }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-    color: palette.secondary.dark,
+    color: palette.primary.main,
     '& > div': {
       display: 'flex',
       alignItems: 'center',
@@ -38,14 +38,14 @@ const useStyles = makeStyles(({ palette }) => ({
   },
   transactionText: {
     marginTop: '32px',
-    color: '#696c80',
+    color: palette.text.secondary,
     textAlign: 'center',
     '& p': {
       marginBottom: 16,
     },
   },
   swapButton: {
-    backgroundImage: 'linear-gradient(to bottom, #448aff, #004ce6)',
+    backgroundImage: `linear-gradient(to bottom, ${palette.primary.main}, #004ce6)`,
     width: '100%',
     height: 56,
     marginTop: 20,
@@ -98,28 +98,28 @@ const SwapModalHeader: React.FC<SwapModalHeaderProps> = ({
           {trade.outputAmount.currency.symbol}
         </Typography>
       </Box>
-      {showAcceptChanges && (
-        <Box className={classes.priceUpdate}>
-          <Box>
-            <AlertTriangle
-              size={20}
-              style={{ marginRight: '8px', minWidth: 24 }}
-            />
-            <Typography> Price Updated</Typography>
-          </Box>
-          <Button
-            style={{
-              padding: '.5rem',
-              width: 'fit-content',
-              fontSize: '0.825rem',
-              borderRadius: '12px',
-            }}
-            onClick={onAcceptChanges}
-          >
-            Accept
-          </Button>
+      {/* {showAcceptChanges && ( */}
+      <Box className={classes.priceUpdate}>
+        <Box>
+          <AlertTriangle
+            size={20}
+            style={{ marginRight: '8px', minWidth: 24 }}
+          />
+          <Typography> Price Updated</Typography>
         </Box>
-      )}
+        <Button
+          style={{
+            padding: '.5rem',
+            width: 'fit-content',
+            fontSize: '0.825rem',
+            borderRadius: '12px',
+          }}
+          onClick={onAcceptChanges}
+        >
+          Accept
+        </Button>
+      </Box>
+      {/* )} */}
       <Box className={classes.transactionText}>
         {trade.tradeType === TradeType.EXACT_INPUT ? (
           <Typography variant='body2'>
diff --git a/src/components/CurrencyInput/CurrencyInput.tsx b/src/components/CurrencyInput/CurrencyInput.tsx
index 4111f48f9..4568a175e 100755
--- a/src/components/CurrencyInput/CurrencyInput.tsx
+++ b/src/components/CurrencyInput/CurrencyInput.tsx
@@ -8,11 +8,11 @@ import { CurrencySearchModal, CurrencyLogo } from 'components';
 import { useActiveWeb3React } from 'hooks';
 import useUSDCPrice from 'utils/useUSDCPrice';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   swapBox: {
     padding: '16px 24px',
     borderRadius: 10,
-    background: '#282d3d',
+    background: palette.secondary.dark,
     zIndex: 1,
     position: 'relative',
     textAlign: 'left',
@@ -32,7 +32,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
         paddingLeft: 8,
         cursor: 'pointer',
         '& p': {
-          color: '#448aff',
+          color: palette.primary.main,
           fontWeight: 600,
         },
       },
@@ -42,12 +42,12 @@ const useStyles = makeStyles(({ breakpoints }) => ({
         boxShadow: 'none',
         outline: 'none',
         textAlign: 'right',
-        color: '#696c80',
+        color: palette.text.secondary,
         width: '100%',
         fontSize: 18,
         fontWeight: 600,
         '&::placeholder': {
-          color: '#696c80',
+          color: palette.text.secondary,
         },
       },
     },
@@ -70,14 +70,14 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     },
   },
   noCurrency: {
-    backgroundImage: 'linear-gradient(105deg, #448aff 3%, #004ce6)',
+    backgroundImage: `linear-gradient(105deg, ${palette.primary.main} 3%, #004ce6)`,
   },
   currencySelected: {
     backgroundColor: '#404557',
   },
   balanceSection: {
     '& p': {
-      color: '#696c80',
+      color: palette.text.secondary,
     },
   },
 }));
@@ -121,15 +121,7 @@ const CurrencyInput: React.FC<CurrencyInputProps> = ({
   return (
     <Box className={cx(classes.swapBox, showPrice && classes.priceShowBox)}>
       <Box display='flex' justifyContent='space-between' mb={2}>
-        <Box
-          display='flex'
-          flexDirection='row'
-          justifyContent='space-between'
-          width='100%'
-        >
-          <Typography>{title || 'You Pay:'}</Typography>
-          {/* <Typography style={{color: '#448aff', fontSize: '16px', cursor: 'pointer'}}>MAX</Typography> */}
-        </Box>
+        <Typography>{title || 'You Pay:'}</Typography>
         <Box display='flex'>
           {account && currency && showHalfButton && (
             <Box className='maxWrapper' onClick={onHalf}>
diff --git a/src/components/CurrencySearchModal/CommonBases.tsx b/src/components/CurrencySearchModal/CommonBases.tsx
index 106a9ca6f..50f05c8f3 100755
--- a/src/components/CurrencySearchModal/CommonBases.tsx
+++ b/src/components/CurrencySearchModal/CommonBases.tsx
@@ -5,14 +5,14 @@ import { makeStyles } from '@material-ui/core/styles';
 import { SUGGESTED_BASES } from 'constants/index';
 import { CurrencyLogo, QuestionHelper } from 'components';
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   baseWrapper: {
     borderRadius: 18,
     display: 'flex',
     padding: '6px 10px',
     margin: '4px 8px 4px 0',
     alignItems: 'center',
-    backgroundColor: '#282d3d',
+    backgroundColor: palette.secondary.dark,
     '&:hover': {
       cursor: 'pointer',
     },
@@ -23,7 +23,7 @@ const useStyles = makeStyles(({}) => ({
   title: {
     '& span': {
       marginRight: 4,
-      color: '#696c80',
+      color: palette.text.secondary,
     },
   },
 }));
diff --git a/src/components/CurrencySearchModal/CurrencyList.tsx b/src/components/CurrencySearchModal/CurrencyList.tsx
index af638c491..6ea9858ad 100755
--- a/src/components/CurrencySearchModal/CurrencyList.tsx
+++ b/src/components/CurrencySearchModal/CurrencyList.tsx
@@ -14,7 +14,7 @@ import {
   CircularProgress,
   ListItem,
 } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { FixedSizeList } from 'react-window';
 import { useActiveWeb3React } from 'hooks';
 import { useSelectedTokenList, WrappedTokenInfo } from 'state/lists/hooks';
@@ -36,7 +36,7 @@ function currencyKey(currency: Token): string {
     : '';
 }
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   tag: {
     fontSize: 14,
     borderRadius: 4,
@@ -68,20 +68,21 @@ const useStyles = makeStyles(({}) => ({
     },
   },
   currencySymbol: {
-    color: '#c7cad9',
+    color: palette.text.primary,
     lineHeight: 1,
   },
   currencyName: {
-    color: '#696c80',
+    color: palette.text.secondary,
   },
 }));
 
 function Balance({ balance }: { balance: CurrencyAmount }) {
+  const { palette } = useTheme();
   return (
     <Typography
       variant='body2'
       title={balance.toExact()}
-      style={{ color: '#c7cad9' }}
+      style={{ color: palette.text.primary }}
     >
       {balance.toSignificant(4)}
     </Typography>
@@ -137,6 +138,7 @@ const CurrencyRow: React.FC<CurrenyRowProps> = ({
 }) => {
   const { ethereum } = window as any;
   const classes = useStyles();
+  const { palette } = useTheme();
 
   const { account, chainId } = useActiveWeb3React();
   const key = currencyKey(currency);
@@ -260,7 +262,10 @@ const CurrencyRow: React.FC<CurrenyRowProps> = ({
           {balance ? (
             <>
               <Balance balance={balance} />
-              <Typography variant='caption' style={{ color: '#696c80' }}>
+              <Typography
+                variant='caption'
+                style={{ color: palette.text.secondary }}
+              >
                 $
                 {(
                   Number(balance.toSignificant()) *
diff --git a/src/components/CurrencySearchModal/CurrencySearch.tsx b/src/components/CurrencySearchModal/CurrencySearch.tsx
index 71edef89e..1a248ed51 100755
--- a/src/components/CurrencySearchModal/CurrencySearch.tsx
+++ b/src/components/CurrencySearchModal/CurrencySearch.tsx
@@ -28,14 +28,14 @@ import { isAddress } from 'utils';
 import { filterTokens } from 'utils/filtering';
 import { useTokenComparator } from 'utils/sorting';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   wrapper: {
     padding: '32px 24px 0',
     height: 620,
     borderRadius: 20,
     display: 'flex',
     flexDirection: 'column',
-    background: '#1b1e29',
+    background: palette.background.paper,
     backdropFilter: 'blur(9.9px)',
     border: '1px solid #3e4252',
     [breakpoints.down('xs')]: {
@@ -52,7 +52,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
       cursor: 'pointer',
     },
     '& h6': {
-      color: '#c7cad9',
+      color: palette.text.primary,
       fontWeight: 600,
     },
   },
@@ -67,7 +67,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     borderRadius: 12,
     outline: 'none',
     border: 'solid 2px rgba(105, 108, 128, 0.12)',
-    backgroundColor: '#12131a',
+    backgroundColor: palette.background.default,
     '& svg': {
       marginRight: 12,
     },
@@ -79,13 +79,12 @@ const useStyles = makeStyles(({ breakpoints }) => ({
       outline: 'none',
       fontSize: 14,
       fontWeight: 500,
-      color: '#696c80',
+      color: palette.text.secondary,
       fontFamily: "'Inter', sans-serif",
     },
   },
   footer: {
-    backgroundImage:
-      'linear-gradient(to bottom, rgba(27, 30, 41, 0), #1b1e29 64%)',
+    backgroundImage: `linear-gradient(to bottom, rgba(27, 30, 41, 0), ${palette.background.paper} 64%)`,
     width: '100%',
     height: 64,
     position: 'absolute',
diff --git a/src/components/CustomModal/CustomModal.tsx b/src/components/CustomModal/CustomModal.tsx
index 313dc95cd..ba54f255a 100755
--- a/src/components/CustomModal/CustomModal.tsx
+++ b/src/components/CustomModal/CustomModal.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Modal, Box, Backdrop, Fade } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   wrapper: {
     margin: 0,
     padding: 0,
@@ -14,7 +14,7 @@ const useStyles = makeStyles(({}) => ({
     borderRadius: 20,
     transform: 'translate(-50%, -50%)',
     outline: 'none',
-    background: '#1b1e29',
+    background: palette.background.paper,
   },
 }));
 
diff --git a/src/components/CustomTooltip/CustomTooltip.tsx b/src/components/CustomTooltip/CustomTooltip.tsx
index 045fc7212..b507e1707 100755
--- a/src/components/CustomTooltip/CustomTooltip.tsx
+++ b/src/components/CustomTooltip/CustomTooltip.tsx
@@ -1,27 +1,27 @@
 import React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
 import { useIsDarkMode } from 'state/user/hooks';
 
-const useStylesBootstrap = makeStyles((theme: Theme) => ({
+const useStylesBootstrap = makeStyles(({ palette }) => ({
   arrow: {
     fontSize: 16,
     width: 17,
     '&::before': {
       color: (props: any) =>
-        props.dark ? '#282d3d' : 'rgba(255, 255, 255, 0.9)',
-      border: `1px solid ${theme.palette.divider}`,
+        props.dark ? palette.secondary.dark : 'rgba(255, 255, 255, 0.9)',
+      border: `1px solid ${palette.divider}`,
       boxSizing: 'border-box',
     },
   },
   tooltip: {
     backgroundColor: (props: any) =>
-      props.dark ? '#282d3d' : 'rgba(255, 255, 255, 0.9)',
-    border: `1px solid ${theme.palette.divider}`,
+      props.dark ? palette.secondary.dark : 'rgba(255, 255, 255, 0.9)',
+    border: `1px solid ${palette.divider}`,
     padding: '14px',
     fontSize: '14px',
     borderRadius: '14px',
-    color: theme.palette.text.primary,
+    color: palette.text.primary,
   },
 }));
 
diff --git a/src/components/FarmCard/FarmCard.tsx b/src/components/FarmCard/FarmCard.tsx
index eb009e5f2..99d5b42db 100755
--- a/src/components/FarmCard/FarmCard.tsx
+++ b/src/components/FarmCard/FarmCard.tsx
@@ -21,9 +21,9 @@ import { useActiveWeb3React, useIsArgentWallet } from 'hooks';
 import useTransactionDeadline from 'hooks/useTransactionDeadline';
 import { useApproveCallback, ApprovalState } from 'hooks/useApproveCallback';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   syrupCard: {
-    background: '#282d3d',
+    background: palette.secondary.dark,
     width: '100%',
     borderRadius: 10,
     marginTop: 24,
@@ -32,7 +32,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     alignItems: 'center',
   },
   syrupCardUp: {
-    background: '#282d3d',
+    background: palette.secondary.dark,
     width: '100%',
     borderRadius: 10,
     display: 'flex',
@@ -44,7 +44,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     },
   },
   inputVal: {
-    backgroundColor: '#121319',
+    backgroundColor: palette.secondary.contrastText,
     borderRadius: '10px',
     height: '50px',
     display: 'flex',
@@ -58,7 +58,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
       outline: 'none',
       fontSize: 16,
       fontWeight: 600,
-      color: '#c7cad9',
+      color: palette.text.primary,
     },
     '& p': {
       cursor: 'pointer',
@@ -89,7 +89,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
   syrupText: {
     fontSize: 14,
     fontWeight: 600,
-    color: '#696c80',
+    color: palette.text.secondary,
   },
 }));
 
@@ -98,7 +98,7 @@ const FarmCard: React.FC<{
   dQuicktoQuick: number;
 }> = ({ stakingInfo, dQuicktoQuick }) => {
   const classes = useStyles();
-  const { breakpoints } = useTheme();
+  const { palette, breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
   const [isExpandCard, setExpandCard] = useState(false);
   const [stakeAmount, setStakeAmount] = useState('');
@@ -464,7 +464,7 @@ const FarmCard: React.FC<{
             <Typography className={classes.syrupText}>APY</Typography>
           )}
           <Box display='flex' alignItems='center'>
-            <Typography variant='body2' style={{ color: '#0fc679' }}>
+            <Typography variant='body2' style={{ color: palette.success.main }}>
               {apyWithFee}%
             </Typography>
             <Box ml={1} style={{ height: '16px' }}>
@@ -488,7 +488,10 @@ const FarmCard: React.FC<{
                 <span>&nbsp;dQUICK</span>
               </Typography>
             </Box>
-            <Typography variant='body2' style={{ color: '#696c80' }}>
+            <Typography
+              variant='body2'
+              style={{ color: palette.text.secondary }}
+            >
               {earnedUSDStr}
             </Typography>
           </Box>
@@ -512,7 +515,7 @@ const FarmCard: React.FC<{
           <Box
             minWidth={250}
             width={isMobile ? 1 : 0.3}
-            color='#696c80'
+            color={palette.text.secondary}
             my={1.5}
           >
             <Box
@@ -539,7 +542,7 @@ const FarmCard: React.FC<{
                 </Typography>
                 <Link
                   to={`/pools?currency0=${token0.address}&currency1=${token1.address}`}
-                  style={{ color: '#448aff' }}
+                  style={{ color: palette.primary.main }}
                 >
                   Get {currency0.symbol} / {currency1.symbol} LP
                 </Link>
@@ -559,8 +562,8 @@ const FarmCard: React.FC<{
                   color:
                     userLiquidityUnstaked &&
                     userLiquidityUnstaked.greaterThan('0')
-                      ? '#448aff'
-                      : '#636780',
+                      ? palette.primary.main
+                      : palette.text.hint,
                 }}
                 onClick={() => {
                   if (
@@ -619,7 +622,7 @@ const FarmCard: React.FC<{
             minWidth={250}
             width={isMobile ? 1 : 0.3}
             my={1.5}
-            color='#696c80'
+            color={palette.text.secondary}
           >
             <Box
               display='flex'
@@ -647,8 +650,8 @@ const FarmCard: React.FC<{
                   color:
                     stakingInfo.stakedAmount &&
                     stakingInfo.stakedAmount.greaterThan('0')
-                      ? '#448aff'
-                      : '#636780',
+                      ? palette.primary.main
+                      : palette.text.hint,
                 }}
                 onClick={() => {
                   if (
@@ -698,7 +701,7 @@ const FarmCard: React.FC<{
             minWidth={250}
             my={1.5}
             width={isMobile ? 1 : 0.3}
-            color='#696c80'
+            color={palette.text.secondary}
           >
             <Box
               display='flex'
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 0cc604b4f..5ad3fc6a8 100755
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -98,7 +98,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
         position: 'absolute',
         left: 0,
         top: 14,
-        background: '#1b1e29',
+        background: palette.background.paper,
         borderRadius: 10,
         padding: '14px 0',
         '& > a': {
@@ -109,7 +109,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
         },
       },
       '&:hover': {
-        background: '#1b1e29',
+        background: palette.background.paper,
         '& .subMenu': {
           display: 'block',
         },
@@ -119,14 +119,14 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
       textDecoration: 'none',
       padding: '7.5px 24px',
       marginRight: 12,
-      color: '#696c80',
+      color: palette.text.secondary,
       borderRadius: 10,
       '& p': {
         letterSpacing: 'normal',
       },
       '&.active': {
-        color: '#ebecf2',
-        background: '#1b1e29',
+        color: palette.text.primary,
+        background: palette.background.paper,
       },
       '&:last-child': {
         marginRight: 0,
@@ -152,7 +152,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     },
   },
   mobileMenuWrapper: {
-    background: '#121319',
+    background: palette.secondary.contrastText,
     position: 'absolute',
     top: 80,
     left: 0,
@@ -175,7 +175,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     height: 32,
     width: '100%',
     '& p': {
-      color: '#ebecf2',
+      color: palette.text.primary,
     },
     '& svg, & img': {
       width: 32,
@@ -211,10 +211,10 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     backgroundColor: '#004ce6',
   },
   danger: {
-    backgroundColor: '#ff5252',
+    backgroundColor: palette.error.main,
   },
   wrongNetworkContent: {
-    background: '#1b1e29',
+    background: palette.background.paper,
     borderRadius: 10,
     padding: 24,
     display: 'none',
@@ -231,8 +231,8 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
       justifyContent: 'center',
       alignItems: 'center',
       borderRadius: 20,
-      border: 'solid 1px #448aff',
-      color: '#448aff',
+      border: `solid 1px ${palette.primary.main}`,
+      color: palette.primary.main,
       fontSize: 14,
       fontWeight: 600,
     },
diff --git a/src/components/PoolPositionCard/PoolPositionCard.tsx b/src/components/PoolPositionCard/PoolPositionCard.tsx
index 482075737..84769cd74 100755
--- a/src/components/PoolPositionCard/PoolPositionCard.tsx
+++ b/src/components/PoolPositionCard/PoolPositionCard.tsx
@@ -17,7 +17,7 @@ import {
   RemoveLiquidityModal,
 } from 'components';
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   poolButtonRow: {
     display: 'flex',
     alignItems: 'center',
@@ -33,7 +33,7 @@ const useStyles = makeStyles(({}) => ({
         textDecoration: 'none',
       },
       '& p': {
-        color: '#ebecf2',
+        color: palette.text.primary,
       },
     },
     '& .MuiButton-outlined': {
@@ -48,6 +48,15 @@ const useStyles = makeStyles(({}) => ({
       backgroundColor: 'transparent',
     },
   },
+  cardRow: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+    '& p': {
+      color: palette.text.primary,
+    },
+  },
 }));
 
 interface PoolPositionCardProps {
@@ -60,7 +69,7 @@ const PoolPositionCard: React.FC<PoolPositionCardProps> = ({
   handleAddLiquidity,
 }) => {
   const classes = useStyles();
-  const { breakpoints } = useTheme();
+  const { palette, breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
 
   const { account } = useActiveWeb3React();
@@ -183,9 +192,9 @@ const PoolPositionCard: React.FC<PoolPositionCardProps> = ({
   return (
     <Box
       width={1}
-      border='1px solid #282d3d'
+      border={`1px solid ${palette.secondary.dark}`}
       borderRadius={10}
-      bgcolor={showMore ? '#282d3d' : 'transparent'}
+      bgcolor={showMore ? palette.secondary.dark : 'transparent'}
       style={{ overflow: 'hidden' }}
     >
       <Box
@@ -202,7 +211,10 @@ const PoolPositionCard: React.FC<PoolPositionCardProps> = ({
             margin={true}
             size={28}
           />
-          <Typography variant='h6' style={{ color: '#ebecf2', marginLeft: 16 }}>
+          <Typography
+            variant='h6'
+            style={{ color: palette.text.primary, marginLeft: 16 }}
+          >
             {!currency0 || !currency1
               ? 'Loading'
               : `${currency0.symbol}/${currency1.symbol}`}
@@ -212,7 +224,7 @@ const PoolPositionCard: React.FC<PoolPositionCardProps> = ({
         <Box
           display='flex'
           alignItems='center'
-          color='#448aff'
+          color={palette.primary.main}
           style={{ cursor: 'pointer' }}
           onClick={() => setShowMore(!showMore)}
         >
@@ -225,34 +237,17 @@ const PoolPositionCard: React.FC<PoolPositionCardProps> = ({
 
       {showMore && (
         <Box px={isMobile ? 1.5 : 3} mb={3}>
-          <Box
-            display='flex'
-            alignItems='center'
-            justifyContent='space-between'
-            mb={1.5}
-          >
-            <Typography variant='body2' style={{ color: '#c7cad9' }}>
-              Your pool tokens:
-            </Typography>
-            <Typography variant='body2' style={{ color: '#c7cad9' }}>
+          <Box className={classes.cardRow}>
+            <Typography variant='body2'>Your pool tokens:</Typography>
+            <Typography variant='body2'>
               {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
             </Typography>
           </Box>
-          <Box
-            display='flex'
-            alignItems='center'
-            justifyContent='space-between'
-            mb={1.5}
-          >
-            <Typography variant='body2' style={{ color: '#c7cad9' }}>
-              Pooled {currency0.symbol}:
-            </Typography>
+          <Box className={classes.cardRow}>
+            <Typography variant='body2'>Pooled {currency0.symbol}:</Typography>
             {token0Deposited ? (
               <Box display='flex' alignItems='center'>
-                <Typography
-                  variant='body2'
-                  style={{ color: '#c7cad9', marginRight: 10 }}
-                >
+                <Typography variant='body2' style={{ marginRight: 10 }}>
                   {token0Deposited?.toSignificant(6)}
                 </Typography>
                 <CurrencyLogo size='20px' currency={currency0} />
@@ -262,21 +257,11 @@ const PoolPositionCard: React.FC<PoolPositionCardProps> = ({
             )}
           </Box>
 
-          <Box
-            display='flex'
-            alignItems='center'
-            justifyContent='space-between'
-            mb={1.5}
-          >
-            <Typography variant='body2' style={{ color: '#c7cad9' }}>
-              Pooled {currency1.symbol}:
-            </Typography>
+          <Box className={classes.cardRow}>
+            <Typography variant='body2'>Pooled {currency1.symbol}:</Typography>
             {token1Deposited ? (
               <Box display='flex' alignItems='center'>
-                <Typography
-                  variant='body2'
-                  style={{ color: '#c7cad9', marginRight: 10 }}
-                >
+                <Typography variant='body2' style={{ marginRight: 10 }}>
                   {token1Deposited?.toSignificant(6)}
                 </Typography>
                 <CurrencyLogo size='20px' currency={currency1} />
@@ -286,16 +271,9 @@ const PoolPositionCard: React.FC<PoolPositionCardProps> = ({
             )}
           </Box>
 
-          <Box
-            display='flex'
-            alignItems='center'
-            justifyContent='space-between'
-            mb={1.5}
-          >
-            <Typography variant='body2' style={{ color: '#c7cad9' }}>
-              Your pool share:
-            </Typography>
-            <Typography variant='body2' style={{ color: '#c7cad9' }}>
+          <Box className={classes.cardRow}>
+            <Typography variant='body2'>Your pool share:</Typography>
+            <Typography variant='body2'>
               {poolTokenPercentage
                 ? poolTokenPercentage.toSignificant() + '%'
                 : '-'}
@@ -334,8 +312,11 @@ const PoolPositionCard: React.FC<PoolPositionCardProps> = ({
       {stakingInfo && apyWithFee && (
         <Box bgcolor='#404557' paddingY={0.75} paddingX={isMobile ? 2 : 3}>
           <Typography variant='body2'>
-            Earn <span style={{ color: '#0fc679' }}>{apyWithFee}% APY</span> by
-            staking your LP tokens in {currency0.symbol?.toUpperCase()} /{' '}
+            Earn{' '}
+            <span style={{ color: palette.success.main }}>
+              {apyWithFee}% APY
+            </span>{' '}
+            by staking your LP tokens in {currency0.symbol?.toUpperCase()} /{' '}
             {currency1.symbol?.toUpperCase()} Farm
           </Typography>
         </Box>
diff --git a/src/components/Popups/PopupItem.tsx b/src/components/Popups/PopupItem.tsx
index dbcfdeea9..b17aa8ed9 100644
--- a/src/components/Popups/PopupItem.tsx
+++ b/src/components/Popups/PopupItem.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { Box } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import { PopupContent } from 'state/application/actions';
 import { useRemovePopup } from 'state/application/hooks';
 import TransactionPopup from './TransactionPopup';
@@ -15,6 +16,7 @@ const PopupItem: React.FC<PopupItemProps> = ({
   content,
   popKey,
 }) => {
+  const { palette } = useTheme();
   const removePopup = useRemovePopup();
   const removeThisPopup = useCallback(() => removePopup(popKey), [
     popKey,
@@ -51,7 +53,7 @@ const PopupItem: React.FC<PopupItemProps> = ({
     <Box
       padding={2.5}
       borderRadius={10}
-      bgcolor='#1b1e29'
+      bgcolor={palette.background.paper}
       overflow='hidden'
       position='relative'
     >
diff --git a/src/components/Popups/TransactionPopup.tsx b/src/components/Popups/TransactionPopup.tsx
index 65e748c64..989fcdafa 100644
--- a/src/components/Popups/TransactionPopup.tsx
+++ b/src/components/Popups/TransactionPopup.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Box, LinearProgress, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useActiveWeb3React } from 'hooks';
 import { getEtherscanLink } from 'utils/index';
 import { ReactComponent as ArrowTopRight } from 'assets/images/ArrowTopRight.svg';
@@ -34,6 +34,7 @@ const TransactionPopup: React.FC<TransactionPopupProps> = ({
   summary,
 }) => {
   const classes = useStyles();
+  const { palette } = useTheme();
   const { chainId } = useActiveWeb3React();
   const [progress, setProgress] = React.useState(0);
 
@@ -61,7 +62,11 @@ const TransactionPopup: React.FC<TransactionPopupProps> = ({
           variant='body2'
           style={{
             fontWeight: 600,
-            color: pending ? '#ffa000' : success ? '#0fc679' : '#ff5252',
+            color: pending
+              ? '#ffa000'
+              : success
+              ? palette.success.main
+              : palette.error.main,
           }}
         >
           {pending ? 'Processing…' : success ? 'Confirmed' : 'Failed'}
diff --git a/src/components/RemoveLiquidityModal/RemoveLiquidityModal.tsx b/src/components/RemoveLiquidityModal/RemoveLiquidityModal.tsx
index 1f1379fe2..4e234e97b 100644
--- a/src/components/RemoveLiquidityModal/RemoveLiquidityModal.tsx
+++ b/src/components/RemoveLiquidityModal/RemoveLiquidityModal.tsx
@@ -3,7 +3,7 @@ import { splitSignature } from '@ethersproject/bytes';
 import { Contract } from '@ethersproject/contracts';
 import { ArrowLeft, ArrowDown } from 'react-feather';
 import { Box, Typography, Button } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Currency, ETHER, JSBI, Percent } from '@uniswap/sdk';
 import ReactGA from 'react-ga';
 import { BigNumber } from '@ethersproject/bignumber';
@@ -44,14 +44,14 @@ import { wrappedCurrency } from 'utils/wrappedCurrency';
 import { useTotalSupply } from 'data/TotalSupply';
 import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   input: {
     width: '100%',
     background: 'transparent',
     border: 'none',
     boxShadow: 'none',
     outline: 'none',
-    color: '#c7cad9',
+    color: palette.text.primary,
     fontSize: 28,
     fontWeight: 600,
   },
@@ -68,7 +68,7 @@ const useStyles = makeStyles(({}) => ({
     },
     '&.Mui-disabled': {
       backgroundImage: 'none',
-      backgroundColor: '#282d3d',
+      backgroundColor: palette.secondary.dark,
     },
   },
 }));
@@ -87,6 +87,7 @@ const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
   onClose,
 }) => {
   const classes = useStyles();
+  const { palette } = useTheme();
   const [showConfirm, setShowConfirm] = useState(false);
   const [txPending, setTxPending] = useState(false);
   const [attemptingTxn, setAttemptingTxn] = useState(false);
@@ -484,7 +485,7 @@ const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
             size={48}
           />
         </Box>
-        <Box mb={6} color='#c7cad9' textAlign='center'>
+        <Box mb={6} color={palette.text.primary} textAlign='center'>
           <Typography variant='h6'>
             Removing {formattedAmounts[Field.LIQUIDITY]} {currency0.symbol} /{' '}
             {currency1.symbol} LP Tokens
@@ -497,7 +498,7 @@ const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
             {currency1.symbol}
           </Typography>
         </Box>
-        <Box mb={3} color='#696c80' textAlign='center'>
+        <Box mb={3} color={palette.text.secondary} textAlign='center'>
           <Typography variant='body2'>
             {`Output is estimated. If the price changes by more than ${allowedSlippage /
               100}% your transaction will revert.`}
@@ -550,18 +551,21 @@ const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
         )}
         <Box display='flex' alignItems='center' justifyContent='space-between'>
           <ArrowLeft
-            color='#696c80'
+            color={palette.text.secondary}
             style={{ cursor: 'pointer' }}
             onClick={onClose}
           />
-          <Typography variant='subtitle2' style={{ color: '#c7cad9' }}>
+          <Typography
+            variant='subtitle2'
+            style={{ color: palette.text.primary }}
+          >
             Remove Liquidity
           </Typography>
           <CloseIcon style={{ cursor: 'pointer' }} onClick={onClose} />
         </Box>
         <Box
           mt={3}
-          bgcolor='#12131a'
+          bgcolor={palette.background.default}
           border='1px solid rgba(105, 108, 128, 0.12)'
           borderRadius='10px'
           padding='16px'
@@ -606,9 +610,13 @@ const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
           </Box>
         </Box>
         <Box display='flex' my={3} justifyContent='center'>
-          <ArrowDown color='#696c80' />
+          <ArrowDown color={palette.text.secondary} />
         </Box>
-        <Box padding='16px' bgcolor='#252833' borderRadius='10px'>
+        <Box
+          padding='16px'
+          bgcolor={palette.secondary.light}
+          borderRadius='10px'
+        >
           <Box
             display='flex'
             justifyContent='space-between'
@@ -741,7 +749,7 @@ const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
           </Button>
         </Box>
         <Box mt={2}>
-          <Typography variant='body1' style={{ color: '#ff5252' }}>
+          <Typography variant='body1' style={{ color: palette.error.main }}>
             {errorMsg}
           </Typography>
         </Box>
diff --git a/src/components/RewardSlider/RewardSliderItem.tsx b/src/components/RewardSlider/RewardSliderItem.tsx
index 6852c1920..eb1735a2a 100755
--- a/src/components/RewardSlider/RewardSliderItem.tsx
+++ b/src/components/RewardSlider/RewardSliderItem.tsx
@@ -15,7 +15,7 @@ import { ReactComponent as HelpIcon } from 'assets/images/HelpIcon.svg';
 const useStyles = makeStyles(({ palette }) => ({
   rewardsSliderItem: {
     borderRadius: 32,
-    background: palette.primary.dark,
+    background: palette.background.paper,
     padding: '32px 22px',
     position: 'relative',
     '& .rewardIcon': {
@@ -47,7 +47,7 @@ const useStyles = makeStyles(({ palette }) => ({
       },
       '& h5': {
         background: 'rgba(15, 198, 121, 0.12)',
-        color: '#0FC679',
+        color: palette.success.main,
         padding: '0 4px',
         borderRadius: 5,
       },
diff --git a/src/components/SettingsModal/SettingsModal.tsx b/src/components/SettingsModal/SettingsModal.tsx
index ba1905023..4833ab9f6 100644
--- a/src/components/SettingsModal/SettingsModal.tsx
+++ b/src/components/SettingsModal/SettingsModal.tsx
@@ -2,7 +2,7 @@ import React, { useState, useMemo } from 'react';
 import { Box, Divider, Typography } from '@material-ui/core';
 import { KeyboardArrowDown } from '@material-ui/icons';
 import { AlertTriangle } from 'react-feather';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { CustomModal, QuestionHelper, ToggleSwitch } from 'components';
 import cx from 'classnames';
 import {
@@ -22,12 +22,12 @@ enum DeadlineError {
   InvalidInput = 'InvalidInput',
 }
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   slippageButton: {
     width: 62,
     height: 40,
     borderRadius: 10,
-    border: 'solid 1px #252833',
+    border: `solid 1px ${palette.secondary.light}`,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -35,7 +35,7 @@ const useStyles = makeStyles(({}) => ({
     marginRight: 16,
   },
   activeSlippageButton: {
-    background: '#448aff',
+    background: palette.primary.main,
   },
   settingsInput: {
     background: 'transparent',
@@ -56,6 +56,7 @@ interface SettingsModalProps {
 
 const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
   const classes = useStyles();
+  const { palette } = useTheme();
   const [
     userSlippageTolerance,
     setUserslippageTolerance,
@@ -169,8 +170,8 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
             px={2}
             display='flex'
             alignItems='center'
-            bgcolor='#12131a'
-            border='1px solid #252833'
+            bgcolor={palette.background.default}
+            border={`1px solid ${palette.secondary.light}`}
           >
             <input
               style={{ textAlign: 'left' }}
@@ -266,9 +267,11 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
               px={2}
               display='flex'
               alignItems='center'
-              bgcolor='#12131a'
+              bgcolor={palette.background.default}
               border={`1px solid
-                ${slippageAlert ? '#448aff' : '#252833'}
+                ${
+                  slippageAlert ? palette.primary.main : palette.secondary.light
+                }
               `}
             >
               {slippageAlert && <AlertTriangle color='#ffa000' size={16} />}
@@ -314,8 +317,8 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
             px={2}
             display='flex'
             alignItems='center'
-            bgcolor='#12131a'
-            border='1px solid #252833'
+            bgcolor={palette.background.default}
+            border={`1px solid ${palette.secondary.light}`}
             maxWidth={168}
           >
             <input
diff --git a/src/components/StakeQuickModal/StakeQuickModal.tsx b/src/components/StakeQuickModal/StakeQuickModal.tsx
index c354f07d6..eeb921e06 100644
--- a/src/components/StakeQuickModal/StakeQuickModal.tsx
+++ b/src/components/StakeQuickModal/StakeQuickModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Box, Typography, Button } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { TransactionResponse } from '@ethersproject/providers';
 import { CustomModal, ColoredSlider } from 'components';
 import { useLairInfo, useDerivedLairInfo } from 'state/stake/hooks';
@@ -14,14 +14,14 @@ import {
   useTransactionFinalizer,
 } from 'state/transactions/hooks';
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   input: {
     width: '100%',
     background: 'transparent',
     border: 'none',
     boxShadow: 'none',
     outline: 'none',
-    color: '#c7cad9',
+    color: palette.text.primary,
     fontSize: 28,
     fontWeight: 600,
   },
@@ -38,7 +38,7 @@ const useStyles = makeStyles(({}) => ({
     },
     '&.Mui-disabled': {
       backgroundImage: 'none',
-      backgroundColor: '#282d3d',
+      backgroundColor: palette.secondary.dark,
     },
   },
 }));
@@ -50,6 +50,7 @@ interface StakeQuickModalProps {
 
 const StakeQuickModal: React.FC<StakeQuickModalProps> = ({ open, onClose }) => {
   const classes = useStyles();
+  const { palette } = useTheme();
   const [attempting, setAttempting] = useState(false);
   const { account } = useActiveWeb3React();
   const addTransaction = useTransactionAdder();
@@ -121,7 +122,7 @@ const StakeQuickModal: React.FC<StakeQuickModalProps> = ({ open, onClose }) => {
         </Box>
         <Box
           mt={3}
-          bgcolor='#12131a'
+          bgcolor={palette.background.default}
           border='1px solid rgba(105, 108, 128, 0.12)'
           borderRadius='10px'
           padding='16px'
@@ -156,7 +157,7 @@ const StakeQuickModal: React.FC<StakeQuickModalProps> = ({ open, onClose }) => {
             <Typography
               variant='caption'
               style={{
-                color: '#448aff',
+                color: palette.primary.main,
                 fontWeight: 'bold',
                 cursor: 'pointer',
               }}
diff --git a/src/components/StakeSyrupModal/StakeSyrupModal.tsx b/src/components/StakeSyrupModal/StakeSyrupModal.tsx
index 3792c16d7..0903fb328 100644
--- a/src/components/StakeSyrupModal/StakeSyrupModal.tsx
+++ b/src/components/StakeSyrupModal/StakeSyrupModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Box, Typography, Button } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { TokenAmount } from '@uniswap/sdk';
 import { TransactionResponse } from '@ethersproject/providers';
 import { CustomModal, ColoredSlider } from 'components';
@@ -18,14 +18,14 @@ import {
 import { wrappedCurrencyAmount } from 'utils/wrappedCurrency';
 import { maxAmountSpend } from 'utils';
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   input: {
     width: '100%',
     background: 'transparent',
     border: 'none',
     boxShadow: 'none',
     outline: 'none',
-    color: '#c7cad9',
+    color: palette.text.primary,
     fontSize: 28,
     fontWeight: 600,
   },
@@ -42,7 +42,7 @@ const useStyles = makeStyles(({}) => ({
     },
     '&.Mui-disabled': {
       backgroundImage: 'none',
-      backgroundColor: '#282d3d',
+      backgroundColor: palette.secondary.dark,
     },
   },
 }));
@@ -59,6 +59,7 @@ const StakeSyrupModal: React.FC<StakeSyrupModalProps> = ({
   syrup,
 }) => {
   const classes = useStyles();
+  const { palette } = useTheme();
   const [attempting, setAttempting] = useState(false);
   const [hash, setHash] = useState('');
   const { account, chainId, library } = useActiveWeb3React();
@@ -174,7 +175,7 @@ const StakeSyrupModal: React.FC<StakeSyrupModalProps> = ({
         </Box>
         <Box
           mt={3}
-          bgcolor='#12131a'
+          bgcolor={palette.background.default}
           border='1px solid rgba(105, 108, 128, 0.12)'
           borderRadius='10px'
           padding='16px'
@@ -210,7 +211,7 @@ const StakeSyrupModal: React.FC<StakeSyrupModalProps> = ({
             <Typography
               variant='caption'
               style={{
-                color: '#448aff',
+                color: palette.primary.main,
                 fontWeight: 'bold',
                 cursor: 'pointer',
               }}
diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx
index db3044ce3..bf99e3461 100755
--- a/src/components/Swap/Swap.tsx
+++ b/src/components/Swap/Swap.tsx
@@ -3,7 +3,7 @@ import { Currency, CurrencyAmount, JSBI, Token, Trade } from '@uniswap/sdk';
 import ReactGA from 'react-ga';
 import { ArrowDown } from 'react-feather';
 import { Box, Typography, Button, CircularProgress } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useWalletModalToggle } from 'state/application/hooks';
 import {
   useDerivedSwapInfo,
@@ -83,10 +83,10 @@ const useStyles = makeStyles(({ palette }) => ({
       fontSize: 18,
       fontWeight: 600,
       width: (props: any) => (props.showApproveFlow ? '48%' : '100%'),
-      backgroundImage: 'linear-gradient(to bottom, #448aff, #004ce6)',
+      backgroundImage: `linear-gradient(to bottom, ${palette.primary.main}, #004ce6)`,
       '&.Mui-disabled': {
-        backgroundImage: 'linear-gradient(to bottom, #282d3d, #1d212c)',
-        color: '#696c80',
+        backgroundImage: `linear-gradient(to bottom, ${palette.secondary.dark}, #1d212c)`,
+        color: palette.text.secondary,
         opacity: 0.5,
       },
       '& .content': {
@@ -129,7 +129,7 @@ const useStyles = makeStyles(({ palette }) => ({
     },
   },
   slippageRow: {
-    color: '#696c80',
+    color: palette.text.secondary,
   },
 }));
 
@@ -138,6 +138,7 @@ const Swap: React.FC<{ currency0?: Currency; currency1?: Currency }> = ({
   currency1,
 }) => {
   const [openSettingsModal, setOpenSettingsModal] = useState(false);
+  const { palette } = useTheme();
   const { account } = useActiveWeb3React();
   const { ethereum } = window as any;
   const { independentField, typedValue, recipient } = useSwapState();
@@ -640,14 +641,14 @@ const Swap: React.FC<{ currency0?: Currency; currency1?: Currency }> = ({
         <Box display='flex' alignItems='center'>
           <Typography
             variant='body2'
-            style={{ marginRight: 4, color: '#448aff' }}
+            style={{ marginRight: 4, color: palette.primary.main }}
           >
             Slippage:
           </Typography>
           <QuestionHelper text='Your transaction will revert if the price changes unfavorably by more than this percentage.' />
         </Box>
         <Box display='flex' alignItems='center'>
-          <Typography variant='body2' style={{ color: '#448aff' }}>
+          <Typography variant='body2' style={{ color: palette.primary.main }}>
             {allowedSlippage / 100}%
           </Typography>
           <EditIcon
diff --git a/src/components/SwapTokenDetails/SwapTokenDetails.tsx b/src/components/SwapTokenDetails/SwapTokenDetails.tsx
index b55992fa9..24c213ca4 100755
--- a/src/components/SwapTokenDetails/SwapTokenDetails.tsx
+++ b/src/components/SwapTokenDetails/SwapTokenDetails.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Box, Grid, Typography } from '@material-ui/core';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { ArrowDropUp, ArrowDropDown } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { CurrencyLogo } from 'components';
 import { useTopTokens } from 'state/application/hooks';
 import { Currency, Token } from '@uniswap/sdk';
@@ -11,12 +11,12 @@ import { ReactComponent as CopyIcon } from 'assets/images/CopyIcon.svg';
 import { shortenAddress, formatCompact } from 'utils';
 import { LineChart } from 'components';
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   success: {
-    color: '#0fc679',
+    color: palette.success.main,
   },
   danger: {
-    color: '#ff5252',
+    color: palette.error.main,
   },
 }));
 
@@ -25,6 +25,7 @@ const SwapTokenDetails: React.FC<{
   priceData: any;
 }> = ({ currency, priceData }) => {
   const classes = useStyles();
+  const { palette } = useTheme();
   const { topTokens } = useTopTokens();
   const tokenData = useMemo(() => {
     if (topTokens) {
@@ -86,7 +87,7 @@ const SwapTokenDetails: React.FC<{
                   data={prices}
                   width='100%'
                   height={120}
-                  color={priceUp ? '#0fc679' : '#ff5252'}
+                  color={priceUp ? palette.success.main : palette.error.main}
                 />
               )}
             </Box>
@@ -96,15 +97,18 @@ const SwapTokenDetails: React.FC<{
         )}
       </Box>
       <Box
-        borderTop='1px solid #252833'
-        borderBottom='1px solid #252833'
+        borderTop={`1px solid ${palette.secondary.light}`}
+        borderBottom={`1px solid ${palette.secondary.light}`}
         px={2}
       >
         <Grid container>
           <Grid item xs={6}>
-            <Box borderRight='1px solid #252833' py={1}>
+            <Box borderRight={`1px solid ${palette.secondary.light}`} py={1}>
               {tokenData ? (
-                <Typography variant='body2' style={{ color: '#696c80' }}>
+                <Typography
+                  variant='body2'
+                  style={{ color: palette.text.secondary }}
+                >
                   TVL: {formatCompact(tokenData?.totalLiquidityUSD)}
                 </Typography>
               ) : (
@@ -115,7 +119,10 @@ const SwapTokenDetails: React.FC<{
           <Grid item xs={6}>
             <Box py={1} pl={2}>
               {tokenData ? (
-                <Typography variant='body2' style={{ color: '#696c80' }}>
+                <Typography
+                  variant='body2'
+                  style={{ color: palette.text.secondary }}
+                >
                   24h VOL: {formatCompact(tokenData?.oneDayVolumeUSD)}
                 </Typography>
               ) : (
@@ -139,7 +146,7 @@ const SwapTokenDetails: React.FC<{
             rel='noreferrer'
             style={{ textDecoration: 'none' }}
           >
-            <Typography variant='body2' style={{ color: '#448aff' }}>
+            <Typography variant='body2' style={{ color: palette.primary.main }}>
               {tokenData ? shortenAddress(tokenData.id) : ''}
             </Typography>
           </a>
diff --git a/src/components/SyrupCard/SyrupCard.tsx b/src/components/SyrupCard/SyrupCard.tsx
index dd112ecdb..69a4a517a 100755
--- a/src/components/SyrupCard/SyrupCard.tsx
+++ b/src/components/SyrupCard/SyrupCard.tsx
@@ -17,9 +17,9 @@ import {
 } from 'state/transactions/hooks';
 import { formatCompact } from 'utils';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   syrupCard: {
-    background: '#282d3d',
+    background: palette.secondary.dark,
     width: '100%',
     borderRadius: 10,
     marginTop: 24,
@@ -38,18 +38,18 @@ const useStyles = makeStyles(({ breakpoints }) => ({
       width: '100%',
     },
     '& p': {
-      color: '#ebecf2',
+      color: palette.text.primary,
     },
   },
   syrupText: {
     fontSize: 14,
     fontWeight: 600,
-    color: '#696c80',
+    color: palette.text.secondary,
   },
 }));
 
 const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
-  const { breakpoints } = useTheme();
+  const { palette, breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
   const [expanded, setExpanded] = useState(false);
   const [attemptingClaim, setAttemptingClaim] = useState(false);
@@ -206,7 +206,7 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
                 {syrup.rate >= 1000000
                   ? formatCompact(syrup.rate)
                   : syrup.rate.toLocaleString()}
-                <span style={{ color: '#696c80' }}> / day</span>
+                <span style={{ color: palette.text.secondary }}> / day</span>
               </Typography>
             </Box>
           </Box>
@@ -236,7 +236,7 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
             <Typography className={classes.syrupText}>APR</Typography>
           )}
           <Box textAlign={isMobile ? 'right' : 'left'}>
-            <Typography variant='body2' style={{ color: '#0fc679' }}>
+            <Typography variant='body2' style={{ color: palette.success.main }}>
               {tokenAPR}%
             </Typography>
             <Box display='flex'>
@@ -250,7 +250,8 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
               >
                 <CurrencyLogo currency={QUICK} size='12px' />
                 <Typography variant='caption' style={{ marginLeft: 4 }}>
-                  {dQUICKAPY}% <span style={{ color: '#636780' }}>APY</span>
+                  {dQUICKAPY}%{' '}
+                  <span style={{ color: palette.text.hint }}>APY</span>
                 </Typography>
               </Box>
             </Box>
@@ -277,7 +278,10 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
                 {syrup.earnedAmount.toSignificant(2)}
               </Typography>
             </Box>
-            <Typography variant='body2' style={{ color: '#696c80' }}>
+            <Typography
+              variant='body2'
+              style={{ color: palette.text.secondary }}
+            >
               $
               {syrupEarnedUSD < 0.001
                 ? syrupEarnedUSD.toFixed(5)
@@ -296,17 +300,20 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
               justifyContent='space-between'
               mb={1}
             >
-              <Typography variant='body2' style={{ color: '#696c80' }}>
+              <Typography
+                variant='body2'
+                style={{ color: palette.text.secondary }}
+              >
                 In wallet
               </Typography>
               <Typography variant='body2'>
-                <span style={{ color: '#c7cad9' }}>
+                <span style={{ color: palette.text.primary }}>
                   {userLiquidityUnstaked
                     ? userLiquidityUnstaked.toSignificant(2)
                     : 0}{' '}
                   dQUICK
                 </span>
-                <span style={{ color: '#696c80', marginLeft: 4 }}>
+                <span style={{ color: palette.text.secondary, marginLeft: 4 }}>
                   $
                   {userLiquidityUnstaked
                     ? (
@@ -324,14 +331,17 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
               justifyContent='space-between'
               mb={1}
             >
-              <Typography variant='body2' style={{ color: '#696c80' }}>
+              <Typography
+                variant='body2'
+                style={{ color: palette.text.secondary }}
+              >
                 Staked
               </Typography>
               <Typography variant='body2'>
-                <span style={{ color: '#c7cad9' }}>
+                <span style={{ color: palette.text.primary }}>
                   {syrup.stakedAmount.toSignificant(2)} dQUICK
                 </span>
-                <span style={{ color: '#696c80', marginLeft: 4 }}>
+                <span style={{ color: palette.text.secondary, marginLeft: 4 }}>
                   $
                   {(
                     Number(syrup.stakedAmount.toSignificant()) *
@@ -347,16 +357,21 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
               justifyContent='space-between'
               mb={2}
             >
-              <Typography variant='body2' style={{ color: '#696c80' }}>
+              <Typography
+                variant='body2'
+                style={{ color: palette.text.secondary }}
+              >
                 Earned {currency.symbol}
               </Typography>
               <Box display='flex' alignItems='center'>
                 <CurrencyLogo currency={currency} size='16px' />
                 <Typography variant='body2' style={{ marginLeft: 4 }}>
-                  <span style={{ color: '#c7cad9' }}>
+                  <span style={{ color: palette.text.primary }}>
                     {syrup.earnedAmount.toSignificant(2)}
                   </span>
-                  <span style={{ color: '#696c80', marginLeft: 4 }}>
+                  <span
+                    style={{ color: palette.text.secondary, marginLeft: 4 }}
+                  >
                     $
                     {syrupEarnedUSD < 0.001
                       ? syrupEarnedUSD.toFixed(5)
@@ -377,12 +392,18 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo }> = ({ syrup }) => {
                   flexWrap='wrap'
                   alignItems='center'
                 >
-                  <Typography variant='caption' style={{ color: '#696c80' }}>
+                  <Typography
+                    variant='caption'
+                    style={{ color: palette.text.secondary }}
+                  >
                     Time Remaining
                   </Typography>
                   <Typography
                     variant='body2'
-                    style={{ color: '#696c80', marginLeft: isMobile ? 4 : 0 }}
+                    style={{
+                      color: palette.text.secondary,
+                      marginLeft: isMobile ? 4 : 0,
+                    }}
                   >
                     {`${days}d ${hours
                       .toString()
diff --git a/src/components/ToggleSwitch/ToggleSwitch.tsx b/src/components/ToggleSwitch/ToggleSwitch.tsx
index a6cb4fcae..999b3d619 100755
--- a/src/components/ToggleSwitch/ToggleSwitch.tsx
+++ b/src/components/ToggleSwitch/ToggleSwitch.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(({}) => ({
   wrapper: {
@@ -24,10 +24,11 @@ const ToggleSwitch: React.FC<{ toggled: boolean; onToggle: () => void }> = ({
   onToggle,
 }) => {
   const classes = useStyles();
+  const { palette } = useTheme();
   return (
     <Box
       className={classes.wrapper}
-      bgcolor={toggled ? '#0fc679' : '#ddd'}
+      bgcolor={toggled ? palette.success.main : '#ddd'}
       onClick={onToggle}
     >
       <Box
diff --git a/src/components/TokensTable/TokensTable.tsx b/src/components/TokensTable/TokensTable.tsx
index 4b1839d71..ba616d336 100644
--- a/src/components/TokensTable/TokensTable.tsx
+++ b/src/components/TokensTable/TokensTable.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Typography, Divider } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { getAddress } from '@ethersproject/address';
 import { ChainId, Token } from '@uniswap/sdk';
 import { CurrencyLogo, CustomTable } from 'components';
@@ -67,6 +67,7 @@ const headCells = () => [
 const TokensTable: React.FC<TokensTableProps> = ({ data }) => {
   const tokenHeadCells = headCells();
   const classes = useStyles();
+  const { palette } = useTheme();
   const {
     bookmarkTokens,
     addBookmarkToken,
@@ -110,9 +111,14 @@ const TokensTable: React.FC<TokensTableProps> = ({ data }) => {
           >
             <CurrencyLogo currency={tokenCurrency} size='28px' />
             <Box ml={1}>
-              <Typography variant='body1' style={{ color: '#ebecf2' }}>
+              <Typography
+                variant='body1'
+                style={{ color: palette.text.primary }}
+              >
                 {token.name}{' '}
-                <span style={{ color: '#636780' }}>({token.symbol})</span>
+                <span style={{ color: palette.text.hint }}>
+                  ({token.symbol})
+                </span>
               </Typography>
             </Box>
           </Box>
@@ -210,9 +216,14 @@ const TokensTable: React.FC<TokensTableProps> = ({ data }) => {
             >
               <CurrencyLogo currency={tokenCurrency} size='28px' />
               <Box ml={1}>
-                <Typography variant='body1' style={{ color: '#ebecf2' }}>
+                <Typography
+                  variant='body1'
+                  style={{ color: palette.text.primary }}
+                >
                   {token.name}{' '}
-                  <span style={{ color: '#636780' }}>({token.symbol})</span>
+                  <span style={{ color: palette.text.hint }}>
+                    ({token.symbol})
+                  </span>
                 </Typography>
               </Box>
             </Box>
diff --git a/src/components/TopMovers/TopMovers.tsx b/src/components/TopMovers/TopMovers.tsx
index 04ede6db2..9b7b0ab5d 100755
--- a/src/components/TopMovers/TopMovers.tsx
+++ b/src/components/TopMovers/TopMovers.tsx
@@ -34,9 +34,9 @@ const TopMovers: React.FC<TopMoversProps> = ({
   hideArrow = false,
 }) => {
   const classes = useStyles();
-  const theme = useTheme();
+  const { palette, breakpoints } = useTheme();
   const { topTokens, updateTopTokens } = useTopTokens();
-  const smallWindowSize = useMediaQuery(theme.breakpoints.down('xs'));
+  const smallWindowSize = useMediaQuery(breakpoints.down('xs'));
 
   const topMoverTokens = useMemo(
     () => (topTokens && topTokens.length >= 5 ? topTokens.slice(0, 5) : null),
@@ -66,12 +66,12 @@ const TopMovers: React.FC<TopMoversProps> = ({
       alignItems={smallWindowSize ? 'center' : 'flex-start'}
       bgcolor={background}
       border={`1px solid ${
-        background === 'transparent' ? '#1b1e29' : 'transparent'
+        background === 'transparent' ? palette.background.paper : 'transparent'
       }`}
       borderRadius={10}
       padding={2.5}
     >
-      <Typography variant='h6' style={{ color: '#696c80' }}>
+      <Typography variant='h6' style={{ color: palette.text.secondary }}>
         24h TOP MOVERS
       </Typography>
       <Box width={1}>
@@ -131,10 +131,10 @@ const TopMovers: React.FC<TopMoversProps> = ({
                         }
                         style={{
                           color: priceUp
-                            ? '#0fc679'
+                            ? palette.success.main
                             : priceDown
-                            ? '#ff5252'
-                            : '#636780',
+                            ? palette.error.main
+                            : palette.text.hint,
                         }}
                       >
                         {!hideArrow && priceUp && <ArrowDropUp />}
diff --git a/src/components/TransactionConfirmationModal/TransactionConfirmationModal.tsx b/src/components/TransactionConfirmationModal/TransactionConfirmationModal.tsx
index 19dcd7ddb..1a443707f 100755
--- a/src/components/TransactionConfirmationModal/TransactionConfirmationModal.tsx
+++ b/src/components/TransactionConfirmationModal/TransactionConfirmationModal.tsx
@@ -10,7 +10,7 @@ import { getEtherscanLink } from 'utils';
 import { useActiveWeb3React } from 'hooks';
 import ModalBg from 'assets/images/ModalBG.svg';
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   modalHeader: {
     display: 'flex',
     alignItems: 'center',
@@ -38,7 +38,7 @@ const useStyles = makeStyles(({}) => ({
   modalContent: {
     marginTop: 20,
     padding: '16px 0',
-    color: '#c7cad9',
+    color: palette.text.primary,
     textAlign: 'center',
     '& p': {
       margin: '16px 0',
@@ -49,10 +49,10 @@ const useStyles = makeStyles(({}) => ({
     height: 50,
     fontSize: 14,
     borderRadius: 10,
-    color: '#c7cad9',
-    background: '#282d3d',
+    color: palette.text.primary,
+    background: palette.secondary.dark,
     '&:hover': {
-      background: '#282d3d',
+      background: palette.secondary.dark,
     },
   },
 }));
diff --git a/src/components/UnstakeQuickModal/UnstakeQuickModal.tsx b/src/components/UnstakeQuickModal/UnstakeQuickModal.tsx
index 2f8e289da..9d73ccdff 100644
--- a/src/components/UnstakeQuickModal/UnstakeQuickModal.tsx
+++ b/src/components/UnstakeQuickModal/UnstakeQuickModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Box, Typography, Button } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { CustomModal, ColoredSlider } from 'components';
 import { useLairInfo } from 'state/stake/hooks';
 import { ReactComponent as CloseIcon } from 'assets/images/CloseIcon.svg';
@@ -18,7 +18,7 @@ const useStyles = makeStyles(({ palette }) => ({
     border: 'none',
     boxShadow: 'none',
     outline: 'none',
-    color: '#c7cad9',
+    color: palette.text.primary,
     fontSize: 28,
     fontWeight: 600,
   },
@@ -35,7 +35,7 @@ const useStyles = makeStyles(({ palette }) => ({
     },
     '&.Mui-disabled': {
       backgroundImage: 'none',
-      backgroundColor: '#282d3d',
+      backgroundColor: palette.secondary.dark,
     },
   },
   addressLink: {
@@ -63,6 +63,7 @@ const UnstakeQuickModal: React.FC<UnstakeQuickModalProps> = ({
   onClose,
 }) => {
   const classes = useStyles();
+  const { palette } = useTheme();
   const [attempting, setAttempting] = useState(false);
   const addTransaction = useTransactionAdder();
   const lairInfo = useLairInfo();
@@ -102,7 +103,7 @@ const UnstakeQuickModal: React.FC<UnstakeQuickModalProps> = ({
         </Box>
         <Box
           mt={3}
-          bgcolor='#12131a'
+          bgcolor={palette.background.default}
           border='1px solid rgba(105, 108, 128, 0.12)'
           borderRadius='10px'
           padding='16px'
@@ -137,7 +138,7 @@ const UnstakeQuickModal: React.FC<UnstakeQuickModalProps> = ({
             <Typography
               variant='caption'
               style={{
-                color: '#448aff',
+                color: palette.primary.main,
                 fontWeight: 'bold',
                 cursor: 'pointer',
               }}
diff --git a/src/components/WalletModal/Option.tsx b/src/components/WalletModal/Option.tsx
index be4e5fbc8..e77198388 100755
--- a/src/components/WalletModal/Option.tsx
+++ b/src/components/WalletModal/Option.tsx
@@ -21,7 +21,7 @@ const useStyles = makeStyles(({ palette }) => ({
   },
   optionCardClickable: {
     border: `1px solid transparent`,
-    background: '#282d3d',
+    background: palette.secondary.dark,
     borderRadius: 10,
     display: 'flex',
     justifyContent: 'space-between',
diff --git a/src/components/WalletModal/WalletModal.tsx b/src/components/WalletModal/WalletModal.tsx
index bcd4b9ee7..5c935a79f 100755
--- a/src/components/WalletModal/WalletModal.tsx
+++ b/src/components/WalletModal/WalletModal.tsx
@@ -62,7 +62,7 @@ const useStyles = makeStyles(({ palette }) => ({
     flexWrap: 'wrap',
     '& a': {
       marginLeft: 8,
-      color: '#448aff',
+      color: palette.primary.main,
       textDecoration: 'none',
     },
   },
diff --git a/src/pages/AnalyticsPage/AnalyticTokenDetails.tsx b/src/pages/AnalyticsPage/AnalyticTokenDetails.tsx
index 5488c4594..144b4cf39 100644
--- a/src/pages/AnalyticsPage/AnalyticTokenDetails.tsx
+++ b/src/pages/AnalyticsPage/AnalyticTokenDetails.tsx
@@ -26,7 +26,7 @@ import { ReactComponent as StarChecked } from 'assets/images/StarChecked.svg';
 import { ReactComponent as StarUnchecked } from 'assets/images/StarUnchecked.svg';
 import { getAddress } from '@ethersproject/address';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   panel: {
     background: '#1b1d26',
     borderRadius: 20,
@@ -38,7 +38,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
   breadcrumb: {
     display: 'flex',
     alignItems: 'center',
-    color: '#636780',
+    color: palette.text.hint,
     marginBottom: 50,
     '& svg': {
       width: 12,
@@ -54,7 +54,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
   heading1: {
     fontSize: 32,
     fontWeight: 'bold',
-    color: '#ebecf2',
+    color: palette.text.primary,
     lineHeight: 1,
     [breakpoints.down('xs')]: {
       fontSize: 22,
@@ -65,7 +65,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     fontSize: 20,
     lineHeight: 1.2,
     fontWeight: 600,
-    color: '#636780',
+    color: palette.text.hint,
     marginLeft: 6,
     [breakpoints.down('xs')]: {
       fontSize: 18,
@@ -85,7 +85,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     height: 40,
     padding: '0 28px',
     borderRadius: 10,
-    color: '#ebecf2',
+    color: palette.text.primary,
     cursor: 'pointer',
   },
   filledButton: {
@@ -106,7 +106,7 @@ const AnalyticsTokenDetails: React.FC<{
   goBack: (index: number) => void;
 }> = ({ token, goBack }) => {
   const classes = useStyles();
-  const { breakpoints } = useTheme();
+  const { palette, breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
   const history = useHistory();
   const { chainId } = useActiveWeb3React();
@@ -270,7 +270,7 @@ const AnalyticsTokenDetails: React.FC<{
               )}
             </Box>
             <Box mt={1.25} display='flex' alignItems='center'>
-              <Typography variant='h5' style={{ color: '#ebecf2' }}>
+              <Typography variant='h5' style={{ color: palette.text.primary }}>
                 ${Number(token.priceUSD).toLocaleString()}
               </Typography>
               <Box
@@ -310,7 +310,7 @@ const AnalyticsTokenDetails: React.FC<{
           <Box
             className={classes.button}
             mr={1.5}
-            border='1px solid #448aff'
+            border={`1px solid ${palette.primary.main}`}
             onClick={() => {
               history.push(`/pools?currency0=${token.id}&currency1=ETH`);
             }}
@@ -343,7 +343,10 @@ const AnalyticsTokenDetails: React.FC<{
                   {chartData ? (
                     <>
                       <Box display='flex' alignItems='center'>
-                        <Typography variant='h4' style={{ color: '#ebecf2' }}>
+                        <Typography
+                          variant='h4'
+                          style={{ color: palette.text.primary }}
+                        >
                           $
                           {currentData > 100000
                             ? formatCompact(currentData)
@@ -447,7 +450,10 @@ const AnalyticsTokenDetails: React.FC<{
                 justifyContent='space-between'
               >
                 <Box width={180}>
-                  <Typography variant='caption' style={{ color: '#626680' }}>
+                  <Typography
+                    variant='caption'
+                    style={{ color: palette.text.disabled }}
+                  >
                     TOTAL LIQUIDITY
                   </Typography>
                   <Typography variant={isMobile ? 'body1' : 'h5'}>
@@ -455,7 +461,10 @@ const AnalyticsTokenDetails: React.FC<{
                   </Typography>
                 </Box>
                 <Box width={140}>
-                  <Typography variant='caption' style={{ color: '#626680' }}>
+                  <Typography
+                    variant='caption'
+                    style={{ color: palette.text.disabled }}
+                  >
                     7d Trading Vol
                   </Typography>
                   <Typography variant={isMobile ? 'body1' : 'h5'}>
@@ -470,7 +479,10 @@ const AnalyticsTokenDetails: React.FC<{
                 justifyContent='space-between'
               >
                 <Box width={180}>
-                  <Typography variant='caption' style={{ color: '#626680' }}>
+                  <Typography
+                    variant='caption'
+                    style={{ color: palette.text.disabled }}
+                  >
                     24h Trading Vol
                   </Typography>
                   <Typography variant={isMobile ? 'body1' : 'h5'}>
@@ -478,7 +490,10 @@ const AnalyticsTokenDetails: React.FC<{
                   </Typography>
                 </Box>
                 <Box width={140}>
-                  <Typography variant='caption' style={{ color: '#626680' }}>
+                  <Typography
+                    variant='caption'
+                    style={{ color: palette.text.disabled }}
+                  >
                     24h FEES
                   </Typography>
                   <Typography variant={isMobile ? 'body1' : 'h5'}>
@@ -493,16 +508,25 @@ const AnalyticsTokenDetails: React.FC<{
                 justifyContent='space-between'
               >
                 <Box width={180}>
-                  <Typography variant='caption' style={{ color: '#626680' }}>
+                  <Typography
+                    variant='caption'
+                    style={{ color: palette.text.disabled }}
+                  >
                     Contract Address
                   </Typography>
-                  <Typography variant='h5' style={{ color: '#448aff' }}>
+                  <Typography
+                    variant='h5'
+                    style={{ color: palette.primary.main }}
+                  >
                     {chainId ? (
                       <a
                         href={getEtherscanLink(chainId, token.id, 'address')}
                         target='_blank'
                         rel='noreferrer'
-                        style={{ color: '#448aff', textDecoration: 'none' }}
+                        style={{
+                          color: palette.primary.main,
+                          textDecoration: 'none',
+                        }}
                       >
                         {shortenAddress(token.id)}
                       </a>
diff --git a/src/pages/AnalyticsPage/AnalyticsOverview.tsx b/src/pages/AnalyticsPage/AnalyticsOverview.tsx
index 6f66a44e5..299c2c100 100644
--- a/src/pages/AnalyticsPage/AnalyticsOverview.tsx
+++ b/src/pages/AnalyticsPage/AnalyticsOverview.tsx
@@ -24,7 +24,7 @@ import AnalyticsInfo from './AnalyticsInfo';
 
 dayjs.extend(utc);
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   panel: {
     background: '#1b1d26',
     borderRadius: 20,
@@ -38,14 +38,14 @@ const useStyles = makeStyles(({}) => ({
     borderRadius: 10,
     cursor: 'pointer',
     '& span': {
-      color: '#ebecf2',
+      color: palette.text.primary,
     },
   },
   headingWrapper: {
     display: 'flex',
     alignItems: 'center',
     '& h6': {
-      color: '#626680',
+      color: palette.text.disabled,
     },
     '& svg': {
       height: 16,
@@ -65,7 +65,7 @@ const AnalyticsOverview: React.FC<AnalyticsOverViewProps> = ({
   showAllPairs,
 }) => {
   const classes = useStyles();
-  const { breakpoints } = useTheme();
+  const { palette, breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
   const [volumeIndex, setVolumeIndex] = useState(0);
   const [selectedVolumeIndex, setSelectedVolumeIndex] = useState(-1);
@@ -263,14 +263,17 @@ const AnalyticsOverview: React.FC<AnalyticsOverViewProps> = ({
           <Box className={classes.panel} padding={isMobile ? 1.5 : 3} width={1}>
             <Typography
               variant='caption'
-              style={{ color: '#626680', fontWeight: 'bold' }}
+              style={{ color: palette.text.disabled, fontWeight: 'bold' }}
             >
               LIQUIDITY
             </Typography>
             {globalChartData ? (
               <>
                 <Box mt={0.5} display='flex' alignItems='center'>
-                  <Typography variant='h5' style={{ color: '#ebecf2' }}>
+                  <Typography
+                    variant='h5'
+                    style={{ color: palette.text.primary }}
+                  >
                     $
                     {formatCompact(
                       globalChartData.day[globalChartData.day.length - 1]
@@ -294,10 +297,10 @@ const AnalyticsOverview: React.FC<AnalyticsOverViewProps> = ({
                       style={{
                         color:
                           liquidityPercent > 0
-                            ? '#0fc679'
+                            ? palette.success.main
                             : liquidityPercent < 0
-                            ? '#ff5252'
-                            : '#636780',
+                            ? palette.error.main
+                            : palette.text.hint,
                       }}
                       variant='caption'
                     >
@@ -308,7 +311,10 @@ const AnalyticsOverview: React.FC<AnalyticsOverViewProps> = ({
                   </Box>
                 </Box>
                 <Box>
-                  <Typography style={{ color: '#626680' }} variant='caption'>
+                  <Typography
+                    style={{ color: palette.text.disabled }}
+                    variant='caption'
+                  >
                     {moment(
                       globalChartData.day[globalChartData.day.length - 1].date *
                         1000,
@@ -340,7 +346,7 @@ const AnalyticsOverview: React.FC<AnalyticsOverViewProps> = ({
             <Box display='flex' justifyContent='space-between'>
               <Typography
                 variant='caption'
-                style={{ color: '#626680', fontWeight: 'bold' }}
+                style={{ color: palette.text.disabled, fontWeight: 'bold' }}
               >
                 VOLUME
               </Typography>
@@ -365,7 +371,10 @@ const AnalyticsOverview: React.FC<AnalyticsOverViewProps> = ({
             {globalChartData && selectedVolumeIndex > -1 ? (
               <>
                 <Box mt={0.5} display='flex' alignItems='center'>
-                  <Typography variant='h5' style={{ color: '#ebecf2' }}>
+                  <Typography
+                    variant='h5'
+                    style={{ color: palette.text.primary }}
+                  >
                     $
                     {formatCompact(
                       globalChartData.day[selectedVolumeIndex].dailyVolumeUSD,
@@ -388,10 +397,10 @@ const AnalyticsOverview: React.FC<AnalyticsOverViewProps> = ({
                       style={{
                         color:
                           volumePercent > 0
-                            ? '#0fc679'
+                            ? palette.success.main
                             : volumePercent < 0
-                            ? '#ff5252'
-                            : '#636780',
+                            ? palette.error.main
+                            : palette.text.hint,
                       }}
                       variant='caption'
                     >
@@ -402,7 +411,10 @@ const AnalyticsOverview: React.FC<AnalyticsOverViewProps> = ({
                   </Box>
                 </Box>
                 <Box>
-                  <Typography style={{ color: '#626680' }} variant='caption'>
+                  <Typography
+                    style={{ color: palette.text.disabled }}
+                    variant='caption'
+                  >
                     {moment(
                       globalChartData.day[selectedVolumeIndex].date * 1000,
                     ).format('MMM DD, YYYY')}
diff --git a/src/pages/AnalyticsPage/AnalyticsPage.tsx b/src/pages/AnalyticsPage/AnalyticsPage.tsx
index 5e45cb641..5ea943df3 100755
--- a/src/pages/AnalyticsPage/AnalyticsPage.tsx
+++ b/src/pages/AnalyticsPage/AnalyticsPage.tsx
@@ -16,7 +16,7 @@ import { CurrencyLogo, DoubleCurrencyLogo } from 'components';
 import { ChainId, Token } from '@uniswap/sdk';
 import { getAddress } from '@ethersproject/address';
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   topTab: {
     height: 46,
     padding: '0 24px',
@@ -25,13 +25,13 @@ const useStyles = makeStyles(({}) => ({
     alignItems: 'center',
     cursor: 'pointer',
     '& p': {
-      color: '#626680',
+      color: palette.text.disabled,
     },
   },
   selectedTab: {
-    background: '#252833',
+    background: palette.secondary.light,
     '& p': {
-      color: '#ebecf2',
+      color: palette.text.primary,
     },
   },
   searchInput: {
@@ -49,7 +49,7 @@ const useStyles = makeStyles(({}) => ({
       fontSize: 15,
       fontWeight: 500,
       minWidth: 240,
-      color: '#ebecf2',
+      color: palette.text.primary,
     },
   },
   searchContent: {
diff --git a/src/pages/AnalyticsPage/AnalyticsTokens.tsx b/src/pages/AnalyticsPage/AnalyticsTokens.tsx
index ba2a9b1da..53feb26d2 100644
--- a/src/pages/AnalyticsPage/AnalyticsTokens.tsx
+++ b/src/pages/AnalyticsPage/AnalyticsTokens.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { Box, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { TopMovers, TokensTable } from 'components';
 import { useTopTokens, useBookmarkTokens } from 'state/application/hooks';
 import { getEthPrice, getTopTokens } from 'utils';
@@ -24,6 +24,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
 
 const AnalyticsTokens: React.FC = () => {
   const classes = useStyles();
+  const { palette } = useTheme();
   const [tokensFilter, setTokensFilter] = useState(0);
 
   const { topTokens, updateTopTokens } = useTopTokens();
@@ -61,20 +62,26 @@ const AnalyticsTokens: React.FC = () => {
         <Box
           className={classes.tokensFilter}
           onClick={() => setTokensFilter(0)}
-          color={tokensFilter === 0 ? '#448aff' : '#626680'}
+          color={
+            tokensFilter === 0 ? palette.primary.main : palette.text.disabled
+          }
         >
           <Typography variant='h6'>All Cryptos</Typography>
         </Box>
         <Box
           className={classes.tokensFilter}
-          color={tokensFilter === 1 ? '#448aff' : '#626680'}
+          color={
+            tokensFilter === 1 ? palette.primary.main : palette.text.disabled
+          }
           onClick={() => setTokensFilter(1)}
         >
           <Typography variant='h6'>Favourites</Typography>
         </Box>
         <Box
           className={classes.tokensFilter}
-          color={tokensFilter === 2 ? '#448aff' : '#626680'}
+          color={
+            tokensFilter === 2 ? palette.primary.main : palette.text.disabled
+          }
           onClick={() => setTokensFilter(2)}
         >
           <Typography variant='h6'>New Listing</Typography>
diff --git a/src/pages/DragonPage/DragonPage.tsx b/src/pages/DragonPage/DragonPage.tsx
index 8ffc21f58..5c9fb3ad6 100755
--- a/src/pages/DragonPage/DragonPage.tsx
+++ b/src/pages/DragonPage/DragonPage.tsx
@@ -31,22 +31,22 @@ import { ReactComponent as PriceExchangeIcon } from 'assets/images/PriceExchange
 import { ReactComponent as SearchIcon } from 'assets/images/SearchIcon.svg';
 import { useActiveWeb3React } from 'hooks';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   helpWrapper: {
     display: 'flex',
     alignItems: 'center',
     padding: '8px 12px',
-    border: '1px solid #252833',
+    border: `1px solid ${palette.secondary.light}`,
     borderRadius: 10,
     '& p': {
-      color: '#636780',
+      color: palette.text.hint,
     },
     '& svg': {
       marginLeft: 8,
     },
   },
   dragonWrapper: {
-    backgroundColor: '#1b1e29',
+    backgroundColor: palette.background.paper,
     borderRadius: 20,
     padding: 32,
     position: 'relative',
@@ -73,7 +73,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#121319',
+    backgroundColor: palette.secondary.contrastText,
     '& span': {
       fontWeight: 'bold',
       color: '#b6b9cc',
@@ -83,11 +83,11 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     margin: '24px 0 64px',
     '& h5': {
       marginBottom: 16,
-      color: '#c7cad9',
+      color: palette.text.primary,
     },
     '& p': {
       maxWidth: 280,
-      color: '#c7cad9',
+      color: palette.text.primary,
     },
   },
   stakeButton: {
@@ -102,7 +102,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
   },
   searchInput: {
     height: 50,
-    background: '#121319',
+    background: palette.secondary.contrastText,
     borderRadius: 10,
     display: 'flex',
     alignItems: 'center',
@@ -115,7 +115,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
       marginLeft: 8,
       fontSize: 14,
       fontWeight: 500,
-      color: '#c7cad9',
+      color: palette.text.primary,
       flex: 1,
     },
   },
@@ -124,7 +124,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
 const DragonPage: React.FC = () => {
   const classes = useStyles();
   const { chainId } = useActiveWeb3React();
-  const { breakpoints } = useTheme();
+  const { palette, breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
   const [isQUICKRate, setIsQUICKRate] = useState(false);
   const [openStakeModal, setOpenStakeModal] = useState(false);
@@ -258,11 +258,14 @@ const DragonPage: React.FC = () => {
                 <Box ml={1.5}>
                   <Typography
                     variant='body2'
-                    style={{ color: '#ebecf2', lineHeight: 1 }}
+                    style={{ color: palette.text.primary, lineHeight: 1 }}
                   >
                     QUICK
                   </Typography>
-                  <Typography variant='caption' style={{ color: '#636780' }}>
+                  <Typography
+                    variant='caption'
+                    style={{ color: palette.text.hint }}
+                  >
                     Single Stake — Auto compounding
                   </Typography>
                 </Box>
@@ -290,7 +293,10 @@ const DragonPage: React.FC = () => {
               )}
               <Box display='flex' justifyContent='space-between' mt={1.5}>
                 <Typography variant='body2'>APY</Typography>
-                <Typography variant='body2' style={{ color: '#0fc679' }}>
+                <Typography
+                  variant='body2'
+                  style={{ color: palette.success.main }}
+                >
                   {APY}%
                 </Typography>
               </Box>
@@ -308,7 +314,7 @@ const DragonPage: React.FC = () => {
                 alignItems='center'
                 justifyContent='center'
                 borderRadius={10}
-                border='1px solid #252833'
+                border={`1px solid ${palette.secondary.light}`}
               >
                 <CurrencyLogo currency={QUICK} />
                 <Typography variant='body2' style={{ margin: '0 8px' }}>
@@ -327,12 +333,10 @@ const DragonPage: React.FC = () => {
               </Box>
               <Box
                 className={classes.stakeButton}
-                bgcolor='#252833'
+                bgcolor={palette.secondary.light}
                 onClick={() => setOpenUnstakeModal(true)}
               >
-                <Typography variant='body2' style={{ color: '#ebecf2' }}>
-                  - Unstake QUICK
-                </Typography>
+                <Typography variant='body2'>- Unstake QUICK</Typography>
               </Box>
               <Box
                 className={classes.stakeButton}
@@ -346,7 +350,7 @@ const DragonPage: React.FC = () => {
               <Box mt={3} textAlign='center'>
                 <Typography
                   variant='caption'
-                  style={{ color: '#696c80', fontWeight: 500 }}
+                  style={{ color: palette.text.secondary, fontWeight: 500 }}
                 >
                   ⭐️ When you unstake, the contract will automatically claim
                   QUICK on your behalf.
@@ -386,7 +390,7 @@ const DragonPage: React.FC = () => {
               >
                 <Typography
                   variant='body2'
-                  style={{ color: '#626680', marginRight: 8 }}
+                  style={{ color: palette.text.disabled, marginRight: 8 }}
                 >
                   Staked Only
                 </Typography>
diff --git a/src/pages/FarmPage/FarmPage.tsx b/src/pages/FarmPage/FarmPage.tsx
index 41822e253..ee89171f3 100755
--- a/src/pages/FarmPage/FarmPage.tsx
+++ b/src/pages/FarmPage/FarmPage.tsx
@@ -14,15 +14,15 @@ import { ReactComponent as SearchIcon } from 'assets/images/SearchIcon.svg';
 import { useInfiniteLoading } from 'utils/useInfiniteLoading';
 import { useActiveWeb3React } from 'hooks';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   helpWrapper: {
     display: 'flex',
     alignItems: 'center',
     padding: '8px 12px',
-    border: '1px solid #252833',
+    border: `1px solid ${palette.secondary.light}`,
     borderRadius: 10,
     '& p': {
-      color: '#636780',
+      color: palette.text.hint,
     },
     '& svg': {
       marginLeft: 8,
@@ -30,7 +30,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
   },
   dragonWrapper: {
     width: '100%',
-    backgroundColor: '#1b1e29',
+    backgroundColor: palette.background.paper,
     borderRadius: 20,
     padding: 32,
     position: 'relative',
@@ -51,41 +51,9 @@ const useStyles = makeStyles(({ breakpoints }) => ({
       width: '100%',
     },
   },
-  stepWrapper: {
-    width: 80,
-    height: 24,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#121319',
-    '& span': {
-      fontWeight: 'bold',
-      color: '#b6b9cc',
-    },
-  },
-  dragonTitle: {
-    margin: '24px 0 64px',
-    '& h5': {
-      marginBottom: 16,
-      color: '#c7cad9',
-    },
-    '& p': {
-      maxWidth: 280,
-      color: '#c7cad9',
-    },
-  },
-  stakeButton: {
-    width: '100%',
-    height: 48,
-    borderRadius: 10,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 24,
-  },
   searchInput: {
     height: 50,
-    background: '#121319',
+    background: palette.secondary.contrastText,
     borderRadius: 10,
     display: 'flex',
     alignItems: 'center',
@@ -98,19 +66,19 @@ const useStyles = makeStyles(({ breakpoints }) => ({
       marginLeft: 8,
       fontSize: 14,
       fontWeight: 500,
-      color: '#c7cad9',
+      color: palette.text.primary,
       flex: 1,
     },
   },
   thirdColor: {
-    color: '#448aff',
+    color: palette.primary.main,
     cursor: 'pointer',
   },
 }));
 
 const FarmPage: React.FC = () => {
   const classes = useStyles();
-  const { breakpoints } = useTheme();
+  const { palette, breakpoints } = useTheme();
   const { chainId } = useActiveWeb3React();
   const lairInfo = useLairInfo();
   const isMobile = useMediaQuery(breakpoints.down('xs'));
@@ -284,7 +252,7 @@ const FarmPage: React.FC = () => {
           >
             <Typography
               variant='body2'
-              style={{ color: '#626680', marginRight: 8 }}
+              style={{ color: palette.text.disabled, marginRight: 8 }}
             >
               Staked Only
             </Typography>
@@ -310,7 +278,9 @@ const FarmPage: React.FC = () => {
                   setSortDesc(false);
                 }
               }}
-              color={sortBy === 1 ? '#c7cad9' : '#344252'}
+              color={
+                sortBy === 1 ? palette.text.primary : palette.secondary.main
+              }
             >
               <Typography variant='body2'>Pool</Typography>
               <Box display='flex' ml={0.5}>
@@ -336,7 +306,9 @@ const FarmPage: React.FC = () => {
                   setSortDesc(false);
                 }
               }}
-              color={sortBy === 2 ? '#c7cad9' : '#344252'}
+              color={
+                sortBy === 2 ? palette.text.primary : palette.secondary.main
+              }
             >
               <Typography variant='body2'>TVL</Typography>
               <Box display='flex' ml={0.5}>
@@ -362,7 +334,9 @@ const FarmPage: React.FC = () => {
                   setSortDesc(false);
                 }
               }}
-              color={sortBy === 3 ? '#c7cad9' : '#344252'}
+              color={
+                sortBy === 3 ? palette.text.primary : palette.secondary.main
+              }
             >
               <Typography variant='body2'>Rewards</Typography>
               <Box display='flex' ml={0.5}>
@@ -388,7 +362,9 @@ const FarmPage: React.FC = () => {
                   setSortDesc(false);
                 }
               }}
-              color={sortBy === 4 ? '#c7cad9' : '#344252'}
+              color={
+                sortBy === 4 ? palette.text.primary : palette.secondary.main
+              }
             >
               <Typography variant='body2'>APY</Typography>
               <Box display='flex' ml={0.5}>
@@ -415,7 +391,9 @@ const FarmPage: React.FC = () => {
                   setSortDesc(false);
                 }
               }}
-              color={sortBy === 5 ? '#c7cad9' : '#344252'}
+              color={
+                sortBy === 5 ? palette.text.primary : palette.secondary.main
+              }
             >
               <Typography variant='body2'>Earned</Typography>
               <Box display='flex' ml={0.5}>
diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
index be7eda971..7a54f7bff 100755
--- a/src/pages/LandingPage/LandingPage.tsx
+++ b/src/pages/LandingPage/LandingPage.tsx
@@ -60,7 +60,6 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     textAlign: 'center',
     zIndex: 2,
     '& h3': {
-      color: 'white',
       textTransform: 'uppercase',
       marginBottom: 20,
     },
@@ -178,7 +177,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
         alignItems: 'center',
         background: 'transparent',
         border: `1px solid ${palette.primary.dark}`,
-        color: '#696c80',
+        color: palette.text.secondary,
         '&.active': {
           background: '#FFFFFFDE',
           border: `1px solid transparent`,
@@ -228,7 +227,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     },
   },
   buyFiatContainer: {
-    background: palette.primary.dark,
+    background: palette.background.paper,
     height: 338,
     borderRadius: 48,
     marginBottom: 160,
@@ -413,12 +412,12 @@ const LandingPage: React.FC = () => {
   const classes = useStyles();
   const [swapIndex, setSwapIndex] = useState(0);
   const [openStakeModal, setOpenStakeModal] = useState(false);
-  const theme = useTheme();
+  const { palette, breakpoints } = useTheme();
   const { account } = useActiveWeb3React();
   const { ethereum } = window as any;
   const isnotMatic =
     ethereum && ethereum.isMetaMask && Number(ethereum.chainId) !== 137;
-  const mobileWindowSize = useMediaQuery(theme.breakpoints.down('sm'));
+  const mobileWindowSize = useMediaQuery(breakpoints.down('sm'));
   const { initTransak } = useInitTransak();
   const allTokens = useAllTokens();
   const toggleWalletModal = useWalletModalToggle();
@@ -563,10 +562,7 @@ const LandingPage: React.FC = () => {
         />
       )}
       <Box className={classes.heroSection}>
-        <Typography
-          variant='body2'
-          style={{ color: 'white', fontWeight: 'bold' }}
-        >
+        <Typography variant='body2' style={{ fontWeight: 'bold' }}>
           Total Value Locked
         </Typography>
         {globalData ? (
@@ -574,10 +570,7 @@ const LandingPage: React.FC = () => {
             <Typography variant='h3' style={{ paddingTop: '9px' }}>
               $
             </Typography>
-            <Typography
-              color='textSecondary'
-              style={{ fontSize: '55px', fontWeight: 700 }}
-            >
+            <Typography style={{ fontSize: '55px', fontWeight: 700 }}>
               {Number(globalData.totalLiquidityUSD).toLocaleString(undefined, {
                 maximumFractionDigits: 0,
               })}
@@ -588,7 +581,7 @@ const LandingPage: React.FC = () => {
             <Skeleton variant='rect' width={400} height={72} />
           </Box>
         )}
-        <Typography style={{ fontSize: '15px', color: '#696c80' }}>
+        <Typography style={{ fontSize: '15px', color: palette.text.secondary }}>
           Top Asset Exchange on the Polygon Network
         </Typography>
         <Box mt={2} width={200} height={48}>
@@ -627,7 +620,11 @@ const LandingPage: React.FC = () => {
             <Skeleton variant='rect' width={100} height={45} />
           )}
           <Typography
-            style={{ fontSize: '12px', color: '#696c80', paddingTop: '15px' }}
+            style={{
+              fontSize: '12px',
+              color: palette.text.secondary,
+              paddingTop: '15px',
+            }}
           >
             24H TRANSACTIONS
           </Typography>
@@ -646,7 +643,11 @@ const LandingPage: React.FC = () => {
             <Skeleton variant='rect' width={100} height={45} />
           )}
           <Typography
-            style={{ fontSize: '12px', color: '#696c80', paddingTop: '15px' }}
+            style={{
+              fontSize: '12px',
+              color: palette.text.secondary,
+              paddingTop: '15px',
+            }}
           >
             24H TRADING VOLUME
           </Typography>
@@ -665,7 +666,11 @@ const LandingPage: React.FC = () => {
             <Skeleton variant='rect' width={100} height={45} />
           )}
           <Typography
-            style={{ fontSize: '12px', color: '#696c80', paddingTop: '15px' }}
+            style={{
+              fontSize: '12px',
+              color: palette.text.secondary,
+              paddingTop: '15px',
+            }}
           >
             24h REWARDS DISTRIBUTED
           </Typography>
@@ -681,7 +686,11 @@ const LandingPage: React.FC = () => {
             <Skeleton variant='rect' width={100} height={45} />
           )}
           <Typography
-            style={{ fontSize: '12px', color: '#696c80', paddingTop: '15px' }}
+            style={{
+              fontSize: '12px',
+              color: palette.text.secondary,
+              paddingTop: '15px',
+            }}
           >
             TOTAL TRADING PAIRS
           </Typography>
@@ -695,12 +704,20 @@ const LandingPage: React.FC = () => {
             <Skeleton variant='rect' width={100} height={45} />
           )}
           <Box
-            style={{ fontSize: '12px', color: '#696c80', paddingTop: '15px' }}
+            style={{
+              fontSize: '12px',
+              color: palette.text.secondary,
+              paddingTop: '15px',
+            }}
           >
             dQUICK APY
           </Box>
           <Typography
-            style={{ color: '#448aff', fontSize: '12px', cursor: 'pointer' }}
+            style={{
+              color: palette.primary.main,
+              fontSize: '12px',
+              cursor: 'pointer',
+            }}
             onClick={() => setOpenStakeModal(true)}
           >
             stake {'>'}
@@ -717,7 +734,7 @@ const LandingPage: React.FC = () => {
         ))}
       </Box>
       <Box mt={2} width={1}>
-        <TopMovers background='transparent' />
+        <TopMovers background={palette.background.paper} />
       </Box>
       <Box className={classes.quickInfo}>
         <Typography style={{ fontSize: '24px' }}>
@@ -734,13 +751,13 @@ const LandingPage: React.FC = () => {
             className={swapIndex === 0 ? 'active' : ''}
             onClick={() => setSwapIndex(0)}
           >
-            Market
+            Swap
           </Button>
           <Button
             className={swapIndex === 1 ? 'active' : ''}
             onClick={() => setSwapIndex(1)}
           >
-            Limit
+            Add Liquidity
           </Button>
         </ButtonGroup>
       </Box>
diff --git a/src/pages/PoolsPage/PoolsPage.tsx b/src/pages/PoolsPage/PoolsPage.tsx
index 4601a89b0..72d443225 100755
--- a/src/pages/PoolsPage/PoolsPage.tsx
+++ b/src/pages/PoolsPage/PoolsPage.tsx
@@ -15,15 +15,15 @@ import { usePairs } from 'data/Reserves';
 import { toV2LiquidityToken, useTrackedTokenPairs } from 'state/user/hooks';
 import { useTokenBalancesWithLoadingIndicator } from 'state/wallet/hooks';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   helpWrapper: {
     display: 'flex',
     alignItems: 'center',
     padding: '8px 12px',
-    border: '1px solid #252833',
+    border: `1px solid ${palette.secondary.light}`,
     borderRadius: 10,
     '& p': {
-      color: '#636780',
+      color: palette.text.hint,
     },
     '& svg': {
       marginLeft: 8,
@@ -31,7 +31,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
   },
   wrapper: {
     padding: 24,
-    backgroundColor: '#1b1e29',
+    backgroundColor: palette.background.paper,
     borderRadius: 20,
     [breakpoints.down('xs')]: {
       padding: '16px 12px',
@@ -42,9 +42,9 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     display: 'flex',
   },
   liquidityText: {
-    color: '#696c80',
+    color: palette.text.secondary,
     '& span': {
-      color: '#448aff',
+      color: palette.primary.main,
       cursor: 'pointer',
     },
   },
diff --git a/src/pages/SwapPage/SwapPage.tsx b/src/pages/SwapPage/SwapPage.tsx
index fb73324b1..027415aa7 100755
--- a/src/pages/SwapPage/SwapPage.tsx
+++ b/src/pages/SwapPage/SwapPage.tsx
@@ -45,15 +45,15 @@ import useParsedQueryString from 'hooks/useParsedQueryString';
 import { useCurrency } from 'hooks/Tokens';
 import dayjs from 'dayjs';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   helpWrapper: {
     display: 'flex',
     alignItems: 'center',
     padding: '8px 12px',
-    border: '1px solid #252833',
+    border: `1px solid ${palette.secondary.light}`,
     borderRadius: 10,
     '& p': {
-      color: '#636780',
+      color: palette.text.hint,
     },
     '& svg': {
       marginLeft: 8,
@@ -61,7 +61,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
   },
   wrapper: {
     padding: 24,
-    backgroundColor: '#1b1e29',
+    backgroundColor: palette.background.paper,
     borderRadius: 20,
     [breakpoints.down('xs')]: {
       padding: '16px 12px',
@@ -75,11 +75,11 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     alignItems: 'center',
     borderRadius: 8,
     '& p': {
-      color: '#696c80',
+      color: palette.text.secondary,
     },
   },
   activeSwap: {
-    background: '#282d3d',
+    background: palette.secondary.dark,
     '& p': {
       color: 'white',
     },
@@ -88,7 +88,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     cursor: 'pointer',
   },
   swapTokenDetails: {
-    backgroundColor: '#1b1e29',
+    backgroundColor: palette.background.paper,
     borderRadius: 16,
     width: 'calc(50% - 16px)',
     [breakpoints.down('xs')]: {
@@ -99,7 +99,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
   },
   liquidityMain: {
     '& p': {
-      color: '#696c80',
+      color: palette.text.secondary,
       fontWeight: 600,
     },
   },
@@ -108,24 +108,24 @@ const useStyles = makeStyles(({ breakpoints }) => ({
       cursor: 'pointer',
       marginRight: 20,
       '&.active': {
-        color: '#448aff',
+        color: palette.primary.main,
       },
     },
   },
   liquidityContent: {
-    border: '1px solid #282d3d',
+    border: `1px solid ${palette.secondary.dark}`,
     borderRadius: '10px',
     marginBottom: '20px',
     '& p': {
-      color: '#ebecf2',
+      color: palette.text.primary,
     },
   },
 }));
 
 const SwapPage: React.FC = () => {
   const classes = useStyles();
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
+  const { palette, breakpoints } = useTheme();
+  const isMobile = useMediaQuery(breakpoints.down('xs'));
   const [swapIndex, setSwapIndex] = useState(0);
   const [openSettingsModal, setOpenSettingsModal] = useState(false);
   const [currency0, setCurrency0] = useState<Currency | undefined>(undefined);
@@ -337,7 +337,7 @@ const SwapPage: React.FC = () => {
                       considered in beta. DYOR and use at your own risk.
                       QuickSwap is not responsible. More info can be found&nbsp;
                       <a
-                        style={{ color: '#c7cad9' }}
+                        style={{ color: palette.text.primary }}
                         target='_blank'
                         rel='noopener noreferrer'
                         href='https://www.certik.org/projects/gelato'
@@ -386,18 +386,21 @@ const SwapPage: React.FC = () => {
                 <Box display='flex' alignItems='center'>
                   <Typography
                     variant='h6'
-                    style={{ color: '#ebecf2', marginRight: 8 }}
+                    style={{ color: palette.text.primary, marginRight: 8 }}
                   >
                     Liquidity Pools{' '}
                   </Typography>
-                  <Typography variant='body2' style={{ color: '#696c80' }}>
+                  <Typography
+                    variant='body2'
+                    style={{ color: palette.text.secondary }}
+                  >
                     ({currencies[Field.INPUT]?.symbol?.toUpperCase()},{' '}
                     {currencies[Field.OUTPUT]?.symbol?.toUpperCase()})
                   </Typography>
                 </Box>
                 <Box
                   display='flex'
-                  style={{ cursor: 'pointer', color: '#696c80' }}
+                  style={{ cursor: 'pointer', color: palette.text.secondary }}
                   onClick={() => setLiquidityPoolClosed(!liquidityPoolClosed)}
                 >
                   {liquidityPoolClosed ? (
@@ -542,7 +545,7 @@ const SwapPage: React.FC = () => {
                             {isMobile && (
                               <Typography
                                 variant='body2'
-                                style={{ color: '#696c80' }}
+                                style={{ color: palette.text.secondary }}
                               >
                                 TVL
                               </Typography>
@@ -560,7 +563,7 @@ const SwapPage: React.FC = () => {
                             {isMobile && (
                               <Typography
                                 variant='body2'
-                                style={{ color: '#696c80' }}
+                                style={{ color: palette.text.secondary }}
                               >
                                 24H Volume
                               </Typography>
@@ -580,7 +583,7 @@ const SwapPage: React.FC = () => {
                             {isMobile && (
                               <Typography
                                 variant='body2'
-                                style={{ color: '#696c80' }}
+                                style={{ color: palette.text.secondary }}
                               >
                                 APY
                               </Typography>
@@ -588,7 +591,12 @@ const SwapPage: React.FC = () => {
                             <Typography
                               variant='body2'
                               align='right'
-                              style={{ color: apy < 0 ? '#ff5252' : '#0fc679' }}
+                              style={{
+                                color:
+                                  apy < 0
+                                    ? palette.error.main
+                                    : palette.success.main,
+                              }}
                             >
                               {apy.toFixed(2)}%
                             </Typography>
diff --git a/src/state/stake/hooks.ts b/src/state/stake/hooks.ts
index c37063f29..9f197f3bf 100755
--- a/src/state/stake/hooks.ts
+++ b/src/state/stake/hooks.ts
@@ -13467,7 +13467,6 @@ export function useStakingInfo(
   const allPairAddress = useMemo(() => allInfo.map(({ pair }) => pair), [
     allInfo,
   ]);
-  console.log(allPairAddress, ' ', pairs);
 
   useEffect(() => {
     getBulkPairData(allPairAddress);
diff --git a/src/theme.ts b/src/theme.ts
index 3442418e0..42fcf58cd 100755
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -6,21 +6,29 @@ import {
 import { merge } from 'lodash';
 
 // colors
-const primary = '#1DAED6';
-const secondaryDark = 'rgb(40, 145, 249)';
+const primary = '#448aff';
 const primaryDark = '#1C2938';
 const secondary = '#344252';
+const secondaryLight = '#252833';
+const secondaryDark = '#282d3d';
+const secondaryContrast = '#121319';
 
 const black = '#000000';
 const white = '#ffffff';
 
 const textPrimary = '#c7cad9';
+const textSecondary = '#696c80';
+const textDisabled = '#626680';
+const textHint = '#636780';
 const bgColor = '#12131a';
-const bgColor1 = 'rgb(247, 248, 250)';
+const bgPalette = '#1b1e29';
 
-const successMain = '#2464F4';
+const successMain = '#0fc679';
 const successDark = '#1DB2D5';
 
+const errorMain = '#ff5252';
+const errorDark = '#f00';
+
 const divider = 'rgba(130, 177, 255, 0.08)';
 
 // breakpoints
@@ -54,7 +62,9 @@ export const mainTheme = responsiveFontSizes(
       },
       secondary: {
         main: secondary,
+        light: secondaryLight,
         dark: secondaryDark,
+        contrastText: secondaryContrast,
       },
       common: {
         black,
@@ -62,17 +72,22 @@ export const mainTheme = responsiveFontSizes(
       },
       text: {
         primary: textPrimary,
-        secondary: white,
-        hint: bgColor1,
+        secondary: textSecondary,
+        disabled: textDisabled,
+        hint: textHint,
       },
       background: {
         default: bgColor,
-        paper: white,
+        paper: bgPalette,
       },
       success: {
         main: successMain,
         dark: successDark,
       },
+      error: {
+        main: errorMain,
+        dark: errorDark,
+      },
       divider: divider,
     },
     typography: {
@@ -170,7 +185,7 @@ export const mainTheme = responsiveFontSizes(
           background: secondary,
         },
         textPrimary: {
-          background: `transparent linear-gradient(279deg, ${successMain} 0%, ${successDark} 100%) 0% 0% no-repeat padding-box`,
+          background: `linear-gradient(to bottom, ${primary}, #004ce6)`,
           borderRadius: 50,
           color: white,
         },