diff --git a/src/ui/src/components/BorrowModal/index.js b/src/ui/src/components/BorrowModal/index.js
index d20cee22..88d53d30 100644
--- a/src/ui/src/components/BorrowModal/index.js
+++ b/src/ui/src/components/BorrowModal/index.js
@@ -22,7 +22,7 @@ import { useStyles } from './style';
 const BorrowModal = (props) => {
     const classes = useStyles();
     const dispatch = useDispatch();
-    const { open, close, tokenDetails } = props;
+    const { open, close, tokenDetails, tab } = props;
 
     const { account } = useSelector((state) => state.addWallet);
     const { protocolAddresses, comptroller } = useSelector((state) => state.nodes);
@@ -239,6 +239,7 @@ const BorrowModal = (props) => {
                     setTokenValue(tokenAmount);
                     setCurrentTab(tabValue);
                 }}
+                tab={tab}
             />
         </>
     );
diff --git a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
index 98550363..bda8076a 100644
--- a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
@@ -14,7 +14,7 @@ import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import { Typography } from '@mui/material';
+import { Button, tooltipClasses, Typography } from '@mui/material';
 
 // eslint-disable-next-line object-curly-newline
 import { decimalify, formatTokenData, nFormatter, roundValue, truncateNum } from '../../util';
@@ -35,19 +35,12 @@ const BorrowedTokenTable = (props) => {
     const [tokenDetails, setTokenDetails] = useState();
     const [openMktModal, setMktModal] = useState(false);
     const [loading, setLoading] = useState(true);
+    const [openRepayTab, setRepayTab] = useState(false);
 
-    const checkLimitUsed = (data) => {
-        const val = new BigNumber(
-            decimalify(data.outstandingLoan * data.usdPrice, decimals[data.title], decimals[data.title]),
-        )
-            .dividedBy(new BigNumber(totalCollateral))
-            .multipliedBy(100)
-            .toNumber();
-        return val > 0.01 ? truncateNum(val) : '<0.01';
-    };
 
     const closeModal = () => {
         setMktModal(false);
+        setRepayTab(false);
     };
 
     const handleClickMktModal = (item) => {
@@ -55,6 +48,12 @@ const BorrowedTokenTable = (props) => {
         setMktModal(true);
     };
 
+    const handleClickRepay = (item) => {
+        setTokenDetails(item);
+        setMktModal(true);
+        setRepayTab(true);
+    };
+
     const borrowedData = formatTokenData(tableData);
 
     useEffect(() => {
@@ -68,14 +67,14 @@ const BorrowedTokenTable = (props) => {
 
     return (
         <TableContainer className={`${classes.root} ${classes.tableCon}`}>
-            {tokenDetails && <BorrowModal open={openMktModal} close={closeModal} tokenDetails={tokenDetails} />}
+            {tokenDetails && <BorrowModal open={openMktModal} close={closeModal} tokenDetails={tokenDetails} tab={openRepayTab ? 'two' : undefined} />}
             <Table>
                 <TableHead>
                     <TableRow>
                         <TableCell> Token </TableCell>
                         <TableCell align="center"> APY </TableCell>
                         <TableCell align="center"> Balance </TableCell>
-                        <TableCell align="center"> Limit used </TableCell>
+                        <TableCell align="center"> </TableCell>
                     </TableRow>
                 </TableHead>
                 <TableBody>
@@ -122,12 +121,33 @@ const BorrowedTokenTable = (props) => {
                                 </TableCell>
                                 <TableCell align="center">
                                     <LightTooltip
-                                        title={`${decimalify(
-                                            data.outstandingLoan,
-                                            decimals[data.title],
-                                            decimals[data.title],
-                                        )} ${data.title}`}
-                                        placement="bottom"
+                                        sx={{
+                                            [`& .${tooltipClasses.tooltip}`]: {
+                                                marginBottom: '11px !important'
+                                            }
+                                        }}
+                                        title={ <>
+                                            <Typography className={classes.tooltipPrimaryText}>
+                                                {`${decimalify(
+                                                    data.outstandingLoan,
+                                                    decimals[data.title],
+                                                    decimals[data.title]
+                                                ).replace(/\.?0+$/, '')} ${data.title}`}
+                                            </Typography>
+                                            <Typography className={classes.tooltipSecondaryText}>
+                                                                                    $
+                                                {data.balanceUnderlying > 0
+                                                    ? nFormatter(
+                                                        decimalify(
+                                                            (data.outstandingLoan * data.usdPrice).toString(),
+                                                            decimals[data.title],
+                                                            decimals[data.title]
+                                                        )
+                                                    )
+                                                    : '0.00'}
+                                            </Typography>
+                                        </>}
+                                        placement="top"
                                     >
                                         <span className={classes.clearFont}>
                                             {data.outstandingLoan > 0 &&
@@ -159,8 +179,10 @@ const BorrowedTokenTable = (props) => {
                                         )}
                                     </span>
                                 </TableCell>
-                                <TableCell align="center">
-                                    <span className={classes.clearFont}>{checkLimitUsed(data)}%</span>
+                                <TableCell align="center" className={classes.repayCell}>
+                                    <Button variant='contained' className={classes.detailsButton} onClick={() => handleClickRepay(data)}>
+                                        R<Typography textTransform={'lowercase'}>epay</Typography>
+                                    </Button>
                                 </TableCell>
                             </TableRow>
                         ))}
diff --git a/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx b/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx
index 107952dc..21c7128f 100644
--- a/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx
@@ -14,7 +14,7 @@ import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import { Typography } from '@mui/material';
+import { Button, Typography, tooltipClasses } from '@mui/material';
 
 import TableSkeleton from '../Skeleton';
 import Switch from '../Switch';
@@ -42,11 +42,13 @@ const SuppliedTokenTable = (props) => {
     const [collModal, setCollModal] = useState(false);
     const [disableCollModal, setDisableCollModal] = useState(false);
     const [loading, setLoading] = useState(true);
+    const [openWithdrawTab, setWithdrawTab] = useState(false);
 
     const closeModal = () => {
         setSupplyModal(false);
         setDisableCollModal(false);
         setCollModal(false);
+        setWithdrawTab(false);
     };
 
     const handleClickMktModal = (item, event) => {
@@ -63,6 +65,12 @@ const SuppliedTokenTable = (props) => {
         }
     };
 
+    const handleClickWithdraw = (item) => {
+        setTokenDetails(item);
+        setSupplyModal(true);
+        setWithdrawTab(true);
+    };
+
     const suppliedData = formatTokenData(tableData);
 
     useEffect(() => {
@@ -78,7 +86,7 @@ const SuppliedTokenTable = (props) => {
         <TableContainer className={`${classes.root} ${classes.tableCon}`}>
             {tokenDetails && (
                 <>
-                    <SupplyModal open={openSupplyModal} close={closeModal} tokenDetails={tokenDetails} />
+                    <SupplyModal open={openSupplyModal} close={closeModal} tokenDetails={tokenDetails} tab={openWithdrawTab ? 'two' : undefined}/>
                     <DisableCollateralModal open={disableCollModal} close={closeModal} tokenDetails={tokenDetails} />
                     <CollateralizeModal open={collModal} close={closeModal} tokenDetails={tokenDetails} />
                 </>
@@ -93,6 +101,7 @@ const SuppliedTokenTable = (props) => {
                             Collateral{' '}
                             <img src={questionCircleIcon} alt={'questionIcon'} className={classes.questionCircleIcon} />
                         </TableCell>
+                        <TableCell align='center'></TableCell>
                     </TableRow>
                 </TableHead>
                 <TableBody>
@@ -130,7 +139,7 @@ const SuppliedTokenTable = (props) => {
                                     <span>
                                         {data.rate > 0
                                             ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
-                                              new BigNumber(data.rate).gt(new BigNumber(10000000000000000))
+                                            new BigNumber(data.rate).gt(new BigNumber(10000000000000000))
                                                 ? roundValue(decimalify(data.rate, 18))
                                                 : '<0.01'
                                             : '0'}
@@ -139,12 +148,34 @@ const SuppliedTokenTable = (props) => {
                                 </TableCell>
                                 <TableCell align="center">
                                     <LightTooltip
-                                        title={`${decimalify(
-                                            data.balanceUnderlying,
-                                            decimals[data.title],
-                                            decimals[data.title],
-                                        )} ${data.title}`}
-                                        placement="bottom"
+                                        sx={{
+                                            [`& .${tooltipClasses.tooltip}`]: {
+                                                marginBottom: '11px !important'
+                                            }
+                                        }}
+                                        title={
+                                            <>
+                                                <Typography className={classes.tooltipPrimaryText}>
+                                                    {`${decimalify(
+                                                        data.balanceUnderlying,
+                                                        decimals[data.title],
+                                                        decimals[data.title]
+                                                    ).replace(/\.?0+$/, '')} ${data.title}`}
+                                                </Typography>
+                                                <Typography className={classes.tooltipSecondaryText}>
+                                            $
+                                                    {data.balanceUnderlying > 0
+                                                        ? nFormatter(
+                                                            decimalify(
+                                                                (data.balanceUnderlying * data.usdPrice).toString(),
+                                                                decimals[data.title],
+                                                                decimals[data.title]
+                                                            )
+                                                        )
+                                                        : '0.00'}
+                                                </Typography>
+                                            </>}
+                                        placement="top"
                                     >
                                         <span className={classes.clearFont}>
                                             {data.balanceUnderlying >= 1 &&
@@ -181,6 +212,11 @@ const SuppliedTokenTable = (props) => {
                                 <TableCell align="center" className={classes.switchPadding}>
                                     <Switch data={data} />
                                 </TableCell>
+                                <TableCell className={classes.withdrawCell}>
+                                    <Button variant='contained' className={classes.detailsButton} onClick={() => handleClickWithdraw(data)}>
+                                        W<Typography textTransform={'lowercase'}>ithdraw</Typography>
+                                    </Button>
+                                </TableCell>
                             </TableRow>
                         ))}
                 </TableBody>
diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts
index 3a4241eb..43a490ea 100644
--- a/src/ui/src/components/Dashboard/style.ts
+++ b/src/ui/src/components/Dashboard/style.ts
@@ -302,25 +302,8 @@ export const useStyles = makeStyles({
             padding: '21px 35px 21px 30px !important',
         },
     },
-    collateralPadding: {
-        '@media(min-width: 968px)': {
-            paddingRight: '.5rem !important',
-        },
-        '@media(min-width: 1200px)': {
-            paddingRight: '2rem !important',
-        },
-    },
-    switchPadding: {
-        '@media(min-width: 501px)': {
-            paddingRight: '2.5rem !important',
-        },
-        '@media(min-width: 968px)': {
-            paddingRight: '2rem !important',
-        },
-        '@media(min-width: 1200px)': {
-            paddingRight: '4rem !important',
-        },
-    },
+    collateralPadding: {},
+    switchPadding: {},
     stickyCellLeft: {
         position: 'sticky',
         zIndex: 2,
@@ -343,5 +326,28 @@ export const useStyles = makeStyles({
         '.MuiTableRow-root:hover &': {
             backgroundColor: '#F5FCFE',
         }
+    },
+    tooltipPrimaryText: {
+        fontSize: '16px',
+        fontWeight: 600,
+        lineHeight: '22.4px',
+        textAlign: 'center'
+    },
+    tooltipSecondaryText: {
+        fontSize: '14px',
+        fontWeight: 400,
+        lineHeight: '19.6px',
+        textAlign: 'center'
+    },
+    withdrawCell: {
+        '@media(min-width: 1200px)': {
+            paddingRight: '1.5rem !important',
+        },
+        width: '17%',
+    },
+    repayCell: {
+        '@media(min-width: 1200px)': {
+            paddingRight: '1.5rem !important',
+        },
     }
 });
diff --git a/src/ui/src/components/DashboardModal/index.js b/src/ui/src/components/DashboardModal/index.js
index b8baeef9..b615ac4a 100644
--- a/src/ui/src/components/DashboardModal/index.js
+++ b/src/ui/src/components/DashboardModal/index.js
@@ -9,7 +9,7 @@ import { BigNumber } from 'bignumber.js';
 import { decimals } from 'tezoslendingplatformjs';
 
 import Box from '@mui/material/Box';
-import { Button, Typography } from '@mui/material';
+import { Button, Typography, tooltipClasses } from '@mui/material';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -92,6 +92,12 @@ const DashboardModal = (props) => {
         setTabValue(newValue);
     };
 
+    useEffect(() => {
+        if (tab) {
+            setTabValue(tab);
+        }
+    }, [tab]);
+
     useEffect(() => {
         setTokenValue('');
     }, [close]);
@@ -116,6 +122,11 @@ const DashboardModal = (props) => {
                         <div>
                             <img src={tokenDetails.logo} alt="logo" className={classes.img} />
                             <LightTooltip
+                                sx={{
+                                    [`& .${tooltipClasses.tooltip}`]: {
+                                        marginTop: '0px !important'
+                                    }
+                                }}
                                 title={
                                     tokenDetails.walletBalance
                                         ? `${decimalify(
@@ -221,6 +232,11 @@ const DashboardModal = (props) => {
                             </Grid>
                             {mainModal ? (
                                 <LightTooltip
+                                    sx={{
+                                        [`& .${tooltipClasses.tooltip}`]: {
+                                            marginTop: '0px !important'
+                                        }
+                                    }}
                                     title={`${
                                         tabValue === 'one'
                                             ? tokenDetails.supply.balanceUnderlying > 0
@@ -266,6 +282,11 @@ const DashboardModal = (props) => {
                                 </LightTooltip>
                             ) : (
                                 <LightTooltip
+                                    sx={{
+                                        [`& .${tooltipClasses.tooltip}`]: {
+                                            marginTop: '0px !important'
+                                        }
+                                    }}
                                     title={`${decimalify(
                                         tokenDetails.balanceUnderlying,
                                         decimals[tokenDetails.title],
diff --git a/src/ui/src/components/Header/style.js b/src/ui/src/components/Header/style.js
index f9dbf858..ca765129 100644
--- a/src/ui/src/components/Header/style.js
+++ b/src/ui/src/components/Header/style.js
@@ -215,25 +215,33 @@ export const useStyles = makeStyles({
     },
     progressBarOne: {
         paddingTop: '7px',
-        paddingRight: '1.875rem',
-        '@media(max-width: 1024px)': {
-            paddingRight: '0.9375rem'
+        '@media(min-width: 600px)': {
+            paddingRight: '1rem',
         },
-        '@media(max-width: 900px)': {
-            paddingRight: '2rem'
+        '@media(min-width: 900px)': {
+            paddingRight: '2rem',
         },
-        '@media(max-width: 899px)': {
-            paddingRight: '0rem'
+        '@media(min-width: 1024px)': {
+            paddingRight: '2rem',
         },
-        '@media(max-width: 768px)': {
-            paddingRight: '0rem'
+        '@media(min-width: 1200px)': {
+            paddingRight: '3rem',
         },
-        '@media(max-width: 501px)': {
-            paddingRight: '0rem'
-        }
     },
     progressBarTwo: {
-        paddingTop: '7px'
+        paddingTop: '7px',
+        '@media(min-width: 600px)': {
+            paddingRight: '1rem',
+        },
+        '@media(min-width: 900px)': {
+            paddingRight: '2rem',
+        },
+        '@media(min-width: 1024px)': {
+            paddingLeft: '0.9375rem',
+        },
+        '@media(min-width: 1200px)': {
+            paddingLeft: '0.875rem',
+        },
     },
     addWalletCon: {
         paddingTop: '2.1875rem',
diff --git a/src/ui/src/components/ProgressBar/index.js b/src/ui/src/components/ProgressBar/index.js
index 865c1181..a0e584dc 100644
--- a/src/ui/src/components/ProgressBar/index.js
+++ b/src/ui/src/components/ProgressBar/index.js
@@ -2,7 +2,11 @@
 // eslint-disable-next-line no-use-before-define
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
+
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
+import { Typography, tooltipClasses } from '@mui/material';
+import LightTooltip from '../Tooltip/LightTooltip';
+
 
 import { progressBarStyles, tooltipStyles } from './style';
 import { truncateNum } from '../../util';
@@ -48,15 +52,27 @@ export const ToolTipProgressBars = (props) => {
     const tooltipClass = tooltipStyles();
     const { value, height } = props;
     return (
-        <Tooltip
-            title={ value ? `${(value > 100) ? 100 : truncateNum(value)}% Used` : ''}
+        <LightTooltip
+            sx={{
+                [`& .${tooltipClasses.tooltip}`]: {
+                    marginBottom: '15px !important'
+                }
+            }}
+            title={
+                <>
+                    <Typography className={tooltipClass.tooltipPrimaryText}>Borrow Power Used</Typography>
+                    <Typography className={tooltipClass.tooltipSecondaryText}>{ value ? `${value > 100 ? 100 : truncateNum(value)}%` : ''}</Typography>
+                </>
+            }
             placement="top"
+            disableHoverListener={value === 0}
             classes={tooltipClass}
+            arrow
         >
             <Box sx={{ flexGrow: 1 }}>
                 <ProgressBar height={height} valuePercentage={value} />
             </Box>
-        </Tooltip>
+        </LightTooltip>
     );
 };
 
diff --git a/src/ui/src/components/ProgressBar/style.js b/src/ui/src/components/ProgressBar/style.js
index 7a956c56..e99c3a3b 100644
--- a/src/ui/src/components/ProgressBar/style.js
+++ b/src/ui/src/components/ProgressBar/style.js
@@ -2,10 +2,17 @@ import { makeStyles } from '@mui/styles';
 
 // eslint-disable-next-line import/prefer-default-export
 export const tooltipStyles = makeStyles({
-    tooltip: {
-        backgroundColor: 'transparent',
-        color: '#000',
-        marginBottom: '0 !important'
+    tooltipPrimaryText: {
+        fontSize: '16px',
+        fontWeight: 600,
+        lineHeight: '22.4px',
+        textAlign: 'center'
+    },
+    tooltipSecondaryText: {
+        fontSize: '20px',
+        fontWeight: 400,
+        lineHeight: '24px',
+        textAlign: 'center'
     }
 });
 
diff --git a/src/ui/src/components/StackedBars/index.tsx b/src/ui/src/components/StackedBars/index.tsx
index 63a08210..b004e6fe 100644
--- a/src/ui/src/components/StackedBars/index.tsx
+++ b/src/ui/src/components/StackedBars/index.tsx
@@ -4,9 +4,11 @@
 import React from 'react';
 
 import Box from '@mui/material/Box';
-
-import { useStyles, LightTooltip } from './style';
-import { truncateNum } from '../../util';
+import { tooltipClasses, Typography } from '@mui/material';
+import { decimals } from 'tezoslendingplatformjs';
+import { useStyles } from './style';
+import { decimalify } from '../../util';
+import LightTooltip from '../Tooltip/LightTooltip';
 
 const StackedBars = (props) => {
     const classes = useStyles();
@@ -17,8 +19,34 @@ const StackedBars = (props) => {
         <>
             <Box className={classes.progressBar}>
                 {composition.assets && composition.assets.map((bar) => (
-                    <LightTooltip key={bar.title} title={`${truncateNum(bar.rate)}% ${bar.title}`} placement="bottom">
-                        <Box data-size="5" className={classes.progress} style= {{ background: `${bar.color}`, width: `${bar.rate}%` }}/>
+                    <LightTooltip
+                        sx={{
+                            [`& .${tooltipClasses.tooltip}`]: {
+                                marginBottom: '15px !important'
+                            }
+                        }}
+                        key={bar.title}
+                        title={
+                            <>
+                                <Typography className={classes.tooltipPrimaryText}>
+                                    {`${decimalify(
+                                        bar.balanceUnderlying,
+                                        decimals[bar.title],
+                                        decimals[bar.title]
+                                    ).replace(/\.?0+$/, '')} ${bar.title}`}
+                                </Typography>
+                                <Typography className={classes.tooltipSecondaryText}>
+                                    {`$${bar.balanceUnderlyingUsd.toFixed(2)}`}
+                                </Typography>
+                            </>
+                        }
+                        placement="top"
+                    >
+                        <Box
+                            data-size="5"
+                            className={classes.progress}
+                            style={{ background: `${bar.color}`, width: `${bar.rate}%` }}
+                        />
                     </LightTooltip>
                 ))}
             </Box>
diff --git a/src/ui/src/components/StackedBars/style.tsx b/src/ui/src/components/StackedBars/style.tsx
index 240d1f82..9dae36da 100644
--- a/src/ui/src/components/StackedBars/style.tsx
+++ b/src/ui/src/components/StackedBars/style.tsx
@@ -10,25 +10,20 @@ export const useStyles = makeStyles({
         width: '100%',
         maxWidth: '100%'
     },
-
     progress: {
         height: '40px',
         transition: 'width 0.5s ease-in'
-    }
-});
-
-export const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
-    <Tooltip {...props} classes={{ popper: className }} arrow/>
-))(({ theme }) => ({
-    [`& .${tooltipClasses.tooltip}`]: {
-        backgroundColor: theme.palette.common.white,
-        color: '#000',
-        fontSize: 12,
-        letterSpacing: '0.005em',
-        marginTop: '9px !important',
-        boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.25)'
     },
-    [`& .${tooltipClasses.arrow}`]: {
-        color: '#fff'
+    tooltipPrimaryText: {
+        fontSize: '16px',
+        fontWeight: 600,
+        lineHeight: '22.4px',
+        textAlign: 'center'
+    },
+    tooltipSecondaryText: {
+        fontSize: '14px',
+        fontWeight: 400,
+        lineHeight: '19.6px',
+        textAlign: 'center'
     }
-}));
+});
diff --git a/src/ui/src/components/SupplyModal/index.js b/src/ui/src/components/SupplyModal/index.js
index 96c6aa4d..cf0f1ddc 100644
--- a/src/ui/src/components/SupplyModal/index.js
+++ b/src/ui/src/components/SupplyModal/index.js
@@ -21,7 +21,7 @@ const SupplyModal = (props) => {
     const classes = useStyles();
     const dispatch = useDispatch();
     const {
-        open, close, tokenDetails, onClick
+        open, close, tokenDetails, onClick, tab
     } = props;
 
     const { account } = useSelector((state) => state.addWallet);
@@ -193,6 +193,7 @@ const SupplyModal = (props) => {
                 errorText={(currentTab === 'one') ? buttonOne.errorText : buttonTwo.errorText}
                 disabled={(currentTab === 'one') ? buttonOne.disabled : buttonTwo.disabled}
                 getProps={(tokenAmount, tabValue) => { setTokenValue(tokenAmount); setCurrentTab(tabValue); }}
+                tab={tab}
             />
         </>
     );
diff --git a/src/ui/src/components/Tooltip/LightTooltip.tsx b/src/ui/src/components/Tooltip/LightTooltip.tsx
index 0b9daa77..83d77f05 100644
--- a/src/ui/src/components/Tooltip/LightTooltip.tsx
+++ b/src/ui/src/components/Tooltip/LightTooltip.tsx
@@ -8,16 +8,21 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
     <Tooltip {...props} classes={{ popper: className }} arrow/>
 ))(() => ({
     [`& .${tooltipClasses.tooltip}`]: {
-        backgroundColor: '#F9FAFC',
+        backgroundColor: 'rgba(255, 255, 255, 1)',
         color: '#000',
         fontSize: 12,
         letterSpacing: '0.005em',
-        marginTop: '0px !important',
-        boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.5)'
+        boxShadow: `0px 4px 4px -1px rgba(12, 12, 13, 0.05),
+            0px 4px 4px -1px rgba(12, 12, 13, 0.1)`,
+        border: '3px solid #2157E4',
+        borderRadius: 8,
     },
     [`& .${tooltipClasses.arrow}`]: {
-        color: '#F9FAFC',
-        filter: 'drop-shadow(0px 2px 4px 0px rgba(0, 0, 0, 0.5))'
+        color: 'rgba(255, 255, 255, 1)',
+        filter: 'drop-shadow(0px 2px 4px 0px rgba(0, 0, 0, 0.5))',
+        '&:before': {
+            border: '3px solid #2157E4',
+        }
     }
 }));