diff --git a/components/WelcomeOverview/ffWelcomeOverview.module.css b/components/WelcomeOverview/ffWelcomeOverview.module.css
index 3106abf..d199c14 100644
--- a/components/WelcomeOverview/ffWelcomeOverview.module.css
+++ b/components/WelcomeOverview/ffWelcomeOverview.module.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');
+
 .container {
   width: 100%;
   /* height: calc(100vh - 80px); */
@@ -135,3 +137,43 @@
   font-size: 70px !important;
   margin-right: 24px !important;
 }
+
+.headBtnTxt {
+  font-family: 'Roboto Mono', monospace !important;
+  font-weight: 300 !important;
+}
+
+@media screen and (max-width: 600px) {
+  .welcomeTitle {
+    font: normal normal normal 36px/40px Inter Light !important;
+    margin: 100px 0 20px 0 !important;
+  }
+
+  .welcomeSubtitle {
+    font: normal normal normal 15px/22px Inter Light !important;
+    margin: auto !important;
+    margin-bottom: 40px !important;
+    max-width: 1080px;
+    opacity: 0.6 !important;
+  }
+
+  .headBtnTxt {
+    font-size: 16px !important;
+    font-family: 'Roboto Mono', monospace !important;
+    font-weight: 300 !important;
+  }
+
+  .connectBtn {
+    width: 100%;
+    border: 0px solid #234ce7 !important;
+    padding: 20px 30px !important;
+    margin-bottom: 20px !important;
+  }
+
+  .continueBtn {
+    width: 100%;
+    padding: 15px 30px !important;
+    margin-left: 0px !important;
+    text-transform: none !important;
+  }
+}
diff --git a/components/ffClaimAll/ffClaimAll.js b/components/ffClaimAll/ffClaimAll.js
index 2918bd8..cfe38bf 100644
--- a/components/ffClaimAll/ffClaimAll.js
+++ b/components/ffClaimAll/ffClaimAll.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Paper, Typography, Button, CircularProgress } from '@material-ui/core';
+import { Paper, Typography, Button, CircularProgress, SvgIcon, Grid } from '@material-ui/core';
 import BigNumber from 'bignumber.js';
 
 import classes from './ffClaimAll.module.css';
@@ -9,6 +9,15 @@ import RewardsTable from './ffClaimAllTable.js'
 import stores from '../../stores'
 import { FIXED_FOREX_UPDATED, FIXED_FOREX_CLAIM_ALL, FIXED_FOREX_ALL_CLAIMED, ERROR, IBEUR_ADDRESS } from '../../stores/constants';
 
+function NoRewardsIcon(props) {
+  const { color, className } = props;
+  return (
+    <SvgIcon viewBox="0 0 64 64" stroke-width="1" className={className}>
+    <g stroke-width="2" transform="translate(0, 0)"><path d="M15.029,48.971A24,24,0,0,1,48.971,15.029" fill="none" stroke="#686c7a" stroke-miterlimit="10" stroke-width="2" data-cap="butt" stroke-linecap="butt" stroke-linejoin="miter"></path><path d="M52.789,20A24.006,24.006,0,0,1,20,52.789" fill="none" stroke="#686c7a" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter"></path><line x1="60" y1="4" x2="4" y2="60" fill="none" stroke="#686c7a" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" data-color="color-2" stroke-linejoin="miter"></line></g>
+    </SvgIcon>
+  );
+}
+
 export default function ffClaimAll() {
 
   const [ claimLoading, setClaimLoading ] = useState(false)
@@ -112,22 +121,41 @@ export default function ffClaimAll() {
 
   return (
     <Paper elevation={0} className={ classes.container }>
-      <RewardsTable claimable={ claimable } crv={ crv } ibEUR={ ibEUR } rKP3R={ rKP3R } />
-      <div className={ classes.infoSection }>
+
+    {claimable.length>0 ?
+      <div className={classes.hasRewards}>
+        <RewardsTable claimable={ claimable } crv={ crv } ibEUR={ ibEUR } rKP3R={ rKP3R } />
+        <div className={ classes.infoSection }>
+        </div>
+        <div className={ classes.actionButtons }>
+          <Button
+            className={ classes.buttonOverride }
+            variant='contained'
+            size='large'
+            color='primary'
+            disabled={ claimLoading }
+            onClick={ onClaim }
+            >
+            <Typography className={ classes.actionButtonText }>{ claimLoading ? `Claiming` : `Claim all` }</Typography>
+            { claimLoading && <CircularProgress size={10} className={ classes.loadingCircle } /> }
+          </Button>
+        </div>
       </div>
-      <div className={ classes.actionButtons }>
-        <Button
-          className={ classes.buttonOverride }
-          variant='contained'
-          size='large'
-          color='primary'
-          disabled={ claimLoading }
-          onClick={ onClaim }
-          >
-          <Typography className={ classes.actionButtonText }>{ claimLoading ? `Claiming` : `Claim all` }</Typography>
-          { claimLoading && <CircularProgress size={10} className={ classes.loadingCircle } /> }
-        </Button>
+
+      :
+
+      <div className={classes.noRewards}>
+        <Grid container spacing={0} className={classes.centerGridRows}>
+          <Grid item lg={12} md={12} sm={12} xs={12}>
+            <NoRewardsIcon className={ classes.overviewIcon } />
+          </Grid>
+          <Grid item lg={12} md={12} sm={12} xs={12}>
+            <Typography variant="h5">You have no rewards</Typography>
+          </Grid>
+        </Grid>
       </div>
+    }
+
     </Paper>
   );
 }
diff --git a/components/ffClaimAll/ffClaimAll.module.css b/components/ffClaimAll/ffClaimAll.module.css
index 434e152..61f33c2 100644
--- a/components/ffClaimAll/ffClaimAll.module.css
+++ b/components/ffClaimAll/ffClaimAll.module.css
@@ -9,6 +9,22 @@
   padding: 0 0 10px 0px;
 }
 
+.hasRewards {
+  width: 100% !important;
+}
+
+.noRewards {
+  width: 100% !important;
+  text-align: center;
+  margin: 60px auto;
+}
+
+.overviewIcon {
+  font-size: 60px !important;
+  margin-bottom: 20px;
+  opacity: 0.4;
+}
+
 .actionButtons {
   padding: 0px 24px;
 }
@@ -18,8 +34,9 @@
 }
 
 .actionButtonText {
-  font-size: 12px !important;
+  font-size: 13px !important;
   text-transform: capitalize !important;
+  font-weight: 700 !important;
 }
 
 .loadingCircle {
@@ -46,11 +63,13 @@
 }
 
 .buttonOverride {
-  background: #114DF0 !important;
+  background:  MediumSeaGreen !important;
   color: #FFF !important;
   font-weight: 700 !important;
   box-shadow: none !important;
-  width: 216px;
+  width: 235px;
+  float: right;
+  margin-bottom: 20px !important;
 }
 
 @media screen and (max-width: 1200px) {
diff --git a/components/ffDashboardClaimAll/ffDashboardClaimAll.js b/components/ffDashboardClaimAll/ffDashboardClaimAll.js
index 582599a..04e37f3 100644
--- a/components/ffDashboardClaimAll/ffDashboardClaimAll.js
+++ b/components/ffDashboardClaimAll/ffDashboardClaimAll.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Paper, Typography, Button, CircularProgress } from '@material-ui/core';
+import { Paper, Typography, Button, CircularProgress, SvgIcon, Grid } from '@material-ui/core';
 import BigNumber from 'bignumber.js';
 import classes from './ffDashboardClaimAll.module.css';
 import RewardsTable from './ffDashboardClaimAllTable.js'
@@ -7,6 +7,15 @@ import RewardsTable from './ffDashboardClaimAllTable.js'
 import stores from '../../stores'
 import { FIXED_FOREX_UPDATED, FIXED_FOREX_CLAIM_ALL, FIXED_FOREX_ALL_CLAIMED, ERROR, IBEUR_ADDRESS } from '../../stores/constants';
 
+function NoRewardsIcon(props) {
+  const { color, className } = props;
+  return (
+    <SvgIcon viewBox="0 0 64 64" stroke-width="1" className={className}>
+    <g stroke-width="2" transform="translate(0, 0)"><path d="M15.029,48.971A24,24,0,0,1,48.971,15.029" fill="none" stroke="#686c7a" stroke-miterlimit="10" stroke-width="2" data-cap="butt" stroke-linecap="butt" stroke-linejoin="miter"></path><path d="M52.789,20A24.006,24.006,0,0,1,20,52.789" fill="none" stroke="#686c7a" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter"></path><line x1="60" y1="4" x2="4" y2="60" fill="none" stroke="#686c7a" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2" data-color="color-2" stroke-linejoin="miter"></line></g>
+    </SvgIcon>
+  );
+}
+
 export default function ffClaimAll() {
 
   const [ claimLoading, setClaimLoading ] = useState(false)
@@ -109,23 +118,45 @@ export default function ffClaimAll() {
   }
 
   return (
-    <Paper elevation={0} className={ classes.container }>
-      <RewardsTable claimable={ claimable } crv={ crv } ibEUR={ ibEUR } rKP3R={ rKP3R } />
-      <div className={ classes.infoSection }>
-      </div>
-      <div className={ classes.actionButtons }>
-        <Button
-          className={ classes.buttonOverride }
-          variant='contained'
-          size='large'
-          color='primary'
-          disabled={ claimLoading }
-          onClick={ onClaim }
-          >
-          <Typography className={ classes.actionButtonText }>{ claimLoading ? `Claiming` : `Claim all` }</Typography>
-          { claimLoading && <CircularProgress size={10} className={ classes.loadingCircle } /> }
-        </Button>
-      </div>
+    <Paper elevation={0} className={classes.container}>
+
+      {claimable.length>0 ?
+
+        <div className={classes.hasRewards}>
+          <RewardsTable claimable={ claimable } crv={ crv } ibEUR={ ibEUR } rKP3R={ rKP3R } />
+          <div className={ classes.actionButtons }>
+            <Button
+              className={ classes.buttonOverride }
+              variant='contained'
+              size='large'
+              color='primary'
+              disabled={ claimLoading }
+              onClick={ onClaim }
+              >
+              <Typography className={ classes.actionButtonText }>{ claimLoading ? `Claiming` : `Claim all` }</Typography>
+              { claimLoading && <CircularProgress size={10} className={ classes.loadingCircle } /> }
+            </Button>
+          </div>
+        </div>
+
+        :
+
+        <div className={classes.noRewards}>
+          <Grid container spacing={0} className={classes.centerGridRows}>
+            <Grid item lg={12} md={12} sm={12} xs={12}>
+              <NoRewardsIcon className={ classes.overviewIcon } />
+            </Grid>
+            <Grid item lg={12} md={12} sm={12} xs={12}>
+              <Typography variant="h5">You have no rewards</Typography>
+            </Grid>
+          </Grid>
+        </div>
+      }
+
+
+
+
+
     </Paper>
   );
 }
diff --git a/components/ffDashboardClaimAll/ffDashboardClaimAll.module.css b/components/ffDashboardClaimAll/ffDashboardClaimAll.module.css
index 3961df1..c931100 100644
--- a/components/ffDashboardClaimAll/ffDashboardClaimAll.module.css
+++ b/components/ffDashboardClaimAll/ffDashboardClaimAll.module.css
@@ -3,21 +3,27 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   border: 1px solid rgba(104, 108, 122, 0.25);
-  margin: auto;
-  margin-bottom: 0px;
-  padding: 20px;
-  height: calc(100% - 81px);
+  margin: 30px auto 0px auto !important;
+  padding: 0px 0 30px 0;
+  /* min-height: calc(100% - 81px); */
 }
 
-
 .actionButtons {
   padding: 0px;
+  text-align: center !important;
+}
+
+.overviewIcon {
+  font-size: 60px !important;
+  margin-bottom: 20px;
+  opacity: 0.4;
 }
 
-.actionButton {
-  width: 200px;
+.centerGridRows {
+  text-align: center !important;
+  margin: 60px auto;
 }
 
 .actionButtonText {
@@ -30,11 +36,6 @@
   margin-left: 6px !important;
 }
 
-.infoSection {
-  padding: 0px;
-  padding-bottom: 24px;
-}
-
 .helpText {
   margin-left: 6px !important;
   font-size: 20px !important;
@@ -52,13 +53,18 @@
   color: #FFF !important;
   font-weight: 700 !important;
   box-shadow: none !important;
-  width: 240px;
-  margin-right: 0px !important;
-  margin-bottom: 10px !important;
+  width: calc(100% - 140px);
+  /* margin-right: 0px !important; */
+  margin: 20px 0 0 0 !important;
 }
 
 @media screen and (max-width: 1200px) {
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 600px) {
+  .container {
+    margin-top: 60px;
+    padding: 20px;
+    height: calc(100%);
+  }
 }
diff --git a/components/ffDashboardMintOverview/ffDashboardMintOverview.module.css b/components/ffDashboardMintOverview/ffDashboardMintOverview.module.css
index fda179b..5722274 100644
--- a/components/ffDashboardMintOverview/ffDashboardMintOverview.module.css
+++ b/components/ffDashboardMintOverview/ffDashboardMintOverview.module.css
@@ -19,7 +19,7 @@
 }
 
 .value {
-  font-size: 30px !important;
+  font-size: 24px !important;
   font-weight: bold !important;
 }
 
@@ -125,12 +125,12 @@
 
 @media screen and (max-width: 1440px) {
   .value {
-    font-size: 32px !important;
+    font-size: 24px !important;
   }
 }
 
 @media screen and (max-width: 600px) {
   .container {
-    top: 115px;
+    margin: 0px 0 40px 0 !important;
   }
 }
diff --git a/components/ffDashboardOverview/ffDashboardOverview.module.css b/components/ffDashboardOverview/ffDashboardOverview.module.css
index 5e4027e..ef44b42 100644
--- a/components/ffDashboardOverview/ffDashboardOverview.module.css
+++ b/components/ffDashboardOverview/ffDashboardOverview.module.css
@@ -38,7 +38,7 @@
 }
 
 .value {
-  font-size: 30px !important;
+  font-size: 24px !important;
   font-weight: bold !important;
   text-align: left !important;
   width: 100%;
@@ -104,44 +104,8 @@
 	}
 }
 
-@media screen and (max-width: 1440px) {
-  /* .value {
-    font-size: 30px !important;
-    font-weight: bold !important;
-    color: #fff !important;
-  } */
-}
-
-@media screen and (max-width: 1200px) {
-  /* .container {
-    width: calc(100% - 0px);
-    margin: 0px auto 20px auto;
-    border-radius: 0px;
-    position: absolute;
-    top: 60px;
-    padding: 20px 0;
-  }
-
-  .fieldsContainer {
-    padding: 30px 20px;
-    align-items: center;
-    min-height: 100px;
+@media screen and (max-width: 600px) {
+  .container {
+    margin-bottom: 40px;
   }
-
-  .overviewIcon {
-    color: #fff;
-    font-size: 20px !important;
-  }
-
-  .iconWrap {
-    width: 50px;
-    height: 50px;
-    color: #fff;
-    border: 1px solid rgba(255,255,255,0.2);
-    border-radius: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 16px !important;
-  } */
 }
diff --git a/components/ffDashboardVoteOverview/ffDashboardVoteOverview.module.css b/components/ffDashboardVoteOverview/ffDashboardVoteOverview.module.css
index 9cde2ec..bbcfb83 100644
--- a/components/ffDashboardVoteOverview/ffDashboardVoteOverview.module.css
+++ b/components/ffDashboardVoteOverview/ffDashboardVoteOverview.module.css
@@ -25,7 +25,7 @@
 }
 
 .value {
-  font-size: 30px !important;
+  font-size: 24px !important;
   font-weight: bold !important;
 }
 
@@ -87,20 +87,7 @@
 }
 
 @media screen and (max-width: 1200px) {
-  /* .container {
-    width: calc(100%);
-    margin: 60px auto 40px auto;
-    border-radius: 0px;
-  } */
 }
 
 @media screen and (max-width: 960px) {
-  /* .pieField {
-    left: 0px;
-    top: -90px;
-  }
-
-  .container {
-    min-height: 400px;
-  } */
 }
diff --git a/components/ffMintOverview/ffOverview.js b/components/ffMintOverview/ffOverview.js
index 3fd5bf3..12a6ec9 100644
--- a/components/ffMintOverview/ffOverview.js
+++ b/components/ffMintOverview/ffOverview.js
@@ -181,12 +181,12 @@ export default function ffOverview() {
           <Grid item lg={4} md={4} sm={12} xs={12}>
             <div className={classes.overviewCard}>
             <Grid container spacing={0} className={classes.valueItem}>
-              <Grid item md={3} sm={2} xs={2}>
+              <Grid item md={3} sm={3} xs={3}>
                 <div className={classes.iconWrap}>
                   <LimitIcon className={ classes.overviewIcon } />
                 </div>
               </Grid>
-              <Grid item md={9} sm={10} xs={10}>
+              <Grid item md={9} sm={9} xs={9}>
                 <Typography className={ classes.title }>Borrow Limit Used</Typography>
                 <Typography className={ classes.value }>
                   {lendingBorrowLimit === null ? (
diff --git a/components/ffOptionsOverview/ffStakeOverview.module.css b/components/ffOptionsOverview/ffStakeOverview.module.css
index da1ba94..5864365 100644
--- a/components/ffOptionsOverview/ffStakeOverview.module.css
+++ b/components/ffOptionsOverview/ffStakeOverview.module.css
@@ -72,8 +72,8 @@
 }
 
 .iconWrap {
-  width: 80px;
-  height: 80px;
+  min-width: 80px;
+  min-height: 80px;
   color: #fff;
   border: 1px solid rgba(255,255,255,0.2);
   border-radius: 40px;
diff --git a/components/ffVoteOverview/ffVoteOverview.module.css b/components/ffVoteOverview/ffVoteOverview.module.css
index d617eac..c1d7ce9 100644
--- a/components/ffVoteOverview/ffVoteOverview.module.css
+++ b/components/ffVoteOverview/ffVoteOverview.module.css
@@ -23,7 +23,7 @@
   max-width: 1356px;
   display: flex;
   margin: 0 auto;
-  padding: 60px 40px;
+  padding: 40px 30px;
   align-items: center;
   justify-content: space-between;
   min-height: 100px;
@@ -100,9 +100,6 @@
     width: calc(100%);
     margin: 60px auto 40px auto;
     border-radius: 0px;
-    background: linear-gradient(-45deg, #23a6d5, #234ce7);
-  	background-size: 600% 600%;
-  	animation: gradient 35s ease infinite;
   }
 }
 
@@ -113,6 +110,30 @@
   }
 
   .container {
-    min-height: 400px;
+    min-height: 355px;
+    overflow: hidden;
+  }
+
+  .value {
+    font-size: 26px !important;
+    font-weight: bold !important;
+    color: #fff !important;
+  }
+
+  .overviewIcon {
+    color: #fff;
+    font-size: 24px !important;
+  }
+
+  .iconWrap {
+    min-width: 60px !important;
+    min-height: 60px !important;
+    color: #fff;
+    border: 1px solid rgba(255,255,255,0.2);
+    border-radius: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 24px !important;
   }
 }
diff --git a/components/header/header.js b/components/header/header.js
index b069e5e..0509f98 100644
--- a/components/header/header.js
+++ b/components/header/header.js
@@ -12,7 +12,7 @@ import Brightness2Icon from '@material-ui/icons/Brightness2';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import MonetizationOnIcon from '@material-ui/icons/MonetizationOn';
 
-import { CONNECT_WALLET, ACCOUNT_CONFIGURED, ACCOUNT_CHANGED, FIXED_FOREX_BALANCES_RETURNED, FIXED_FOREX_CLAIM_VECLAIM, FIXED_FOREX_VECLAIM_CLAIMED, FIXED_FOREX_UPDATED, ERROR } from '../../stores/constants';
+import { CONNECT_WALLET,CONNECTION_DISCONNECTED, ACCOUNT_CONFIGURED, ACCOUNT_CHANGED, FIXED_FOREX_BALANCES_RETURNED, FIXED_FOREX_CLAIM_VECLAIM, FIXED_FOREX_VECLAIM_CLAIMED, FIXED_FOREX_UPDATED, ERROR } from '../../stores/constants';
 
 import Unlock from '../unlock';
 
@@ -171,6 +171,17 @@ function Header(props) {
     stores.dispatcher.dispatch({ type: FIXED_FOREX_CLAIM_VECLAIM, content: {} })
   }
 
+  const switchChain =async()=>{
+    try {
+      await window.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId:'0x1' }],
+      });
+    } catch (switchError) {
+      console.log("switch error",switchError)
+    }
+  }
+
   return (
     <div>
       <Paper elevation={0} className={classes.headerContainer}>
@@ -277,6 +288,7 @@ function Header(props) {
           <Typography className={classes.ErrorTxt}>
             The chain you're connected to isn't supported. Please check that your wallet is connected to Ethereum Mainnet.
           </Typography>
+          <Button className={classes.switchNetworkBtn} variant="contained" onClick={()=>switchChain()} >Switch to Ethereum Mainnet</Button>
         </div>
       </div>
     ) : null}
diff --git a/components/header/header.module.css b/components/header/header.module.css
index 968fb6d..c0f103f 100644
--- a/components/header/header.module.css
+++ b/components/header/header.module.css
@@ -88,6 +88,19 @@
   margin-left: 10px !important;
 }
 
+.switchNetworkBtn {
+  margin-top: 30px !important;
+  text-transform: capitalize !important;
+  border-radius: 40px !important;
+  background: linear-gradient(-45deg, #23a6d5, #234ce7);
+	background-size: 200% 200%;
+	animation: gradient 35s ease infinite;
+  color: #FFF !important;
+  padding: 10px 25px !important;
+  font-weight: 700 !important;
+  font-size: 16px !important;
+}
+
 .prettyButton {
   font-weight: 700 !important;
   font-size: 12px !important;
diff --git a/components/navigation/navigation.js b/components/navigation/navigation.js
index 1510bf4..80414c6 100644
--- a/components/navigation/navigation.js
+++ b/components/navigation/navigation.js
@@ -295,7 +295,7 @@ function Navigation(props) {
   return (
     <Paper elevation={0} className={classes.navigationContainer}>
       <div className={classes.navigationHeading}>
-        <a onClick={() => router.push('/')} className={classes.linkz}>
+        <a onClick={() => router.push('/dashboard')} className={classes.linkz}>
           <SvgIcon
             viewBox="0 0 149 26"
             fill="none"
diff --git a/components/navigation/navigation.module.css b/components/navigation/navigation.module.css
index 89fad00..420c71f 100644
--- a/components/navigation/navigation.module.css
+++ b/components/navigation/navigation.module.css
@@ -358,6 +358,9 @@ a.linkz { cursor: pointer !important; }
     text-align: center !important;
   }
 
+  .navigationOptionNotSelected {
+    margin-right: 0px;
+  }
 
   .navigationOptionSelected,
   .navigationOptionSelectedWhite {
@@ -382,7 +385,7 @@ a.linkz { cursor: pointer !important; }
     /* color: #234ce7; */
     font-size: 13px !important;
     cursor: default;
-    margin: 0px auto !important;
+    margin: 10px 0 10px 0px !important;
     padding: 0 !important;
     text-align: center !important;
   }
@@ -396,4 +399,32 @@ a.linkz { cursor: pointer !important; }
     width: 100%;
     cursor: pointer;
   }
+
+  .navigationSubOptionContainer {
+    text-align: center !important;
+    justify-content: center;
+    padding: 0 !important;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .navigationOptionNotSelected {
+    margin-right: 0px;
+  }
+
+  .smallVersion,
+  .sectionDivider {
+    display: none;
+  }
+
+  .navigationSubOptionContainer {
+    text-align: center !important;
+    justify-content: center;
+    padding: 0 !important;
+  }
+
+  .sectionText {
+    margin: 10px 0 10px 0px !important;
+    padding: 0 !important;
+  }
 }
diff --git a/components/welcomeHeader/welcomeHeader.js b/components/welcomeHeader/welcomeHeader.js
index bd8f177..5eba1a5 100644
--- a/components/welcomeHeader/welcomeHeader.js
+++ b/components/welcomeHeader/welcomeHeader.js
@@ -12,7 +12,7 @@ import Brightness2Icon from '@material-ui/icons/Brightness2';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import MonetizationOnIcon from '@material-ui/icons/MonetizationOn';
 
-import { CONNECT_WALLET, ACCOUNT_CONFIGURED, ACCOUNT_CHANGED, FIXED_FOREX_BALANCES_RETURNED, FIXED_FOREX_CLAIM_VECLAIM, FIXED_FOREX_VECLAIM_CLAIMED, FIXED_FOREX_UPDATED, ERROR } from '../../stores/constants';
+import { CONNECT_WALLET,CONNECTION_DISCONNECTED, ACCOUNT_CONFIGURED, ACCOUNT_CHANGED, FIXED_FOREX_BALANCES_RETURNED, FIXED_FOREX_CLAIM_VECLAIM, FIXED_FOREX_VECLAIM_CLAIMED, FIXED_FOREX_UPDATED, ERROR } from '../../stores/constants';
 
 import Unlock from '../unlock';
 
@@ -167,6 +167,17 @@ function Header(props) {
     stores.dispatcher.dispatch({ type: FIXED_FOREX_CLAIM_VECLAIM, content: {} })
   }
 
+  const switchChain =async()=>{
+    try {
+      await window.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId:'0x1' }],
+      });
+    } catch (switchError) {
+      console.log("switch error",switchError)
+    }
+  }
+
   return (
     <div>
       <Paper elevation={0} className={classes.headerContainer}>
@@ -244,6 +255,7 @@ function Header(props) {
           <Typography className={classes.ErrorTxt}>
             The chain you're connected to isn't supported. Please check that your wallet is connected to Ethereum Mainnet.
           </Typography>
+          <Button className={classes.switchNetworkBtn} variant="contained" onClick={()=>switchChain()} >Switch to Ethereum Mainnet</Button>
         </div>
       </div>
     ) : null}
diff --git a/components/welcomeHeader/welcomeHeader.module.css b/components/welcomeHeader/welcomeHeader.module.css
index 09982c3..b06138d 100644
--- a/components/welcomeHeader/welcomeHeader.module.css
+++ b/components/welcomeHeader/welcomeHeader.module.css
@@ -26,6 +26,19 @@
   background: blue;
 }
 
+.switchNetworkBtn {
+  margin-top: 30px !important;
+  text-transform: capitalize !important;
+  border-radius: 40px !important;
+  background: linear-gradient(-45deg, #23a6d5, #234ce7);
+	background-size: 200% 200%;
+	animation: gradient 35s ease infinite;
+  color: #FFF !important;
+  padding: 10px 25px !important;
+  font-weight: 700 !important;
+  font-size: 16px !important;
+}
+
 .yearnLogo {
   width: 150px !important;
   height: 40px !important;
diff --git a/pages/dashboard/dashboard.module.css b/pages/dashboard/dashboard.module.css
index 911a5dc..77cfe07 100644
--- a/pages/dashboard/dashboard.module.css
+++ b/pages/dashboard/dashboard.module.css
@@ -62,6 +62,7 @@
   border-bottom: 1px solid rgba(104,108,122, 0.2) !important;
   padding: 0px;
   border-radius: 0 !important;
+  display: none;
 }
 
 .avatarWrap {
@@ -120,7 +121,9 @@
   margin-top: -80px;
 }
 
-.mainHeading {
+.mainHeading,
+.mainHeadingTop,
+.mainHeadingRewards {
   margin: 40px 0 20px 0 !important;
   text-align: left !important;
   font-size: 20px !important;
@@ -128,6 +131,10 @@
   /* width: calc(100% - 180px) !important; */
 }
 
+.mainHeadingRewards {
+  margin: 40px 0 38px 0 !important;
+}
+
 .mainDesc {
   margin: 20px auto 0px auto !important;
   text-align: left !important;
@@ -179,13 +186,20 @@
   }
 
   .ffContainer {
-    padding-top: 0px;
+    padding-top: 20px;
   }
 
-  .mainHeading {
+  .mainHeading,
+  .mainHeadingRewards {
     margin: 30px auto 40px auto !important;
     width: calc(100% - 80px) !important;
   }
+  .viewCollateral,
+  .viewVesting,
+  .viewVoting,
+  .viewRewards {
+    float: right;
+  }
 }
 
 @media screen and (max-width: 960px) {
@@ -196,6 +210,30 @@
 }
 
 @media screen and (max-width: 600px) {
+  .mainHeadingTop {
+    margin: 80px 0 0px 0 !important;
+    text-align: left !important;
+    font-size: 20px !important;
+  }
+
+  .viewCollateral {
+    margin: 80px 0 0px 15px !important;
+    float: right;
+  }
+
+  .mainHeading {
+    margin: 0px 0 0px 0 !important;
+    text-align: left !important;
+    font-size: 20px !important;
+  }
+
+  .viewVesting,
+  .viewVoting,
+  .viewRewards {
+    margin: 0px 0 0px 15px !important;
+    float: right;
+  }
+
   .mainHeadingNC {
     text-align: center !important;
     font-size: 24px !important;
@@ -209,4 +247,15 @@
   .overviewIcon {
     font-size: 80px !important;
   }
+
+  .connected {
+    width: calc(100% - 60px);
+    margin: 0 auto;
+    padding-top: 0px;
+    margin-bottom: 130px;
+  }
+
+  .accountInfo {
+    display: none;
+  }
 }
diff --git a/pages/dashboard/index.js b/pages/dashboard/index.js
index 6fd804a..db94b6d 100644
--- a/pages/dashboard/index.js
+++ b/pages/dashboard/index.js
@@ -1,10 +1,10 @@
 import Head from 'next/head';
 import { Typography, Button, Paper, SvgIcon, Grid, Avatar } from "@material-ui/core";
 import Layout from '../../components/layout/layout.js';
-import ClaimAll from '../../components/ffDashboardClaimAll';
+import MintOverview from '../../components/ffDashboardMintOverview';
 import Overview from '../../components/ffDashboardOverview';
 import VoteOverview from '../../components/ffDashboardVoteOverview';
-import MintOverview from '../../components/ffDashboardMintOverview';
+import ClaimAll from '../../components/ffDashboardClaimAll';
 
 import classes from './dashboard.module.css';
 
@@ -97,7 +97,7 @@ function Rewards({ changeTheme }) {
               <Grid item lg={9} md={12} sm={12} xs={12}>
                 <Grid container spacing={0}>
                   <Grid item lg={12} md={12} sm={12} xs={12}>
-                    <Typography className={classes.mainHeading} variant='h1'>Collateral</Typography>
+                    <Typography className={classes.mainHeadingTop} variant='h1'>Collateral</Typography>
                     <Paper elevation={0} onClick={() => router.push('/mint')} className={classes.viewCollateral}>View</Paper>
                     <MintOverview />
                   </Grid>
@@ -117,7 +117,7 @@ function Rewards({ changeTheme }) {
               </Grid>
 
               <Grid item lg={3} md={12} sm={12} xs={12}>
-              <Typography className={classes.mainHeading} variant='h1'>Rewards</Typography>
+              <Typography className={classes.mainHeadingRewards} variant='h1'>Rewards</Typography>
               <ClaimAll />
               </Grid>