diff --git a/rair-front/src/components/Navigation/Menu.tsx b/rair-front/src/components/Navigation/Menu.tsx
index 7420b671b..1ebc62205 100644
--- a/rair-front/src/components/Navigation/Menu.tsx
+++ b/rair-front/src/components/Navigation/Menu.tsx
@@ -14,6 +14,8 @@ import {
   BellIcon,
   CloseIconMobile,
   MenuIcon,
+  RairFavicon,
+  RairTokenLogo,
   VerifiedIcon
 } from '../../images';
 import {
@@ -270,6 +272,10 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
                       )}
                     </>
                     <div
+                      onClick={() => {
+                        handleMessageAlert('profileEdit');
+                        toggleMenu('nav');
+                      }}
                       className="mobileAikonWidget"
                       style={{
                         backgroundColor:
@@ -281,13 +287,9 @@ const MenuNavigation: React.FC<IMenuNavigation> = ({
                         className={`profile-user-balance ${
                           primaryColor === 'rhyno' ? 'rhyno' : ''
                         }`}>
-                        <div>
-                          {isLoadingBalance ? (
-                            <LoadingComponent size={12} />
-                          ) : (
-                            userBalance
-                          )}
-                        </div>
+                         <img style={{
+              marginRight: "5px"
+            }} src={primaryColor === '#dedede' ?  RairFavicon : RairTokenLogo} alt="logo" />
                         {currentChain && chainData[currentChain] && (
                           <img
                             src={chainData[currentChain]?.image}
diff --git a/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx b/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx
index 8e99ef894..8da159ca0 100644
--- a/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx
+++ b/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx
@@ -1,12 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 
-import MobileEditProfile from './MobileEditProfile';
-
 import useConnectUser from '../../../hooks/useConnectUser';
 import { NavFooter, NavFooterBox } from '../../Footer/FooterItems/FooterItems';
-import TalkSalesComponent from '../../Header/HeaderItems/TalkToSalesComponent/TalkSalesComponent';
 import { BackBtnMobileNav } from '../NavigationItems/NavigationItems';
+import chainData from '../../../utils/blockchainData';
+import { RairFavicon, RairTokenLogo } from '../../../images';
+import { TooltipBox } from '../../common/Tooltip/TooltipBox';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../../ducks';
+import { ContractsInitialType } from '../../../ducks/contracts/contracts.types';
+import { BigNumber, utils } from 'ethers';
+import useWeb3Tx from '../../../hooks/useWeb3Tx';
+import { formatEther } from 'ethers/lib/utils';
+import { TUsersInitialState } from '../../../ducks/users/users.types';
 
 interface IMobileNavigationList {
   messageAlert: string | null;
@@ -29,10 +36,58 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
 }) => {
   const hotDropsVar = import.meta.env.VITE_TESTNET;
 
+  const [userBalance, setUserBalance] = useState<string>('');
+  const [userRairBalance, setUserRairBalance] = useState<any>(
+    BigNumber.from(0)
+  );
+  const { userData } = useSelector<RootState, TUsersInitialState>((store) => store.userStore);
+
+  const { web3TxHandler } = useWeb3Tx();
+
+  const { erc777Instance, currentChain } = useSelector<
+  RootState,
+  ContractsInitialType
+>((store) => store.contractStore);
+
+const getBalance = useCallback(async () => {
+  if (currentUserAddress && erc777Instance?.provider) {
+    const balance =
+      await erc777Instance.provider.getBalance(currentUserAddress);
+
+    if (balance) {
+      const result = utils.formatEther(balance);
+      const final = Number(result.toString())?.toFixed(2)?.toString();
+
+      setUserBalance(final);
+    }
+  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+}, [currentUserAddress, erc777Instance, userData]);
+
+  const getUserRairBalance = useCallback(async () => {
+    if (!erc777Instance || userRairBalance?.gt(0)) {
+      return;
+    }
+    const result = await web3TxHandler(erc777Instance, 'balanceOf', [
+      currentUserAddress
+    ]);
+    if (result?._isBigNumber) {
+      setUserRairBalance(result);
+    }
+  }, [erc777Instance, currentUserAddress, userRairBalance, web3TxHandler]);
+
   const [copyEth, setCopyEth] = useState<boolean>(false);
 
   const { logoutUser } = useConnectUser();
 
+  useEffect(() => {
+    getBalance();
+  }, [getBalance])
+
+  useEffect(() => {
+    getUserRairBalance();
+  }, [getUserRairBalance]);
+
   useEffect(() => {
     setCopyEth(false);
 
@@ -80,71 +135,101 @@ const MobileNavigationList: React.FC<IMobileNavigationList> = ({
           className="nav-header-box-mobile"
           primaryColor={primaryColor}
           messageAlert={messageAlert}>
-          <BackBtnMobileNav onClick={() => setMessageAlert('profile')}>
-            <i className="fas fa-chevron-left"></i>
-          </BackBtnMobileNav>
-          <li>
-            Personal Profile <i className="fal fa-edit" />
-          </li>
-          <MobileEditProfile />
+          <div>
+          <div style={{
+              padding: "10px",
+              width: "90vw",
+              height: "150px",
+              color: `${primaryColor === '#dedede' ? "#000" : "#fff"}`,
+              display: "flex",
+              justifyContent: "space-around",
+              alignItems: 'center',
+              borderRadius: "12px",
+              border: "1px solid #000",
+              marginBottom: '10px'
+            }}> 
+              <div style={{
+                display: 'flex',
+                flexDirection: "column",
+                justifyContent: 'space-evenly'
+              }}>
+              <div style={{
+                display: "flex",
+                marginBottom: "15px"
+              }}>
+                <div>
+                  {userBalance ? userBalance : 0.00}
+                {/* {isLoadingBalance ? <LoadingComponent size={18} /> : userBalance} */}
+                </div>
+                <div>
+                {currentChain && chainData[currentChain] && (
+            <img style={{
+              height: "25px",
+              marginLeft: "15px"
+            }} src={chainData[currentChain]?.image} alt="logo" />
+          )}
+                </div>
+              </div>
+              <div style={{
+                display: "flex"
+              }}>
+                <div>
+                  {userRairBalance ? formatEther(userRairBalance) : 0.00}
+                {/* {isLoadingBalance ? <LoadingComponent size={18} /> : userBalance} */}
+                </div>
+                <div>
+                <img style={{
+              height: "25px",
+              marginLeft: "15px"
+            }} src={primaryColor === '#dedede' ?  RairFavicon : RairTokenLogo} alt="logo" />
+                </div>
+              </div>
+              </div>
+              <div style={{
+                marginLeft: "25px",
+                display: "flex",
+                flexDirection: "column",
+
+              }}>
+                <div style={{
+                  marginBottom: "10px"
+                }} className="user-new-balance-title-text">
+                <div style={{
+                  fontWeight: 'bold',
+                  fontSize: '12px'
+                }}>Exchange rate</div>
+                <div style={{
+                  fontSize: '14px'
+                }}>50K RAIR/bETH</div>
+                </div>
+                <div>
+                <TooltipBox position={'bottom'} title="Coming soon!">
+                  <button style={{
+                    background: "#7762D7",
+                    color: "#fff",
+                    border: "1px solid #000",
+                    borderRadius: "12px",
+                    width: "120px",
+                    height: '50px',
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                  }}>Top up</button>
+                  </TooltipBox>
+                </div>
+              </div>
+            </div>
+          </div>
+          {currentUserAddress && (
+            <li className="logout" onClick={logoutUser}>
+              <i className="fas fa-sign-out-alt"></i>Logout
+            </li>
+          )}
         </NavFooterBox>
       ) : (
         <NavFooterBox
           className="nav-header-box-mobile"
           primaryColor={primaryColor}>
-          {hotDropsVar !== 'true' && (
-            <li>
-              <a
-                href="https://etherscan.io/token/0xc76c3ebea0ac6ac78d9c0b324f72ca59da36b9df"
-                target={'_blank'}
-                rel="noreferrer">
-                Token
-              </a>
-            </li>
-          )}
-          {hotDropsVar !== 'true' ? (
-            <li>
-              <TalkSalesComponent
-                text={'Inquiries'}
-                classes={'inquiries-sales'}
-              />
-            </li>
-          ) : (
-            <>
-              <li>
-                <a
-                  target="_blank"
-                  href="https://www.myhotdrops.com/info"
-                  rel="noreferrer">
-                  Info
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.myhotdrops.com/collections"
-                  target="_blank"
-                  rel="noreferrer">
-                  Collections
-                </a>
-              </li>
-              <li>
-                <a
-                  target="_blank"
-                  href="https://www.myhotdrops.com/hotties"
-                  rel="noreferrer">
-                  Hotties
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://myhotdrops.shop/"
-                  target="_blank"
-                  rel="noreferrer">
-                  Shop
-                </a>
-              </li>
-            </>
-          )}
           {currentUserAddress && (
             <li className="logout" onClick={logoutUser}>
               <i className="fas fa-sign-out-alt"></i>Logout
diff --git a/rair-front/src/components/UserProfileSettings/PopUpSetting.tsx b/rair-front/src/components/UserProfileSettings/PopUpSetting.tsx
index 7b6a4d460..00f9fc816 100644
--- a/rair-front/src/components/UserProfileSettings/PopUpSetting.tsx
+++ b/rair-front/src/components/UserProfileSettings/PopUpSetting.tsx
@@ -3,17 +3,20 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { Popup } from 'reactjs-popup';
-import { utils } from 'ethers';
+import { BigNumber, utils } from 'ethers';
+import { formatEther } from 'ethers/lib/utils';
 
 import { RootState } from '../../ducks';
 import { ContractsInitialType } from '../../ducks/contracts/contracts.types';
 // import { TUsersInitialState } from '../../ducks/users/users.types';
 // React Redux types
 import useConnectUser from '../../hooks/useConnectUser';
-import { VerifiedIcon } from '../../images';
+import { RairFavicon, RairTokenLogo, VerifiedIcon } from '../../images';
 import chainData from '../../utils/blockchainData';
 import LoadingComponent from '../common/LoadingComponent';
+import { TooltipBox } from '../common/Tooltip/TooltipBox';
 
+import useWeb3Tx from './../../hooks/useWeb3Tx';
 import EditMode from './EditMode/EditMode';
 import defaultPictures from './images/defaultUserPictures.png';
 import {
@@ -33,6 +36,10 @@ const PopUpSettings = ({ showAlert, selectedChain, setTabIndexItems }) => {
   const [editMode, setEditMode] = useState(false);
   const [userBalance, setUserBalance] = useState<string>('');
   const [isLoadingBalance, setIsLoadingBalance] = useState<boolean>(false);
+  const [userBalanceTrigger, setUserBalanceTrigger] = useState<boolean>(false);
+  const [userRairBalance, setUserRairBalance] = useState<any>(
+    BigNumber.from(0)
+  );
 
   const hotdropsVar = import.meta.env.VITE_TESTNET;
 
@@ -46,14 +53,29 @@ const PopUpSettings = ({ showAlert, selectedChain, setTabIndexItems }) => {
   const { logoutUser } = useConnectUser();
 
   const { userData } = useSelector((store) => store.userStore);
-  const { erc777Instance, currentUserAddress, currentChain } = useSelector<
+
+  const { currentUserAddress, erc777Instance, currentChain } = useSelector<
     RootState,
     ContractsInitialType
-  >((state) => state.contractStore);
+  >((store) => store.contractStore);
 
-  // const { loginType } = useSelector<RootState, TUsersInitialState>(
-  //   (store) => store.userStore
-  // );
+  const { web3TxHandler } = useWeb3Tx();
+
+  const getUserRairBalance = useCallback(async () => {
+    if (!erc777Instance || userRairBalance?.gt(0)) {
+      return;
+    }
+    const result = await web3TxHandler(erc777Instance, 'balanceOf', [
+      currentUserAddress
+    ]);
+    if (result?._isBigNumber) {
+      setUserRairBalance(result);
+    }
+  }, [erc777Instance, currentUserAddress, userRairBalance, web3TxHandler]);
+
+  useEffect(() => {
+    getUserRairBalance();
+  }, [getUserRairBalance]);
 
   const onChangeEditMode = useCallback(() => {
     setEditMode((prev) => !prev);
@@ -144,7 +166,6 @@ const PopUpSettings = ({ showAlert, selectedChain, setTabIndexItems }) => {
   return (
     <>
       <button
-        onClick={() => setTriggerState((prev) => !prev)}
         className={`button profile-btn ${
           primaryColor === '#dedede' ? 'rhyno' : ''
         }`}
@@ -158,17 +179,23 @@ const PopUpSettings = ({ showAlert, selectedChain, setTabIndexItems }) => {
             primaryColor === '#dedede' ? 'rhyno' : ''
           }`}></div>
         <div
+          onClick={() => setUserBalanceTrigger((prev) => !prev)}
           className={`profile-user-balance ${
             primaryColor === '#dedede' ? 'rhyno' : ''
           }`}>
-          <div>
-            {isLoadingBalance ? <LoadingComponent size={18} /> : userBalance}
-          </div>
+          <img
+            style={{
+              marginRight: '5px'
+            }}
+            src={primaryColor === '#dedede' ? RairFavicon : RairTokenLogo}
+            alt="logo"
+          />
           {chainData[currentChain] && (
             <img src={chainData[currentChain]?.image} alt="logo" />
           )}
         </div>
         <div
+          onClick={() => setTriggerState((prev) => !prev)}
           className="profile-btn-img"
           style={{
             height: '100%',
@@ -214,6 +241,7 @@ const PopUpSettings = ({ showAlert, selectedChain, setTabIndexItems }) => {
           />
         )}
         <div
+          onClick={() => setTriggerState((prev) => !prev)}
           style={{
             display: 'flex',
             width: '140px',
@@ -248,6 +276,139 @@ const PopUpSettings = ({ showAlert, selectedChain, setTabIndexItems }) => {
             }}></i>
         </div>
       </button>
+      <Popup
+        className="popup-settings-block"
+        open={userBalanceTrigger}
+        position="bottom center"
+        closeOnDocumentClick
+        onClose={() => {
+          setUserBalanceTrigger(false);
+        }}>
+        <div
+          ref={settingBlockRef}
+          className={`user-popup ${primaryColor === '#dedede' ? 'rhyno' : ''}`}
+          style={{
+            background: `${
+              primaryColor === '#dedede'
+                ? '#fff'
+                : `color-mix(in srgb, ${primaryColor}, #888888)`
+            }`,
+            borderRadius: 16,
+            filter: 'drop-shadow(0.4px 0.5px 1px black)',
+            border: `${
+              primaryColor === '#dedede' ? '1px solid #DEDEDE' : 'none'
+            }`,
+            marginTop: `${selectedChain && showAlert ? '65px' : '12px'}`
+          }}>
+          <div
+            style={{
+              padding: '10px',
+              color: `${primaryColor === '#dedede' ? '#000' : '#fff'}`,
+              display: 'flex'
+            }}>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-evenly'
+              }}>
+              <div
+                style={{
+                  display: 'flex',
+                  marginBottom: '15px'
+                }}>
+                <div>
+                  {isLoadingBalance ? (
+                    <LoadingComponent size={18} />
+                  ) : (
+                    userBalance
+                  )}
+                </div>
+                <div>
+                  {chainData[currentChain] && (
+                    <img
+                      style={{
+                        height: '25px',
+                        marginLeft: '15px'
+                      }}
+                      src={chainData[currentChain]?.image}
+                      alt="logo"
+                    />
+                  )}
+                </div>
+              </div>
+              <div
+                style={{
+                  display: 'flex'
+                }}>
+                <div>
+                  {isLoadingBalance ? (
+                    <LoadingComponent size={18} />
+                  ) : (
+                    formatEther(userRairBalance)
+                  )}
+                </div>
+                <div>
+                  <img
+                    style={{
+                      height: '25px',
+                      marginLeft: '15px'
+                    }}
+                    src={
+                      primaryColor === '#dedede' ? RairFavicon : RairTokenLogo
+                    }
+                    alt="logo"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              style={{
+                marginLeft: '25px',
+                display: 'flex',
+                flexDirection: 'column'
+              }}>
+              <div
+                style={{
+                  marginBottom: '10px'
+                }}
+                className="user-new-balance-title-text">
+                <div
+                  style={{
+                    fontWeight: 'bold',
+                    fontSize: '12px'
+                  }}>
+                  Exchange rate
+                </div>
+                <div
+                  style={{
+                    fontSize: '14px'
+                  }}>
+                  50K RAIR/bETH
+                </div>
+              </div>
+              <div>
+                <TooltipBox position={'bottom'} title="Coming soon!">
+                  <button
+                    style={{
+                      background: '#7762D7',
+                      color: '#fff',
+                      border: '1px solid #000',
+                      borderRadius: '12px',
+                      width: '120px',
+                      height: '50px',
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center'
+                    }}>
+                    Top up
+                  </button>
+                </TooltipBox>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Popup>
       <Popup
         className="popup-settings-block"
         open={triggerState}
diff --git a/rair-front/src/images/index.tsx b/rair-front/src/images/index.tsx
index 253aece65..b4352b24a 100644
--- a/rair-front/src/images/index.tsx
+++ b/rair-front/src/images/index.tsx
@@ -35,6 +35,7 @@ import rairTechLogoWhite from './rairTechLogoWhite.webp';
 import rarible from './rarible-logo.webp';
 import verifiedIcon from './verify-icon.png';
 import yotiLogo from './yoti-logo.png';
+import tokenLogoRair from './favicon2.png';
 
 // images
 export const bgLogoBlack = blackBg;
@@ -65,6 +66,7 @@ export const LennyWait = lennyGif;
 export const KidWait = kigGif;
 export const YotiLogo = yotiLogo;
 export const RairBackground = newDefaultRairBG;
+export const RairTokenLogo = tokenLogoRair;
 
 // Icons
 export const discrodIconNoBorder = discordIconWhiteNoBorder;