diff --git a/packages/extension-polkagate/src/components/AccountIcons.tsx b/packages/extension-polkagate/src/components/AccountIcons.tsx
index 18de05bf9..d4c92deb6 100644
--- a/packages/extension-polkagate/src/components/AccountIcons.tsx
+++ b/packages/extension-polkagate/src/components/AccountIcons.tsx
@@ -46,14 +46,14 @@ function AccountIcons ({ address, identiconTheme, isSubId, judgements, prefix }:
   }, [address]);
 
   return (
-    <Grid container direction='column' sx={{ ml: '8px', width: '17%' }}>
+    <Grid container direction='column' sx={{ m: '7px 0px 0px 8px', width: '17%' }}>
       <Grid item m='auto' width='fit-content'>
         <Identicon
           iconTheme={identiconTheme}
           isSubId={isSubId}
           judgement={judgements}
           prefix={prefix}
-          size={40}
+          size={35}
           value={formatted || address}
         />
       </Grid>
diff --git a/packages/extension-polkagate/src/components/FormatPrice.tsx b/packages/extension-polkagate/src/components/FormatPrice.tsx
index 869d6d66d..befc8c1a9 100644
--- a/packages/extension-polkagate/src/components/FormatPrice.tsx
+++ b/packages/extension-polkagate/src/components/FormatPrice.tsx
@@ -58,6 +58,16 @@ export function nFormatter (num: number, decimalPoint: number) {
 const DECIMAL_POINTS_FOR_CRYPTO_AS_CURRENCY = 4;
 const SMALL_DECIMALS_FONT_SIZE_REDUCTION = 20;
 
+const DecimalPart = ({ value, withCountUp }: { value: string | number, withCountUp: boolean | undefined }) => (
+  withCountUp
+    ? <CountUp
+      duration={1}
+      end={Number(getDecimal(value))}
+      prefix={'.'}
+    />
+    : <>{`.${getDecimal(value)}`}</>
+);
+
 function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, fontWeight, height, lineHeight = 1, mt = '0px', num, price, sign, skeletonHeight = 15, textAlign = 'left', textColor, width = '90px', withCountUp, withSmallDecimal }: Props): React.ReactElement<Props> {
   const currency = useCurrency();
   const theme = useTheme();
@@ -135,16 +145,10 @@ function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, f
               lineHeight={lineHeight}
               sx={{ color: theme.palette.secondary.contrastText }}
             >
-              {withCountUp
-                ? <CountUp
-                  duration={1}
-                  end={Number(getDecimal(total))}
-                  prefix={'.'}
-                />
-                : <>
-                  {`.${getDecimal(total)}`}
-                </>
-              }
+              <DecimalPart
+                value={total}
+                withCountUp={withCountUp}
+              />
             </Typography>
           }
         </Stack>
diff --git a/packages/extension-polkagate/src/components/MenuItem.tsx b/packages/extension-polkagate/src/components/MenuItem.tsx
index 93b638eeb..59570c7bc 100644
--- a/packages/extension-polkagate/src/components/MenuItem.tsx
+++ b/packages/extension-polkagate/src/components/MenuItem.tsx
@@ -12,7 +12,7 @@ import { noop } from '../util/utils';
 interface Props {
   disabled?: boolean;
   icon?: string;
-  iconComponent?: JSX.Element;
+  iconComponent?: React.JSX.Element;
   text: string;
   children?: React.ReactElement<Props>;
   onClick?: MouseEventHandler<HTMLDivElement>;
@@ -35,8 +35,8 @@ export default function MenuItem ({ children, disabled = false, fontSize, icon,
 
   return (
     <>
-      <Grid alignItems='center' color={disabled ? '#4B4B4B' : 'inherit'} container item justifyContent='space-between' my='4px' onClick={disabled ? noop : onClick} pl={pl} py={py} sx={{ cursor: disabled ? '' : 'pointer', ...(withHoverEffect ? hoverEffectStyles : {}) }} textAlign='left' xs={12}>
-        <Grid alignItems='center' container item xs sx={{ flexWrap: 'nowrap' }}>
+      <Grid alignItems='center' color={disabled ? '#4B4B4B' : 'inherit'} container item justifyContent='space-between' my='4px' onClick={disabled ? noop : onClick} pl={pl} py={py} sx={{ cursor: disabled ? 'default' : 'pointer', ...(withHoverEffect ? hoverEffectStyles : {}) }} textAlign='left' xs={12}>
+        <Grid alignItems='center' container item sx={{ flexWrap: 'nowrap' }} xs>
           <Grid alignItems='center' container item xs={1}>
             {iconComponent ??
               <Box
diff --git a/packages/extension-polkagate/src/components/RemoteNodeSelector.tsx b/packages/extension-polkagate/src/components/RemoteNodeSelector.tsx
index 4ff866ebb..bfc62f900 100644
--- a/packages/extension-polkagate/src/components/RemoteNodeSelector.tsx
+++ b/packages/extension-polkagate/src/components/RemoteNodeSelector.tsx
@@ -40,7 +40,7 @@ export default function RemoteNodeSelector ({ address, genesisHash }: Props): Re
     <>
       {endpoint &&
         <Select
-          _mt='10px'
+          _mt='3px'
           defaultValue={undefined}
           label={t('Remote node')}
           onChange={onChangeEndpoint}
diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx
index 478e2651b..062785cbb 100644
--- a/packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx
+++ b/packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx
@@ -18,7 +18,7 @@ import { AccountContext, ActionContext, Warning } from '../../components';
 import { useAccountAssets, useBalances, useCurrency, useFullscreen, useInfo, usePrices, useTokenPrice, useTranslation } from '../../hooks';
 import { getValue } from '../../popup/account/util';
 import HistoryModal from '../../popup/history/modal/HistoryModal';
-import { AccountLabel } from '../../popup/home/AccountLabel';
+import AccountLabel from '../../popup/home/AccountLabel';
 import ReceiveModal from '../../popup/receive/ReceiveModal';
 import { ASSET_HUBS, GOVERNANCE_CHAINS, STAKING_CHAINS } from '../../util/constants';
 import getParentNameSuri from '../../util/getParentNameSuri';
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx
index f241971e1..1818d9110 100644
--- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx
+++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx
@@ -15,7 +15,7 @@ import React, { useContext, useMemo, useState } from 'react';
 import { AccountContext } from '../../../components';
 import { useAccountAssets, useChain } from '../../../hooks';
 import QuickActionFullScreen from '../../../partials/QuickActionFullScreen';
-import { AccountLabel } from '../../../popup/home/AccountLabel';
+import AccountLabel from '../../../popup/home/AccountLabel';
 import getParentNameSuri from '../../../util/getParentNameSuri';
 import AccountInformationForHome from './AccountInformationForHome';
 
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx
index 5fb4fbd18..bfef1ce4e 100644
--- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx
+++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx
@@ -18,13 +18,22 @@ export interface CurrencyItemType {
   sign: string;
 }
 
-export default function Currency (): React.ReactElement {
+interface Props {
+  borderColor?: string;
+  color?: string;
+  dialogLeft?: number;
+  fontSize?: string;
+  height?: string;
+  minWidth?: string;
+}
+
+function Currency ({ borderColor, color, dialogLeft = 260, fontSize = '22px', height, minWidth }: Props): React.ReactElement {
   const theme = useTheme();
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [currencyToShow, setCurrencyToShow] = useState<CurrencyItemType | undefined>();
 
-  const textColor = useMemo(() => theme.palette.mode === 'dark' ? theme.palette.text.primary : theme.palette.text.secondary, [theme.palette.mode, theme.palette.text.primary, theme.palette.text.secondary]);
+  const textColor = useMemo(() => color || (theme.palette.mode === 'dark' ? theme.palette.text.primary : theme.palette.text.secondary), [color, theme]);
 
   useLayoutEffect(() => {
     if (currencyToShow) {
@@ -46,9 +55,18 @@ export default function Currency (): React.ReactElement {
 
   return (
     <>
-      <Grid alignItems='center' component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick} sx={{ ...HEADER_COMPONENT_STYLE, zIndex: anchorEl && theme.zIndex.modal + 1 }}>
+      <Grid
+        alignItems='center' component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick}
+        sx={{
+          ...HEADER_COMPONENT_STYLE,
+          borderColor: borderColor || HEADER_COMPONENT_STYLE?.borderColor,
+          height: height || HEADER_COMPONENT_STYLE?.height,
+          minWidth: minWidth || HEADER_COMPONENT_STYLE?.minWidth,
+          zIndex: anchorEl && theme.zIndex.modal + 1
+        }}
+      >
         <Infotip2 text={currencyToShow?.currency}>
-          <Typography color={textColor} fontSize='22px' fontWeight={500}>
+          <Typography color={textColor} fontSize={ fontSize } fontWeight={500}>
             {currencyToShow?.sign || '$'}
           </Typography>
         </Infotip2>
@@ -62,7 +80,7 @@ export default function Currency (): React.ReactElement {
               boxShadow: theme.palette.mode === 'dark'
                 ? '0px 4px 4px rgba(255, 255, 255, 0.25)'
                 : '0px 0px 25px 0px rgba(0, 0, 0, 0.50)',
-              left: anchorEl?.getBoundingClientRect().right - 260,
+              left: anchorEl?.getBoundingClientRect().right - dialogLeft,
               position: 'absolute',
               top: anchorEl?.getBoundingClientRect().bottom - 30
             }
@@ -89,3 +107,5 @@ export default function Currency (): React.ReactElement {
     </>
   );
 }
+
+export default React.memo(Currency);
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx
index f19dac92a..959980d8f 100644
--- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx
+++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx
@@ -50,6 +50,11 @@ export default function FavoriteChains (): React.ReactElement {
     <Badge
       badgeContent={badgeCount}
       color='success'
+      sx={{
+        '& .MuiBadge-badge': {
+          color: 'white'
+        },
+      }}
     >
       <Grid
         alignItems='center'
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileMenu.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileMenu.tsx
index 28418ce1f..7c09b9138 100644
--- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileMenu.tsx
+++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileMenu.tsx
@@ -60,13 +60,15 @@ const InputBox = ({ addToNewProfile, editName, newName }: InputBoxProps) => {
 };
 
 interface AddProfileProps {
-  address: string | undefined
+  address: string | undefined;
   showName: boolean | undefined;
   setShowName: React.Dispatch<React.SetStateAction<boolean | undefined>>;
-  handleClose: () => void
+  handleClose: () => void;
+  closeParentMenu: () => void
+  extensionMode: boolean;
 }
 
-const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProps) => {
+const AddMenu = ({ address, closeParentMenu, extensionMode, handleClose, setShowName, showName }: AddProfileProps) => {
   const theme = useTheme();
   const { t } = useTranslation();
   const { userDefinedProfiles } = useProfiles();
@@ -103,11 +105,12 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
     updateMeta(String(address), metaData)
       .then(() => {
         handleClose();
+        closeParentMenu();
       }).catch(console.error);
-  }, [account, address, handleClose]);
+  }, [account, address, closeParentMenu, handleClose]);
 
   return (
-    <Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: '10px' }}>
+    <Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: extensionMode ? '5px' : '10px' }}>
       {showName
         ? <InputBox
           addToNewProfile={addToNewProfile}
@@ -115,6 +118,7 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
           newName={newName}
         />
         : <MenuItem
+          fontSize={extensionMode ? '16px' : undefined}
           iconComponent={
             <VaadinIcon icon='vaadin:plus' style={{ color: theme.palette.text.primary, height: '20px' }} />
           }
@@ -123,10 +127,11 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
           withHoverEffect
         />
       }
-      <Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px' }} />
+      <Divider sx={{ bgcolor: 'divider', height: '1px', my: extensionMode ? '3px' : '6px' }} />
       {userDefinedProfiles.length > 0
         ? userDefinedProfiles.map((profile) => (
           <MenuItem
+            fontSize={extensionMode ? '16px' : undefined}
             iconComponent={
               <VaadinIcon icon='vaadin:folder-open-o' style={{ color: theme.palette.text.primary, height: '20px' }} />
             }
@@ -139,6 +144,7 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
         ))
         : <MenuItem
           disabled
+          fontSize={extensionMode ? '16px' : undefined}
           iconComponent={
             <VaadinIcon icon='vaadin:minus' style={{ color: `${theme.palette.text.disabled}`, height: '20px' }} />
           }
@@ -153,18 +159,20 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
 interface RemoveProfileProps {
   profileNames: string[] | undefined;
   onRemove: (profile: string) => void;
+  extensionMode: boolean;
 }
 
-const RemoveMenu = ({ onRemove, profileNames }: RemoveProfileProps) => {
+const RemoveMenu = ({ extensionMode, onRemove, profileNames }: RemoveProfileProps) => {
   const theme = useTheme();
   const { t } = useTranslation();
 
   return (
-    <Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: '10px' }}>
+    <Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: extensionMode ? '5px' : '10px' }}>
       {profileNames?.map((profileName) => (
         // eslint-disable-next-line react/jsx-no-bind
         <Grid component='button' container item key={profileName} onClick={() => onRemove(profileName)} sx={{ '> div div:last-child p': { maxWidth: '220px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, bgcolor: 'transparent', border: 'none', color: theme.palette.text.primary, height: 'fit-content', p: 0, width: 'inherit' }}>
           <MenuItem
+            fontSize={extensionMode ? '16px' : undefined}
             iconComponent={
               <VaadinIcon icon='vaadin:folder-remove' style={{ color: theme.palette.text.primary, height: '20px' }} />
             }
@@ -206,8 +214,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
   const handleClose = useCallback(() => {
     setAnchorEl(null);
     setShowName(false);
-    closeParentMenu();
-  }, [closeParentMenu]);
+  }, []);
 
   const onAddClick = useCallback((event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {
     setAnchorEl(event.currentTarget);
@@ -240,14 +247,18 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
 
         if (isLastAccountWithTheProfile && currentProfile === profileToBeRemoved) {
           setStorage('profile', PROFILE_TAGS.ALL)
-            .then(handleClose)
+            .then(() => {
+              handleClose();
+              closeParentMenu();
+            })
             .catch(console.error);
         } else {
           handleClose();
+          closeParentMenu();
         }
       })
       .catch(console.error);
-  }, [profileNames, accounts, address, currentProfile, handleClose]);
+  }, [address, profileNames, accounts, currentProfile, handleClose, closeParentMenu]);
 
   const open = Boolean(anchorEl);
   const id = open ? 'simple-popover 2' : undefined;
@@ -256,6 +267,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
     <>
       <Grid aria-describedby={id} component='button' container item onClick={onAddClick} sx={{ bgcolor: 'transparent', border: 'none', color: theme.palette.text.primary, height: 'fit-content', p: 0, width: 'inherit' }}>
         <MenuItem
+          fontSize={isExtensionMode ? '16px' : undefined}
           iconComponent={
             <VaadinIcon icon='vaadin:folder-add' style={{ color: `${theme.palette.text.primary}`, height: '20px' }} />
           }
@@ -284,6 +296,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
       {isExtensionMode && profileNames && profileNames.length > 0 &&
         <Grid aria-describedby={id} component='button' container item onClick={onRemoveMenuClick} sx={{ bgcolor: 'transparent', border: 'none', color: theme.palette.text.primary, height: 'fit-content', p: 0, width: 'inherit' }}>
           <MenuItem
+            fontSize='16px'
             iconComponent={
               <VaadinIcon icon='vaadin:folder-remove' style={{ color: theme.palette.text.primary, height: '20px' }} />
             }
@@ -293,7 +306,6 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
           />
         </Grid>
       }
-      {isExtensionMode && <Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px', width: '100%' }} />}
       <Popover
         PaperProps={{
           sx: {
@@ -322,12 +334,15 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
         {status === STATUS.SHOW_ADD &&
           <AddMenu
             address={address}
+            closeParentMenu={closeParentMenu}
+            extensionMode={isExtensionMode}
             handleClose={handleClose}
             setShowName={setShowName}
             showName={showName}
           />}
         {status === STATUS.SHOW_REMOVE &&
           <RemoveMenu
+            extensionMode={isExtensionMode}
             onRemove={onRemove}
             profileNames={profileNames}
           />
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx
index 5ce1509f9..de90338ae 100644
--- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx
+++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx
@@ -231,7 +231,7 @@ function TotalBalancePieChart ({ setGroupedAssets }: Props): React.ReactElement
                 withCountUp
                 withSmallDecimal
               />
-              <Typography sx={{ color: !youHave.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.main' : 'warning.main', fontSize: '16px', fontWeight: 500 }}>
+              <Typography sx={{ color: !youHave.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.contrastText' : 'warning.main', fontSize: '16px', fontWeight: 500 }}>
                 <CountUp
                   decimals={countDecimalPlaces(portfolioChange) || PORTFOLIO_CHANGE_DECIMAL}
                   duration={1}
diff --git a/packages/extension-polkagate/src/hooks/useYouHave.ts b/packages/extension-polkagate/src/hooks/useYouHave.ts
index ae57f3147..fa4e86669 100644
--- a/packages/extension-polkagate/src/hooks/useYouHave.ts
+++ b/packages/extension-polkagate/src/hooks/useYouHave.ts
@@ -10,6 +10,7 @@ import { amountToHuman } from '../util/utils';
 import { usePrices } from '.';
 
 export interface YouHaveType {
+  available: number;
   change: number;
   date: number;
   portfolio: number;
@@ -45,8 +46,9 @@ export default function useYouHave (): YouHaveType | undefined | null {
       return undefined;
     }
 
-    let totalPrice = 0;
-    let totalBeforeChange = 0;
+    let portfolio = 0;
+    let available = 0;
+    let change = 0;
     const balances = accountsAssets.balances;
     const date = Math.min(accountsAssets.timeStamp, pricesInCurrencies.date);
 
@@ -56,14 +58,16 @@ export default function useYouHave (): YouHaveType | undefined | null {
           const tokenValue = pricesInCurrencies.prices[asset.priceId]?.value ?? 0;
           const tokenPriceChange = pricesInCurrencies.prices[asset.priceId]?.change ?? 0;
           const currentAssetPrice = calcPrice(tokenValue, asset.totalBalance, asset.decimal);
+          const currentAvailableAssetPrice = calcPrice(tokenValue, asset.availableBalance, asset.decimal);
 
-          totalPrice += currentAssetPrice;
-          totalBeforeChange += calcChange(tokenValue, Number(asset.totalBalance) / (10 ** asset.decimal), tokenPriceChange);
+          portfolio += currentAssetPrice;
+          available += currentAvailableAssetPrice;
+          change += calcChange(tokenValue, Number(asset.totalBalance) / (10 ** asset.decimal), tokenPriceChange);
         });
       });
     });
 
-    return { change: totalBeforeChange, date, portfolio: totalPrice } as unknown as YouHaveType;
+    return { available, change, date, portfolio } as unknown as YouHaveType;
   }, [accountsAssets, pricesInCurrencies]);
 
   return youHave;
diff --git a/packages/extension-polkagate/src/partials/AccountMenu.tsx b/packages/extension-polkagate/src/partials/AccountMenu.tsx
index 28fc9baef..7e0c6592f 100644
--- a/packages/extension-polkagate/src/partials/AccountMenu.tsx
+++ b/packages/extension-polkagate/src/partials/AccountMenu.tsx
@@ -3,12 +3,13 @@
 
 /* eslint-disable react/jsx-max-props-per-line */
 
+import type { TransitionProps } from '@mui/material/transitions';
 import type { HexString } from '@polkadot/util/types';
 
 import { faAddressCard, faGem } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Close as CloseIcon } from '@mui/icons-material';
-import { Divider, Grid, IconButton, Slide, useTheme } from '@mui/material';
+import { Dialog, Divider, Grid, IconButton, Slide, useTheme } from '@mui/material';
 import React, { useCallback, useContext, useState } from 'react';
 
 import { ActionContext, GenesisHashOptionsContext, Identity, MenuItem, RemoteNodeSelector, SelectChain, SocialRecoveryIcon, VaadinIcon } from '../components';
@@ -22,10 +23,15 @@ interface Props {
   setShowMenu: React.Dispatch<React.SetStateAction<boolean>>;
   isMenuOpen: boolean;
   address: string;
-  noMargin?: boolean;
 }
 
-function AccountMenu ({ address, isMenuOpen, noMargin, setShowMenu }: Props): React.ReactElement<Props> {
+const Transition = React.forwardRef(function Transition (props: TransitionProps & { children: React.ReactElement<unknown>;}, ref: React.Ref<unknown>) {
+  return <Slide direction='up' ref={ref} {...props} />;
+});
+
+const MenuSeparator = () => <Divider sx={{ bgcolor: 'divider', height: '1px', my: '3px' }} />;
+
+function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const theme = useTheme();
   const options = useContext(GenesisHashOptionsContext);
@@ -35,7 +41,6 @@ function AccountMenu ({ address, isMenuOpen, noMargin, setShowMenu }: Props): Re
   const [genesisHash, setGenesis] = useState<string | undefined>();
 
   const onAction = useContext(ActionContext);
-  const containerRef = React.useRef(null);
   const hasPrivateKey = !(account?.isExternal || account?.isHardware);
 
   const onForgetAccount = useCallback(() => {
@@ -89,147 +94,148 @@ function AccountMenu ({ address, isMenuOpen, noMargin, setShowMenu }: Props): Re
     return !supportedChains.includes(currentGenesisHash);
   }, [currentGenesisHash]);
 
-  const MenuSeparator = () => <Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px' }} />;
-
   const vaadinIconStyle = { color: `${theme.palette.text.primary}`, height: '18px' };
 
-  const movingParts = (
-    <Grid alignItems='flex-start' bgcolor='background.default' container display='block' item mt='46px' px='46px' sx={{ borderRadius: '10px 10px 0px 0px', height: 'parent.innerHeight' }} width='100%'>
-      <Grid container item justifyContent='center' my='12px' pl='8px'>
-        <Identity address={address} api={api} chain={chain} formatted={formatted} identiconSize={35} showSocial={false} subIdOnly />
-      </Grid>
-      <MenuSeparator />
-      <MenuItem
-        disabled={isDisabled(IDENTITY_CHAINS)}
-        iconComponent={
-          <FontAwesomeIcon
-            color={isDisabled(IDENTITY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}
-            fontSize={19}
-            icon={faAddressCard}
+  return (
+    <Dialog
+      TransitionComponent={Transition}
+      fullScreen
+      open={isMenuOpen}
+    >
+      <Grid bgcolor='divider' container height='100%' width='357px' zIndex={10}>
+        <Grid alignItems='flex-start' bgcolor='background.default' container display='block' item mt='46px' px='46px' sx={{ borderRadius: '10px 10px 0px 0px', height: 'parent.innerHeight' }} width='100%'>
+          <Grid container item justifyContent='center' my='8px'>
+            <Identity address={address} api={api} chain={chain} formatted={formatted} identiconSize={30} showSocial={false} style={{ fontSize: '22px' }} subIdOnly />
+          </Grid>
+          <MenuSeparator />
+          <MenuItem
+            disabled={isDisabled(IDENTITY_CHAINS)}
+            fontSize='16px'
+            iconComponent={
+              <FontAwesomeIcon
+                color={isDisabled(IDENTITY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}
+                fontSize={19}
+                icon={faAddressCard}
+              />
+            }
+            onClick={onManageId}
+            text={t('Manage identity')}
+            withHoverEffect
           />
-        }
-        onClick={onManageId}
-        text={t('Manage identity')}
-        withHoverEffect
-      />
-      <MenuItem
-        disabled={isDisabled(PROXY_CHAINS)}
-        iconComponent={
-          <VaadinIcon icon='vaadin:sitemap' style={{ color: `${isDisabled(PROXY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}`, height: '18px' }} />
-        }
-        onClick={onManageProxies}
-        text={t('Manage proxies')}
-        withHoverEffect
-      />
-      <MenuItem
-        disabled={isDisabled(SOCIAL_RECOVERY_CHAINS)}
-        iconComponent={
-          <SocialRecoveryIcon
-            color={
-              isDisabled(SOCIAL_RECOVERY_CHAINS)
-                ? theme.palette.text.disabled
-                : theme.palette.text.primary}
-            height={22}
-            width={22}
+          <MenuItem
+            disabled={isDisabled(PROXY_CHAINS)}
+            fontSize='16px'
+            iconComponent={
+              <VaadinIcon icon='vaadin:sitemap' style={{ color: `${isDisabled(PROXY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}`, height: '18px' }} />
+            }
+            onClick={onManageProxies}
+            text={t('Manage proxies')}
+            withHoverEffect
           />
-        }
-        onClick={onSocialRecovery}
-        text={t('Social recovery')}
-        withHoverEffect
-      />
-      <MenuItem
-        disabled={false} // We check NFTs across all supported chains, so this feature is not specific to the current chain and should not be disabled.
-        iconComponent={
-          <FontAwesomeIcon
-            color={theme.palette.text.primary}
-            fontSize='22px'
-            icon={faGem}
+          <MenuItem
+            disabled={isDisabled(SOCIAL_RECOVERY_CHAINS)}
+            fontSize='16px'
+            iconComponent={
+              <SocialRecoveryIcon
+                color={
+                  isDisabled(SOCIAL_RECOVERY_CHAINS)
+                    ? theme.palette.text.disabled
+                    : theme.palette.text.primary}
+                height={22}
+                width={22}
+              />
+            }
+            onClick={onSocialRecovery}
+            text={t('Social recovery')}
+            withHoverEffect
           />
-        }
-        onClick={onNFTAlbum}
-        text={t('NFT album')}
-        withHoverEffect
-      />
-      <MenuSeparator />
-      <ProfileMenu
-        address={address}
-        closeParentMenu={closeMenu}
-      />
-      {hasPrivateKey &&
-        <MenuItem
-          iconComponent={
-            <VaadinIcon icon='vaadin:download-alt' style={vaadinIconStyle} />
-          }
-          onClick={onExportAccount}
-          text={t('Export account')}
-          withHoverEffect
-        />}
-      {hasPrivateKey &&
-        <MenuItem
-          iconComponent={
-            <VaadinIcon icon='vaadin:road-branch' style={vaadinIconStyle} />
+          <MenuItem
+            disabled={false} // We check NFTs across all supported chains, so this feature is not specific to the current chain and should not be disabled.
+            fontSize='16px'
+            iconComponent={
+              <FontAwesomeIcon
+                color={theme.palette.text.primary}
+                fontSize='22px'
+                icon={faGem}
+              />
+            }
+            onClick={onNFTAlbum}
+            text={t('NFT album')}
+            withHoverEffect
+          />
+          <MenuSeparator />
+          <ProfileMenu
+            address={address}
+            closeParentMenu={closeMenu}
+          />
+          <MenuSeparator />
+          {hasPrivateKey &&
+            <MenuItem
+              fontSize='16px'
+              iconComponent={
+                <VaadinIcon icon='vaadin:download-alt' style={vaadinIconStyle} />
+              }
+              onClick={onExportAccount}
+              text={t('Export account')}
+              withHoverEffect
+            />}
+          {hasPrivateKey &&
+            <MenuItem
+              fontSize='16px'
+              iconComponent={
+                <VaadinIcon icon='vaadin:road-branch' style={vaadinIconStyle} />
+              }
+              onClick={onDeriveAccount}
+              text={t('Derive new account')}
+              withHoverEffect
+            />
           }
-          onClick={onDeriveAccount}
-          text={t('Derive new account')}
-          withHoverEffect
-        />
-      }
-      <MenuItem
-        iconComponent={
-          <VaadinIcon icon='vaadin:edit' style={vaadinIconStyle} />
-        }
-        onClick={onRenameAccount}
-        text={t('Rename')}
-        withHoverEffect
-      />
-      <MenuItem
-        iconComponent={
-          <VaadinIcon icon='vaadin:file-remove' style={vaadinIconStyle} />
-        }
-        onClick={onForgetAccount}
-        text={t('Forget account')}
-        withHoverEffect
-      />
-      <MenuSeparator />
-      <SelectChain
-        address={address}
-        defaultValue={currentGenesisHash ?? options[0].text}
-        icon={getLogo(chain || undefined)}
-        label={t('Chain')}
-        onChange={onChangeNetwork}
-        options={options}
-        style={{ width: '100%' }}
-      />
-      <RemoteNodeSelector
-        address={address}
-        genesisHash={genesisHash ?? currentGenesisHash}
-      />
-      <IconButton
-        onClick={closeMenu}
-        sx={{
-          left: '15px',
-          p: 0,
-          position: 'absolute',
-          top: '65px'
-        }}
-      >
-        <CloseIcon sx={{ color: 'text.primary', fontSize: 35 }} />
-      </IconButton>
-    </Grid>
-  );
-
-  return (
-    <Grid bgcolor={theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)'} container height='100%' justifyContent='end' ref={containerRef} sx={[{ mixBlendMode: 'normal', ml: !noMargin ? '-15px' : undefined, overflowY: 'scroll', position: 'fixed', top: 0 }]} width='357px' zIndex={10}>
-      <Slide
-        container={containerRef.current}
-        direction='up'
-        in={isMenuOpen}
-        mountOnEnter
-        unmountOnExit
-      >
-        {movingParts}
-      </Slide>
-    </Grid>
+          <MenuItem
+            fontSize='16px'
+            iconComponent={
+              <VaadinIcon icon='vaadin:edit' style={vaadinIconStyle} />
+            }
+            onClick={onRenameAccount}
+            text={t('Rename')}
+            withHoverEffect
+          />
+          <MenuItem
+            fontSize='16px'
+            iconComponent={
+              <VaadinIcon icon='vaadin:file-remove' style={vaadinIconStyle} />
+            }
+            onClick={onForgetAccount}
+            text={t('Forget account')}
+            withHoverEffect
+          />
+          <MenuSeparator />
+          <SelectChain
+            address={address}
+            defaultValue={currentGenesisHash ?? options[0].text}
+            icon={getLogo(chain || undefined)}
+            label={t('Chain')}
+            onChange={onChangeNetwork}
+            options={options}
+            style={{ pt: 0, width: '100%' }}
+          />
+          <RemoteNodeSelector
+            address={address}
+            genesisHash={genesisHash ?? currentGenesisHash}
+          />
+          <IconButton
+            onClick={closeMenu}
+            sx={{
+              left: '15px',
+              p: 0,
+              position: 'absolute',
+              top: '58px'
+            }}
+          >
+            <CloseIcon sx={{ color: 'text.primary', fontSize: 35 }} />
+          </IconButton>
+        </Grid>
+      </Grid>
+    </Dialog>
   );
 }
 
diff --git a/packages/extension-polkagate/src/partials/HeaderBrand.tsx b/packages/extension-polkagate/src/partials/HeaderBrand.tsx
index 47e276057..36fb4405b 100644
--- a/packages/extension-polkagate/src/partials/HeaderBrand.tsx
+++ b/packages/extension-polkagate/src/partials/HeaderBrand.tsx
@@ -144,7 +144,6 @@ const RightItem = ({ _handleMenuClick, _onClose, fullScreenURL, isRefreshing, on
 };
 
 function HeaderBrand ({ _centerItem, address, backgroundDefault, fullScreenURL = '/', isRefreshing, noBorder = false, onBackClick, onClose, onRefresh, paddingBottom = 11, shortBorder, showAccountMenu, showBackArrow, showBrand, showClose, showCloseX, showFullScreen = false, showMenu, style, text, withSteps = null }: Props): React.ReactElement<Props> {
-  const theme = useTheme();
   const onAction = useContext(ActionContext);
   const setIconRef = useRef(null);
   const setMenuRef = useRef(null);
@@ -213,17 +212,14 @@ function HeaderBrand ({ _centerItem, address, backgroundDefault, fullScreenURL =
           <Divider sx={{ bgcolor: 'secondary.main', height: '3px', margin: '5px auto', width: '138px' }} />
         }
       </Container>
-      {isMenuOpen &&
-        <Menu
-          setShowMenu={setOpenMenu}
-          theme={theme}
-        />
-      }
-      {isAccountMenuOpen && address &&
+      <Menu
+        isMenuOpen={isMenuOpen}
+        setShowMenu={setOpenMenu}
+      />
+      {address &&
         <AccountMenu
           address={address}
           isMenuOpen={isAccountMenuOpen}
-          noMargin
           setShowMenu={setShowAccountMenu}
         />
       }
diff --git a/packages/extension-polkagate/src/partials/Menu.tsx b/packages/extension-polkagate/src/partials/Menu.tsx
index a1a5bcbc5..4080de532 100644
--- a/packages/extension-polkagate/src/partials/Menu.tsx
+++ b/packages/extension-polkagate/src/partials/Menu.tsx
@@ -3,11 +3,11 @@
 
 /* eslint-disable react/jsx-max-props-per-line */
 
-import type { Theme } from '@mui/material/styles';
+import type { TransitionProps } from '@mui/material/transitions';
 
 import { Close as CloseIcon } from '@mui/icons-material';
-import { Divider, Grid, IconButton, Typography } from '@mui/material';
-import { keyframes } from '@mui/material/styles';
+import { Dialog, Divider, Grid, IconButton, Slide, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import React, { useCallback, useContext, useState } from 'react';
 
 import { AccountContext, ActionContext, MenuItem, TwoButtons, VaadinIcon, Warning } from '../components';
@@ -21,27 +21,31 @@ import SettingSubMenu from './SettingSubMenu';
 import VersionSocial from './VersionSocial';
 
 interface Props {
-  theme: Theme;
   setShowMenu: React.Dispatch<React.SetStateAction<boolean>>;
+  isMenuOpen: boolean;
 }
 
-const COLLAPSIBLE_MENUS = {
-  NONE: 0,
-  NEW_ACCOUNT: 1,
-  IMPORT_ACCOUNT: 2,
-  SETTING: 3
-};
+enum COLLAPSIBLE_MENUS {
+  NONE,
+  NEW_ACCOUNT,
+  IMPORT_ACCOUNT,
+  SETTING
+}
+
+const Transition = React.forwardRef(function Transition (props: TransitionProps & { children: React.ReactElement<unknown>;}, ref: React.Ref<unknown>) {
+  return <Slide direction='left' ref={ref} {...props} />;
+});
 
 const Div = () => <Divider sx={{ bgcolor: 'divider', height: '1px', justifySelf: 'flex-end', mx: '10px', width: '83%' }} />;
 
-function Menu ({ setShowMenu, theme }: Props): React.ReactElement<Props> {
+function Menu ({ isMenuOpen, setShowMenu }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const theme = useTheme();
   const onAction = useContext(ActionContext);
 
-  const [collapsedMenu, setCollapsedMenu] = useState<number>(COLLAPSIBLE_MENUS.SETTING);
+  const [collapsedMenu, setCollapsedMenu] = useState(COLLAPSIBLE_MENUS.SETTING);
   const [isTestnetEnableConfirmed, setIsTestnetEnableConfirmed] = useState<boolean>();
   const [showWarning, setShowWarning] = useState<boolean>();
-  const [closeMenu, setCloseMenu] = useState<boolean>(false);
   const { accounts } = useContext(AccountContext);
 
   const toggleImportSubMenu = useCallback(() => {
@@ -63,8 +67,7 @@ function Menu ({ setShowMenu, theme }: Props): React.ReactElement<Props> {
   }, [collapsedMenu]);
 
   const onCloseMenu = useCallback(() => {
-    setCloseMenu(true);
-    setTimeout(() => setShowMenu(false), 300);
+    setShowMenu(false);
   }, [setShowMenu]);
 
   const _goToExportAll = useCallback(() => {
@@ -96,112 +99,100 @@ function Menu ({ setShowMenu, theme }: Props): React.ReactElement<Props> {
     }
   }, [accounts, isTestnetEnableConfirmed]);
 
-  const slideLeft = keyframes`
-  0% {
-    width: 0;
-  }
-  100%{
-    width: 100%;
-  }
-`;
-
-  const slideRight = keyframes`
-  0% {
-    width: 100%;
-  }
-  100%{
-    width: 0;
-  }
-`;
-
   return (
-    <Grid bgcolor={theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.9)'} container height='100%' justifyContent='end' sx={[{ animationDuration: '0.2s', animationFillMode: 'forwards', animationName: `${!closeMenu ? slideLeft : slideRight}`, position: 'absolute', right: 0, top: 0, mixBlendMode: 'normal', overflowY: 'scroll', scrollbarWidth: 'none', '&::-webkit-scrollbar': { display: 'none', width: 0 } }]} zIndex={10}>
-      <Grid alignItems='flex-start' bgcolor='background.default' container display='block' item p='10px' sx={{ height: 'parent.innerHeight', minWidth: '307px', position: 'relative' }} width='86%'>
-        {!showWarning
-          ? <>
-            <MenuItem
-              iconComponent={
-                <VaadinIcon icon='vaadin:plus-circle' spin={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT} style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
-              }
-              onClick={toggleNewAccountSubMenu}
-              showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT}
-              text={t('New account')}
-              withHoverEffect
-            >
-              <NewAccountSubMenu show={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT} />
-            </MenuItem>
-            <Div />
-            <MenuItem
-              iconComponent={
-                <VaadinIcon float ={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT} icon='vaadin:upload-alt' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
-              }
-              onClick={toggleImportSubMenu}
-              showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT}
-              text={t('Import account')}
-              withHoverEffect
-            >
-              <ImportAccSubMenu show={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT} toggleSettingSubMenu={toggleSettingSubMenu} />
-            </MenuItem>
-            <Div />
-            <MenuItem
-              iconComponent={
-                <VaadinIcon icon='vaadin:download' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
-              }
-              onClick={_goToExportAll}
-              text={t('Export all accounts')}
-              withHoverEffect
-            />
-            <Div />
-            <MenuItem
-              iconComponent={
-                <VaadinIcon icon='vaadin:cog' spin={collapsedMenu === COLLAPSIBLE_MENUS.SETTING} style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
-              }
-              onClick={toggleSettingSubMenu}
-              showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.SETTING}
-              text={t('Settings')}
-              withHoverEffect
-            >
-              <SettingSubMenu
-                isTestnetEnabledChecked={isTestnetEnableConfirmed}
-                onChange={onEnableTestNetClick}
-                setTestnetEnabledChecked={setIsTestnetEnableConfirmed}
-                show={collapsedMenu === COLLAPSIBLE_MENUS.SETTING}
-              />
-            </MenuItem>
-          </>
-          : <Grid container justifyContent='space-between' sx={{ pt: '30px' }}>
-            <Grid item xs={12} sx={{ textAlign: 'center', pb: '35px' }}>
-              <Typography fontSize='20px'>
-                {t('Warning')}
-              </Typography>
-            </Grid>
-            <Grid container sx={{ textAlign: 'justify', '> div': { pl: 0 } }}>
-              <Warning
-                iconDanger
-                isBelowInput
-                marginTop={0}
-                theme={theme}
+    <Dialog
+      TransitionComponent={Transition}
+      fullScreen
+      open={isMenuOpen}
+    >
+      <Grid bgcolor='divider' container height='100%' justifyContent='end' zIndex={10}>
+        <Grid alignItems='flex-start' bgcolor='background.default' container display='block' item p='10px' sx={{ height: 'parent.innerHeight', minWidth: '307px', position: 'relative' }} width='86%'>
+          {!showWarning
+            ? <>
+              <MenuItem
+                iconComponent={
+                  <VaadinIcon icon='vaadin:plus-circle' spin={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT} style={{ color: `${theme.palette.text.primary}`, height: '18px' }} />
+                }
+                onClick={toggleNewAccountSubMenu}
+                showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT}
+                text={t('New account')}
+                withHoverEffect
               >
-                {t('Enabling testnet chains may cause instability or crashes since they\'re meant for testing. Proceed with caution. If issues arise, return here to disable the option.')}
-              </Warning>
-            </Grid>
-            <Grid container>
-              <TwoButtons
-                mt='55px'
-                onPrimaryClick={onEnableTestnetConfirm}
-                onSecondaryClick={onEnableTestnetReject}
-                primaryBtnText={t<string>('Confirm')}
-                secondaryBtnText={t<string>('Reject')}
+                <NewAccountSubMenu show={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT} />
+              </MenuItem>
+              <Div />
+              <MenuItem
+                iconComponent={
+                  <VaadinIcon float={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT} icon='vaadin:upload-alt' style={{ color: `${theme.palette.text.primary}`, height: '18px' }} />
+                }
+                onClick={toggleImportSubMenu}
+                showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT}
+                text={t('Import account')}
+                withHoverEffect
+              >
+                <ImportAccSubMenu show={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT} toggleSettingSubMenu={toggleSettingSubMenu} />
+              </MenuItem>
+              <Div />
+              <MenuItem
+                iconComponent={
+                  <VaadinIcon icon='vaadin:download' style={{ color: `${theme.palette.text.primary}`, height: '18px' }} />
+                }
+                onClick={_goToExportAll}
+                text={t('Export all accounts')}
+                withHoverEffect
               />
+              <Div />
+              <MenuItem
+                iconComponent={
+                  <VaadinIcon icon='vaadin:cog' spin={collapsedMenu === COLLAPSIBLE_MENUS.SETTING} style={{ color: `${theme.palette.text.primary}`, height: '18px' }} />
+                }
+                onClick={toggleSettingSubMenu}
+                showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.SETTING}
+                text={t('Settings')}
+                withHoverEffect
+              >
+                <SettingSubMenu
+                  isTestnetEnabledChecked={isTestnetEnableConfirmed}
+                  onChange={onEnableTestNetClick}
+                  setTestnetEnabledChecked={setIsTestnetEnableConfirmed}
+                  show={collapsedMenu === COLLAPSIBLE_MENUS.SETTING}
+                />
+              </MenuItem>
+            </>
+            : <Grid container justifyContent='space-between' sx={{ pt: '30px' }}>
+              <Grid item sx={{ pb: '35px', textAlign: 'center' }} xs={12}>
+                <Typography fontSize='20px'>
+                  {t('Warning')}
+                </Typography>
+              </Grid>
+              <Grid container sx={{ '> div': { pl: 0 }, textAlign: 'justify' }}>
+                <Warning
+                  iconDanger
+                  isBelowInput
+                  marginTop={0}
+                  theme={theme}
+                >
+                  {t('Enabling testnet chains may cause instability or crashes since they\'re meant for testing. Proceed with caution. If issues arise, return here to disable the option.')}
+                </Warning>
+              </Grid>
+              <Grid container>
+                <TwoButtons
+                  mt='55px'
+                  onPrimaryClick={onEnableTestnetConfirm}
+                  onSecondaryClick={onEnableTestnetReject}
+                  primaryBtnText={t<string>('Confirm')}
+                  secondaryBtnText={t<string>('Reject')}
+                />
+              </Grid>
             </Grid>
-          </Grid>
-        }
-        <VersionSocial fontSize='11px' />
+          }
+          <VersionSocial fontSize='11px' />
+        </Grid>
+        <IconButton onClick={onCloseMenu} sx={{ left: '3%', p: 0, position: 'absolute', top: '2%' }}>
+          <CloseIcon sx={{ color: 'text.secondary', fontSize: 35 }} />
+        </IconButton>
       </Grid>
-      <IconButton onClick={onCloseMenu} sx={{ left: '3%', p: 0, position: 'absolute', top: '2%' }}>
-        <CloseIcon sx={{ color: 'text.secondary', fontSize: 35 }} />
-      </IconButton>
-    </Grid>
+    </Dialog>
   );
 }
 
diff --git a/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx b/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx
index dc9d206d4..92cf9a553 100644
--- a/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx
+++ b/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx
@@ -38,8 +38,6 @@ interface ListIndicatorProps {
   defaultColor: string;
   endpointUrl: string | undefined;
   iconSize: number;
-  isDark: boolean;
-  id: 'simple-popover' | undefined;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   setCurrentDelay: React.Dispatch<React.SetStateAction<number | undefined>>;
 }
@@ -233,9 +231,11 @@ const NodesList = ({ address, defaultColor, endpointsDelay, setCurrentDelay, set
   );
 };
 
-const ListIndicator = ({ currentDelay, defaultColor, endpointUrl, iconSize, id, isDark, onClick, setCurrentDelay }: ListIndicatorProps) => {
+const ListIndicator = ({ currentDelay, defaultColor, endpointUrl, iconSize, onClick, setCurrentDelay }: ListIndicatorProps) => {
   const isLightClient = endpointUrl?.startsWith('light');
   const onExtension = useIsExtensionPopup();
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
 
   useEffect(() => {
     // to reset signal bar on chain change
@@ -251,7 +251,7 @@ const ListIndicator = ({ currentDelay, defaultColor, endpointUrl, iconSize, id,
   }, [onExtension]);
 
   return (
-    <Grid aria-describedby={id} component='button' container item onClick={onClick} sx={{ bgcolor: bgcolorOnAccountDetail, border: isDark ? 2 : 1, borderColor: 'divider', borderRadius: '5px', cursor: 'pointer', height: `${iconSize + 7}px`, position: 'relative', width: `${iconSize + 7}px`, zIndex: 10 }}>
+    <Grid component = 'button' container item onClick={onClick} sx={{ bgcolor: bgcolorOnAccountDetail, border: isDark && !onExtension ? 2 : 1, borderColor: onExtension ? theme.palette.secondary.light : 'divider', borderRadius: '5px', cursor: 'pointer', height: `${iconSize + 7}px`, position: 'relative', width: `${iconSize + 7}px`, zIndex: 10 }}>
       {isLightClient
         ? <LightClientEndpointIcon sx={{ bottom: '2px', color: SIGNAL_COLORS.orange, fontSize: `${iconSize}px`, left: '2px', position: 'absolute' }} />
         : <NodeStatusIcon
@@ -331,7 +331,6 @@ function RemoteNodeSelectorWithSignals ({ address, iconSize = 35 }: Props): Reac
   }, []);
 
   const open = Boolean(anchorEl);
-  const id = open ? 'simple-popover' : undefined;
 
   return (
     <>
@@ -340,8 +339,6 @@ function RemoteNodeSelectorWithSignals ({ address, iconSize = 35 }: Props): Reac
         defaultColor={DEFAULT_GREY}
         endpointUrl={endpoint}
         iconSize={iconSize}
-        id={id}
-        isDark
         onClick={onClick}
         setCurrentDelay={setCurrentDelay}
       />
@@ -354,7 +351,6 @@ function RemoteNodeSelectorWithSignals ({ address, iconSize = 35 }: Props): Reac
           horizontal: 'right',
           vertical: 'bottom'
         }}
-        id={id}
         onClose={handleClose}
         open={open}
         sx={{ mt: '5px' }}
diff --git a/packages/extension-polkagate/src/partials/SettingSubMenu.tsx b/packages/extension-polkagate/src/partials/SettingSubMenu.tsx
index cedf39d6c..dad9591a9 100644
--- a/packages/extension-polkagate/src/partials/SettingSubMenu.tsx
+++ b/packages/extension-polkagate/src/partials/SettingSubMenu.tsx
@@ -96,7 +96,7 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
                 <IconButton
                   sx={{ height: '35px', p: 0, width: '35px' }}
                 >
-                  <ThemeChanger color= 'secondary.light' left='4px' noBorder />
+                  <ThemeChanger color= 'secondary.light' noBorder />
                 </IconButton>
               </Infotip2>
             </Grid>
diff --git a/packages/extension-polkagate/src/popup/account/AccountBrief.tsx b/packages/extension-polkagate/src/popup/account/AccountBrief.tsx
index c29c8e41e..f58e7313e 100644
--- a/packages/extension-polkagate/src/popup/account/AccountBrief.tsx
+++ b/packages/extension-polkagate/src/popup/account/AccountBrief.tsx
@@ -58,7 +58,7 @@ function AccountBrief ({ address, identity, showDivider = true, showName = true
     < >
       {showName &&
         <Grid alignItems='center' container justifyContent='center' xs={12}>
-          <Typography sx={{ fontSize: '36px', fontWeight: 400, lineHeight: '38px', maxWidth: '92%', mt: '5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          <Typography sx={{ fontSize: '24px', fontWeight: 400, lineHeight: '38px', maxWidth: '92%', mt: '5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             {identity?.display || account?.name}
           </Typography>
         </Grid>
diff --git a/packages/extension-polkagate/src/popup/account/Others.tsx b/packages/extension-polkagate/src/popup/account/Others.tsx
index d1c42b3d1..fa13eeff4 100644
--- a/packages/extension-polkagate/src/popup/account/Others.tsx
+++ b/packages/extension-polkagate/src/popup/account/Others.tsx
@@ -44,7 +44,7 @@ export default function Others ({ address, balances, chain, identity, setShow, s
       isSubId={!!identity?.displayParent}
       judgement={_judgement}
       prefix={chain?.ss58Format ?? 42}
-      size={40}
+      size={30}
       value={formatted}
     />
   );
@@ -65,12 +65,12 @@ export default function Others ({ address, balances, chain, identity, setShow, s
         />
         <Container disableGutters sx={{ px: '15px' }}>
           <Grid container item justifyContent='center'>
-            <Typography sx={{ fontSize: '28px', fontWeight: 400, maxWidth: '82%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            <Typography sx={{ fontSize: '20px', fontWeight: 400, maxWidth: '82%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
               {identity?.display || accountName}
             </Typography>
           </Grid>
           <Grid container item justifyContent='center'>
-            <Typography sx={{ fontSize: '36px', fontWeight: 400, letterSpacing: '-0.015em' }}>
+            <Typography sx={{ fontSize: '18px', fontWeight: 500, letterSpacing: '-0.015em' }}>
               {t('Others')}
             </Typography>
           </Grid>
diff --git a/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx b/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx
index 4c15e5554..772cd2674 100644
--- a/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx
+++ b/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx
@@ -45,7 +45,7 @@ export default function ReservedReasons ({ address, assetId, identity, setShow,
       isSubId={!!identity?.displayParent}
       judgement={_judgement}
       prefix={chain?.ss58Format ?? 42}
-      size={40}
+      size={30}
       value={formatted}
     />
   );
@@ -66,12 +66,12 @@ export default function ReservedReasons ({ address, assetId, identity, setShow,
         />
         <Container disableGutters sx={{ px: '15px' }}>
           <Grid container item justifyContent='center'>
-            <Typography sx={{ fontSize: '28px', fontWeight: 400, maxWidth: '82%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            <Typography sx={{ fontSize: '20px', fontWeight: 400, maxWidth: '82%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
               {identity?.display || accountName}
             </Typography>
           </Grid>
           <Grid container item justifyContent='center'>
-            <Typography sx={{ fontSize: '36px', fontWeight: 400, letterSpacing: '-0.015em' }}>
+            <Typography sx={{ fontSize: '18px', fontWeight: 500, letterSpacing: '-0.015em' }}>
               {t('Reserved Reasons')}
             </Typography>
           </Grid>
diff --git a/packages/extension-polkagate/src/popup/account/index.tsx b/packages/extension-polkagate/src/popup/account/index.tsx
index a3188ae86..66d089be8 100644
--- a/packages/extension-polkagate/src/popup/account/index.tsx
+++ b/packages/extension-polkagate/src/popup/account/index.tsx
@@ -162,7 +162,7 @@ export default function AccountDetails (): React.ReactElement {
     <Motion>
       <HeaderBrand
         _centerItem={
-          <Identity address={address} api={api} chain={chain} formatted={formatted} identiconSize={40} showSocial={false} style={{ fontSize: '32px', height: '40px', lineHeight: 'initial', maxWidth: '65%' }} subIdOnly />
+          <Identity address={address} api={api} chain={chain} formatted={formatted} identiconSize={35} showSocial={false} style={{ fontSize: '20px', height: '40px', lineHeight: 'initial', maxWidth: '65%' }} subIdOnly />
         }
         address={address}
         fullScreenURL={`/accountfs/${address}/0`}
diff --git a/packages/extension-polkagate/src/popup/home/AccountDetail.tsx b/packages/extension-polkagate/src/popup/home/AccountDetail.tsx
index 9b707eef7..8e664d736 100644
--- a/packages/extension-polkagate/src/popup/home/AccountDetail.tsx
+++ b/packages/extension-polkagate/src/popup/home/AccountDetail.tsx
@@ -68,7 +68,7 @@ const NoChainAlert = ({ chain, menuOnClick }: {chain: Chain | null | undefined,
   );
 };
 
-const Price = ({ balanceToShow, isPriceOutdated, price, priceChainName }: { isPriceOutdated: boolean, price: number | undefined, priceChainName: string | undefined, balanceToShow: BalancesInfo | undefined}) => {
+const Price = React.memo(function Price ({ balanceToShow, isPriceOutdated, price, priceChainName }: { isPriceOutdated: boolean, price: number | undefined, priceChainName: string | undefined, balanceToShow: BalancesInfo | undefined}) {
   return (
     <>
       {priceChainName === undefined || !balanceToShow || balanceToShow?.chainName?.toLowerCase() !== priceChainName
@@ -84,13 +84,13 @@ const Price = ({ balanceToShow, isPriceOutdated, price, priceChainName }: { isPr
       }
     </>
   );
-};
+});
 
-const Balance = ({ balanceToShow, isBalanceOutdated }: { balanceToShow: BalancesInfo | undefined, isBalanceOutdated: boolean | undefined}) => {
+const Balance = React.memo(function Balance ({ balanceToShow, isBalanceOutdated }: { balanceToShow: BalancesInfo | undefined, isBalanceOutdated: boolean | undefined}) {
   return (
     <>
       {balanceToShow?.decimal
-        ? <Grid item sx={{ color: isBalanceOutdated ? 'primary.light' : 'text.primary', fontWeight: 500 }}>
+        ? <Grid item sx={{ color: isBalanceOutdated ? 'primary.light' : 'text.primary', fontWeight: 400 }}>
           <FormatBalance2
             decimalPoint={2}
             decimals={[balanceToShow.decimal]}
@@ -102,7 +102,7 @@ const Balance = ({ balanceToShow, isBalanceOutdated }: { balanceToShow: Balances
       }
     </>
   );
-};
+});
 
 const BalanceRow = ({ address, hideNumbers }: { address: string, hideNumbers: boolean | undefined}) => {
   const theme = useTheme();
@@ -111,7 +111,7 @@ const BalanceRow = ({ address, hideNumbers }: { address: string, hideNumbers: bo
   const chainName = useChainName(address);
 
   const { price, priceChainName, priceDate } = useTokenPrice(address);
-  const isPriceOutdated = useMemo(() => priceDate !== undefined && Date.now() - priceDate > BALANCES_VALIDITY_PERIOD, [priceDate]); 
+  const isPriceOutdated = useMemo(() => priceDate !== undefined && Date.now() - priceDate > BALANCES_VALIDITY_PERIOD, [priceDate]);
   const isBalanceOutdated = useMemo(() => balances && Date.now() - balances.date > BALANCES_VALIDITY_PERIOD, [balances]);
 
   const [balanceToShow, setBalanceToShow] = useState<BalancesInfo>();
@@ -163,7 +163,7 @@ function AccountDetail ({ address, chain, goToAccount, hideNumbers, identity, is
     <Grid container direction='column' sx={{ width: '70%' }}>
       <Grid container direction='row' item sx={{ lineHeight: '20px' }}>
         <Grid item maxWidth='70%' onClick={goToAccount} sx={{ cursor: 'pointer' }}>
-          <Typography fontSize='24px' overflow='hidden' textOverflow='ellipsis' whiteSpace='nowrap'>
+          <Typography fontSize='18px' fontWeight={400} mt ='7px' overflow='hidden' textOverflow='ellipsis' whiteSpace='nowrap'>
             {identity?.display || name || t('Unknown')}
           </Typography>
         </Grid>
diff --git a/packages/extension-polkagate/src/popup/home/AccountLabel.tsx b/packages/extension-polkagate/src/popup/home/AccountLabel.tsx
index a593a0660..f683701d6 100644
--- a/packages/extension-polkagate/src/popup/home/AccountLabel.tsx
+++ b/packages/extension-polkagate/src/popup/home/AccountLabel.tsx
@@ -17,7 +17,7 @@ interface Props {
   right?: string;
 }
 
-export function AccountLabel ({ account, ml, parentName, right }: Props): React.ReactElement<Props> {
+function AccountLabel ({ account, ml, parentName, right }: Props): React.ReactElement<Props> {
   const theme = useTheme();
   const { t } = useTranslation();
   const isExtensionMode = useIsExtensionPopup();
@@ -141,3 +141,5 @@ export function AccountLabel ({ account, ml, parentName, right }: Props): React.
     </Grid>
   );
 }
+
+export default React.memo(AccountLabel);
diff --git a/packages/extension-polkagate/src/popup/home/AccountPreview.tsx b/packages/extension-polkagate/src/popup/home/AccountPreview.tsx
index 00d0916d7..89639aacc 100644
--- a/packages/extension-polkagate/src/popup/home/AccountPreview.tsx
+++ b/packages/extension-polkagate/src/popup/home/AccountPreview.tsx
@@ -35,7 +35,7 @@ export interface Props {
   hideNumbers: boolean | undefined;
 }
 
-export default function AccountPreview ({ address, hideNumbers, isHidden, name, quickActionOpen, setQuickActionOpen, toggleActions, type }: Props): React.ReactElement<Props> {
+function AccountPreview ({ address, hideNumbers, isHidden, name, quickActionOpen, setQuickActionOpen, toggleActions, type }: Props): React.ReactElement<Props> {
   const onExtension = useIsExtensionPopup();
   const { chain, formatted } = useInfo(address);
   const onAction = useContext(ActionContext);
@@ -94,17 +94,16 @@ export default function AccountPreview ({ address, hideNumbers, isHidden, name,
         toggleVisibility={_toggleVisibility}
       />
       <AccountFeatures chain={chain} goToAccount={goToAccount} menuOnClick={menuOnClick} />
-      {
-        showAccountMenu &&
-        <AccountMenu
-          address={address}
-          isMenuOpen={showAccountMenu}
-          setShowMenu={setShowAccountMenu}
-        />
-      }
+      <AccountMenu
+        address={address}
+        isMenuOpen={showAccountMenu}
+        setShowMenu={setShowAccountMenu}
+      />
       <Grid item sx={{ bottom: 0, left: 0, position: 'absolute', top: 0, width: 'fit-content' }}>
         <QuickAction address={address} quickActionOpen={quickActionOpen} setQuickActionOpen={setQuickActionOpen} />
       </Grid>
     </Grid>
   );
 }
+
+export default React.memo(AccountPreview);
diff --git a/packages/extension-polkagate/src/popup/home/AccountsTree.tsx b/packages/extension-polkagate/src/popup/home/AccountsTree.tsx
index 8411be7ab..126b33b62 100644
--- a/packages/extension-polkagate/src/popup/home/AccountsTree.tsx
+++ b/packages/extension-polkagate/src/popup/home/AccountsTree.tsx
@@ -13,7 +13,7 @@ import { useActiveRecoveries, useApi, useTranslation } from '../../hooks';
 import { windowOpen } from '../../messaging';
 import { SOCIAL_RECOVERY_CHAINS } from '../../util/constants';
 import getParentNameSuri from '../../util/getParentNameSuri';
-import { AccountLabel } from './AccountLabel';
+import AccountLabel from './AccountLabel';
 import AccountPreview from './AccountPreview';
 
 interface Props extends AccountWithChildren {
@@ -24,7 +24,7 @@ interface Props extends AccountWithChildren {
   setHasActiveRecovery: React.Dispatch<React.SetStateAction<string | null | undefined>>;
 }
 
-export default function AccountsTree ({ hideNumbers, parentName, quickActionOpen, setHasActiveRecovery, setQuickActionOpen, suri, ...account }: Props): React.ReactElement<Props> {
+function AccountsTree ({ hideNumbers, parentName, quickActionOpen, setHasActiveRecovery, setQuickActionOpen, suri, ...account }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const theme = useTheme();
 
@@ -99,3 +99,5 @@ export default function AccountsTree ({ hideNumbers, parentName, quickActionOpen
     </>
   );
 }
+
+export default React.memo(AccountsTree);
diff --git a/packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx b/packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx
index 763ff7a83..10dcae4ac 100644
--- a/packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx
+++ b/packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx
@@ -98,7 +98,7 @@ export default function AiBackgroundImage ({ bgImage, setBgImage }: Props): Reac
       <Grid alignItems='baseline' container item justifyContent='flex-end' xs>
         <Grid item onClick={onAiBackground}>
           <Infotip2 showInfoMark text={t('Click to set an AI-generated background.')}>
-            <Typography sx={{ cursor: 'pointer', fontSize: '11px', pl: '5px', textDecoration: 'underline', userSelect: 'none' }}>
+            <Typography sx={{ color: 'secondary.contrastText', cursor: 'pointer', fontSize: '11px', pl: '5px', textDecoration: 'underline', userSelect: 'none' }}>
               {t('AI Background')}
             </Typography>
           </Infotip2>
diff --git a/packages/extension-polkagate/src/popup/home/ProfileTab.tsx b/packages/extension-polkagate/src/popup/home/ProfileTab.tsx
index e528ba323..51630c2a3 100644
--- a/packages/extension-polkagate/src/popup/home/ProfileTab.tsx
+++ b/packages/extension-polkagate/src/popup/home/ProfileTab.tsx
@@ -75,7 +75,7 @@ function ProfileTab ({ index, isContainerHovered, isSelected, orderedAccounts, t
   const onMouseLeave = useCallback(() => setIsHovered(false), []);
 
   return (
-    <Grid container item sx={{ transform: !isContainerHovered && !isSelected ? `translateY(${HIDDEN_PERCENT})` : undefined, transition: 'transform 0.2s', width: 'fit-content' }}>
+    <Grid container item sx={{ transform: !isContainerHovered && !isSelected ? `translateY(${HIDDEN_PERCENT})` : undefined, transition: 'transform 0.75s', width: 'fit-content' }}>
       <Collapse
         collapsedSize={COLLAPSED_SIZE}
         in={visibleContent}
@@ -92,15 +92,17 @@ function ProfileTab ({ index, isContainerHovered, isSelected, orderedAccounts, t
           cursor: 'pointer',
           height: COLLAPSED_SIZE,
           my: '2px',
-          opacity: isDarkMode ? (isContainerHovered || isSelected ? 1 : 0.3) : undefined
+          opacity: isDarkMode ? (isContainerHovered || isSelected ? 1 : 0.3) : undefined,
+          transition: visibleContent ? 'box-shadow 1s, opacity 1s' : 'box-shadow 0.2s'
         }}
       >
         <Grid alignItems='center' container item justifyContent='center' sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', minWidth: '40px', px: '8px', width: 'fit-content' }}>
-          <Typography color='text.primary' fontSize='14px' fontWeight={400} sx={{ lineHeight: 'normal', maxWidth: '100px', overflowX: 'hidden', textOverflow: 'ellipsis', transition: 'visibility 0.1s ease', userSelect: 'none', visibility: visibleContent ? 'visible' : 'hidden', whiteSpace: 'nowrap', width: 'fit-content' }} textAlign='center'>
+          <Typography color='text.primary' fontSize='14px' sx={{ lineHeight: 'normal', maxWidth: '100px', overflowX: 'hidden', textOverflow: 'ellipsis', transition: 'visibility 0.1s ease', userSelect: 'none', visibility: visibleContent ? 'visible' : 'hidden', whiteSpace: 'nowrap', width: 'fit-content' }} textAlign='center'>
             {t(text)}
           </Typography>
           {areAllHidden && isSelected &&
-            <VaadinIcon icon='vaadin:eye-slash' style={{ display: 'block', height: '13px', marginLeft: '5px', width: '15px' }} />}
+            <VaadinIcon icon='vaadin:eye-slash' style={{ display: 'block', height: '13px', marginLeft: '5px', width: '15px' }} />
+          }
         </Grid>
       </Collapse>
     </Grid>
diff --git a/packages/extension-polkagate/src/popup/home/YouHave.tsx b/packages/extension-polkagate/src/popup/home/YouHave.tsx
index 5dc694881..9291cfd8d 100644
--- a/packages/extension-polkagate/src/popup/home/YouHave.tsx
+++ b/packages/extension-polkagate/src/popup/home/YouHave.tsx
@@ -5,15 +5,23 @@
 
 import type { YouHaveType } from '../../hooks/useYouHave';
 
-import { Box, Grid, Typography, useTheme } from '@mui/material';
-import React from 'react';
+import { MoreVert as MoreVertIcon } from '@mui/icons-material';
+import { Box, Grid, IconButton, Stack, Typography, useTheme } from '@mui/material';
+import React, { useCallback, useMemo, useState } from 'react';
+import CountUp from 'react-countup';
 
-import { stars6Black, stars6White } from '../../assets/icons';
-import { FormatPrice } from '../../components';
+import { stars5Black, stars5White } from '../../assets/icons';
+import { logoBlack, logoWhite } from '../../assets/logos';
+import { FormatPrice, Infotip2 } from '../../components';
 import HideBalance from '../../components/SVG/HideBalance';
-import { useIsHideNumbers, useYouHave } from '../../hooks';
+import Currency from '../../fullscreen/homeFullScreen/partials/Currency';
+import { changeSign, PORTFOLIO_CHANGE_DECIMAL } from '../../fullscreen/homeFullScreen/partials/TotalBalancePieChart';
+import { useCurrency, useIsHideNumbers, useYouHave } from '../../hooks';
 import { PRICE_VALIDITY_PERIOD } from '../../hooks/usePrices';
 import useTranslation from '../../hooks/useTranslation';
+import Menu from '../../partials/Menu';
+import { COIN_GECKO_PRICE_CHANGE_DURATION } from '../../util/api/getPrices';
+import { countDecimalPlaces, fixFloatingPoint } from '../../util/utils';
 
 export const isPriceOutdated = (youHave: YouHaveType | null | undefined): boolean | undefined =>
   youHave ? (Date.now() - youHave.date > 2 * PRICE_VALIDITY_PERIOD) : undefined;
@@ -22,43 +30,155 @@ export default function YouHave (): React.ReactElement {
   const { t } = useTranslation();
   const theme = useTheme();
   const youHave = useYouHave();
+  const currency = useCurrency();
+
+  const isDark = theme.palette.mode === 'dark';
+  const shadow = isDark
+    ? '0px 0px 5px 2px rgba(255, 255, 255, 0.1)'
+    : '0px 0px 10px rgba(0, 0, 0, 0.10)';
+
+  const youHaveStyle = {
+    '&::before': {
+      background: isDark
+        ? 'linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), transparent)'
+        : 'linear-gradient(to bottom right, rgba(66, 61, 61, 0.276), transparent)',
+      content: '""',
+      height: '100%',
+      left: '-50%',
+      pointerEvents: 'none',
+      position: 'absolute',
+      top: '-50%',
+      transform: 'rotate(12deg)',
+      width: '100%'
+    },
+    bgcolor: 'divider',
+    border: '1px solid',
+    borderColor: 'divider',
+    borderRadius: '10px',
+    boxShadow: shadow,
+    m: '20px 4% 10px',
+    minHeight: '125px',
+    overflow: 'hidden',
+    position: 'relative',
+    width: '100%'
+  };
+
   const { isHideNumbers, toggleHideNumbers } = useIsHideNumbers();
+  const [isMenuOpen, setOpenMenu] = useState(false);
+
+  const portfolioChange = useMemo(() => {
+    if (!youHave?.change) {
+      return 0;
+    }
+
+    const value = fixFloatingPoint(youHave.change, PORTFOLIO_CHANGE_DECIMAL, false, true);
+
+    return parseFloat(value);
+  }, [youHave?.change]);
+
+  const onMenuClick = useCallback(() => {
+    setOpenMenu((open) => !open);
+  }, []);
 
   return (
-    <Grid container sx={{ pb: '10px', position: 'relative', pt: '5px', textAlign: 'center', zIndex: 1 }}>
-      <Grid item xs={12}>
-        <Typography sx={{ fontSize: '16px', fontVariant: 'small-caps' }}>
-          {t('My Portfolio')}
-        </Typography>
-      </Grid>
-      <Grid container item justifyContent='center' xs={12}>
-        {isHideNumbers
-          ? <Box
-            component='img'
-            src={(theme.palette.mode === 'dark' ? stars6White : stars6Black) as string}
-            sx={{ height: '36px', width: '154px' }}
-          />
-          : <FormatPrice
-            fontSize='32px'
-            fontWeight={500}
-            height={36}
-            num={youHave?.portfolio }
-            skeletonHeight={36}
-            textColor= { isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
-            width='223px'
-            withCountUp
-            withSmallDecimal
-          />
-        }
-        <Grid alignItems='center' item sx={{ position: 'absolute', right: '14px', top: '25px' }}>
-          <HideBalance
-            hide={isHideNumbers}
-            lightColor={theme.palette.secondary.light}
-            onClick={toggleHideNumbers}
-            size={22}
-          />
+    <>
+      <Grid
+        alignItems='flex-start' container sx={{ ...youHaveStyle }}
+      >
+        <Grid container sx={{ position: 'relative', px: '10px', py: '5px' }}>
+          <Grid container item sx={{ textAlign: 'left' }}>
+            <Typography sx={{ fontSize: '16px', fontVariant: 'small-caps', fontWeight: 400, lineHeight: 'normal', mt: '10px' }}>
+              {t('My Portfolio')}
+            </Typography>
+          </Grid>
+          <Grid container item justifyContent='flex-start' pt='15px'>
+            {isHideNumbers
+              ? <Box
+                component='img'
+                src={(theme.palette.mode === 'dark' ? stars5White : stars5Black) as string}
+                sx={{ height: '20px', width: '130px' }}
+              />
+              : <>
+                <Stack alignItems='center' direction='row' justifyContent='space-between' sx={{ flexWrap: 'wrap', mr: '15px', textAlign: 'start', width: '100%' }}>
+                  <Stack alignItems='flex-start' direction='row' sx={{ ml: '-5px' }}>
+                    <Currency
+                      color='secondary.light'
+                      dialogLeft={60}
+                      fontSize='25px'
+                      height='27px'
+                      minWidth='27px'
+                    />
+                    <Grid item sx={{ ml: '5px' }}>
+                      <FormatPrice
+                        fontSize='28px'
+                        fontWeight={500}
+                        num={youHave?.portfolio}
+                        sign=' '
+                        skeletonHeight={28}
+                        textColor={isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
+                        width='100px'
+                        withCountUp
+                        withSmallDecimal
+                      />
+                    </Grid>
+                  </Stack>
+                  <Typography sx={{ color: !youHave?.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.contrastText' : 'warning.main', fontSize: '15px', fontWeight: 400 }}>
+                    <CountUp
+                      decimals={countDecimalPlaces(portfolioChange) || PORTFOLIO_CHANGE_DECIMAL}
+                      duration={1}
+                      end={portfolioChange}
+                      prefix={`${changeSign(youHave?.change)}${currency?.sign}`}
+                      suffix={`(${COIN_GECKO_PRICE_CHANGE_DURATION}h)`}
+                    />
+                  </Typography>
+                </Stack>
+                <Stack alignItems='center' direction='row' spacing={1} sx={{ ml: '5px', mt: '5px', textAlign: 'start', width: '100%' }}>
+                  <FormatPrice
+                    fontSize='14px'
+                    fontWeight={400}
+                    num={youHave?.available}
+                    skeletonHeight={14}
+                    textColor={'primary.light'}
+                    width='100px'
+                    withCountUp
+                  />
+                  <Typography sx={{ color: 'primary.light', fontSize: '14px', fontWeight: 400 }}>
+                    {t('available')}
+                  </Typography>
+                </Stack>
+              </>
+            }
+            <Infotip2 text={t('Menu options')}>
+              <IconButton
+                onClick={onMenuClick}
+                sx={{ p: 0, position: 'absolute', pt: '3px', right: '3px', top: '8px' }}
+              >
+                <MoreVertIcon sx={{ color: 'secondary.light', fontSize: '33px' }} />
+              </IconButton>
+            </Infotip2>
+          </Grid>
+          <Grid item sx={{ position: 'absolute', right: '30px', top: '5px' }}>
+            <HideBalance
+              darkColor={theme.palette.secondary.light}
+              hide={isHideNumbers}
+              lightColor={theme.palette.secondary.light}
+              onClick={toggleHideNumbers}
+              size={20}
+            />
+          </Grid>
         </Grid>
+
       </Grid>
-    </Grid>
+      <Menu
+        isMenuOpen={isMenuOpen}
+        setShowMenu={setOpenMenu}
+      />
+      <Box
+        alt='PolkaGate logo'
+        component='img'
+        src={theme.palette.mode === 'dark' ? logoBlack as string : logoWhite as string}
+        sx={{ borderRadius: '30px', boxShadow: '0px 0px 5px 1px rgba(0,0,0,0.15)', height: 34, left: 'calc(50% - 17px)', position: 'absolute', top: '5px', width: 34 }}
+      />
+    </>
   );
 }
diff --git a/packages/extension-polkagate/src/popup/home/index.tsx b/packages/extension-polkagate/src/popup/home/index.tsx
index 7daa346db..dbffe91be 100644
--- a/packages/extension-polkagate/src/popup/home/index.tsx
+++ b/packages/extension-polkagate/src/popup/home/index.tsx
@@ -18,8 +18,6 @@ import { AccountContext, Warning } from '../../components';
 import { getStorage, type LoginInfo } from '../../components/Loading';
 import { useAccountsOrder, useIsHideNumbers, useManifest, useMerkleScience, useProfileAccounts, useTranslation } from '../../hooks';
 import { AddNewAccountButton } from '../../partials';
-import HeaderBrand from '../../partials/HeaderBrand';
-import { EXTENSION_NAME } from '../../util/constants';
 import Reset from '../passwordManagement/Reset';
 import Welcome from '../welcome';
 import AccountsTree from './AccountsTree';
@@ -96,16 +94,7 @@ export default function Home (): React.ReactElement {
           position: 'relative'
         }}
         >
-          <Grid padding='0px' textAlign='center' xs={12}>
-            <HeaderBrand
-              noBorder
-              showBrand
-              showFullScreen
-              showMenu
-              style={{ '> div div:nth-child(3)': { minWidth: '23%' }, pr: '10px' }}
-              text={EXTENSION_NAME}
-            />
-          </Grid>
+          <YouHave />
           {hasActiveRecovery &&
             <Grid container item sx={{ '> div.belowInput .warningImage': { fontSize: '18px' }, '> div.belowInput.danger': { m: 0, position: 'relative' }, height: '55px', pt: '8px', width: '92%' }}>
               <Warning
@@ -119,9 +108,8 @@ export default function Home (): React.ReactElement {
               </Warning>
             </Grid>
           }
-          <YouHave />
           <ProfileTabs orderedAccounts={accountsOrder} />
-          <Container disableGutters sx={[{ m: 'auto', maxHeight: `${self.innerHeight - (hasActiveRecovery ? 220 : 165)}px`, overflowY: 'scroll', pb: '10px', px: '4%' }]}>
+          <Container disableGutters sx={[{ m: 'auto', maxHeight: `${self.innerHeight - (hasActiveRecovery ? 252 : 197)}px`, overflowY: 'scroll', pb: '10px', px: '4%' }]}>
             {initialAccountList.map((json, index): React.ReactNode => (
               <AccountsTree
                 {...json}
diff --git a/packages/extension-polkagate/src/popup/home/news.ts b/packages/extension-polkagate/src/popup/home/news.ts
index e63b3bb7c..6d6d372fd 100644
--- a/packages/extension-polkagate/src/popup/home/news.ts
+++ b/packages/extension-polkagate/src/popup/home/news.ts
@@ -12,10 +12,11 @@ export const news: News[] = [
   {
     version: '0.23.0',
     notes: [
-      'Support for NFTs: View the details of your account’s NFTs',
-      'Set Conviction with the Slider: Easily set convictions in governance using the slider.',
+      'Support for NFTs: View the details of your account’s NFTs.',
       'View Portfolio Price Change: Display the portfolio’s price change over the last 24 hours with an engaging count-up effect.',
-      'View Governance History: In addition to transfer and staking histories, governance histories for supported chains are now available on the history page.'
+      'View Governance History: Access governance histories for supported chains, alongside transfer and staking histories, on the history page.',
+      'View Validators APY: Check the Annual Percentage Yield (APY) of validators to make informed and strategic selections.',
+      'Set Conviction with the Slider: Easily adjust convictions in governance using the slider.'
     ]
   },
   {
diff --git a/packages/extension-polkagate/src/themes/dark.ts b/packages/extension-polkagate/src/themes/dark.ts
index 830ccb78a..0f3a68bf6 100644
--- a/packages/extension-polkagate/src/themes/dark.ts
+++ b/packages/extension-polkagate/src/themes/dark.ts
@@ -42,7 +42,7 @@ export const darkTheme: ThemeOptions = {
     backgroundFL: { primary: '#000000', secondary: '#171717' },
     text: { primary: '#D5D5D5', secondary: '#000000', disabled: '#4B4B4B' },
     action: { disabled: '#fff', disabledBackground: '#4B4B4B', focus: '#BA82A5' },
-    success: { main: '#1F7720', light: '#46890C' },
+    success: { main: '#1F7720', light: '#46890C', contrastText: '#2ECC71' },
     warning: { main: '#FF002B' },
     divider: 'rgba(255, 255, 255, 0.1)'
   },
diff --git a/packages/extension-polkagate/src/themes/light.ts b/packages/extension-polkagate/src/themes/light.ts
index ffb3139f6..8df746750 100644
--- a/packages/extension-polkagate/src/themes/light.ts
+++ b/packages/extension-polkagate/src/themes/light.ts
@@ -41,7 +41,7 @@ export const lightTheme: ThemeOptions = {
     backgroundFL: { primary: '#DFDFDF', secondary: '#F1F1F1' },
     text: { primary: '#63364D', secondary: '#FFFFFF', disabled: '#747474' },
     action: { disabled: '#fff', disabledBackground: '#989898', focus: '#BA82A5' },
-    success: { main: '#1F7720', light: '#46890C' },
+    success: { main: '#1F7720', light: '#46890C', contrastText: '#228B22' },
     warning: { main: '#FF002B' },
     divider: '#cecece'
   },
diff --git a/packages/extension-polkagate/src/util/utils.ts b/packages/extension-polkagate/src/util/utils.ts
index 078d32209..8d16fd200 100644
--- a/packages/extension-polkagate/src/util/utils.ts
+++ b/packages/extension-polkagate/src/util/utils.ts
@@ -577,4 +577,4 @@ export const decodeMultiLocation = (hexString: HexString) => {
   }
 
   return decodeHexValues(decodedMultiLocation);
-};
+};
\ No newline at end of file
diff --git a/packages/extension/public/locales/en/translation.json b/packages/extension/public/locales/en/translation.json
index d8f6f4225..fa7e03b40 100644
--- a/packages/extension/public/locales/en/translation.json
+++ b/packages/extension/public/locales/en/translation.json
@@ -1462,5 +1462,8 @@
   "Unable to fetch NFT/Unique items!": "",
   "Referenda Id": "",
   "Track Id": "",
-  "Select the currency for your balance": ""
+  "Select the currency for your balance": "",
+  "available": "",
+  "Menu options": "",
+  "PolkaGate logo": ""
 }
diff --git a/packages/extension/public/locales/fr/translation.json b/packages/extension/public/locales/fr/translation.json
index 0a590bce8..1a7f775bf 100644
--- a/packages/extension/public/locales/fr/translation.json
+++ b/packages/extension/public/locales/fr/translation.json
@@ -1413,5 +1413,47 @@
   "Empower us to continue delivering valuable improvements and innovations.": "Aidez-nous à continuer à fournir des améliorations et des innovations précieuses.",
   "Voting won't spend your tokens—they'll just be temporarily locked based on your chosen conviction level.": "Le vote ne dépensera pas vos jetons — ils seront temporairement verrouillés en fonction de votre niveau de conviction choisi.",
   "I'll think about it": "Je vais y réfléchir",
-  "Vote Now": "Votez maintenant"
+  "Vote Now": "Votez maintenant",
+  "Tokens will be locked for": "Les tokens seront verrouillés pendant",
+  "Drag to move the window.": "Faites glisser pour déplacer la fenêtre.",
+  "NFT album": "Album NFT",
+  "NFT Detail": "Détail NFT",
+  "Unique Detail": "Détail unique",
+  "Collection name": "Nom de la collection",
+  "Collection ID": "ID de la collection",
+  "Items": "Articles",
+  "NFT ID": "ID NFT",
+  "Unique ID": "ID unique",
+  "Price": "Prix",
+  "Creator": "Créateur",
+  "Owner": "Propriétaire",
+  "Network": "Réseau",
+  "Image": "Image",
+  "Animation": "Animation",
+  "Audio": "Audio",
+  "Media": "Média",
+  "View on": "Voir sur",
+  "View in Full Screen": "Voir en plein écran",
+  "🔍 Search": "🔍 Rechercher",
+  "Not listed": "Non listé",
+  "Collections": "Collections",
+  "NFTs": "NFTs",
+  "Uniques": "Objets uniques",
+  "Kusama Asset Hub": "Kusama Asset Hub",
+  "Polkadot Asset Hub": "Polkadot Asset Hub",
+  "Sort": "Trier",
+  "Price: High to Low": "Prix : élevé à faible",
+  "Price: Low to High": "Prix : faible à élevé",
+  "Looking for NFTs/Uniques!": "À la recherche de NFTs/Objets uniques !",
+  "You do not own any NFTs/Uniques": "Vous ne possédez aucun NFT ou objet unique",
+  "Nothing to Show": "Rien à afficher",
+  "NFT Album": "Album NFT",
+  "The chosen blockchain does not support NFTs/Uniques.": "La blockchain choisie ne prend pas en charge les NFTs/Objets uniques.",
+  "Here, you can view all your created or owned NFTs and unique items. Click on any to enlarge, access more details, and view in fullscreen mode.": "Ici, vous pouvez voir tous vos NFTs et objets uniques créés ou possédés. Cliquez sur l'un d'eux pour l'agrandir, accéder à plus de détails et le voir en plein écran.",
+  "APY": "APY",
+  "Unable to fetch NFT/Unique items!": "Impossible de récupérer les NFTs/Objets uniques !",
+  "Referenda Id": "ID du référendum",
+  "Track Id": "ID de la piste",
+  "Select the currency for your balance": "Sélectionnez la devise de votre solde",
+  "available": "disponible"
 }
\ No newline at end of file
diff --git a/packages/extension/public/locales/hi/translation.json b/packages/extension/public/locales/hi/translation.json
index 3d9973fec..5aa5a01bb 100644
--- a/packages/extension/public/locales/hi/translation.json
+++ b/packages/extension/public/locales/hi/translation.json
@@ -1410,5 +1410,47 @@
   "Empower us to continue delivering valuable improvements and innovations.": "हमें मूल्यवान सुधार और नवाचार जारी रखने के लिए सशक्त बनाएं।",
   "Voting won't spend your tokens—they'll just be temporarily locked based on your chosen conviction level.": "मतदान आपके टोकन खर्च नहीं करेगा—वे केवल आपकी चुनी हुई प्रतिबद्धता स्तर के अनुसार अस्थायी रूप से लॉक हो जाएंगे।",
   "I'll think about it": "मैं इसके बारे में सोचूंगा",
-  "Vote Now": "अभी वोट करें"
+  "Vote Now": "अभी वोट करें",
+  "Tokens will be locked for": "टोकन लॉक किए जाएंगे",
+  "Drag to move the window.": "विंडो को स्थानांतरित करने के लिए खींचें।",
+  "NFT album": "NFT एल्बम",
+  "NFT Detail": "NFT विवरण",
+  "Unique Detail": "विशेष विवरण",
+  "Collection name": "संग्रह का नाम",
+  "Collection ID": "संग्रह आईडी",
+  "Items": "आइटम्स",
+  "NFT ID": "NFT आईडी",
+  "Unique ID": "विशेष आईडी",
+  "Price": "कीमत",
+  "Creator": "निर्माता",
+  "Owner": "मालिक",
+  "Network": "नेटवर्क",
+  "Image": "छवि",
+  "Animation": "एनिमेशन",
+  "Audio": "ऑडियो",
+  "Media": "मीडिया",
+  "View on": "पर देखें",
+  "View in Full Screen": "पूर्ण स्क्रीन में देखें",
+  "🔍 Search": "🔍 खोजें",
+  "Not listed": "सूचीबद्ध नहीं",
+  "Collections": "संग्रह",
+  "NFTs": "NFTs",
+  "Uniques": "अद्वितीय वस्तुएं",
+  "Kusama Asset Hub": "कुसामा एसेट हब",
+  "Polkadot Asset Hub": "पोलकाडॉट एसेट हब",
+  "Sort": "क्रमबद्ध करें",
+  "Price: High to Low": "मूल्य: उच्च से निम्न",
+  "Price: Low to High": "मूल्य: निम्न से उच्च",
+  "Looking for NFTs/Uniques!": "NFTs/अद्वितीय वस्तुएं खोज रहे हैं!",
+  "You do not own any NFTs/Uniques": "आपके पास कोई NFT या अद्वितीय वस्तु नहीं है।",
+  "Nothing to Show": "दिखाने के लिए कुछ नहीं है।",
+  "NFT Album": "NFT एल्बम",
+  "The chosen blockchain does not support NFTs/Uniques.": "चुना गया ब्लॉकचेन NFTs/अद्वितीय वस्तुओं का समर्थन नहीं करता है।",
+  "Here, you can view all your created or owned NFTs and unique items. Click on any to enlarge, access more details, and view in fullscreen mode.": "यहां, आप अपने द्वारा बनाए गए या स्वामित्व वाले NFTs और अद्वितीय वस्तुओं को देख सकते हैं। किसी पर क्लिक करें इसे बड़ा करने, अधिक जानकारी प्राप्त करने, और पूर्ण स्क्रीन मोड में देखने के लिए।",
+  "APY": "APY",
+  "Unable to fetch NFT/Unique items!": "NFT/अद्वितीय वस्तुएं प्राप्त करने में असमर्थ!",
+  "Referenda Id": "रेफरेंडा आईडी",
+  "Track Id": "ट्रैक आईडी",
+  "Select the currency for your balance": "अपनी शेष राशि के लिए मुद्रा चुनें",
+  "available": "उपलब्ध"
 }
\ No newline at end of file
diff --git a/packages/extension/public/locales/ru/translation.json b/packages/extension/public/locales/ru/translation.json
index 7b1d14e7f..dcfad83b5 100644
--- a/packages/extension/public/locales/ru/translation.json
+++ b/packages/extension/public/locales/ru/translation.json
@@ -1408,5 +1408,47 @@
   "Empower us to continue delivering valuable improvements and innovations.": "Помогите нам продолжать вносить ценные улучшения и инновации.",
   "Voting won't spend your tokens—they'll just be temporarily locked based on your chosen conviction level.": "Голосование не потратит ваши токены — они будут временно заблокированы в зависимости от выбранного уровня уверенности.",
   "I'll think about it": "Я подумаю",
-  "Vote Now": "Голосовать сейчас"
+  "Vote Now": "Голосовать сейчас",
+  "Tokens will be locked for": "Токены будут заблокированы на",
+    "Drag to move the window.": "Перетащите, чтобы переместить окно.",
+    "NFT album": "Альбом NFT",
+    "NFT Detail": "Детали NFT",
+    "Unique Detail": "Уникальные детали",
+    "Collection name": "Название коллекции",
+    "Collection ID": "ID коллекции",
+    "Items": "Предметы",
+    "NFT ID": "ID NFT",
+    "Unique ID": "Уникальный ID",
+    "Price": "Цена",
+    "Creator": "Создатель",
+    "Owner": "Владелец",
+    "Network": "Сеть",
+    "Image": "Изображение",
+    "Animation": "Анимация",
+    "Audio": "Аудио",
+    "Media": "Медиа",
+    "View on": "Посмотреть на",
+    "View in Full Screen": "Просмотр в полноэкранном режиме",
+    "🔍 Search": "🔍 Поиск",
+    "Not listed": "Не указано",
+    "Collections": "Коллекции",
+    "NFTs": "NFT",
+    "Uniques": "Уникальные предметы",
+    "Kusama Asset Hub": "Kusama Asset Hub",
+    "Polkadot Asset Hub": "Polkadot Asset Hub",
+    "Sort": "Сортировать",
+    "Price: High to Low": "Цена: от высокой к низкой",
+    "Price: Low to High": "Цена: от низкой к высокой",
+    "Looking for NFTs/Uniques!": "Ищете NFT/Уникальные предметы!",
+    "You do not own any NFTs/Uniques": "У вас нет NFT или уникальных предметов",
+    "Nothing to Show": "Нечего показать",
+    "NFT Album": "Альбом NFT",
+    "The chosen blockchain does not support NFTs/Uniques.": "Выбранный блокчейн не поддерживает NFT/Уникальные предметы.",
+    "Here, you can view all your created or owned NFTs and unique items. Click on any to enlarge, access more details, and view in fullscreen mode.": "Здесь вы можете увидеть все созданные или принадлежащие вам NFT и уникальные предметы. Нажмите на любой, чтобы увеличить, получить больше информации и просмотреть в полноэкранном режиме.",
+    "APY": "APY",
+    "Unable to fetch NFT/Unique items!": "Не удалось получить NFT/Уникальные предметы!",
+    "Referenda Id": "ID референдума",
+    "Track Id": "ID трека",
+    "Select the currency for your balance": "Выберите валюту для вашего баланса",
+    "available": "доступно"
 }
\ No newline at end of file
diff --git a/packages/extension/public/locales/zh/translation.json b/packages/extension/public/locales/zh/translation.json
index 3ec97eac3..092bebc01 100644
--- a/packages/extension/public/locales/zh/translation.json
+++ b/packages/extension/public/locales/zh/translation.json
@@ -1417,5 +1417,47 @@
   "Empower us to continue delivering valuable improvements and innovations.": "支持我们继续提供有价值的改进和创新。",
   "Voting won't spend your tokens—they'll just be temporarily locked based on your chosen conviction level.": "投票不会花费您的代币——它们只会根据您选择的信念级别暂时锁定。",
   "I'll think about it": "我再考虑一下",
-  "Vote Now": "立即投票"
+  "Vote Now": "立即投票",
+  "Tokens will be locked for": "代币将被锁定",
+    "Drag to move the window.": "拖动以移动窗口。",
+    "NFT album": "NFT相册",
+    "NFT Detail": "NFT详情",
+    "Unique Detail": "唯一详情",
+    "Collection name": "收藏名称",
+    "Collection ID": "收藏ID",
+    "Items": "项目",
+    "NFT ID": "NFT编号",
+    "Unique ID": "唯一编号",
+    "Price": "价格",
+    "Creator": "创作者",
+    "Owner": "所有者",
+    "Network": "网络",
+    "Image": "图片",
+    "Animation": "动画",
+    "Audio": "音频",
+    "Media": "媒体",
+    "View on": "查看于",
+    "View in Full Screen": "全屏查看",
+    "🔍 Search": "🔍 搜索",
+    "Not listed": "未列出",
+    "Collections": "收藏",
+    "NFTs": "NFTs",
+    "Uniques": "独特项目",
+    "Kusama Asset Hub": "Kusama资产中心",
+    "Polkadot Asset Hub": "Polkadot资产中心",
+    "Sort": "排序",
+    "Price: High to Low": "价格：从高到低",
+    "Price: Low to High": "价格：从低到高",
+    "Looking for NFTs/Uniques!": "正在寻找NFT/独特项目！",
+    "You do not own any NFTs/Uniques": "您没有任何NFT或独特项目。",
+    "Nothing to Show": "无可展示内容。",
+    "NFT Album": "NFT相册",
+    "The chosen blockchain does not support NFTs/Uniques.": "所选区块链不支持NFT/独特项目。",
+    "Here, you can view all your created or owned NFTs and unique items. Click on any to enlarge, access more details, and view in fullscreen mode.": "在这里，您可以查看所有创建或拥有的NFT和独特项目。点击任意项目可放大、查看详细信息，并进入全屏模式。",
+    "APY": "年化收益率",
+    "Unable to fetch NFT/Unique items!": "无法获取NFT/独特项目！",
+    "Referenda Id": "公投编号",
+    "Track Id": "轨道编号",
+    "Select the currency for your balance": "选择余额货币",
+    "available": "可用"
 }
\ No newline at end of file