diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx
index 43f899499..8949fcea0 100644
--- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx
+++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx
@@ -56,14 +56,13 @@ const BalanceRow = ({ api, asset, pricesInCurrencies }: BalanceRowProps) => {
           token={asset.token}
         />
       </Grid>
-      <Grid item sx={{ fontSize: '13px', fontWeight: 400, lineHeight: 1 }}>
-        <FormatPrice
-          amount={total}
-          decimals={asset.decimal}
-          fontSize='13px'
-          price={pricesInCurrencies?.prices?.[asset.priceId]?.value ?? 0}
-        />
-      </Grid>
+      <FormatPrice
+        amount={total}
+        decimals={asset.decimal}
+        fontSize='13px'
+        fontWeight={ 400}
+        price={pricesInCurrencies?.prices?.[asset.priceId]?.value ?? 0}
+      />
     </Grid>
   );
 };
diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx
index b80a989ce..88a502c54 100644
--- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx
+++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx
@@ -28,15 +28,16 @@ interface PriceJSXType {
 }
 
 const Price = ({ balanceToShow, isPriceOutdated, price }: PriceJSXType) => (
-  <Grid item sx={{ '> div span': { display: 'block' }, color: isPriceOutdated ? 'primary.light' : 'text.primary', fontWeight: 400 }}>
-    <FormatPrice
-      amount={getValue('total', balanceToShow)}
-      decimals={balanceToShow?.decimal}
-      price={price}
-      skeletonHeight={22}
-      width='80px'
-    />
-  </Grid>
+  <FormatPrice
+    amount={getValue('total', balanceToShow)}
+    decimals={balanceToShow?.decimal}
+    fontSize='28px'
+    fontWeight= { 400 }
+    price={price}
+    skeletonHeight={22}
+    textColor={ isPriceOutdated ? 'primary.light' : 'text.primary'}
+    width='80px'
+  />
 );
 
 interface BalanceJSXType {
diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AssetSelect.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AssetSelect.tsx
index 835a6f11b..58f15c96f 100644
--- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AssetSelect.tsx
+++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AssetSelect.tsx
@@ -1,6 +1,5 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
@@ -19,7 +18,7 @@ interface Props {
   setAssetId: React.Dispatch<React.SetStateAction<number | undefined>>
 }
 
-function AssetSelect({ address, assetId, label, onChange, setAssetId, style }: Props) {
+function AssetSelect ({ address, assetId, label, onChange, setAssetId, style }: Props) {
   const tokens = useTokens(address);
   const assets = useAssetHubAssets(address);
   const options = useMemo(() => (tokens || []).concat(assets || []), [assets, tokens]);
diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/DisplayBalance.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/DisplayBalance.tsx
index cdf20d799..ed9ad2e41 100644
--- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/DisplayBalance.tsx
+++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/DisplayBalance.tsx
@@ -4,13 +4,12 @@
 /* eslint-disable react/jsx-max-props-per-line */
 
 import type { Balance } from '@polkadot/types/interfaces';
+import type { BN } from '@polkadot/util';
 
 import { ArrowForwardIosRounded as ArrowForwardIosRoundedIcon } from '@mui/icons-material';
 import { Divider, Grid, IconButton, Typography, useTheme } from '@mui/material';
 import React from 'react';
 
-import { BN } from '@polkadot/util';
-
 import { FormatPrice, ShowBalance } from '../../../components';
 
 interface Props {
@@ -24,7 +23,7 @@ interface Props {
   openCollapse?: boolean;
 }
 
-export default function DisplayBalance({ amount, decimal, disabled, onClick, price, openCollapse, title, token }: Props): React.ReactElement {
+export default function DisplayBalance ({ amount, decimal, disabled, onClick, openCollapse, price, title, token }: Props): React.ReactElement {
   const theme = useTheme();
 
   return (
@@ -43,14 +42,14 @@ export default function DisplayBalance({ amount, decimal, disabled, onClick, pri
           />
         </Grid>
         <Divider orientation='vertical' sx={{ backgroundColor: 'text.primary', height: '35px', mx: '10px', my: 'auto' }} />
-        <Grid item sx={{ '> div span': { display: 'block' }, fontSize: '22px', fontWeight: 400 }}>
-          <FormatPrice
-            amount={amount}
-            decimals={decimal}
-            price={price}
-            skeletonHeight={20}
-          />
-        </Grid>
+        <FormatPrice
+          amount={amount}
+          decimals={decimal}
+          fontSize= '22px'
+          fontWeight= {400}
+          price={price}
+          skeletonHeight={20}
+        />
         {onClick &&
           <Grid item m='auto' pl='8px'>
             <IconButton
diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/LockedInReferendaFS.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/LockedInReferendaFS.tsx
index e70504404..16880a034 100644
--- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/LockedInReferendaFS.tsx
+++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/LockedInReferendaFS.tsx
@@ -83,14 +83,14 @@ export default function LockedInReferendaFS ({ address, price, refreshNeeded, se
               />
             </Grid>
             <Divider orientation='vertical' sx={{ backgroundColor: 'text.primary', height: '35px', mx: '10px', my: 'auto' }} />
-            <Grid item sx={{ '> div span': { display: 'block' }, fontSize: '22px', fontWeight: 400 }}>
-              <FormatPrice
-                amount={totalLocked}
-                decimals={decimal}
-                price={price}
-                skeletonHeight={20}
-              />
-            </Grid>
+            <FormatPrice
+              amount={totalLocked}
+              decimals={decimal}
+              fontSize= '22px'
+              fontWeight={ 400}
+              price={price}
+              skeletonHeight={20}
+            />
           </Grid>
           <Typography fontSize='12px' fontWeight={500} textAlign='right'>
             {api && unlockableAmount && !unlockableAmount.isZero()
diff --git a/packages/extension-polkagate/src/fullscreen/governance/AllReferendaStats.tsx b/packages/extension-polkagate/src/fullscreen/governance/AllReferendaStats.tsx
index 5750718fb..36e7b53c1 100644
--- a/packages/extension-polkagate/src/fullscreen/governance/AllReferendaStats.tsx
+++ b/packages/extension-polkagate/src/fullscreen/governance/AllReferendaStats.tsx
@@ -68,10 +68,11 @@ const TreasuryBalanceStat = ({ address, balance, noDivider, rowDisplay, style, t
           <Grid alignItems='center' container item sx={{ fontSize: '18px', fontWeight: 500, height: '36px', letterSpacing: '-0.015em', pt: '10px' }} width='fit-content'>
             <ShowBalance api={api} balance={balance} decimal={decimal} decimalPoint={2} token={token} />
           </Grid>
-          <Grid container item sx={{ fontSize: '16px', letterSpacing: '-0.015em' }} width='fit-content'>
+          <Grid container item width='fit-content'>
             <FormatPrice
               amount={balance}
               decimals={decimal}
+              fontSize= '16px'
               price={tokenPrice}
             />
           </Grid>
diff --git a/packages/extension-polkagate/src/fullscreen/governance/post/Description.tsx b/packages/extension-polkagate/src/fullscreen/governance/post/Description.tsx
index 07706cbd4..343c763d2 100644
--- a/packages/extension-polkagate/src/fullscreen/governance/post/Description.tsx
+++ b/packages/extension-polkagate/src/fullscreen/governance/post/Description.tsx
@@ -145,11 +145,12 @@ export default function ReferendumDescription ({ address, currentTreasuryApprova
                         />
                       </Grid>
                       <Divider flexItem orientation='vertical' sx={{ bgcolor: theme.palette.mode === 'light' ? 'inherit' : 'text.disabled', mx: '7px', my: '8px' }} />
-                      <Grid item sx={{ color: theme.palette.mode === 'light' ? 'text.disabled' : undefined, opacity: theme.palette.mode === 'dark' ? 0.6 : 1 }}>
+                      <Grid item sx={{ opacity: theme.palette.mode === 'dark' ? 0.6 : 1 }}>
                         <FormatPrice
                           decimalPoint={2}
                           num={requestedInUSD || 0}
                           sign='$'
+                          textColor={ theme.palette.mode === 'light' ? 'text.disabled' : undefined}
                         />
                       </Grid>
                     </Grid>
diff --git a/packages/extension-polkagate/src/fullscreen/stake/partials/DisplayBalance.tsx b/packages/extension-polkagate/src/fullscreen/stake/partials/DisplayBalance.tsx
index 03f11dac3..0b9b4fd07 100644
--- a/packages/extension-polkagate/src/fullscreen/stake/partials/DisplayBalance.tsx
+++ b/packages/extension-polkagate/src/fullscreen/stake/partials/DisplayBalance.tsx
@@ -107,14 +107,14 @@ export default function DisplayBalance ({ actions, address, amount, icons, isUns
             />
           </Grid>
           <Divider orientation='vertical' sx={{ backgroundColor: 'text.primary', height: '35px', mx: '10px', my: 'auto' }} />
-          <Grid item sx={{ '> div span': { display: 'block' }, fontSize: '22px', fontWeight: 400 }}>
-            <FormatPrice
-              amount={amount}
-              decimals={decimal}
-              price={price}
-              skeletonHeight={20}
-            />
-          </Grid>
+          <FormatPrice
+            amount={amount}
+            decimals={decimal}
+            fontSize= '22px'
+            fontWeight= {400}
+            price={price}
+            skeletonHeight={20}
+          />
         </Grid>
         <Grid container item justifyContent='flex-end' width='38%'>
           {isUnstaking &&
diff --git a/packages/extension-polkagate/src/popup/account/LabelBalancePrice.tsx b/packages/extension-polkagate/src/popup/account/LabelBalancePrice.tsx
index a3ed7c227..5217c251d 100644
--- a/packages/extension-polkagate/src/popup/account/LabelBalancePrice.tsx
+++ b/packages/extension-polkagate/src/popup/account/LabelBalancePrice.tsx
@@ -55,10 +55,12 @@ export default function LabelBalancePrice ({ address, balances, label, onClick,
                 withCurrency={false}
               />
             </Grid>
-            <Grid item pt='6px' sx={{ fontSize: label === 'Total' ? '20px' : '16px', fontWeight: label === 'Total' ? 400 : 300, letterSpacing: '-0.015em', lineHeight: '15px' }} textAlign='right'>
+            <Grid item pt='6px' sx={{ lineHeight: '15px' }} textAlign='right'>
               <FormatPrice
                 amount={value}
                 decimals={balances?.decimal}
+                fontSize= {label === 'Total' ? '20px' : '16px'}
+                fontWeight= {label === 'Total' ? 400 : 300}
                 price={price}
               />
             </Grid>
diff --git a/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx b/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx
index 4714a1a41..4bdbd5c96 100644
--- a/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx
+++ b/packages/extension-polkagate/src/popup/account/ReservedReasons.tsx
@@ -95,10 +95,12 @@ export default function ReservedReasons ({ address, assetId, identity, setShow,
                           balance={value}
                         />
                       </Grid>
-                      <Grid item pt='6px' sx={{ fontSize: '16px', fontWeight: 300, letterSpacing: '-0.015em', lineHeight: '15px' }} textAlign='right'>
+                      <Grid item pt='6px' sx={{ letterSpacing: '-0.015em', lineHeight: '15px' }} textAlign='right'>
                         <FormatPrice
                           amount={value}
                           decimals={decimal}
+                          fontSize= '16px'
+                          fontWeight= {300}
                           price={price}
                         />
                       </Grid>
diff --git a/packages/extension-polkagate/src/popup/home/AccountDetail.tsx b/packages/extension-polkagate/src/popup/home/AccountDetail.tsx
index e83a8041a..3ec7a4840 100644
--- a/packages/extension-polkagate/src/popup/home/AccountDetail.tsx
+++ b/packages/extension-polkagate/src/popup/home/AccountDetail.tsx
@@ -102,13 +102,14 @@ export default function AccountDetail ({ address, chain, goToAccount, hideNumber
     <>
       {priceChainName === undefined || !balanceToShow || balanceToShow?.chainName?.toLowerCase() !== priceChainName
         ? <Skeleton animation='wave' height={22} sx={{ my: '2.5px', transform: 'none' }} variant='text' width={80} />
-        : <Grid item sx={{ color: isPriceOutdated ? 'primary.light' : 'text.primary', fontWeight: 300 }}>
-          <FormatPrice
-            amount={getValue('total', balanceToShow)}
-            decimals={balanceToShow.decimal}
-            price={price}
-          />
-        </Grid>
+        : <FormatPrice
+          amount={getValue('total', balanceToShow)}
+          decimals={balanceToShow.decimal}
+          fontSize= '18px'
+          fontWeight= { 300}
+          price={price}
+          textColor= {isPriceOutdated ? 'primary.light' : 'text.primary'}
+        />
       }
     </>
   );