diff --git a/components/AccountDetails/CopyHelper.tsx b/components/AccountDetails/CopyHelper.tsx
index b55bacd98..634b5a9d5 100755
--- a/components/AccountDetails/CopyHelper.tsx
+++ b/components/AccountDetails/CopyHelper.tsx
@@ -18,7 +18,7 @@ const CopyHelper: React.FC<CopyHelperProps> = ({ toCopy }) => {
     <Box className={styles.copyIcon} onClick={() => setCopied(toCopy)}>
       {isCopied ? (
         <>
-          <CheckCircle size='18' />
+          <CheckCircle />
           <small>{t('copied')}</small>
         </>
       ) : (
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index cbda8316d..336c4bbf5 100755
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -43,7 +43,7 @@ const Footer: React.FC = () => {
             <Image
               src='/assets/images/quickLogo.png'
               alt='QUICK'
-              width={40}
+              width={130}
               height={40}
             />
             <Box mt={2} maxWidth='240px'>
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index f3e9b9e26..2e07b409b 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -212,7 +212,7 @@ const Header: React.FC = () => {
       id: 'bos-page-link',
       isExternal: true,
       target: '_blank',
-      externalLink: process?.env?.REACT_APP_BOS_URL || '',
+      externalLink: process?.env?.NEXT_PUBLIC_BOS_URL || '',
       isNew: true,
     });
   }
diff --git a/components/Swap/SwapBestTrade.tsx b/components/Swap/SwapBestTrade.tsx
index 0508729e5..04a6c9164 100644
--- a/components/Swap/SwapBestTrade.tsx
+++ b/components/Swap/SwapBestTrade.tsx
@@ -1069,6 +1069,7 @@ const SwapBestTrade: React.FC<{
         )}
         <Box width={showApproveFlow ? '48%' : '100%'}>
           <Button
+            variant='contained'
             fullWidth
             disabled={
               (bonusRouteLoading ||
diff --git a/components/SwapTokenDetailsHorizontal/SwapTokenDetailsHorizontal.tsx b/components/SwapTokenDetailsHorizontal/SwapTokenDetailsHorizontal.tsx
index 4ee9f4e5d..3d335acf0 100644
--- a/components/SwapTokenDetailsHorizontal/SwapTokenDetailsHorizontal.tsx
+++ b/components/SwapTokenDetailsHorizontal/SwapTokenDetailsHorizontal.tsx
@@ -139,9 +139,9 @@ const SwapTokenDetailsHorizontal: React.FC<{
       </Grid>
       <Grid item xs={3}>
         <Box>
-          <small className='swapTxInfoHeader'>Price</small>
+          <small className='text-secondary'>Price</small>
           {tokenData ? (
-            <Box>${formatNumber(tokenData.priceUSD)}</Box>
+            <p className='small'>${formatNumber(tokenData.priceUSD)}</p>
           ) : (
             <Skeleton variant='rectangular' width={80} height={20} />
           )}
@@ -149,12 +149,12 @@ const SwapTokenDetailsHorizontal: React.FC<{
       </Grid>
       <Grid item xs={2}>
         <Box>
-          <small className='swapTxInfoHeader'>24h</small>
+          <small className='text-secondary'>24h</small>
           {tokenData ? (
-            <Box className={`${priceUp ? 'text-success' : 'text-error'}`}>
+            <p className={`small ${priceUp ? 'text-success' : 'text-error'}`}>
               {priceUp ? '+' : ''}
               {priceUpPercent}%
-            </Box>
+            </p>
           ) : (
             <Skeleton variant='rectangular' width={60} height={20} />
           )}
diff --git a/components/pages/home/DragonLayerInfoCard.tsx b/components/pages/home/DragonLayerInfoCard.tsx
index b02cb2f72..f89d8ecdc 100644
--- a/components/pages/home/DragonLayerInfoCard.tsx
+++ b/components/pages/home/DragonLayerInfoCard.tsx
@@ -7,6 +7,7 @@ import { formatCompact, useLairDQUICKAPY } from 'utils';
 import { Skeleton } from '@mui/lab';
 import { StakeQuickModal } from 'components';
 import { useTranslation } from 'react-i18next';
+import styles from 'styles/pages/Home.module.scss';
 
 interface DragonLayerInfoCardProps {
   chainId: any;
@@ -57,7 +58,7 @@ const DragonLayerInfoCard: React.FC<DragonLayerInfoCardProps> = ({
         />
       )}
       {(oldLair || newLair) && (
-        <Box className='tradingSection' pt='20px'>
+        <Box className={styles.tradingSection} pt='20px'>
           {dQUICKAPY ? (
             <Box>
               <Box display='flex'>
diff --git a/components/pages/swap/SwapDefaultMode.tsx b/components/pages/swap/SwapDefaultMode.tsx
index 11bee2b4c..362ccbe9c 100644
--- a/components/pages/swap/SwapDefaultMode.tsx
+++ b/components/pages/swap/SwapDefaultMode.tsx
@@ -7,6 +7,7 @@ import { SwapBuySellMiniWidget } from './BuySellWidget';
 import LiquidityPools from './LiquidityPools';
 import SwapMain from './SwapMain';
 import SwapNewsWidget from './SwapNewWidget';
+import styles from 'styles/pages/Swap.module.scss';
 
 const SwapDefaultMode: React.FC<{
   token1: any;
@@ -38,8 +39,8 @@ const SwapDefaultMode: React.FC<{
             <Grid item>
               <Box
                 sx={{ display: { xs: 'none', lg: 'block' } }}
-                className={`btn-swap-widget ${
-                  disabledLeft ? 'btn-swap-widget-disabled' : ''
+                className={`${styles.btnSwapWidget} ${
+                  disabledLeft ? styles.btnSwapWidgetDisabled : ''
                 } `}
                 onClick={() => {
                   if (disabledLeft) return;
@@ -105,7 +106,7 @@ const SwapDefaultMode: React.FC<{
             )}
             <Grid item>
               <Box
-                className='btn-swap-widget'
+                className={styles.btnSwapWidget}
                 sx={{ display: { xs: 'none', lg: 'block' } }}
                 onClick={() => setRightOpen(!rightOpen)}
               >
diff --git a/components/pages/swap/SwapMain.tsx b/components/pages/swap/SwapMain.tsx
index 8043ad3f9..44f97c899 100644
--- a/components/pages/swap/SwapMain.tsx
+++ b/components/pages/swap/SwapMain.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Menu, MenuItem } from '@mui/material';
+import { Box, Menu, MenuItem } from '@mui/material';
 import { KeyboardArrowDown, Settings } from '@mui/icons-material';
 import { SettingsModal, Swap, ToggleSwitch } from 'components';
 import { SwapBestTrade } from 'components/Swap';
@@ -216,23 +216,18 @@ const SwapMain: React.FC = () => {
         <Box display='flex' width={1}>
           {!isProMode ? (
             <>
-              <Box display='flex' className='tabContainer'>
+              <Box display='flex' className={styles.tabContainer}>
                 {dropDownMenuText && (
-                  <Button
+                  <Box
                     id='swap-button'
-                    aria-controls={open ? 'swap-menu' : undefined}
-                    aria-haspopup='true'
-                    aria-expanded={open ? 'true' : undefined}
-                    variant='text'
-                    disableElevation
                     onClick={handleClickListItem}
-                    endIcon={<KeyboardArrowDown />}
-                    className={`tab tabMenu ${
-                      selectedIndex !== SWAP_CROSS_CHAIN ? 'activeTab' : ''
+                    className={`${styles.tab} ${styles.tabMenu} ${
+                      selectedIndex !== SWAP_CROSS_CHAIN ? styles.activeTab : ''
                     }`}
                   >
-                    {t(dropDownMenuText)}
-                  </Button>
+                    <p>{t(dropDownMenuText)}</p>
+                    <KeyboardArrowDown />
+                  </Box>
                 )}
                 <Menu
                   id='swap-menu'
@@ -259,8 +254,8 @@ const SwapMain: React.FC = () => {
                 </Menu>
                 {showCrossChain && (
                   <Box
-                    className={`tab ${
-                      selectedIndex === SWAP_CROSS_CHAIN ? 'activeTab' : ''
+                    className={`${styles.tab} ${
+                      selectedIndex === SWAP_CROSS_CHAIN ? styles.activeTab : ''
                     }`}
                     onClick={() => {
                       setSelectedIndex(SWAP_CROSS_CHAIN);
@@ -268,7 +263,7 @@ const SwapMain: React.FC = () => {
                       redirectWithSwapType(SWAP_CROSS_CHAIN);
                     }}
                   >
-                    <p className='trade-btn'>{t('crossChain')}</p>
+                    <p className={styles.tradeBtn}>{t('crossChain')}</p>
                   </Box>
                 )}
               </Box>
diff --git a/components/pages/swap/SwapV3/index.tsx b/components/pages/swap/SwapV3/index.tsx
index 010faa50d..33afa9299 100644
--- a/components/pages/swap/SwapV3/index.tsx
+++ b/components/pages/swap/SwapV3/index.tsx
@@ -676,11 +676,12 @@ const SwapV3Page: React.FC = () => {
 
         <Box className={styles.swapButtonWrapper}>
           {!account ? (
-            <Button fullWidth onClick={toggleWalletModal}>
+            <Button variant='contained' fullWidth onClick={toggleWalletModal}>
               {t('connectWallet')}
             </Button>
           ) : showWrap ? (
             <Button
+              variant='contained'
               fullWidth
               disabled={
                 Boolean(wrapInputError) ||
@@ -702,6 +703,7 @@ const SwapV3Page: React.FC = () => {
             </Button>
           ) : routeNotFound && userHasSpecifiedInputOutput ? (
             <Button
+              variant='contained'
               fullWidth
               disabled={routeNotFound && userHasSpecifiedInputOutput}
             >
@@ -717,6 +719,7 @@ const SwapV3Page: React.FC = () => {
             <>
               <Box width='48%'>
                 <Button
+                  variant='contained'
                   fullWidth
                   onClick={handleApprove}
                   disabled={
@@ -775,6 +778,7 @@ const SwapV3Page: React.FC = () => {
               </Box>
               <Box width='48%'>
                 <Button
+                  variant='contained'
                   fullWidth
                   onClick={() => {
                     if (isExpertMode) {
@@ -809,6 +813,7 @@ const SwapV3Page: React.FC = () => {
             </>
           ) : (
             <Button
+              variant='contained'
               fullWidth
               onClick={() => {
                 if (isExpertMode) {
diff --git a/components/v3/CurrencyInputPanel/index.tsx b/components/v3/CurrencyInputPanel/index.tsx
index 328f150d0..d430dd8b6 100644
--- a/components/v3/CurrencyInputPanel/index.tsx
+++ b/components/v3/CurrencyInputPanel/index.tsx
@@ -5,7 +5,6 @@ import { ReactNode, useCallback, useMemo, useState } from 'react';
 import { LockOutlined } from '@mui/icons-material';
 
 import { useActiveWeb3React } from 'hooks';
-import useUSDCPrice from 'hooks/v3/useUSDCPrice';
 import { WrappedCurrency } from 'models/types/Currency';
 import CurrencyLogo from 'components/CurrencyLogo';
 import { useCurrencyBalance } from 'state/wallet/hooks';
@@ -161,7 +160,7 @@ export default function CurrencyInputPanel({
           </Box>
         </Box>
         <Box className='flex justify-between'>
-          <Box display='flex'>
+          <Box display='flex items-center'>
             <small className='text-secondary'>
               {t('balance')}:{' '}
               {(showETH && ethBalance
@@ -170,12 +169,12 @@ export default function CurrencyInputPanel({
             </small>
 
             {account && currency && showHalfButton && (
-              <Box className='maxWrapper' onClick={onHalf}>
+              <Box className={styles1.maxWrapper} onClick={onHalf}>
                 <small>50%</small>
               </Box>
             )}
             {account && currency && showMaxButton && (
-              <Box className='maxWrapper' onClick={onMax}>
+              <Box className={styles1.maxWrapper} onClick={onMax}>
                 <small>{t('max')}</small>
               </Box>
             )}
diff --git a/connectors/index.ts b/connectors/index.ts
index a8b5c9c48..fba8a4834 100755
--- a/connectors/index.ts
+++ b/connectors/index.ts
@@ -105,8 +105,6 @@ export const networkInfoMap: NetworkInfoChainMap = {
   },
 };
 
-const FORMATIC_KEY = process.env.REACT_APP_FORTMATIC_KEY;
-
 const [web3Network, web3NetworkHooks] = initializeConnector<Network>(
   (actions) =>
     new Network({ actions, urlMap: RPC_PROVIDERS, defaultChainId: 137 }),
diff --git a/styles/_mui-overrides.scss b/styles/_mui-overrides.scss
index 58c9501bb..08e8fe7c0 100644
--- a/styles/_mui-overrides.scss
+++ b/styles/_mui-overrides.scss
@@ -24,7 +24,7 @@ html {
       height: 2px;
       width: calc(100% - 16px);
       padding: 13px 0;
-    
+
       & .MuiSlider-mark {
         width: 4px;
         height: 4px !important;
@@ -41,13 +41,13 @@ html {
             bottom: 14px;
             color: $textPrimary;
             font-family: 'DM Sans', sans-serif;
-            content: "Cheaper gas";
+            content: 'Cheaper gas';
             display: flex;
             align-items: center;
             margin-left: -50px;
             padding: 0.3em 1em;
             position: absolute;
-            z-index: 98
+            z-index: 98;
           }
           &::before {
             background-color: $bgColor;
@@ -59,7 +59,7 @@ html {
             border-left: transparent;
             color: $textPrimary;
             font-family: 'DM Sans', sans-serif;
-            content: "";
+            content: '';
             display: flex;
             align-items: center;
             margin-left: -4px;
@@ -67,17 +67,17 @@ html {
             box-sizing: border-box;
             -webkit-transform: rotate(135deg);
             transform: rotate(135deg);
-            z-index: 99
+            z-index: 99;
           }
         }
       }
     }
-    
+
     .MuiSlider-mark {
       height: 8px;
-      background-color: #B4C2D5;
+      background-color: #b4c2d5;
     }
-    
+
     .MuiSlider-thumb {
       height: 20px;
       width: 20px;
@@ -85,12 +85,14 @@ html {
       margin-top: -9px;
       margin-left: 0;
       box-shadow: 0px 2px 5px $grey21;
-    
-      &:focus, &:hover, &.active {
+
+      &:focus,
+      &:hover,
+      &.active {
         box-shadow: inherit;
       }
     }
-    
+
     .MuiSlider-valueLabel {
       left: calc(-50% - 8px);
       top: -18px;
@@ -102,14 +104,14 @@ html {
         color: $textPrimary;
       }
     }
-    
+
     .MuiSlider-track {
       height: 2px;
       background: $blue5;
       border-radius: 4px;
       padding-right: 8px;
     }
-    
+
     .MuiSlider-rail {
       height: 2px;
       border-radius: 4px;
@@ -117,4 +119,10 @@ html {
       width: calc(100% + 16px);
     }
   }
+
+  .MuiButton-root {
+    &.Mui-disabled {
+      opacity: 0.3;
+    }
+  }
 }
diff --git a/styles/components/AccountDetails.module.scss b/styles/components/AccountDetails.module.scss
index f15f7bb05..dfc5036fa 100644
--- a/styles/components/AccountDetails.module.scss
+++ b/styles/components/AccountDetails.module.scss
@@ -16,12 +16,19 @@
 .copyIcon {
   display: flex;
   cursor: pointer;
-  &:hover, &:active, &:focus {
+  &:hover,
+  &:active,
+  &:focus {
     color: white;
   }
   & small {
     margin-left: 4px;
   }
+  & svg {
+    width: 18px;
+    height: 18px;
+    color: $textSecondary;
+  }
 }
 
 .transactionState {
@@ -42,4 +49,4 @@
   &:hover {
     text-decoration: underline;
   }
-}
\ No newline at end of file
+}
diff --git a/styles/pages/Home.module.scss b/styles/pages/Home.module.scss
index a91819fea..f38208e5d 100644
--- a/styles/pages/Home.module.scss
+++ b/styles/pages/Home.module.scss
@@ -22,11 +22,10 @@
     color: $textSecondary;
   }
   & > button {
-    height: 56px;
+    height: 48px;
     width: 194px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    border-radius: 28px;
+    margin-top: 20px;
   }
 }
 
diff --git a/styles/pages/Swap.module.scss b/styles/pages/Swap.module.scss
index 440cd1fc2..4e64b1425 100644
--- a/styles/pages/Swap.module.scss
+++ b/styles/pages/Swap.module.scss
@@ -38,7 +38,7 @@
   }
 }
 
-.trade-btn:hover {
+.tradeBtn:hover {
   color: #c7cad9;
 }
 
@@ -52,8 +52,6 @@
 }
 
 .tabContainer {
-  // padding-left: 1rem;
-  // padding-right: 1rem;
   border-radius: 2rem;
   border: 1px solid rgba(130, 177, 255, 0.08);
   background: rgba(130, 177, 255, 0.03);
@@ -75,6 +73,7 @@
   align-items: center;
   & p {
     color: $textSecondary;
+    text-align: center;
   }
 }
 
@@ -90,9 +89,10 @@
 .activeTab {
   border-radius: 2rem;
   border: 1px solid #448aff;
-  background: rgba(68, 138, 255, 0.3);
+  background: rgba(68, 138, 255, 0.3) !important;
+  color: $textPrimary !important;
   & p {
-    color: #c7cad9;
+    color: $textPrimary !important;
   }
 }
 
@@ -341,7 +341,7 @@ div.buy {
   color: $successMain;
 }
 
-.btn-swap-widget {
+.btnSwapWidget {
   cursor: pointer;
   background-color: #1b1e29;
   border-radius: 12px;
@@ -354,7 +354,7 @@ div.buy {
   }
 }
 
-.btn-swap-widget-disabled {
+.btnSwapWidgetDisabled {
   cursor: not-allowed;
   background-color: #282d3d;
   color: 'grey' !important;
diff --git a/utils/useUSDCPrice.ts b/utils/useUSDCPrice.ts
index 6a43fc18d..a25b2c229 100755
--- a/utils/useUSDCPrice.ts
+++ b/utils/useUSDCPrice.ts
@@ -14,7 +14,6 @@ import { unwrappedToken, wrappedCurrency } from './wrappedCurrency';
 import { useDQUICKtoQUICK } from 'state/stake/hooks';
 import { useAllCommonPairs } from 'hooks/Trades';
 import { tryParseAmount } from 'state/swap/hooks';
-import { useEthPrice, useMaticPrice } from 'state/application/hooks';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
@@ -81,7 +80,7 @@ export function useUSDCPricesFromAddresses(
 
       if (v2) {
         const res = await fetch(
-          `${process.env.REACT_APP_LEADERBOARD_APP_URL}/utils/token-prices/v2?chainId=${chainId}&addresses=${addressStr}`,
+          `${process.env.NEXT_PUBLIC_LEADERBOARD_APP_URL}/utils/token-prices/v2?chainId=${chainId}&addresses=${addressStr}`,
         );
         if (!res.ok) {
           const errorText = await res.text();
@@ -104,7 +103,7 @@ export function useUSDCPricesFromAddresses(
 
       const res = await fetch(
         `${
-          process.env.REACT_APP_LEADERBOARD_APP_URL
+          process.env.NEXT_PUBLIC_LEADERBOARD_APP_URL
         }/utils/token-prices/v3?chainId=${chainId}&addresses=${addressesNotInV2.join(
           '_',
         )}`,