diff --git a/components/ffAssetOverview/ffAssetOverview.module.css b/components/ffAssetOverview/ffAssetOverview.module.css
index 3522ebb..d291b90 100644
--- a/components/ffAssetOverview/ffAssetOverview.module.css
+++ b/components/ffAssetOverview/ffAssetOverview.module.css
@@ -43,7 +43,7 @@
 
 .balanceIcon {
   color: #fff;
-  border: 1px solid #fff;
+  border: 1px solid rgba(255,255,255,0.2);
   border-radius: 50%;
   padding: 12px;
   font-size: 60px !important;
diff --git a/components/ffAssets/ffAssets.module.css b/components/ffAssets/ffAssets.module.css
index 5fb778b..531373e 100644
--- a/components/ffAssets/ffAssets.module.css
+++ b/components/ffAssets/ffAssets.module.css
@@ -10,13 +10,13 @@
   width: calc(100% - 48px);
   max-width: 1356px;
   display: flex;
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   position: absolute;
-  top: 240px;
+  top: 252px;
   left: 24px;
   right: 24px;
   margin: auto;
-  padding: 24px 0px;
+  padding: 0 0 20px 0px;
 }
 
 .title {
@@ -25,6 +25,18 @@
 }
 
 .tableContainer {
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   margin: 0 auto;
 }
+
+@media screen and (max-width: 1200px) {
+  .container {
+    margin-top: -60px;
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .container {
+    margin-top: 117px;
+  }
+}
diff --git a/components/ffAssets/ffAssetsTable.js b/components/ffAssets/ffAssetsTable.js
index 116da0f..705c16b 100644
--- a/components/ffAssets/ffAssetsTable.js
+++ b/components/ffAssets/ffAssetsTable.js
@@ -144,7 +144,7 @@ const useStyles = makeStyles((theme) => ({
     padding: '24px',
     width: '100%',
     flexWrap: 'wrap',
-    borderBottom: '1px solid rgba(128, 128, 128, 0.32)',
+    borderBottom: '1px solid rgba(104, 108, 122, 0.25)',
     background: 'radial-gradient(circle, rgba(63,94,251,0.7) 0%, rgba(47,128,237,0.7) 48%) rgba(63,94,251,0.7) 100%',
   },
   assetInfoError: {
@@ -155,7 +155,7 @@ const useStyles = makeStyles((theme) => ({
     padding: '24px',
     width: '100%',
     flexWrap: 'wrap',
-    borderBottom: '1px solid rgba(128, 128, 128, 0.32)',
+    borderBottom: '1px rgba(104, 108, 122, 0.25)',
     background: '#dc3545',
   },
   infoField: {
diff --git a/components/ffClaim/ffClaim.js b/components/ffClaim/ffClaim.js
index 1849fba..6a50369 100644
--- a/components/ffClaim/ffClaim.js
+++ b/components/ffClaim/ffClaim.js
@@ -37,6 +37,7 @@ export default function ffClaim() {
       setLoading(true)
       stores.dispatcher.dispatch({ type: FIXED_FOREX_CLAIM_VESTING_REWARD, content: {}})
     // }
+
   }
 
   return (
diff --git a/components/ffClaim/ffClaim.module.css b/components/ffClaim/ffClaim.module.css
index e784ce2..7b9131a 100644
--- a/components/ffClaim/ffClaim.module.css
+++ b/components/ffClaim/ffClaim.module.css
@@ -11,7 +11,7 @@
 }
 
 .lpOptionsContainer {
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   margin: 0 auto;
   display: flex;
   align-items: center;
@@ -63,8 +63,6 @@
   top: 12px;
 }
 
-
-
 .lpOption:nth-child(1):hover > div {
   color: #fff !important;
 }
@@ -73,3 +71,9 @@
   font-size: 60px !important;
   font-weight: bold !important;
 }
+
+@media screen and (max-width: 1200px) {
+  .container {
+    margin-bottom: 48px;
+  }
+}
diff --git a/components/ffCurveLiquidity/ffCurveLiquidity.js b/components/ffCurveLiquidity/ffCurveLiquidity.js
index e0d718b..3d3344d 100644
--- a/components/ffCurveLiquidity/ffCurveLiquidity.js
+++ b/components/ffCurveLiquidity/ffCurveLiquidity.js
@@ -447,6 +447,7 @@ export default function ffCurveLiquidity({ asset }) {
             <Button
               variant='contained'
               size='large'
+              className={classes.buttonOverride}
               color='primary'
               disabled={ depositLoading || !coin0DepositApprovalNotRequired || !coin1DepositApprovalNotRequired }
               onClick={ onDeposit }
@@ -463,6 +464,7 @@ export default function ffCurveLiquidity({ asset }) {
               variant='contained'
               size='large'
               color='primary'
+              className={classes.buttonOverride}
               disabled={ depositLoading }
               onClick={ onWithdraw }
               >
diff --git a/components/ffCurveLiquidity/ffCurveLiquidity.module.css b/components/ffCurveLiquidity/ffCurveLiquidity.module.css
index 639e937..b0bcbb7 100644
--- a/components/ffCurveLiquidity/ffCurveLiquidity.module.css
+++ b/components/ffCurveLiquidity/ffCurveLiquidity.module.css
@@ -2,7 +2,7 @@
   width: calc(100% - 48px);
   max-width: 1356px;
   display: flex;
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   position: absolute;
   top: 240px;
   left: 0;
@@ -13,7 +13,7 @@
 
 .topLeftButton {
   border-top-left-radius: 10px !important;
-  border-bottom: 1px solid rgba(128, 128, 128, 0.25) !important;
+  border-bottom: 1px solid rgba(104, 108, 122, 0.25) !important;
 }
 
 .bottomLeftButton {
@@ -117,7 +117,7 @@
   display: grid;
   grid-gap: 12px;
   grid-template-columns: 1fr;
-  border-left: 1px solid rgba(128, 128, 128, 0.8);
+  border-left: 1px solid rgba(104, 108, 122, 0.25);
   padding: 0px 24px;
   width: 240px;
 }
@@ -154,7 +154,7 @@
 .button {
   border-radius: 0px !important;
   flex: 1;
-  border-right: 1px solid rgba(128, 128, 128, 0.25) !important;
+  border-right: 1px solid rgba(104, 108, 122, 0.25) !important;
   transition: none !important;
   opacity: 0.5;
 }
@@ -175,7 +175,7 @@
   display: grid;
   grid-gap: 12px;
   grid-template-columns: 1fr;
-  border-left: 1px solid rgba(128, 128, 128, 0.8);
+  border-left: 1px solid rgba(104, 108, 122, 0.25);
   padding: 0px 24px;
   width: 240px;
 }
@@ -183,3 +183,10 @@
 .extraTF {
   padding-bottom: 12px;
 }
+
+.buttonOverride {
+  background: #114DF0 !important;
+  color: #FFF !important;
+  font-weight: 700 !important;
+  box-shadow: none !important;
+}
diff --git a/components/ffGauges/ffGauges.js b/components/ffGauges/ffGauges.js
index e8f448a..70ed1c0 100644
--- a/components/ffGauges/ffGauges.js
+++ b/components/ffGauges/ffGauges.js
@@ -69,7 +69,7 @@ export default function ffGauges() {
       </div>
       <div className={ classes.actionButtons }>
         <Button
-          className={ classes.actionButton }
+          className={ classes.buttonOverride }
           variant='contained'
           size='large'
           color='primary'
diff --git a/components/ffGauges/ffGauges.module.css b/components/ffGauges/ffGauges.module.css
index 92391c7..b4f1b72 100644
--- a/components/ffGauges/ffGauges.module.css
+++ b/components/ffGauges/ffGauges.module.css
@@ -2,10 +2,10 @@
   width: calc(100% - 48px);
   max-width: 1356px;
   display: flex;
-  padding: 24px 0px;
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  padding: 0 0 20px 0px;
+  border: 1px solid rgba(104, 108, 122, 0.25);
   position: absolute;
-  top: 240px;
+  top: 252px;
   left: 0;
   right: 0;
   margin: auto;
@@ -49,3 +49,11 @@
   font-size: 20px !important;
   color: #da0052 !important;
 }
+
+.buttonOverride {
+  background: #114DF0 !important;
+  color: #FFF !important;
+  font-weight: 700 !important;
+  box-shadow: none !important;
+  width: 216px;
+}
diff --git a/components/ffLPOptions/ffLPOptions.js b/components/ffLPOptions/ffLPOptions.js
index db03763..88f5565 100644
--- a/components/ffLPOptions/ffLPOptions.js
+++ b/components/ffLPOptions/ffLPOptions.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Paper, Typography, Button, TextField, InputAdornment, CircularProgress } from '@material-ui/core';
+import { Paper, Grid, Typography, Button, TextField, InputAdornment, CircularProgress } from '@material-ui/core';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { useRouter } from "next/router";
@@ -27,42 +27,51 @@ export default function ffLPOptions({ asset }) {
     <div className={ classes.container}>
       <Typography variant="h5" className={ classes.title}>LP Opportunities</Typography>
       <Paper elevation={0} className={ classes.lpOptionsContainer }>
-        <div className={ classes.lpOption } onClick={ () => { localNav('curve') } }>
-          <div className={ classes.lpOptionTitle }>
-            <img className={ classes.lpOptionIcon } src='/images/Curve.png' alt='Curve Logo' width={ 60 } height={ 60 } />
-            <div>
-              <Typography className={ classes.lpOptionName }>Curve.fi</Typography>
-              <Typography className={ classes.lpOptionDescription }>Pool LP</Typography>
+
+        <Grid container spacing={0}>
+          <Grid item lg={4} xs={12}>
+            <div className={ classes.lpOption1 } onClick={ () => { localNav('curve') } }>
+              <div className={ classes.lpOptionTitle }>
+                <img className={ classes.lpOptionIcon } src='/images/Curve.png' alt='Curve Logo' width={ 60 } height={ 60 } />
+                <div>
+                  <Typography className={ classes.lpOptionName }>Curve.fi</Typography>
+                  <Typography className={ classes.lpOptionDescription }>Pool LP</Typography>
+                </div>
+              </div>
+              {
+                <div className={ classes.activeIcon }></div>
+              }
             </div>
-          </div>
-          {
-            <div className={ classes.activeIcon }></div>
-          }
-        </div>
-        <div className={ classes.lpOption } onClick={ () => { navigate(`https://app.sushi.com/add/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/${asset ? asset.address : ''}`) } }>
-          <div className={ classes.lpOptionTitle }>
-            <img className={ classes.lpOptionIcon } src='/images/Sushi.png' alt='Sushi Logo' width={ 60 } height={ 60 } />
-            <div>
-              <Typography className={ classes.lpOptionName }>Sushi</Typography>
-              <Typography className={ classes.lpOptionDescription }>Pair LP</Typography>
+          </Grid>
+          <Grid item lg={4} xs={12}>
+            <div className={ classes.lpOption2 } onClick={ () => { navigate(`https://app.sushi.com/add/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/${asset ? asset.address : ''}`) } }>
+              <div className={ classes.lpOptionTitle }>
+                <img className={ classes.lpOptionIcon } src='/images/Sushi.png' alt='Sushi Logo' width={ 60 } height={ 60 } />
+                <div>
+                  <Typography className={ classes.lpOptionName }>Sushi</Typography>
+                  <Typography className={ classes.lpOptionDescription }>Pair LP</Typography>
+                </div>
+              </div>
+              {
+                <div className={ classes.activeIcon }></div>
+              }
             </div>
-          </div>
-          {
-            <div className={ classes.activeIcon }></div>
-          }
-        </div>
-        <div className={ classes.lpOption } onClick={ () => { navigate('https://yearn.fi/lend') } }>
-          <div className={ classes.lpOptionTitle }>
-            <img className={ classes.lpOptionIcon } src='/images/yearn-fi.svg' alt='Yearn.fi logo' width={ 60 } height={ 60 } />
-            <div>
-              <Typography className={ classes.lpOptionName }>Yearn.fi</Typography>
-              <Typography className={ classes.lpOptionDescription }>Lend LP</Typography>
+          </Grid>
+          <Grid item lg={4} xs={12}>
+            <div className={ classes.lpOption3 } onClick={ () => { navigate('https://yearn.fi/lend') } }>
+              <div className={ classes.lpOptionTitle }>
+                <img className={ classes.lpOptionIcon } src='/images/yearn-fi.svg' alt='Yearn.fi logo' width={ 60 } height={ 60 } />
+                <div>
+                  <Typography className={ classes.lpOptionName }>Yearn.fi</Typography>
+                  <Typography className={ classes.lpOptionDescription }>Lend LP</Typography>
+                </div>
+              </div>
+              {
+                <div className={ classes.activeIcon }></div>
+              }
             </div>
-          </div>
-          {
-            <div className={ classes.activeIcon }></div>
-          }
-        </div>
+          </Grid>
+        </Grid>
       </Paper>
     </div>
   );
diff --git a/components/ffLPOptions/ffLPOptions.module.css b/components/ffLPOptions/ffLPOptions.module.css
index c281063..476223c 100644
--- a/components/ffLPOptions/ffLPOptions.module.css
+++ b/components/ffLPOptions/ffLPOptions.module.css
@@ -11,7 +11,7 @@
 }
 
 .lpOptionsContainer {
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   margin: 0 auto;
   display: flex;
   align-items: center;
@@ -19,23 +19,25 @@
   cursor: pointer;
 }
 
-.lpOption:nth-child(1):hover {
+.lpOption1:hover {
   background: #f8b701;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
 }
 
-.lpOption:nth-child(2):hover {
+.lpOption2:hover {
   background: #cd65ae;
 }
 
-.lpOption:nth-child(3):hover {
+.lpOption3:hover {
   background: #1162df;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
 }
 
-.lpOption {
+.lpOption1,
+.lpOption2,
+.lpOption3 {
   position: relative;
   flex: 1;
   display: flex;
@@ -73,3 +75,47 @@
   right: 12px;
   top: 12px;
 }
+
+@media screen and (max-width: 1200px) {
+  .container {
+    margin-top: 30px;
+  }
+
+  .lpOption1 {
+    background: #f8b701;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border-bottom-left-radius: 0;
+  }
+
+  .lpOption1:hover {
+    background: #f8b701;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border-bottom-left-radius: 0;
+  }
+
+  .lpOption2 {
+    background: #cd65ae;
+  }
+
+  .lpOption3 {
+    background: #1162df;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-top-right-radius: 0px;
+  }
+
+  .lpOption3:hover {
+    background: #1162df;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-top-right-radius: 0px;
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .container {
+    margin-top: 240px;
+  }
+}
diff --git a/components/ffMintBurn/ffMintBurn.js b/components/ffMintBurn/ffMintBurn.js
index 76230c7..18de75c 100644
--- a/components/ffMintBurn/ffMintBurn.js
+++ b/components/ffMintBurn/ffMintBurn.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Typography, Paper, Button, TextField, InputAdornment, CircularProgress } from '@material-ui/core';
+import { Typography, Paper, Grid, Button, TextField, InputAdornment, CircularProgress } from '@material-ui/core';
 import Skeleton from '@material-ui/lab/Skeleton';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 
@@ -134,7 +134,7 @@ export default function ffMintBurn() {
             renderOption={(option) => (
               <React.Fragment>
                 <img
-                  src={option && option.icon ? option.icon : `tokens/unknown-logo.png`}
+                  src={option && option.icon ? option.icon : 'https://raw.githubusercontent.com/x33q/cryptologos/main/unknown-logo.png'}
                   alt=""
                   width={30}
                   height={30}
@@ -156,7 +156,7 @@ export default function ffMintBurn() {
                     startAdornment: (
                       <InputAdornment position="start">
                         <img
-                          src={assetValue && assetValue.icon ? assetValue.icon : `tokens/unknown-logo.png`}
+                          src={assetValue && assetValue.icon ? assetValue.icon : 'https://raw.githubusercontent.com/x33q/cryptologos/main/unknown-logo.png'}
                           alt=""
                           width={30}
                           height={30}
@@ -178,69 +178,91 @@ export default function ffMintBurn() {
 
   return (
     <Paper elevation={0} className={classes.container}>
-      <div className={classes.toggleButtons}>
-        <Button className={ `${activeTab === 'deposit' ? classes.buttonActive : classes.button} ${ classes.topLeftButton }` } onClick={ toggleDeposit }>
-          <Typography variant='h5'>Deposit / Mint</Typography>
-          <div className={ `${activeTab === 'deposit' ? classes.activeIcon : ''}` }></div>
-        </Button>
-        <Button className={ `${activeTab === 'withdraw' ? classes.buttonActive : classes.button}  ${ classes.bottomLeftButton }` } onClick={ toggleWithdraw }>
-          <Typography variant='h5'>Withdraw / Burn</Typography>
-          <div className={ `${activeTab === 'withdraw' ? classes.activeIcon : ''}` }></div>
-        </Button>
-      </div>
-      <div className={ classes.reAddPadding }>
-        <div className={ classes.inputsContainer }>
-          {
-            activeTab === 'deposit' &&
-            <>
-              { renderInput('deposit', 'Deposit', onAmountChanged, onAmountPercentChanged, depositAmount, onAssetChanged, depositAsset) }
-              { renderInput('mint', 'Mint', onAmountChanged, onAmountPercentChanged, mintAmount, onAssetChanged, mintAsset) }
-            </>
-          }
-          {
-            activeTab === 'withdraw' &&
-            <>
-              { renderInput('withdraw', 'Withdraw', onAmountChanged, onAmountPercentChanged, withdrawAmount, onAssetChanged, withdrawAsset) }
-              { renderInput('burn', 'Burn', onAmountChanged, onAmountPercentChanged, burnAmount, onAssetChanged, burnAsset) }
-            </>
-          }
+      <Grid container spacing={0}>
+        <Grid item lg={2} md={3} xs={12}>
+        <div className={classes.toggleButtons}>
+          <Grid container spacing={0}>
+            <Grid item lg={12} md={12} sm={6} xs={6}>
+              <Button className={ `${activeTab === 'deposit' ? classes.buttonActive : classes.button} ${ classes.topLeftButton }` } onClick={ toggleDeposit }>
+                <Typography variant='h5'>Deposit / Mint</Typography>
+                <div className={ `${activeTab === 'deposit' ? classes.activeIcon : ''}` }></div>
+              </Button>
+            </Grid>
+            <Grid item lg={12} md={12} sm={6} xs={6}>
+              <Button className={ `${activeTab === 'withdraw' ? classes.buttonActive : classes.button}  ${ classes.bottomLeftButton }` } onClick={ toggleWithdraw }>
+                <Typography variant='h5'>Withdraw / Burn</Typography>
+                <div className={ `${activeTab === 'withdraw' ? classes.activeIcon : ''}` }></div>
+              </Button>
+            </Grid>
+          </Grid>
         </div>
-        {
-          activeTab === 'deposit' &&
-          <div className={ classes.actionsContainer }>
-            <Button
-              variant='contained'
-              size='large'
-              color='primary'>
-              <Typography className={ classes.actionButtonText }>Approve</Typography>
-            </Button>
-            <Button
-              variant='contained'
-              size='large'
-              color='primary'>
-              <Typography className={ classes.actionButtonText }>Deposit & Mint</Typography>
-            </Button>
-          </div>
-        }
-        {
-          activeTab === 'withdraw' &&
-          <div className={ classes.actionsContainer }>
-            <Button
-              variant='contained'
-              size='large'
-              color='primary'>
-              <Typography className={ classes.actionButtonText }>Approve</Typography>
-            </Button>
-            <Button
-              variant='contained'
-              size='large'
-              color='primary'>
-              <Typography className={ classes.actionButtonText }>Withdraw & Burn</Typography>
-            </Button>
-          </div>
-        }
-      </div>
+        </Grid>
+        <Grid item lg={10} md={9}>
+        <div className={ classes.reAddPadding }>
+          <Grid container spacing={0}>
+            <Grid item lg={9} xs={12}>
+              <div className={ classes.inputsContainer }>
 
+                  {
+                    activeTab === 'deposit' &&
+                    <>
+                      { renderInput('deposit', 'Deposit', onAmountChanged, onAmountPercentChanged, depositAmount, onAssetChanged, depositAsset) }
+                      { renderInput('mint', 'Mint', onAmountChanged, onAmountPercentChanged, mintAmount, onAssetChanged, mintAsset) }
+                    </>
+                  }
+                  {
+                    activeTab === 'withdraw' &&
+                    <>
+                      { renderInput('withdraw', 'Withdraw', onAmountChanged, onAmountPercentChanged, withdrawAmount, onAssetChanged, withdrawAsset) }
+                      { renderInput('burn', 'Burn', onAmountChanged, onAmountPercentChanged, burnAmount, onAssetChanged, burnAsset) }
+                    </>
+                  }
+              </div>
+            </Grid>
+            <Grid item lg={3} xs={12} className={classes.buttonWrap}>
+              {
+                activeTab === 'deposit' &&
+                <div className={ classes.actionsContainer }>
+                  <Button
+                    variant='contained'
+                    size='large'
+                    color='white'
+                    className={classes.buttonOverride}>
+                    <Typography className={ classes.actionButtonText }>Approve</Typography>
+                  </Button>
+                  <Button
+                    variant='contained'
+                    size='large'
+                    color='white'
+                    className={classes.buttonOverride}>
+                    <Typography className={ classes.actionButtonText }>Deposit & Mint</Typography>
+                  </Button>
+                </div>
+              }
+              {
+                activeTab === 'withdraw' &&
+                <div className={ classes.actionsContainer }>
+                  <Button
+                    variant='contained'
+                    size='large'
+                    color='white'
+                    className={classes.buttonOverride}>
+                    <Typography className={ classes.actionButtonText }>Approve</Typography>
+                  </Button>
+                  <Button
+                    variant='contained'
+                    size='large'
+                    color='white'
+                    className={classes.buttonOverride}>
+                    <Typography className={ classes.actionButtonText }>Withdraw & Burn</Typography>
+                  </Button>
+                </div>
+              }
+            </Grid>
+          </Grid>
+        </div>
+        </Grid>
+      </Grid>
     </Paper>
   );
 }
diff --git a/components/ffMintBurn/ffMintBurn.module.css b/components/ffMintBurn/ffMintBurn.module.css
index 44f8635..d60ac38 100644
--- a/components/ffMintBurn/ffMintBurn.module.css
+++ b/components/ffMintBurn/ffMintBurn.module.css
@@ -2,7 +2,7 @@
   width: calc(100% - 48px);
   max-width: 1356px;
   display: flex;
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   position: absolute;
   top: 240px;
   left: 24px;
@@ -11,18 +11,21 @@
   border-radius: 30px;
 }
 
+.buttonWrap {
+}
+
 .actionsContainer {
   display: grid;
   grid-gap: 12px;
   grid-template-columns: 1fr;
-  border-left: 1px solid rgba(128, 128, 128, 0.8);
+  border-left: 1px solid rgba(104, 108, 122, 0.25);
   padding: 0px 24px;
-  width: 240px;
+  width: 100%;
 }
 
 .informationContainer {
   width: 300px;
-  border-left: 1px solid rgba(128, 128, 128, 0.25);
+  border-left: 1px solid rgba(104, 108, 122, 0.25);
   min-height: 140px;
   padding: 0px 12px;
 }
@@ -58,16 +61,17 @@
 .toggleButtons {
   display: flex;
   flex-direction: column;
-  min-height: 140px;
-  width: 200px;
+  min-height: 170px;
+  width: 100%;
 }
 
 .button {
   border-radius: 0px !important;
   flex: 1;
-  border-right: 1px solid rgba(128, 128, 128, 0.25) !important;
+  border-right: 1px solid rgba(104, 108, 122, 0.25) !important;
   transition: none !important;
-  opacity: 0.5;
+  opacity: 1;
+  color: rgba(104, 108, 122, 0.5) !important;
 }
 
 .buttonActive {
@@ -101,17 +105,21 @@
 
 .topLeftButton {
   border-top-left-radius: 10px !important;
-  border-bottom: 1px solid rgba(128, 128, 128, 0.25) !important;
+  border-bottom: 1px solid rgba(104, 108, 122, 0.25) !important;
+  width: 100%;
+  min-height: 85px;
 }
 
 .bottomLeftButton {
   border-bottom-left-radius: 10px !important;
+  width: 100%;
+  min-height: 85px;
 }
 
 .inputsContainer {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: 24px 48px;
+  grid-gap: 24px 0px;
   padding: 0px 24px;
   flex: 1;
 }
@@ -126,6 +134,51 @@
   display: flex;
 }
 
-@media screen and (max-width: 576px) {
+.buttonOverride {
+  background: #114DF0 !important;
+  color: #FFF !important;
+  font-weight: 700 !important;
+  box-shadow: none !important;
+  width: 100% !important;
+}
+
+@media screen and (max-width: 1200px) {
+  .container {
+    margin-top: -60px;
+  }
+
+  .buttonWrap {
+    margin-top: 20px !important;
+  }
+
+  .actionsContainer {
+    border-left: 0px solid rgba(104, 108, 122, 0.25);
+  }
+
+
+}
+
+@media screen and (max-width: 960px) {
+  .container {
+    margin-top: -60px;
+  }
+
+  .toggleButtons {
+    display: flex;
+    flex-direction: column;
+    min-height: 85px;
+    width: 100%;
+  }
+
+  .topLeftButton {
+    border-top-left-radius: 10px !important;
+    border-right: 1px solid rgba(104, 108, 122, 0.25) !important;
+    border-bottom: 1px solid rgba(104, 108, 122, 0.25) !important;
+  }
 
+  .bottomLeftButton {
+    border-top-right-radius: 10px !important;
+    border-bottom-left-radius: 0px !important;
+    border-bottom: 1px solid rgba(104, 108, 122, 0.25) !important;
+  }
 }
diff --git a/components/ffOverview/ffOverview.js b/components/ffOverview/ffOverview.js
index 3c93ff7..7cb1e3d 100644
--- a/components/ffOverview/ffOverview.js
+++ b/components/ffOverview/ffOverview.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Paper, Typography, Button, TextField, InputAdornment, CircularProgress } from '@material-ui/core';
+import { Paper, Grid, Typography, Button, TextField, InputAdornment, CircularProgress } from '@material-ui/core';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import Skeleton from '@material-ui/lab/Skeleton';
 import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet';
@@ -38,36 +38,44 @@ export default function ffOverview() {
   return (
     <div className={ classes.container }>
       <div className={ classes.fieldsContainer }>
-        <div className={ classes.field }>
-          <AccountBalanceWalletIcon className={ classes.balanceIcon } />
-          <div>
-            <Typography className={ classes.title }>IBFF Balance:</Typography>
-            <div className={ classes.inline }>
-              <Typography className={ classes.value }>{ formatCurrency(ibff ? ibff.balance : 0) }</Typography>
-              <Typography className={ classes.valueSymbol }>{ ibff ? ibff.symbol : '' }</Typography>
+        <Grid container spacing={3}>
+          <Grid item lg={4} md={4} sm={12} xs={12}>
+            <div className={ classes.field }>
+              <AccountBalanceWalletIcon className={ classes.balanceIcon } />
+              <div>
+                <Typography className={ classes.title }>IBFF Balance:</Typography>
+                <div className={ classes.inline }>
+                  <Typography className={ classes.value }>{ formatCurrency(ibff ? ibff.balance : 0) }</Typography>
+                  <Typography className={ classes.valueSymbol }>{ ibff ? ibff.symbol : '' }</Typography>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div className={ classes.field }>
-          <TimerIcon className={ classes.balanceIcon } />
-          <div>
-            <Typography className={ classes.title }>Vested Balance:</Typography>
-            <div className={ classes.inline }>
-              <Typography className={ classes.value }>{ formatCurrency((veIBFF && veIBFF.vestingInfo) ? veIBFF.vestingInfo.lockValue : 0) }</Typography>
-              <Typography className={ classes.valueSymbol }>{ veIBFF ? veIBFF.symbol : '' }</Typography>
+          </Grid>
+          <Grid item lg={4} md={4} sm={12} xs={12}>
+            <div className={ classes.field }>
+              <TimerIcon className={ classes.balanceIcon } />
+              <div>
+                <Typography className={ classes.title }>Vested Balance:</Typography>
+                <div className={ classes.inline }>
+                  <Typography className={ classes.value }>{ formatCurrency((veIBFF && veIBFF.vestingInfo) ? veIBFF.vestingInfo.lockValue : 0) }</Typography>
+                  <Typography className={ classes.valueSymbol }>{ veIBFF ? veIBFF.symbol : '' }</Typography>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div className={ classes.field }>
-          <AttachMoneyIcon className={ classes.balanceIcon } />
-          <div>
-            <Typography className={ classes.title }>Rewards Available:</Typography>
-            <div className={ classes.inline }>
-              <Typography className={ classes.value }>{ formatCurrency(rewards ? rewards.faucet.faucet : 0) }</Typography>
-              <Typography className={ classes.valueSymbol }>{ ibff ? ibff.symbol : '' }</Typography>
+          </Grid>
+          <Grid item lg={4} md={4} sm={12} xs={12}>
+            <div className={ classes.field }>
+              <AttachMoneyIcon className={ classes.balanceIcon } />
+              <div>
+                <Typography className={ classes.title }>Rewards Available:</Typography>
+                <div className={ classes.inline }>
+                  <Typography className={ classes.value }>{ formatCurrency(rewards ? rewards.faucet.faucet : 0) }</Typography>
+                  <Typography className={ classes.valueSymbol }>{ ibff ? ibff.symbol : '' }</Typography>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
+          </Grid>
+        </Grid>
       </div>
     </div>
   );
diff --git a/components/ffOverview/ffOverview.module.css b/components/ffOverview/ffOverview.module.css
index 19edf57..98b6831 100644
--- a/components/ffOverview/ffOverview.module.css
+++ b/components/ffOverview/ffOverview.module.css
@@ -20,7 +20,7 @@
 }
 
 .title {
-  background: rgba(256, 256, 256, 0.3);
+  background: rgba(256, 256, 256, 0.2);
   border-radius: 30px;
   padding: 4px 20px;
   width: fit-content;
@@ -49,7 +49,7 @@
 
 .balanceIcon {
   color: #fff;
-  border: 1px solid #fff;
+  border: 1px solid rgba(255,255,255,0.2);
   border-radius: 50%;
   padding: 16px;
   font-size: 70px !important;
diff --git a/components/ffStake/ffStake.js b/components/ffStake/ffStake.js
index b266db8..f20d7b1 100644
--- a/components/ffStake/ffStake.js
+++ b/components/ffStake/ffStake.js
@@ -261,6 +261,7 @@ export default function ffStake() {
               variant='contained'
               size='large'
               color='primary'
+              className={classes.buttonOverride}
               disabled={ depositApprovalNotRequired || approvalLoading }
               onClick={ onApprove }
               >
@@ -271,6 +272,7 @@ export default function ffStake() {
               variant='contained'
               size='large'
               color='primary'
+              className={classes.buttonOverride}
               disabled={ stakeLoading }
               onClick={ onStake }
               >
@@ -285,6 +287,7 @@ export default function ffStake() {
             <Button
               variant='contained'
               size='large'
+              className={classes.buttonOverride}
               color='primary'
               disabled={ stakeLoading }
               onClick={ onUnstake }
diff --git a/components/ffStake/ffStake.module.css b/components/ffStake/ffStake.module.css
index d1d7106..392ff28 100644
--- a/components/ffStake/ffStake.module.css
+++ b/components/ffStake/ffStake.module.css
@@ -2,7 +2,7 @@
   width: calc(100% - 48px);
   max-width: 1356px;
   display: flex;
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   position: absolute;
   top: 240px;
   left: 0;
@@ -13,11 +13,13 @@
 
 .topLeftButton {
   border-top-left-radius: 10px !important;
-  border-bottom: 1px solid rgba(128, 128, 128, 0.25) !important;
+  border-bottom: 1px solid rgba(104, 108, 122, 0.25) !important;
+  overflow: hidden;
 }
 
 .bottomLeftButton {
   border-bottom-left-radius: 10px !important;
+  overflow: hidden;
 }
 
 .inputsContainer {
@@ -83,7 +85,7 @@
 }
 
 .infoIcon {
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   color: rgba(128, 128, 128, 0.8);
   border-radius: 30px;
   font-size: 40px !important;
@@ -98,16 +100,21 @@
   margin-top: 32px;
 }
 
+.infoTexts {
+  font-size: 18px !important;
+}
+
 .infoText {
   color: rgba(128, 128, 128, 0.8);
-  font-size: 14px !important;
+  font-size: 18px !important;
+  margin-bottom: 8px !important;
 }
 
 .actionsContainer {
   display: grid;
   grid-gap: 12px;
   grid-template-columns: 1fr;
-  border-left: 1px solid rgba(128, 128, 128, 0.8);
+  border-left: 1px solid rgba(104, 108, 122, 0.25);
   padding: 0px 24px;
   width: 240px;
 }
@@ -144,12 +151,20 @@
 .button {
   border-radius: 0px !important;
   flex: 1;
-  border-right: 1px solid rgba(128, 128, 128, 0.25) !important;
+  border-right: 1px solid rgba(104, 108, 122, 0.25) !important;
   transition: none !important;
-  opacity: 0.5;
+  opacity: 1;
+  color: rgba(104, 108, 122, 0.5) !important;
 }
 
 .buttonActive {
   border-radius: 0px !important;
   flex: 1;
 }
+
+.buttonOverride {
+  background: #114DF0 !important;
+  color: #FFF !important;
+  font-weight: 700 !important;
+  box-shadow: none !important;
+}
diff --git a/components/ffStakeDistribution/ffStakeDistribution.module.css b/components/ffStakeDistribution/ffStakeDistribution.module.css
index e784ce2..f540a24 100644
--- a/components/ffStakeDistribution/ffStakeDistribution.module.css
+++ b/components/ffStakeDistribution/ffStakeDistribution.module.css
@@ -11,7 +11,7 @@
 }
 
 .lpOptionsContainer {
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   margin: 0 auto;
   display: flex;
   align-items: center;
@@ -63,8 +63,6 @@
   top: 12px;
 }
 
-
-
 .lpOption:nth-child(1):hover > div {
   color: #fff !important;
 }
@@ -73,3 +71,9 @@
   font-size: 60px !important;
   font-weight: bold !important;
 }
+
+@media screen and (max-width: 1200px) {
+  .container {
+    margin-top: 60px;
+  }
+}
diff --git a/components/ffStakeOverview/ffStakeOverview.module.css b/components/ffStakeOverview/ffStakeOverview.module.css
index 19edf57..98b6831 100644
--- a/components/ffStakeOverview/ffStakeOverview.module.css
+++ b/components/ffStakeOverview/ffStakeOverview.module.css
@@ -20,7 +20,7 @@
 }
 
 .title {
-  background: rgba(256, 256, 256, 0.3);
+  background: rgba(256, 256, 256, 0.2);
   border-radius: 30px;
   padding: 4px 20px;
   width: fit-content;
@@ -49,7 +49,7 @@
 
 .balanceIcon {
   color: #fff;
-  border: 1px solid #fff;
+  border: 1px solid rgba(255,255,255,0.2);
   border-radius: 50%;
   padding: 16px;
   font-size: 70px !important;
diff --git a/components/ffVest/ffVest.js b/components/ffVest/ffVest.js
index 300dd7e..11008d2 100644
--- a/components/ffVest/ffVest.js
+++ b/components/ffVest/ffVest.js
@@ -34,9 +34,9 @@ export default function ffVest() {
   return (
     <>
       {
-        !ibff && !veIBFF &&
-        <Loading />
-      }
+       !ibff && !veIBFF &&
+       <Loading />
+     }
       { ibff && veIBFF && BigNumber(ibff.balance).eq(0) && BigNumber(veIBFF.balance).eq(0) && BigNumber(veIBFF.vestingInfo.lockEnds).eq(0) &&  // no ibff or veibff
         <NoBalances ibff={ibff} veIBFF={veIBFF} />
       }
diff --git a/components/ffVest/ffVest.module.css b/components/ffVest/ffVest.module.css
index f284d39..1d1852a 100644
--- a/components/ffVest/ffVest.module.css
+++ b/components/ffVest/ffVest.module.css
@@ -3,7 +3,7 @@
   max-width: 1356px;
   display: flex;
   padding: 24px 0px;
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   position: absolute;
   top: 240px;
   left: 0;
@@ -16,7 +16,7 @@
   width: calc(100% - 48px);
   max-width: 1356px;
   display: flex;
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   position: absolute;
   top: 240px;
   left: 0;
@@ -25,6 +25,11 @@
   min-height: 180px;
 }
 
+.contentBox {
+  background: rgba(104,108,122,0.05);
+  padding: 30px;
+  border-radius: 5px;
+}
 
 .inputsContainer {
   display: grid;
@@ -78,8 +83,8 @@
 }
 
 .infoIcon {
-  border: 1px solid rgba(128, 128, 128, 0.8);
-  color: rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
+  color: rgba(104, 108, 122, 0.25);
   border-radius: 30px;
   font-size: 40px !important;
   padding: 6px;
@@ -94,7 +99,7 @@
 }
 
 .infoText {
-  color: rgba(128, 128, 128, 0.8);
+  color: rgba(104, 108, 122, 0.25);
   font-size: 14px !important;
 }
 
@@ -102,7 +107,7 @@
   display: grid;
   grid-gap: 12px;
   grid-template-columns: 1fr;
-  border-left: 1px solid rgba(128, 128, 128, 0.8);
+  border-left: 1px solid rgba(104, 108, 122, 0.25);
   padding: 0px 24px;
   width: 240px;
 }
@@ -132,7 +137,9 @@
 .title {
   font-size: 20px !important;
   font-weight: bold !important;
-  padding-bottom: 24px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(104,108,122,0.2);
+  margin-bottom: 20px !important;
 }
 .subTitle {
   font-size: 16px !important;
@@ -142,6 +149,7 @@
 }
 .paragraph {
   padding-bottom: 24px;
+  opacity: 0.8;
 }
 
 
diff --git a/components/ffVest/noBalances.js b/components/ffVest/noBalances.js
index 30ccfcb..7a7c18c 100644
--- a/components/ffVest/noBalances.js
+++ b/components/ffVest/noBalances.js
@@ -7,13 +7,13 @@ export default function noBalances({ ibff, veIBFF }) {
 
     <Paper elevation={0} className={ classes.container }>
       <div className={ classes.noBalancesContainer }>
-        <div>
+        <div className={classes.contentBox}>
           <Typography className={ classes.title }>What is vesting ibff?</Typography>
           <Typography className={ classes.paragraph }>The ibff token is the emission token of the Fixed Forex ecosystem.</Typography>
           <Typography className={ classes.paragraph }>Vesting your ibff in the Fixed Forex gauge means that you will be locking up your assets in order to gain a voting right in how the protocol emits rewards.</Typography>
           <Typography className={ classes.paragraph }>You will also be eligible to receive your portion of the weekly protocol fees.</Typography>
         </div>
-        <div>
+        <div className={classes.contentBox}>
           <Typography className={ classes.title }>How does vesting work?</Typography>
           <Typography className={ classes.paragraph }>Vesting your ibff in the Fixed Forex gauge requires you to specify 2 parameters:</Typography>
           <div className={ classes.paragraph }>
@@ -30,7 +30,7 @@ export default function noBalances({ ibff, veIBFF }) {
           </div>
         </div>
         <div>
-          <div>
+          <div className={classes.contentBox}>
             <Typography className={ classes.title }>How do I get ibff?</Typography>
             <Typography className={ classes.paragraph }>You can get ibff tokens by staking your Sushiswap LP tokens in the Faucet contract here.</Typography>
             <Typography className={ classes.paragraph }>You can swap your existing assets for ibff using Sushiswap.</Typography>
diff --git a/components/ffVoteCast/ffVoteCast.module.css b/components/ffVoteCast/ffVoteCast.module.css
index e039647..d138eda 100644
--- a/components/ffVoteCast/ffVoteCast.module.css
+++ b/components/ffVoteCast/ffVoteCast.module.css
@@ -3,7 +3,7 @@
   max-width: 1356px;
   display: flex;
   padding: 24px 0px;
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   position: absolute;
   top: 240px;
   left: 0;
@@ -14,7 +14,7 @@
 
 .topLeftButton {
   border-top-left-radius: 10px !important;
-  border-bottom: 1px solid rgba(128, 128, 128, 0.25) !important;
+  border-bottom: 1px solid rgba(104, 108, 122, 0.25) !important;
 }
 
 .bottomLeftButton {
@@ -84,7 +84,7 @@
 }
 
 .infoIcon {
-  border: 1px solid rgba(128, 128, 128, 0.8);
+  border: 1px solid rgba(104, 108, 122, 0.25);
   color: rgba(128, 128, 128, 0.8);
   border-radius: 30px;
   font-size: 40px !important;
@@ -108,7 +108,7 @@
   display: grid;
   grid-gap: 12px;
   grid-template-columns: 1fr;
-  border-left: 1px solid rgba(128, 128, 128, 0.8);
+  border-left: 1px solid rgba(104, 108, 122, 0.25);
   padding: 0px 24px;
   width: 240px;
 }
@@ -145,7 +145,7 @@
 .button {
   border-radius: 0px !important;
   flex: 1;
-  border-right: 1px solid rgba(128, 128, 128, 0.25) !important;
+  border-right: 1px solid rgba(104, 108, 122, 0.25) !important;
   transition: none !important;
   opacity: 0.5;
 }
diff --git a/components/ffVoteOverview/ffVoteOverview.module.css b/components/ffVoteOverview/ffVoteOverview.module.css
index 9d1e96e..e5bca02 100644
--- a/components/ffVoteOverview/ffVoteOverview.module.css
+++ b/components/ffVoteOverview/ffVoteOverview.module.css
@@ -23,7 +23,7 @@
 }
 
 .title {
-  background: rgba(256, 256, 256, 0.3);
+  background: rgba(256, 256, 256, 0.2);
   border-radius: 30px;
   padding: 4px 20px;
   width: fit-content;
@@ -52,7 +52,7 @@
 
 .balanceIcon {
   color: #fff;
-  border: 1px solid #fff;
+  border: 1px solid rgba(255,255,255,0.2);
   border-radius: 50%;
   padding: 16px;
   font-size: 70px !important;
@@ -62,5 +62,5 @@
 .pieField {
   position: absolute;
   right: 0px;
-  top: -165px;
+  top: -150px;
 }
diff --git a/components/ffVoteOverview/gaugeVotePie.js b/components/ffVoteOverview/gaugeVotePie.js
index 69b6eff..830bde1 100644
--- a/components/ffVoteOverview/gaugeVotePie.js
+++ b/components/ffVoteOverview/gaugeVotePie.js
@@ -2,8 +2,8 @@ import React, { PureComponent } from 'react';
 import { PieChart, Pie, Sector, Cell, ResponsiveContainer } from 'recharts';
 
 const COLORS = [
-  "#93003a",
-  "#b60046",
+  "#14E5DD",
+  "#C263ED",
   "#da0052",
   "#ff005e",
   "#f8682f",
@@ -54,8 +54,8 @@ const renderActiveShape = (props) => {
       />
       <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
       <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
-      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#999">{`${payload?.description}`}</text>
-      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
+      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#FFF">{`${payload?.description}`}</text>
+      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#FFF">
         {`${(percent * 100).toFixed(2)} %`}
       </text>
     </g>
diff --git a/components/header/header.module.css b/components/header/header.module.css
index 1bad655..240f009 100644
--- a/components/header/header.module.css
+++ b/components/header/header.module.css
@@ -235,6 +235,7 @@
 
 @media screen and (max-width: 1200px) {
   .headerContainer {
+    display: none;
   }
 }
 
diff --git a/components/navigation/navigation.js b/components/navigation/navigation.js
index d83162b..63cbff4 100644
--- a/components/navigation/navigation.js
+++ b/components/navigation/navigation.js
@@ -17,6 +17,8 @@ import HowToVoteIcon from '@material-ui/icons/HowToVote';
 import SpaceBarIcon from '@material-ui/icons/SpaceBar';
 import WarningIcon from '@material-ui/icons/Warning';
 
+import { SvgIcon } from "@material-ui/core";
+
 import Unlock from '../unlock';
 
 import stores from '../../stores';
@@ -159,12 +161,7 @@ function Navigation(props) {
           <HowToVoteIcon className={classes.icon} color={darkMode ? 'white' : 'rgb(33, 37, 41)'} altColor={darkMode ? 'rgb(33, 37, 41)' : 'white'} />,
           <HowToVoteIcon className={classes.icon} color={darkMode ? 'white' : 'rgb(33, 37, 41)'} altColor={darkMode ? 'rgb(33, 37, 41)' : 'white'} />,
         )}
-        {/*renderNav(
-          'Stake',
-          'stake',
-          <SpaceBarIcon className={classes.icon} color={darkMode ? 'white' : 'rgb(33, 37, 41)'} altColor={darkMode ? 'rgb(33, 37, 41)' : 'white'} />,
-          <SpaceBarIcon className={classes.icon} color={darkMode ? 'white' : 'rgb(33, 37, 41)'} altColor={darkMode ? 'rgb(33, 37, 41)' : 'white'} />,
-        )*/}
+        
       </React.Fragment>
     );
   };
@@ -220,7 +217,33 @@ function Navigation(props) {
     <Paper elevation={0} className={classes.navigationContainer}>
       <div className={classes.navigationHeading}>
         <a onClick={() => router.push('/')} className={classes.linkz}>
-          <Typography className={classes.ffTitle}>Fixed Forex</Typography>
+        <SvgIcon
+          viewBox="0 0 120 40"
+          fill="none"
+          width="120px"
+          height="26px"
+          className={classes.yearnLogo}
+        >
+        <g id="logo-light" transform="translate(-403.058 -247.08)">
+          <g id="Group_12" data-name="Group 12" transform="translate(436.787 261.49)">
+            <path id="Path_23" data-name="Path 23" d="M436.188,272.147V261.4h12.9v1.766H438.461v3.087h9.63v1.782h-9.63v4.116Z" transform="translate(-436.188 -261.231)"/>
+            <path id="Path_24" data-name="Path 24" d="M460.23,272.319a13.158,13.158,0,0,1-4.446-.661,5.98,5.98,0,0,1-2.8-1.9,4.673,4.673,0,0,1-.96-2.952,4.782,4.782,0,0,1,.96-3,5.943,5.943,0,0,1,2.788-1.912,15.376,15.376,0,0,1,8.916,0,5.977,5.977,0,0,1,2.8,1.9,4.766,4.766,0,0,1,.96,3,4.7,4.7,0,0,1-.96,2.972,5.984,5.984,0,0,1-2.8,1.9A13.226,13.226,0,0,1,460.23,272.319Zm0-1.766a8.1,8.1,0,0,0,4.415-.975,3.14,3.14,0,0,0,1.482-2.787,3.177,3.177,0,0,0-1.482-2.811A8.061,8.061,0,0,0,460.23,263a7.961,7.961,0,0,0-4.4.991,3.191,3.191,0,0,0-1.482,2.818,3.121,3.121,0,0,0,1.482,2.78A8.1,8.1,0,0,0,460.23,270.552Z" transform="translate(-435.902 -261.234)"/>
+            <path id="Path_25" data-name="Path 25" d="M472.576,272.147V261.4h9.366a4.78,4.78,0,0,1,3.179.921,3.452,3.452,0,0,1,.126,4.88c-.032.033-.063.065-.1.1a4.605,4.605,0,0,1-3.026.967l4.316,3.886h-3.01l-4.131-3.778h-4.454v3.778Zm8.985-9.047h-6.712v3.563h6.712q2.333,0,2.334-1.782t-2.334-1.781Z" transform="translate(-435.53 -261.232)"/>
+            <path id="Path_26" data-name="Path 26" d="M490.618,272.147V261.4h12.9v1.674h-10.69V265.8h9.691v1.676h-9.691v3h10.813v1.674Z" transform="translate(-435.204 -261.231)"/>
+            <path id="Path_27" data-name="Path 27" d="M509.092,272.147h-2.965l5.9-5.453-5.744-5.294h3.026l4.346,4.025,4.285-4.025h2.9l-5.774,5.294,5.9,5.453h-3.036L513.474,268Z" transform="translate(-434.924 -261.231)"/>
+          </g>
+          <g id="Group_5228" data-name="Group 5228">
+            <g id="Group_11" data-name="Group 11" transform="translate(436.801 247.108)">
+              <path id="Path_18" data-name="Path 18" d="M436.2,257.876V247.125h13.547v2.611H439.6v2.059h9.077v2.6H439.6v3.487Z" transform="translate(-436.202 -247.107)" fill="#114df0"/>
+              <path id="Path_19" data-name="Path 19" d="M455.678,257.876V247.125h3.394v10.751Z" transform="translate(-435.85 -247.107)" fill="#114df0"/>
+              <path id="Path_20" data-name="Path 20" d="M468.914,257.876h-4.378l5.652-5.438-5.514-5.314h4.5l3.36,3.348,3.241-3.348h4.3l-5.5,5.284,5.667,5.468H475.76l-3.487-3.487Z" transform="translate(-435.69 -247.107)" fill="#114df0"/>
+              <path id="Path_21" data-name="Path 21" d="M485.473,257.876V247.125H499.02v2.412H488.779V251.2h9.163v2.4h-9.163v1.874h10.353v2.412Z" transform="translate(-435.311 -247.107)" fill="#114df0"/>
+              <path id="Path_22" data-name="Path 22" d="M505.221,257.876V247.125h8.77a8.108,8.108,0,0,1,5.1,1.39,5.389,5.389,0,0,1,.366,7.612,5.178,5.178,0,0,1-.366.367,8.126,8.126,0,0,1-5.1,1.383Zm9.016-2.611a3.531,3.531,0,0,0,2.38-.676,2.617,2.617,0,0,0,.768-2.074,2.668,2.668,0,0,0-.768-2.1,3.516,3.516,0,0,0-2.38-.683h-5.622v5.529Z" transform="translate(-434.954 -247.108)" fill="#114df0"/>
+            </g>
+            <path id="Path_28" data-name="Path 28" d="M425.554,259.16l-7.146,8.219h-6.873l8.086-9.3h10.185a12.864,12.864,0,0,0-1.743-4.782h-6.147l-7.146,8.219H407.9l8.086-9.3h11.344a12.938,12.938,0,1,0,2.642,7.818c0-.3-.024-.584-.045-.876Z" transform="translate(-1)" fill="#114df0"/>
+          </g>
+        </g>
+        </SvgIcon>
         </a>
       </div>
 
@@ -233,13 +256,39 @@ function Navigation(props) {
               <CloseIcon fontSize={'large'} />
             </Button>
           </div>
-          <YearnIcon
-            color={darkMode ? 'white' : 'rgb(33, 37, 41)'}
-            altColor={darkMode ? 'rgb(255, 255, 255)' : 'white'}
-            width="123px"
-            height="42.3px"
-            className={classes.yearnLogo}
-          />
+
+          <div className={classes.navigationHeading}>
+            <a onClick={() => router.push('/')} className={classes.linkz}>
+            <SvgIcon
+              viewBox="0 0 120 40"
+              fill="none"
+              width="120px"
+              height="26px"
+              className={classes.yearnLogo}
+            >
+            <g id="logo-light" transform="translate(-403.058 -247.08)">
+              <g id="Group_12" data-name="Group 12" transform="translate(436.787 261.49)">
+                <path id="Path_23" data-name="Path 23" d="M436.188,272.147V261.4h12.9v1.766H438.461v3.087h9.63v1.782h-9.63v4.116Z" transform="translate(-436.188 -261.231)"/>
+                <path id="Path_24" data-name="Path 24" d="M460.23,272.319a13.158,13.158,0,0,1-4.446-.661,5.98,5.98,0,0,1-2.8-1.9,4.673,4.673,0,0,1-.96-2.952,4.782,4.782,0,0,1,.96-3,5.943,5.943,0,0,1,2.788-1.912,15.376,15.376,0,0,1,8.916,0,5.977,5.977,0,0,1,2.8,1.9,4.766,4.766,0,0,1,.96,3,4.7,4.7,0,0,1-.96,2.972,5.984,5.984,0,0,1-2.8,1.9A13.226,13.226,0,0,1,460.23,272.319Zm0-1.766a8.1,8.1,0,0,0,4.415-.975,3.14,3.14,0,0,0,1.482-2.787,3.177,3.177,0,0,0-1.482-2.811A8.061,8.061,0,0,0,460.23,263a7.961,7.961,0,0,0-4.4.991,3.191,3.191,0,0,0-1.482,2.818,3.121,3.121,0,0,0,1.482,2.78A8.1,8.1,0,0,0,460.23,270.552Z" transform="translate(-435.902 -261.234)"/>
+                <path id="Path_25" data-name="Path 25" d="M472.576,272.147V261.4h9.366a4.78,4.78,0,0,1,3.179.921,3.452,3.452,0,0,1,.126,4.88c-.032.033-.063.065-.1.1a4.605,4.605,0,0,1-3.026.967l4.316,3.886h-3.01l-4.131-3.778h-4.454v3.778Zm8.985-9.047h-6.712v3.563h6.712q2.333,0,2.334-1.782t-2.334-1.781Z" transform="translate(-435.53 -261.232)"/>
+                <path id="Path_26" data-name="Path 26" d="M490.618,272.147V261.4h12.9v1.674h-10.69V265.8h9.691v1.676h-9.691v3h10.813v1.674Z" transform="translate(-435.204 -261.231)"/>
+                <path id="Path_27" data-name="Path 27" d="M509.092,272.147h-2.965l5.9-5.453-5.744-5.294h3.026l4.346,4.025,4.285-4.025h2.9l-5.774,5.294,5.9,5.453h-3.036L513.474,268Z" transform="translate(-434.924 -261.231)"/>
+              </g>
+              <g id="Group_5228" data-name="Group 5228">
+                <g id="Group_11" data-name="Group 11" transform="translate(436.801 247.108)">
+                  <path id="Path_18" data-name="Path 18" d="M436.2,257.876V247.125h13.547v2.611H439.6v2.059h9.077v2.6H439.6v3.487Z" transform="translate(-436.202 -247.107)" fill="#114df0"/>
+                  <path id="Path_19" data-name="Path 19" d="M455.678,257.876V247.125h3.394v10.751Z" transform="translate(-435.85 -247.107)" fill="#114df0"/>
+                  <path id="Path_20" data-name="Path 20" d="M468.914,257.876h-4.378l5.652-5.438-5.514-5.314h4.5l3.36,3.348,3.241-3.348h4.3l-5.5,5.284,5.667,5.468H475.76l-3.487-3.487Z" transform="translate(-435.69 -247.107)" fill="#114df0"/>
+                  <path id="Path_21" data-name="Path 21" d="M485.473,257.876V247.125H499.02v2.412H488.779V251.2h9.163v2.4h-9.163v1.874h10.353v2.412Z" transform="translate(-435.311 -247.107)" fill="#114df0"/>
+                  <path id="Path_22" data-name="Path 22" d="M505.221,257.876V247.125h8.77a8.108,8.108,0,0,1,5.1,1.39,5.389,5.389,0,0,1,.366,7.612,5.178,5.178,0,0,1-.366.367,8.126,8.126,0,0,1-5.1,1.383Zm9.016-2.611a3.531,3.531,0,0,0,2.38-.676,2.617,2.617,0,0,0,.768-2.074,2.668,2.668,0,0,0-.768-2.1,3.516,3.516,0,0,0-2.38-.683h-5.622v5.529Z" transform="translate(-434.954 -247.108)" fill="#114df0"/>
+                </g>
+                <path id="Path_28" data-name="Path 28" d="M425.554,259.16l-7.146,8.219h-6.873l8.086-9.3h10.185a12.864,12.864,0,0,0-1.743-4.782h-6.147l-7.146,8.219H407.9l8.086-9.3h11.344a12.938,12.938,0,1,0,2.642,7.818c0-.3-.024-.584-.045-.876Z" transform="translate(-1)" fill="#114df0"/>
+              </g>
+            </g>
+            </SvgIcon>
+            </a>
+          </div>
+
           <div className={classes.navigationContentNavs}>{renderNavs()}</div>
           <div className={classes.headerThings}>
             <div className={classes.themeSelectContainer}>
diff --git a/components/navigation/navigation.module.css b/components/navigation/navigation.module.css
index 05c08ee..99837a3 100644
--- a/components/navigation/navigation.module.css
+++ b/components/navigation/navigation.module.css
@@ -247,8 +247,10 @@ a.linkz { cursor: pointer !important; }
 }
 
 .yearnLogo {
-  width: 95px !important;
-  height: 42.3px !important;
+  width: 110px !important;
+  height: 50px !important;
+  left: -3px;
+  position: relative;
 }
 
 .iconHack {
diff --git a/pages/asset/[address]/asset.module.css b/pages/asset/[address]/asset.module.css
index 2246866..a065223 100644
--- a/pages/asset/[address]/asset.module.css
+++ b/pages/asset/[address]/asset.module.css
@@ -6,7 +6,6 @@
   margin-top: 0px;
   padding-top: 60px;
   position: relative;
-  position: relative;
 }
 
 
@@ -15,9 +14,7 @@
 }
 
 @media screen and (max-width: 1200px) {
-
-}
-
-@media screen and (max-width: 1000px) {
-
+  .container {
+    padding-top: 0px;
+  }
 }
diff --git a/pages/asset/[address]/curve/curve.module.css b/pages/asset/[address]/curve/curve.module.css
index 2246866..e053c1b 100644
--- a/pages/asset/[address]/curve/curve.module.css
+++ b/pages/asset/[address]/curve/curve.module.css
@@ -15,7 +15,9 @@
 }
 
 @media screen and (max-width: 1200px) {
-
+  .container {
+    padding-top: 0px;
+  }
 }
 
 @media screen and (max-width: 1000px) {
diff --git a/pages/home/home.module.css b/pages/home/home.module.css
index 7c0684d..603be78 100644
--- a/pages/home/home.module.css
+++ b/pages/home/home.module.css
@@ -14,7 +14,9 @@
 }
 
 @media screen and (max-width: 1200px) {
-
+  .ffContainer {
+    padding-top: 0px;
+  }
 }
 
 @media screen and (max-width: 1000px) {
diff --git a/pages/stake/stake.module.css b/pages/stake/stake.module.css
index 7c0684d..8108427 100644
--- a/pages/stake/stake.module.css
+++ b/pages/stake/stake.module.css
@@ -6,7 +6,6 @@
   margin-top: 0px;
   padding-top: 60px;
   position: relative;
-  position: relative;
 }
 
 @media screen and (max-width: 1600px) {
@@ -14,7 +13,9 @@
 }
 
 @media screen and (max-width: 1200px) {
-
+  .ffContainer {
+    padding-top: 0px;
+  }
 }
 
 @media screen and (max-width: 1000px) {
diff --git a/pages/vest/index.js b/pages/vest/index.js
index aa000a9..3230608 100644
--- a/pages/vest/index.js
+++ b/pages/vest/index.js
@@ -6,7 +6,7 @@ import Layout from '../../components/layout/layout.js';
 import Vesting from '../../components/ffVest';
 import Overview from '../../components/ffOverview';
 import Claim from '../../components/ffClaim';
-import ClaimDistribution from '../../components/ffClaimDistirbution'; 
+import ClaimDistribution from '../../components/ffClaimDistirbution';
 
 import classes from './vest.module.css';
 
diff --git a/pages/vest/vest.module.css b/pages/vest/vest.module.css
index 7c0684d..8108427 100644
--- a/pages/vest/vest.module.css
+++ b/pages/vest/vest.module.css
@@ -6,7 +6,6 @@
   margin-top: 0px;
   padding-top: 60px;
   position: relative;
-  position: relative;
 }
 
 @media screen and (max-width: 1600px) {
@@ -14,7 +13,9 @@
 }
 
 @media screen and (max-width: 1200px) {
-
+  .ffContainer {
+    padding-top: 0px;
+  }
 }
 
 @media screen and (max-width: 1000px) {
diff --git a/pages/vote/vote.module.css b/pages/vote/vote.module.css
index 7c0684d..8108427 100644
--- a/pages/vote/vote.module.css
+++ b/pages/vote/vote.module.css
@@ -6,7 +6,6 @@
   margin-top: 0px;
   padding-top: 60px;
   position: relative;
-  position: relative;
 }
 
 @media screen and (max-width: 1600px) {
@@ -14,7 +13,9 @@
 }
 
 @media screen and (max-width: 1200px) {
-
+  .ffContainer {
+    padding-top: 0px;
+  }
 }
 
 @media screen and (max-width: 1000px) {
diff --git a/public/favicon.png b/public/favicon.png
index e6df727..c5b8636 100644
Binary files a/public/favicon.png and b/public/favicon.png differ
diff --git a/public/logo-dark.svg b/public/logo-dark.svg
new file mode 100644
index 0000000..d0a4e90
--- /dev/null
+++ b/public/logo-dark.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="119.769" height="25.91" viewBox="0 0 119.769 25.91">
+  <g id="logo-dark" transform="translate(-403.058 -247.08)">
+    <g id="Group_12" data-name="Group 12" transform="translate(436.787 261.49)">
+      <path id="Path_23" data-name="Path 23" d="M436.188,272.147V261.4h12.9v1.766H438.461v3.087h9.63v1.782h-9.63v4.116Z" transform="translate(-436.188 -261.231)" fill="#fff"/>
+      <path id="Path_24" data-name="Path 24" d="M460.23,272.319a13.158,13.158,0,0,1-4.446-.661,5.98,5.98,0,0,1-2.8-1.9,4.673,4.673,0,0,1-.96-2.952,4.782,4.782,0,0,1,.96-3,5.943,5.943,0,0,1,2.788-1.912,15.376,15.376,0,0,1,8.916,0,5.977,5.977,0,0,1,2.8,1.9,4.766,4.766,0,0,1,.96,3,4.7,4.7,0,0,1-.96,2.972,5.984,5.984,0,0,1-2.8,1.9A13.226,13.226,0,0,1,460.23,272.319Zm0-1.766a8.1,8.1,0,0,0,4.415-.975,3.14,3.14,0,0,0,1.482-2.787,3.177,3.177,0,0,0-1.482-2.811A8.061,8.061,0,0,0,460.23,263a7.961,7.961,0,0,0-4.4.991,3.191,3.191,0,0,0-1.482,2.818,3.121,3.121,0,0,0,1.482,2.78A8.1,8.1,0,0,0,460.23,270.552Z" transform="translate(-435.902 -261.234)" fill="#fff"/>
+      <path id="Path_25" data-name="Path 25" d="M472.576,272.147V261.4h9.366a4.78,4.78,0,0,1,3.179.921,3.452,3.452,0,0,1,.126,4.88c-.032.033-.063.065-.1.1a4.605,4.605,0,0,1-3.026.967l4.316,3.886h-3.01l-4.131-3.778h-4.454v3.778Zm8.985-9.047h-6.712v3.563h6.712q2.333,0,2.334-1.782t-2.334-1.781Z" transform="translate(-435.53 -261.232)" fill="#fff"/>
+      <path id="Path_26" data-name="Path 26" d="M490.618,272.147V261.4h12.9v1.674h-10.69V265.8h9.691v1.676h-9.691v3h10.813v1.674Z" transform="translate(-435.204 -261.231)" fill="#fff"/>
+      <path id="Path_27" data-name="Path 27" d="M509.092,272.147h-2.965l5.9-5.453-5.744-5.294h3.026l4.346,4.025,4.285-4.025h2.9l-5.774,5.294,5.9,5.453h-3.036L513.474,268Z" transform="translate(-434.924 -261.231)" fill="#fff"/>
+    </g>
+    <g id="Group_5228" data-name="Group 5228">
+      <g id="Group_11" data-name="Group 11" transform="translate(436.801 247.108)">
+        <path id="Path_18" data-name="Path 18" d="M436.2,257.876V247.125h13.547v2.611H439.6v2.059h9.077v2.6H439.6v3.487Z" transform="translate(-436.202 -247.107)" fill="#114df0"/>
+        <path id="Path_19" data-name="Path 19" d="M455.678,257.876V247.125h3.394v10.751Z" transform="translate(-435.85 -247.107)" fill="#114df0"/>
+        <path id="Path_20" data-name="Path 20" d="M468.914,257.876h-4.378l5.652-5.438-5.514-5.314h4.5l3.36,3.348,3.241-3.348h4.3l-5.5,5.284,5.667,5.468H475.76l-3.487-3.487Z" transform="translate(-435.69 -247.107)" fill="#114df0"/>
+        <path id="Path_21" data-name="Path 21" d="M485.473,257.876V247.125H499.02v2.412H488.779V251.2h9.163v2.4h-9.163v1.874h10.353v2.412Z" transform="translate(-435.311 -247.107)" fill="#114df0"/>
+        <path id="Path_22" data-name="Path 22" d="M505.221,257.876V247.125h8.77a8.108,8.108,0,0,1,5.1,1.39,5.389,5.389,0,0,1,.366,7.612,5.178,5.178,0,0,1-.366.367,8.126,8.126,0,0,1-5.1,1.383Zm9.016-2.611a3.531,3.531,0,0,0,2.38-.676,2.617,2.617,0,0,0,.768-2.074,2.668,2.668,0,0,0-.768-2.1,3.516,3.516,0,0,0-2.38-.683h-5.622v5.529Z" transform="translate(-434.954 -247.108)" fill="#114df0"/>
+      </g>
+      <path id="Path_28" data-name="Path 28" d="M425.554,259.16l-7.146,8.219h-6.873l8.086-9.3h10.185a12.864,12.864,0,0,0-1.743-4.782h-6.147l-7.146,8.219H407.9l8.086-9.3h11.344a12.938,12.938,0,1,0,2.642,7.818c0-.3-.024-.584-.045-.876Z" transform="translate(-1)" fill="#114df0"/>
+    </g>
+  </g>
+</svg>
diff --git a/public/logo-light.svg b/public/logo-light.svg
new file mode 100644
index 0000000..4bea83a
--- /dev/null
+++ b/public/logo-light.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="119.769" height="25.91" viewBox="0 0 119.769 25.91">
+  <g id="logo-light" transform="translate(-403.058 -247.08)">
+    <g id="Group_12" data-name="Group 12" transform="translate(436.787 261.49)">
+      <path id="Path_23" data-name="Path 23" d="M436.188,272.147V261.4h12.9v1.766H438.461v3.087h9.63v1.782h-9.63v4.116Z" transform="translate(-436.188 -261.231)"/>
+      <path id="Path_24" data-name="Path 24" d="M460.23,272.319a13.158,13.158,0,0,1-4.446-.661,5.98,5.98,0,0,1-2.8-1.9,4.673,4.673,0,0,1-.96-2.952,4.782,4.782,0,0,1,.96-3,5.943,5.943,0,0,1,2.788-1.912,15.376,15.376,0,0,1,8.916,0,5.977,5.977,0,0,1,2.8,1.9,4.766,4.766,0,0,1,.96,3,4.7,4.7,0,0,1-.96,2.972,5.984,5.984,0,0,1-2.8,1.9A13.226,13.226,0,0,1,460.23,272.319Zm0-1.766a8.1,8.1,0,0,0,4.415-.975,3.14,3.14,0,0,0,1.482-2.787,3.177,3.177,0,0,0-1.482-2.811A8.061,8.061,0,0,0,460.23,263a7.961,7.961,0,0,0-4.4.991,3.191,3.191,0,0,0-1.482,2.818,3.121,3.121,0,0,0,1.482,2.78A8.1,8.1,0,0,0,460.23,270.552Z" transform="translate(-435.902 -261.234)"/>
+      <path id="Path_25" data-name="Path 25" d="M472.576,272.147V261.4h9.366a4.78,4.78,0,0,1,3.179.921,3.452,3.452,0,0,1,.126,4.88c-.032.033-.063.065-.1.1a4.605,4.605,0,0,1-3.026.967l4.316,3.886h-3.01l-4.131-3.778h-4.454v3.778Zm8.985-9.047h-6.712v3.563h6.712q2.333,0,2.334-1.782t-2.334-1.781Z" transform="translate(-435.53 -261.232)"/>
+      <path id="Path_26" data-name="Path 26" d="M490.618,272.147V261.4h12.9v1.674h-10.69V265.8h9.691v1.676h-9.691v3h10.813v1.674Z" transform="translate(-435.204 -261.231)"/>
+      <path id="Path_27" data-name="Path 27" d="M509.092,272.147h-2.965l5.9-5.453-5.744-5.294h3.026l4.346,4.025,4.285-4.025h2.9l-5.774,5.294,5.9,5.453h-3.036L513.474,268Z" transform="translate(-434.924 -261.231)"/>
+    </g>
+    <g id="Group_5228" data-name="Group 5228">
+      <g id="Group_11" data-name="Group 11" transform="translate(436.801 247.108)">
+        <path id="Path_18" data-name="Path 18" d="M436.2,257.876V247.125h13.547v2.611H439.6v2.059h9.077v2.6H439.6v3.487Z" transform="translate(-436.202 -247.107)" fill="#114df0"/>
+        <path id="Path_19" data-name="Path 19" d="M455.678,257.876V247.125h3.394v10.751Z" transform="translate(-435.85 -247.107)" fill="#114df0"/>
+        <path id="Path_20" data-name="Path 20" d="M468.914,257.876h-4.378l5.652-5.438-5.514-5.314h4.5l3.36,3.348,3.241-3.348h4.3l-5.5,5.284,5.667,5.468H475.76l-3.487-3.487Z" transform="translate(-435.69 -247.107)" fill="#114df0"/>
+        <path id="Path_21" data-name="Path 21" d="M485.473,257.876V247.125H499.02v2.412H488.779V251.2h9.163v2.4h-9.163v1.874h10.353v2.412Z" transform="translate(-435.311 -247.107)" fill="#114df0"/>
+        <path id="Path_22" data-name="Path 22" d="M505.221,257.876V247.125h8.77a8.108,8.108,0,0,1,5.1,1.39,5.389,5.389,0,0,1,.366,7.612,5.178,5.178,0,0,1-.366.367,8.126,8.126,0,0,1-5.1,1.383Zm9.016-2.611a3.531,3.531,0,0,0,2.38-.676,2.617,2.617,0,0,0,.768-2.074,2.668,2.668,0,0,0-.768-2.1,3.516,3.516,0,0,0-2.38-.683h-5.622v5.529Z" transform="translate(-434.954 -247.108)" fill="#114df0"/>
+      </g>
+      <path id="Path_28" data-name="Path 28" d="M425.554,259.16l-7.146,8.219h-6.873l8.086-9.3h10.185a12.864,12.864,0,0,0-1.743-4.782h-6.147l-7.146,8.219H407.9l8.086-9.3h11.344a12.938,12.938,0,1,0,2.642,7.818c0-.3-.024-.584-.045-.876Z" transform="translate(-1)" fill="#114df0"/>
+    </g>
+  </g>
+</svg>
diff --git a/stores/fixedForexStore.js b/stores/fixedForexStore.js
index 4f7f926..0d2b3c0 100644
--- a/stores/fixedForexStore.js
+++ b/stores/fixedForexStore.js
@@ -652,7 +652,7 @@ class Store {
       return this.emitter.emit(FIXED_FOREX_STAKING_REWARD_CLAIMED, res);
     });
   }
- 
+
   _callClaimCurveReward = async (web3, account, asset, gasSpeed, callback) => {
     try {
       const gaugeContract = new web3.eth.Contract(abis.gaugeABI, asset.gauge.address)
diff --git a/theme/dark.js b/theme/dark.js
index 22813dc..9be4705 100644
--- a/theme/dark.js
+++ b/theme/dark.js
@@ -36,10 +36,10 @@ const theme = createTheme({
     },
     MuiTooltip: {
       tooltip: {
-        background: "#000 !important",
+        background: "#FFF !important",
         border: "1px solid #fff",
         borderRadius: "8px",
-        color: "#fff",
+        color: "#000",
         fontSize: "13px"
       }
     }
diff --git a/theme/light.js b/theme/light.js
index e159017..b4f8997 100644
--- a/theme/light.js
+++ b/theme/light.js
@@ -39,10 +39,10 @@ const theme = createTheme({
     },
     MuiTooltip: {
       tooltip: {
-        background: "#fff !important",
+        background: "#000 !important",
         border: "1px solid #000",
         borderRadius: "8px",
-        color: "#000",
+        color: "#FFF",
         fontSize: "13px"
       }
     }