diff --git a/packages/checkout/sdk-sample-app/src/pages/PassportLoginCallback.tsx b/packages/checkout/sdk-sample-app/src/pages/PassportLoginCallback.tsx
new file mode 100644
index 0000000000..2ce42133af
--- /dev/null
+++ b/packages/checkout/sdk-sample-app/src/pages/PassportLoginCallback.tsx
@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { passport } from '../passport';
+
+export function PassportLoginCallback() {
+  useEffect(() => {
+    passport?.loginCallback();
+  }, [passport])
+  return(<></>);
+}
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionDetails.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionDetails.tsx
index 9e5d4023be..898e87378c 100644
--- a/packages/checkout/widgets-lib/src/components/Transactions/TransactionDetails.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transactions/TransactionDetails.tsx
@@ -1,16 +1,19 @@
 import {
-  Box, Icon, Body, EllipsizedText,
+  Box, Icon, Body, EllipsizedText, FramedImage,
 } from '@biom3/react';
 import { ChainSlug } from '@imtbl/checkout-sdk';
-import { logoColour, networkIcon, networkName } from 'lib';
+import { networkName } from 'lib';
 import { getChainIdBySlug } from 'lib/chains';
 import { Transaction } from 'lib/clients';
+import { Environment } from '@imtbl/config';
+import { getChainImage } from '../../lib/utils';
 
 export interface TransactionDetailsProps {
   transaction: Transaction;
+  environment: Environment;
 }
 
-export function TransactionDetails({ transaction }: TransactionDetailsProps) {
+export function TransactionDetails({ transaction, environment }: TransactionDetailsProps) {
   const fromChain = getChainIdBySlug(transaction.details.from_chain as ChainSlug);
   const toChain = getChainIdBySlug(transaction.details.to_chain as ChainSlug);
   return (
@@ -20,13 +23,17 @@ export function TransactionDetails({ transaction }: TransactionDetailsProps) {
       gap: 'base.spacing.x2',
     }}
     >
-      <Icon
-        icon={networkIcon[fromChain] as any}
+      <FramedImage
         sx={{
-          w: 'base.icon.size.250',
-          fill: logoColour[fromChain],
+          w: 'base.icon.size.400',
+          h: 'base.icon.size.400',
         }}
-        variant="bold"
+        use={(
+          <img
+            src={getChainImage(environment, fromChain)}
+            alt={networkName[fromChain]}
+          />
+        )}
       />
       <Box sx={{
         display: 'flex',
@@ -52,13 +59,17 @@ export function TransactionDetails({ transaction }: TransactionDetailsProps) {
         }}
       />
       <Box sx={{ flexGrow: '1' }} />
-      <Icon
-        icon={networkIcon[toChain] as any}
+      <FramedImage
         sx={{
-          w: 'base.icon.size.250',
-          fill: logoColour[toChain],
+          w: 'base.icon.size.400',
+          h: 'base.icon.size.400',
         }}
-        variant="bold"
+        use={(
+          <img
+            src={getChainImage(environment, toChain)}
+            alt={networkName[toChain]}
+          />
+        )}
       />
       <Box sx={{
         display: 'flex',
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionItem.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionItem.tsx
index 29916552de..f45e29fc76 100644
--- a/packages/checkout/widgets-lib/src/components/Transactions/TransactionItem.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transactions/TransactionItem.tsx
@@ -8,6 +8,7 @@ import {
 import { UserJourney, useAnalytics } from 'context/analytics-provider/SegmentAnalyticsProvider';
 import { Transaction } from 'lib/clients/checkoutApiType';
 import { MouseEvent, useMemo, useState } from 'react';
+import { Environment } from '@imtbl/config';
 import { containerStyles } from './transactionItemStyles';
 import { TransactionDetails } from './TransactionDetails';
 
@@ -23,6 +24,7 @@ type TransactionItemProps = {
   amount: string,
   icon: string,
   defaultTokenImage: string,
+  environment: Environment,
 };
 
 export function TransactionItem({
@@ -33,6 +35,7 @@ export function TransactionItem({
   amount,
   icon,
   defaultTokenImage,
+  environment,
 }: TransactionItemProps) {
   const { track } = useAnalytics();
   const [iconError, setIconError] = useState<boolean>(false);
@@ -130,7 +133,7 @@ export function TransactionItem({
               px: 'base.spacing.x2',
             }}
           />
-          <TransactionDetails transaction={transaction} />
+          <TransactionDetails transaction={transaction} environment={environment} />
         </Accordion.ExpandedContent>
       </Accordion>
     </Box>
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx
index bf2b978ec1..d4a7b5a705 100644
--- a/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx
@@ -13,6 +13,7 @@ import { useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BridgeWidgetViews } from 'context/view-context/BridgeViewContextTypes';
 import { ViewActions, ViewContext } from 'context/view-context/ViewContext';
+import { Environment } from '@imtbl/config';
 import { actionsContainerStyles, actionsLayoutStyles, containerStyles } from './transactionItemStyles';
 import { TransactionDetails } from './TransactionDetails';
 
@@ -23,6 +24,7 @@ type TransactionItemWithdrawPendingProps = {
   amount: string,
   icon: string,
   defaultTokenImage: string,
+  environment: Environment,
 };
 
 export function TransactionItemWithdrawPending({
@@ -32,6 +34,7 @@ export function TransactionItemWithdrawPending({
   amount,
   icon,
   defaultTokenImage,
+  environment,
 }: TransactionItemWithdrawPendingProps) {
   const { viewDispatch } = useContext(ViewContext);
   const { track } = useAnalytics();
@@ -189,7 +192,7 @@ export function TransactionItemWithdrawPending({
               px: 'base.spacing.x2',
             }}
           />
-          <TransactionDetails transaction={transaction} />
+          <TransactionDetails transaction={transaction} environment={environment} />
         </Accordion.ExpandedContent>
       </Accordion>
     </Box>
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx
index 74a23bd5e6..628d0d1abf 100644
--- a/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx
@@ -41,6 +41,7 @@ export function TransactionList({
   const { cryptoFiatState } = useContext(CryptoFiatContext);
   const { t } = useTranslation();
   const [link, setLink] = useState('');
+  const { environment } = checkout.config;
 
   useEffect(() => {
     if (!checkout) return;
@@ -87,12 +88,13 @@ export function TransactionList({
               return (
                 <TransactionItemWithdrawPending
                   key={hash}
-                  label={token.name}
+                  label={token.symbol}
                   transaction={transaction}
                   fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
                   amount={amount}
                   icon={getTransactionItemIcon(transaction)}
                   defaultTokenImage={defaultTokenImage}
+                  environment={environment}
                 />
               );
             }
@@ -100,13 +102,14 @@ export function TransactionList({
             return (
               <TransactionItem
                 key={hash}
-                label={token.name}
+                label={token.symbol}
                 details={{ text: t('views.TRANSACTIONS.status.inProgress.stepInfo'), link, hash }}
                 transaction={transaction}
                 fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
                 amount={amount}
                 icon={getTransactionItemIcon(transaction)}
                 defaultTokenImage={defaultTokenImage}
+                environment={environment}
               />
             );
           })}
diff --git a/packages/checkout/widgets-lib/src/lib/utils.ts b/packages/checkout/widgets-lib/src/lib/utils.ts
index d667da2d95..dfcbfb23be 100644
--- a/packages/checkout/widgets-lib/src/lib/utils.ts
+++ b/packages/checkout/widgets-lib/src/lib/utils.ts
@@ -154,6 +154,10 @@ export function getRemoteImage(environment: Environment | undefined, path: strin
   return `${CHECKOUT_CDN_BASE_URL[environment ?? Environment.PRODUCTION]}/v1/blob/img${path}`;
 }
 
+export function getChainImage(environment: Environment | undefined, chainId: ChainId) {
+  return getRemoteImage(environment, `/chains/${chainId}.png`);
+}
+
 export function getEthTokenImage(environment: Environment | undefined) {
   return getRemoteImage(environment, '/tokens/eth.svg');
 }
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx
index 741e8ee234..75a6aa7e0c 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx
@@ -16,7 +16,7 @@ import {
   isPassportProvider,
   isWalletConnectProvider,
 } from 'lib/provider';
-import { calculateCryptoToFiat, isNativeToken } from 'lib/utils';
+import { calculateCryptoToFiat, getChainImage, isNativeToken } from 'lib/utils';
 import {
   DEFAULT_QUOTE_REFRESH_INTERVAL,
   DEFAULT_TOKEN_DECIMALS,
@@ -26,7 +26,7 @@ import {
   addChainChangedListener,
   getL1ChainId,
   getL2ChainId,
-  networkIcon,
+  networkName,
   removeChainChangedListener,
 } from 'lib';
 import { useInterval } from 'lib/hooks/useInterval';
@@ -41,7 +41,6 @@ import { NetworkSwitchDrawer } from 'components/NetworkSwitchDrawer/NetworkSwitc
 import { Web3Provider } from '@ethersproject/providers';
 import { useWalletConnect } from 'lib/hooks/useWalletConnect';
 import { NotEnoughGas } from 'components/NotEnoughGas/NotEnoughGas';
-import { networkIconStyles } from './WalletNetworkButtonStyles';
 import {
   arrowIconStyles,
   arrowIconWrapperStyles,
@@ -52,6 +51,7 @@ import {
   topMenuItemStyles,
   wcStickerLogoStyles,
   wcWalletLogoStyles,
+  networkIconStyles,
 } from './BridgeReviewSummaryStyles';
 import { BridgeActions, BridgeContext } from '../context/BridgeContext';
 import {
@@ -76,6 +76,7 @@ export function BridgeReviewSummary() {
     },
     bridgeDispatch,
   } = useContext(BridgeContext);
+  const { environment } = checkout.config;
 
   const { track } = useAnalytics();
 
@@ -477,9 +478,14 @@ export function BridgeReviewSummary() {
           </Body>
         </MenuItem.Label>
         {fromNetwork && (
-          <MenuItem.IntentIcon
-            icon={networkIcon[fromNetwork] as any}
-            sx={networkIconStyles(fromNetwork)}
+          <MenuItem.FramedImage
+            use={(
+              <img
+                src={getChainImage(environment, fromNetwork)}
+                alt={networkName[fromNetwork]}
+              />
+            )}
+            sx={networkIconStyles}
           />
         )}
       </MenuItem>
@@ -524,9 +530,14 @@ export function BridgeReviewSummary() {
           </Body>
         </MenuItem.Label>
         {toNetwork && (
-          <MenuItem.IntentIcon
-            icon={networkIcon[toNetwork] as any}
-            sx={networkIconStyles(toNetwork)}
+          <MenuItem.FramedImage
+            use={(
+              <img
+                src={getChainImage(environment, toNetwork)}
+                alt={networkName[toNetwork]}
+              />
+            )}
+            sx={networkIconStyles}
           />
         )}
       </MenuItem>
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts
index 3c116e9d3b..dbc9a213d8 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts
@@ -67,3 +67,10 @@ export const rawImageStyle = {
   padding: '6px',
   left: 'base.spacing.x3',
 };
+
+export const networkIconStyles = {
+  position: 'absolute',
+  right: 'base.spacing.x3',
+  w: 'base.icon.size.400',
+  h: 'base.icon.size.400',
+};
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/NetworkItem.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/NetworkItem.tsx
index 5b3ac2bb0f..cbd867b9f9 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/components/NetworkItem.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/components/NetworkItem.tsx
@@ -1,19 +1,21 @@
 import { ChainId, ChainName } from '@imtbl/checkout-sdk';
 import { MenuItem } from '@biom3/react';
-import { networkIcon } from 'lib';
-import { networkItemStyles } from './NetworkItemStyles';
+import { Environment } from '@imtbl/config';
+import { getChainImage } from '../../../lib/utils';
 
 export interface BridgeNetworkProps {
   testId: string;
   chainId: ChainId;
   chainName: ChainName;
   onNetworkClick: (chainId: ChainId) => Promise<void>;
+  environment: Environment;
 }
 export function NetworkItem({
   testId,
   chainId,
   chainName,
   onNetworkClick,
+  environment,
 }: BridgeNetworkProps) {
   return (
     <MenuItem
@@ -25,10 +27,8 @@ export function NetworkItem({
       }}
       sx={{ marginBottom: 'base.spacing.x1' }}
     >
-      <MenuItem.FramedIcon
-        icon={networkIcon[chainId] as any}
-        circularFrame
-        sx={networkItemStyles(chainId)}
+      <MenuItem.FramedImage
+        use={<img src={getChainImage(environment, chainId)} alt={chainName} />}
       />
       <MenuItem.Label size="medium">{chainName}</MenuItem.Label>
     </MenuItem>
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/NetworkItemStyles.ts b/packages/checkout/widgets-lib/src/widgets/bridge/components/NetworkItemStyles.ts
deleted file mode 100644
index b9246a88ee..0000000000
--- a/packages/checkout/widgets-lib/src/widgets/bridge/components/NetworkItemStyles.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ChainId } from '@imtbl/checkout-sdk';
-
-const logoColour = {
-  [ChainId.IMTBL_ZKEVM_DEVNET]: 'base.color.text.link.primary',
-  [ChainId.IMTBL_ZKEVM_TESTNET]: 'base.color.text.link.primary',
-  [ChainId.IMTBL_ZKEVM_MAINNET]: 'base.color.text.link.primary',
-  [ChainId.ETHEREUM]: 'base.color.accent.5',
-  [ChainId.SEPOLIA]: 'base.color.accent.5',
-};
-
-export const networkItemStyles = (chainId: ChainId) => ({
-  backgroundColor: logoColour[chainId],
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  '& svg': {
-    fill: 'base.color.brand.2',
-  },
-});
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletAndNetworkSelector.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletAndNetworkSelector.tsx
index 0ae878b295..100c18d186 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletAndNetworkSelector.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletAndNetworkSelector.tsx
@@ -52,6 +52,7 @@ export function WalletAndNetworkSelector() {
   } = useContext(BridgeContext);
   const { viewDispatch } = useContext(ViewContext);
   const { providers } = useInjectedProviders({ checkout });
+  const { environment } = checkout.config;
 
   const { track } = useAnalytics();
 
@@ -491,6 +492,7 @@ export function WalletAndNetworkSelector() {
               setFromWalletDrawerOpen(true);
             }}
             onNetworkClick={() => setFromNetworkDrawerOpen(true)}
+            environment={environment}
           />
 
           <Box>
@@ -540,6 +542,7 @@ export function WalletAndNetworkSelector() {
             chainName={imtblZkEvmNetworkName}
             onNetworkClick={fromNetworkDrawerOpen ? handleFromNetworkSelection : handleToNetworkSelection}
             chainId={imtblZkEvmNetworkChainId}
+            environment={environment}
           />
           {/** If selecting from network, show L1 option for everything but Passport */}
           {(toNetworkDrawerOpen || fromWallet?.providerDetail.info.rdns !== WalletProviderRdns.PASSPORT) && (
@@ -549,6 +552,7 @@ export function WalletAndNetworkSelector() {
               chainName={l1NetworkName}
               onNetworkClick={fromNetworkDrawerOpen ? handleFromNetworkSelection : handleToNetworkSelection}
               chainId={l1NetworkChainId}
+              environment={environment}
             />
           )}
         </Drawer.Content>
@@ -580,6 +584,7 @@ export function WalletAndNetworkSelector() {
             onNetworkClick={() => {
               setToNetworkDrawerOpen(true);
             }}
+            environment={environment}
           />
           <Box sx={submitButtonWrapperStyles}>
             <Button
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButton.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButton.tsx
index 4425a74bd8..606184c5d5 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButton.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButton.tsx
@@ -3,13 +3,12 @@ import {
 } from '@biom3/react';
 import { ChainId, EIP6963ProviderDetail, WalletProviderRdns } from '@imtbl/checkout-sdk';
 import { getChainNameById } from 'lib/chains';
-import { networkIcon } from 'lib';
 import { Web3Provider } from '@ethersproject/providers';
 import { useEffect, useMemo, useState } from 'react';
 import { useWalletConnect } from 'lib/hooks/useWalletConnect';
+import { Environment } from '@imtbl/config';
 import {
   networkButtonStyles,
-  networkIconStyles,
   walletButtonOuterStyles,
   walletCaptionStyles,
   wcStickerLogoStyles,
@@ -17,6 +16,7 @@ import {
 } from './WalletNetworkButtonStyles';
 import { RawImage } from '../../../components/RawImage/RawImage';
 import { isWalletConnectProvider } from '../../../lib/provider';
+import { getChainImage } from '../../../lib/utils';
 
 interface WalletNetworkButtonProps {
   testId: string;
@@ -28,6 +28,7 @@ interface WalletNetworkButtonProps {
   disableNetworkButton?: boolean;
   onWalletClick: (e) => void;
   onNetworkClick: (e) => void;
+  environment: Environment;
 }
 export function WalletNetworkButton({
   testId,
@@ -39,6 +40,7 @@ export function WalletNetworkButton({
   disableNetworkButton = false,
   onWalletClick,
   onNetworkClick,
+  environment,
 }: WalletNetworkButtonProps) {
   const networkName = getChainNameById(chainId);
   const [walletLogoUrl, setWalletLogoUrl] = useState<string | undefined>(
@@ -111,16 +113,24 @@ export function WalletNetworkButton({
         size="small"
         disabled={disableNetworkButton}
         onClick={(e) => {
-          // stop propogation so onWalletClick is not triggered
+          // stop propagation so onWalletClick is not triggered
           e.stopPropagation();
           onNetworkClick(e);
         }}
         variant="tertiary"
         sx={networkButtonStyles}
       >
-        <Button.Icon
-          icon={networkIcon[chainId] as any}
-          sx={networkIconStyles(chainId)}
+        <FramedImage
+          sx={{
+            w: 'base.icon.size.400',
+            h: 'base.icon.size.400',
+          }}
+          use={(
+            <img
+              src={getChainImage(environment, chainId)}
+              alt={networkName[chainId]}
+            />
+          )}
         />
         {networkName}
       </Button>
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButtonStyles.ts b/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButtonStyles.ts
index e075de1f2c..00fb560648 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButtonStyles.ts
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButtonStyles.ts
@@ -59,11 +59,3 @@ export const networkButtonStyles = {
   paddingY: 'base.spacing.x6',
   borderRadius: 'base.borderRadius.x18',
 };
-
-export const networkIconStyles = (chainId: ChainId) => ({
-  fill: 'base.color.brand.2',
-  width: 'base.icon.size.300',
-  backgroundColor: logoColour[chainId],
-  borderRadius: '100%',
-  padding: 'base.spacing.x1',
-});
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.tsx
index feaa518477..c42f1f4b82 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.tsx
@@ -1,5 +1,8 @@
 import {
-  Body, Box, Button, HorizontalMenu,
+  Body,
+  Box,
+  FramedImage,
+  HorizontalMenu,
 } from '@biom3/react';
 import {
   useCallback, useContext, useEffect, useState,
@@ -11,7 +14,6 @@ import {
   NetworkInfo,
   SwitchNetworkParams,
 } from '@imtbl/checkout-sdk';
-import { logoColour, networkIcon } from 'lib';
 import { useTranslation } from 'react-i18next';
 import { WalletContext } from '../../context/WalletContext';
 import { sendNetworkSwitchEvent } from '../../WalletWidgetEvents';
@@ -22,7 +24,7 @@ import {
   networkHeadingStyle,
   networkMenuStyles,
 } from './NetworkMenuStyles';
-import { sortNetworksCompareFn } from '../../../../lib/utils';
+import { getChainImage, sortNetworksCompareFn } from '../../../../lib/utils';
 import {
   ViewContext,
   ViewActions,
@@ -117,12 +119,13 @@ export function NetworkMenu() {
                 size="small"
                 onClick={() => switchNetwork(networkItem.chainId)}
               >
-                <Button.Icon
-                  icon={networkIcon[networkItem.chainId]}
-                  iconVariant="bold"
-                  sx={logoStyle(
-                    logoColour[networkItem.chainId],
-                    networkItem.chainId === network?.chainId,
+                <FramedImage
+                  sx={logoStyle(networkItem.chainId === network?.chainId)}
+                  use={(
+                    <img
+                      src={getChainImage(checkout?.config.environment, networkItem.chainId)}
+                      alt={networkItem.name}
+                    />
                   )}
                 />
                 {networkItem.name}
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenuStyles.ts b/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenuStyles.ts
index a8aa839eac..7c808f1ad0 100644
--- a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenuStyles.ts
+++ b/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenuStyles.ts
@@ -16,10 +16,9 @@ export const networkButtonStyle = {
   fontWeight: 'base.text.caption.small.bold.fontWeight',
 };
 
-export const logoStyle = (logoColor: string, isActive: boolean) => ({
-  paddingRight: 'base.spacing.x1',
+export const logoStyle = (isActive: boolean) => ({
   width: '22px',
-  fill: isActive ? logoColor : 'base.color.brand.4',
+  filter: isActive ? undefined : 'grayscale(1)',
 });
 
 export const networkHeadingStyle = {