diff --git a/toolkit/chakra/image.tsx b/toolkit/chakra/image.tsx
index 49178000c1..93ec9e037e 100644
--- a/toolkit/chakra/image.tsx
+++ b/toolkit/chakra/image.tsx
@@ -6,11 +6,14 @@ import { Skeleton } from './skeleton';
 
 export interface ImageProps extends ChakraImageProps {
   fallback?: React.ReactNode;
+  // for the case where the image dimensions are not known before the image is loaded
+  skeletonWidth?: BoxProps['width'];
+  skeletonHeight?: BoxProps['height'];
 }
 
 export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
   function Image(props, ref) {
-    const { fallback, src, onLoad, onError, ...rest } = props;
+    const { fallback, src, onLoad, onError, skeletonWidth, skeletonHeight, ...rest } = props;
 
     const [ loading, setLoading ] = React.useState(true);
     const [ error, setError ] = React.useState(false);
@@ -40,9 +43,15 @@ export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
       return fallback;
     }
 
+    const skeletonProps: BoxProps = {
+      ...rest as BoxProps,
+      ...(skeletonWidth !== undefined && { width: skeletonWidth }),
+      ...(skeletonHeight !== undefined && { height: skeletonHeight }),
+    };
+
     return (
       <>
-        { loading && <Skeleton loading { ...rest as BoxProps }/> }
+        { loading && <Skeleton loading { ...skeletonProps }/> }
         <ChakraImage
           ref={ ref }
           src={ src }
diff --git a/ui/marketplace/MarketplaceAppTopBar.tsx b/ui/marketplace/MarketplaceAppTopBar.tsx
index a6bb901904..1fed795607 100644
--- a/ui/marketplace/MarketplaceAppTopBar.tsx
+++ b/ui/marketplace/MarketplaceAppTopBar.tsx
@@ -13,7 +13,7 @@ import { Link } from 'toolkit/chakra/link';
 import { BackToButton } from 'toolkit/components/buttons/BackToButton';
 import { makePrettyLink } from 'toolkit/utils/url';
 import RewardsButton from 'ui/rewards/RewardsButton';
-import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import NetworkIcon from 'ui/snippets/networkLogo/NetworkIcon';
 import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
 import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
 
@@ -43,7 +43,7 @@ const MarketplaceAppTopBar = ({ appId, data, isLoading }: Props) => {
 
   return (
     <Flex alignItems="center" mb={{ base: 3, md: 2 }} rowGap={ 3 } columnGap={ 2 }>
-      { !isMobile && <NetworkLogo isCollapsed mr={ 4 }/> }
+      { !isMobile && <NetworkIcon mr={ 4 }/> }
       <BackToButton
         href={ goBackUrl }
         hint="Back to dApps list"
diff --git a/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_desktop-base-view-1.png b/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_desktop-base-view-1.png
index f014a3b2f9..878064ae58 100644
Binary files a/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_desktop-base-view-1.png and b/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_desktop-base-view-1.png differ
diff --git a/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_mobile-base-view-1.png b/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_mobile-base-view-1.png
index 091fbc04e9..9bb803429e 100644
Binary files a/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_mobile-base-view-1.png and b/ui/optimismSuperchain/searchResults/__screenshots__/SearchResults.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/snippets/header/Burger.tsx b/ui/snippets/header/Burger.tsx
index 9fcdda2fd3..9734e6fc80 100644
--- a/ui/snippets/header/Burger.tsx
+++ b/ui/snippets/header/Burger.tsx
@@ -7,7 +7,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import NavigationMobile from 'ui/snippets/navigation/mobile/NavigationMobile';
 import RollupStageBadge from 'ui/snippets/navigation/RollupStageBadge';
 import TestnetBadge from 'ui/snippets/navigation/TestnetBadge';
-import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import NetworkLogo from 'ui/snippets/networkLogo/NetworkLogo';
 
 interface Props {
   isMarketplaceAppPage?: boolean;
@@ -35,8 +35,8 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
       </DrawerTrigger>
       <DrawerContent >
         <DrawerBody display="flex" flexDirection="column" overflowX="hidden" overflowY="auto">
-          <TestnetBadge alignSelf="flex-start"/>
-          <RollupStageBadge alignSelf="flex-start"/>
+          <TestnetBadge alignSelf="flex-start" mb={ 2 }/>
+          <RollupStageBadge alignSelf="flex-start" mb={ 2 }/>
           <NetworkLogo/>
           <NavigationMobile onNavLinkClick={ onClose } isMarketplaceAppPage={ isMarketplaceAppPage }/>
         </DrawerBody>
diff --git a/ui/snippets/header/HeaderMobile.tsx b/ui/snippets/header/HeaderMobile.tsx
index 2d24ce3a25..570a70c940 100644
--- a/ui/snippets/header/HeaderMobile.tsx
+++ b/ui/snippets/header/HeaderMobile.tsx
@@ -4,10 +4,12 @@ import React from 'react';
 import config from 'configs/app';
 import { useIsSticky } from 'toolkit/hooks/useIsSticky';
 import RewardsButton from 'ui/rewards/RewardsButton';
-import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import NetworkIcon from 'ui/snippets/networkLogo/NetworkIcon';
 import UserProfileMobile from 'ui/snippets/user/profile/UserProfileMobile';
 import UserWalletMobile from 'ui/snippets/user/wallet/UserWalletMobile';
 
+import RollupStageBadge from '../navigation/RollupStageBadge';
+import TestnetBadge from '../navigation/TestnetBadge';
 import SearchBarMobile from '../searchBar/SearchBarMobile';
 import Burger from './Burger';
 
@@ -44,7 +46,11 @@ const HeaderMobile = ({ hideSearchButton, onGoToSearchResults }: Props) => {
         boxShadow={ isSticky ? 'md' : 'none' }
       >
         <Burger/>
-        <NetworkLogo ml={ 2 } mr="auto"/>
+        <Flex alignItems="center" flexGrow={ 1 } mx={ 2 }>
+          <NetworkIcon/>
+          <TestnetBadge ml={ 2 }/>
+          <RollupStageBadge ml={ 2 }/>
+        </Flex>
         <Flex columnGap={ 2 }>
           { !hideSearchButton && <SearchBarMobile onGoToSearchResults={ onGoToSearchResults }/> }
           { config.features.rewards.isEnabled && <RewardsButton/> }
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png
index 4527fb9499..b549b8d610 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png
index 8a9511d075..f615612a46 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_auth-base-view-1.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png
index cd54e30c6a..2926fe72fd 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_base-view-1.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png
index e05cebedd6..1e1170331c 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_dark-mode-base-view-1.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png
index bc03c01567..6e3c29b794 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_submenu-1.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-image-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-image-1.png
index d15a8b5ae7..8778279963 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-image-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-image-1.png differ
diff --git a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-text-dark-mode-1.png b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-text-dark-mode-1.png
index 67a990deac..ee6e633f84 100644
Binary files a/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-text-dark-mode-1.png and b/ui/snippets/header/__screenshots__/Burger.pw.tsx_default_with-promo-banner-text-dark-mode-1.png differ
diff --git a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png
index 75319734c9..e69ddc5269 100644
Binary files a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png and b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_dark-color-mode_default-view-dark-mode-1.png differ
diff --git a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png
index 2c7a673b2a..309dfa91bb 100644
Binary files a/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png and b/ui/snippets/header/__screenshots__/HeaderMobile.pw.tsx_default_default-view-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/horizontal/NavigationDesktop.tsx b/ui/snippets/navigation/horizontal/NavigationDesktop.tsx
index f0bfb57579..197f264d01 100644
--- a/ui/snippets/navigation/horizontal/NavigationDesktop.tsx
+++ b/ui/snippets/navigation/horizontal/NavigationDesktop.tsx
@@ -5,7 +5,7 @@ import config from 'configs/app';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import RewardsButton from 'ui/rewards/RewardsButton';
 import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
-import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import NetworkLogo from 'ui/snippets/networkLogo/NetworkLogo';
 import UserProfileDesktop from 'ui/snippets/user/profile/UserProfileDesktop';
 import UserWalletDesktop from 'ui/snippets/user/wallet/UserWalletDesktop';
 
@@ -28,7 +28,7 @@ const NavigationDesktop = () => {
         maxW={ `${ CONTENT_MAX_WIDTH }px` }
         m="0 auto"
       >
-        <NetworkLogo isCollapsed={ false } w={{ lg: '100%' }} maxW="120px"/>
+        <NetworkLogo/>
         <TestnetBadge ml={ 3 }/>
         <RollupStageBadge ml={ 3 }/>
         <chakra.nav ml="auto" mr={ config.features.account.isEnabled || config.features.blockchainInteraction.isEnabled ? 8 : 0 }>
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index dc9efc5b7c..10d6950002 100644
Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png
index a09c1a9a88..7616530668 100644
Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png
index 65b29acafa..ed3ee7e0fe 100644
Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png
index cb2154cd38..1e3b02f216 100644
Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-groped-items-1.png differ
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png
index 83bf72d0d1..e212eca43e 100644
Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png differ
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-with-tooltip-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-with-tooltip-1.png
index b54173212a..80b9489645 100644
Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-with-tooltip-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-with-tooltip-1.png differ
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png
index 019fe05a64..4adaa9badb 100644
Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-with-tooltip-1.png b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-with-tooltip-1.png
index 6e2ff1d23f..430a08dc4c 100644
Binary files a/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-with-tooltip-1.png and b/ui/snippets/navigation/horizontal/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-with-tooltip-1.png differ
diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx
index 6379de76c1..b1e2521bbe 100644
--- a/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx
+++ b/ui/snippets/navigation/vertical/NavigationDesktop.pw.tsx
@@ -33,7 +33,7 @@ test.describe('no auth', () => {
   });
 
   test('+@dark-mode', async({ page }) => {
-    await page.locator('a[aria-label="Link to main page"]').hover();
+    await page.locator('a[aria-label="Link to main page"]').last().hover();
     await expect(component).toHaveScreenshot();
   });
 
@@ -41,7 +41,7 @@ test.describe('no auth', () => {
     test.use({ viewport: pwConfig.viewport.xl });
 
     test('+@dark-mode', async({ page }) => {
-      await page.locator('a[aria-label="Link to main page"]').hover();
+      await page.locator('a[aria-label="Link to main page"]').first().hover();
       await expect(component).toHaveScreenshot();
     });
   });
@@ -228,7 +228,8 @@ test.describe('with highlighted routes', () => {
     );
   });
 
-  test('+@dark-mode', async() => {
+  test('+@dark-mode', async({ page }) => {
+    await page.locator('a[aria-label="Link to main page"]').last().hover();
     await expect(component).toHaveScreenshot();
   });
 
@@ -240,7 +241,8 @@ test.describe('with highlighted routes', () => {
   test.describe('xl screen', () => {
     test.use({ viewport: pwConfig.viewport.xl });
 
-    test('+@dark-mode', async() => {
+    test('+@dark-mode', async({ page }) => {
+      await page.locator('a[aria-label="Link to main page"]').first().hover();
       await expect(component).toHaveScreenshot();
     });
   });
@@ -269,7 +271,8 @@ const promoBannerTest = (type: 'text' | 'image') => {
       await component.waitFor({ state: 'visible' });
     });
 
-    test(`${ darkModeRule }`, async() => {
+    test(`${ darkModeRule }`, async({ page }) => {
+      await page.locator('a[aria-label="Link to main page"]').last().hover();
       await expect(component).toHaveScreenshot();
     });
 
@@ -281,7 +284,8 @@ const promoBannerTest = (type: 'text' | 'image') => {
     test.describe('xl screen', () => {
       test.use({ viewport: pwConfig.viewport.xl });
 
-      test(`${ darkModeRule }`, async() => {
+      test(`${ darkModeRule }`, async({ page }) => {
+        await page.locator('a[aria-label="Link to main page"]').first().hover();
         await expect(component).toHaveScreenshot();
       });
     });
diff --git a/ui/snippets/navigation/vertical/NavigationDesktop.tsx b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
index d58650460e..ceb2e9ff30 100644
--- a/ui/snippets/navigation/vertical/NavigationDesktop.tsx
+++ b/ui/snippets/navigation/vertical/NavigationDesktop.tsx
@@ -6,7 +6,8 @@ import * as cookies from 'lib/cookies';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import IconSvg from 'ui/shared/IconSvg';
 import useIsAuth from 'ui/snippets/auth/useIsAuth';
-import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
+import NetworkIcon from 'ui/snippets/networkLogo/NetworkIcon';
+import NetworkLogo from 'ui/snippets/networkLogo/NetworkLogo';
 
 import NavigationPromoBanner from '../promoBanner/NavigationPromoBanner';
 import RollupStageBadge from '../RollupStageBadge';
@@ -81,7 +82,12 @@ const NavigationDesktop = () => {
         transitionDuration="normal"
         transitionTimingFunction="ease"
       >
-        <NetworkLogo isCollapsed={ isCollapsed }/>
+        <Box display={{ base: 'none', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}>
+          <NetworkLogo/>
+        </Box>
+        <Box display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
+          <NetworkIcon/>
+        </Box>
       </Box>
       <Box as="nav" mt={ 6 } w="100%">
         <VStack as="ul" gap="1" alignItems="flex-start">
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png
index 1958ecd7db..1aec9cf9a4 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png
index e8f5c62017..948cd078e3 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_hover-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png
index 1958ecd7db..1aec9cf9a4 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png
index e8f5c62017..948cd078e3 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_no-auth-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-dark-mode-1.png
index 2221cbf2ce..48fe80b354 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png
index 900d1118f5..b938309fd7 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-highlighted-routes-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png
index 0fadf81b81..c9e69f3e23 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-xl-screen-dark-mode-1.png
index 905087488b..f0021119ab 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_dark-color-mode_with-promo-banner-text-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png
index dab5ca802e..25487a52ff 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png
index 771a26e917..6625c19051 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_hover-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png
index 25487a52ff..c6074004fd 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png
index 771a26e917..6625c19051 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_no-auth-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-dark-mode-1.png
index e865719fd9..d7996adb2e 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png
index 465203cc08..98a4215e60 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-with-submenu-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png
index d7aa9c93c9..f9b7a1ceae 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-highlighted-routes-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png
index b9477b680d..f13a43d114 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-xl-screen-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-xl-screen-1.png
index f104117327..cdd8f84baa 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-xl-screen-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-image-xl-screen-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png
index 826f91cfa0..018ce37a1e 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-xl-screen-dark-mode-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-xl-screen-dark-mode-1.png
index bc6770e0ae..375ed5c3a8 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-xl-screen-dark-mode-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-promo-banner-text-xl-screen-dark-mode-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-base-view-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-base-view-1.png
index 0dfe5d8fe3..3331621cc1 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-base-view-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-base-view-1.png differ
diff --git a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png
index 6f9f595509..b78716f919 100644
Binary files a/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png and b/ui/snippets/navigation/vertical/__screenshots__/NavigationDesktop.pw.tsx_default_with-submenu-xl-screen-base-view-1.png differ
diff --git a/ui/snippets/networkLogo/NetworkIcon.pw.tsx b/ui/snippets/networkLogo/NetworkIcon.pw.tsx
new file mode 100644
index 0000000000..27219a89f7
--- /dev/null
+++ b/ui/snippets/networkLogo/NetworkIcon.pw.tsx
@@ -0,0 +1,59 @@
+import type { Locator } from '@playwright/test';
+import React from 'react';
+
+import { test, expect } from 'playwright/lib';
+
+import NetworkIcon from './NetworkIcon';
+
+const ICON_URL = 'https://localhost:3000/my-icon.png';
+
+test.use({ viewport: { width: 30, height: 30 } });
+
+test.describe('placeholder icon', () => {
+  test.beforeEach(async({ mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NETWORK_ICON', '' ],
+    ]);
+  });
+
+  test('+@dark-mode', async({ render }) => {
+    const component = await render(<NetworkIcon/>);
+
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('custom icon', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ render, mockConfigResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NETWORK_ICON', ICON_URL ],
+    ]);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON', ICON_URL, './playwright/mocks/image_svg.svg', true);
+    component = await render(<NetworkIcon/>);
+  });
+
+  test('+@dark-mode', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+});
+
+test.describe('custom icon with dark option -@default +@dark-mode', () => {
+  let component: Locator;
+
+  test.beforeEach(async({ render, mockConfigResponse, mockEnvs }) => {
+    await mockEnvs([
+      [ 'NEXT_PUBLIC_NETWORK_ICON', ICON_URL ],
+      [ 'NEXT_PUBLIC_NETWORK_ICON_DARK', ICON_URL ],
+    ]);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON', ICON_URL, './playwright/mocks/image_s.jpg', true);
+    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON_DARK', ICON_URL, './playwright/mocks/image_s.jpg', true);
+
+    component = await render(<NetworkIcon/>);
+  });
+
+  test('base view', async() => {
+    await expect(component).toHaveScreenshot();
+  });
+});
diff --git a/ui/snippets/networkLogo/NetworkIcon.tsx b/ui/snippets/networkLogo/NetworkIcon.tsx
new file mode 100644
index 0000000000..1022d20f7a
--- /dev/null
+++ b/ui/snippets/networkLogo/NetworkIcon.tsx
@@ -0,0 +1,53 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
+import { Image } from 'toolkit/chakra/image';
+import IconSvg from 'ui/shared/IconSvg';
+
+import { INVERT_FILTER } from './consts';
+
+const IconFallback = () => {
+  return (
+    <IconSvg
+      name="networks/icon-placeholder"
+      w="30px"
+      h="30px"
+      color={{ base: 'blue.600', _dark: 'white' }}
+      aria-label="Network icon placeholder"
+    />
+  );
+};
+
+type Props = {
+  className?: string;
+};
+
+const NetworkIcon = ({ className }: Props) => {
+
+  const iconSrc = useColorModeValue(config.UI.navigation.icon.default, config.UI.navigation.icon.dark || config.UI.navigation.icon.default);
+
+  return (
+    <chakra.a
+      className={ className }
+      href={ route({ pathname: '/' }) }
+      aria-label="Link to main page"
+    >
+      <Image
+        w="30px"
+        h="30px"
+        src={ iconSrc }
+        alt={ `${ config.chain.name } network icon` }
+        fallback={ <IconFallback/> }
+        filter={{ _dark: !config.UI.navigation.icon.dark ? INVERT_FILTER : undefined }}
+        objectFit="contain"
+        objectPosition="left"
+      />
+    </chakra.a>
+  );
+};
+
+export default React.memo(chakra(NetworkIcon));
diff --git a/ui/snippets/networkMenu/NetworkLogo.pw.tsx b/ui/snippets/networkLogo/NetworkLogo.pw.tsx
similarity index 57%
rename from ui/snippets/networkMenu/NetworkLogo.pw.tsx
rename to ui/snippets/networkLogo/NetworkLogo.pw.tsx
index b44974fb11..924876ad30 100644
--- a/ui/snippets/networkMenu/NetworkLogo.pw.tsx
+++ b/ui/snippets/networkLogo/NetworkLogo.pw.tsx
@@ -2,18 +2,17 @@ import type { Locator } from '@playwright/test';
 import React from 'react';
 
 import { test, expect } from 'playwright/lib';
-import * as pwConfig from 'playwright/utils/config';
 
 import NetworkLogo from './NetworkLogo';
 
 const LOGO_URL = 'https://localhost:3000/my-logo.png';
-const ICON_URL = 'https://localhost:3000/my-icon.png';
+
+test.use({ viewport: { width: 120, height: 30 } });
 
 test.describe('placeholder logo', () => {
   test.beforeEach(async({ mockEnvs }) => {
     await mockEnvs([
       [ 'NEXT_PUBLIC_NETWORK_LOGO', '' ],
-      [ 'NEXT_PUBLIC_NETWORK_ICON', '' ],
     ]);
   });
 
@@ -22,16 +21,6 @@ test.describe('placeholder logo', () => {
 
     await expect(component.locator('a')).toHaveScreenshot();
   });
-
-  test.describe('screen xl', () => {
-    test.use({ viewport: pwConfig.viewport.xl });
-
-    test('+@dark-mode', async({ render }) => {
-      const component = await render(<NetworkLogo/>);
-
-      await expect(component.locator('a')).toHaveScreenshot();
-    });
-  });
 });
 
 test.describe('custom logo', () => {
@@ -40,24 +29,14 @@ test.describe('custom logo', () => {
   test.beforeEach(async({ render, mockConfigResponse, mockEnvs }) => {
     await mockEnvs([
       [ 'NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL ],
-      [ 'NEXT_PUBLIC_NETWORK_ICON', ICON_URL ],
     ]);
     await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL, './playwright/mocks/network-logo.svg', true);
-    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON', ICON_URL, './playwright/mocks/image_svg.svg', true);
     component = await render(<NetworkLogo/>);
   });
 
   test('+@dark-mode', async() => {
     await expect(component.locator('a')).toHaveScreenshot();
   });
-
-  test.describe('screen xl', () => {
-    test.use({ viewport: pwConfig.viewport.xl });
-
-    test('+@dark-mode', async() => {
-      await expect(component.locator('a')).toHaveScreenshot();
-    });
-  });
 });
 
 test.describe('custom logo with dark option -@default +@dark-mode', () => {
@@ -67,13 +46,9 @@ test.describe('custom logo with dark option -@default +@dark-mode', () => {
     await mockEnvs([
       [ 'NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL ],
       [ 'NEXT_PUBLIC_NETWORK_LOGO_DARK', LOGO_URL ],
-      [ 'NEXT_PUBLIC_NETWORK_ICON', ICON_URL ],
-      [ 'NEXT_PUBLIC_NETWORK_ICON_DARK', ICON_URL ],
     ]);
     await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO', LOGO_URL, './playwright/mocks/image_long.jpg', true);
     await mockConfigResponse('NEXT_PUBLIC_NETWORK_LOGO_DARK', LOGO_URL, './playwright/mocks/image_long.jpg', true);
-    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON', ICON_URL, './playwright/mocks/image_s.jpg', true);
-    await mockConfigResponse('NEXT_PUBLIC_NETWORK_ICON_DARK', ICON_URL, './playwright/mocks/image_s.jpg', true);
 
     component = await render(<NetworkLogo/>);
   });
@@ -81,12 +56,4 @@ test.describe('custom logo with dark option -@default +@dark-mode', () => {
   test('base view', async() => {
     await expect(component.locator('a')).toHaveScreenshot();
   });
-
-  test.describe('screen xl', () => {
-    test.use({ viewport: pwConfig.viewport.xl });
-
-    test('base view', async() => {
-      await expect(component.locator('a')).toHaveScreenshot();
-    });
-  });
 });
diff --git a/ui/snippets/networkLogo/NetworkLogo.tsx b/ui/snippets/networkLogo/NetworkLogo.tsx
new file mode 100644
index 0000000000..de799e49c4
--- /dev/null
+++ b/ui/snippets/networkLogo/NetworkLogo.tsx
@@ -0,0 +1,53 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
+import { Image } from 'toolkit/chakra/image';
+import IconSvg from 'ui/shared/IconSvg';
+
+import { INVERT_FILTER } from './consts';
+
+const LogoFallback = () => {
+  return (
+    <IconSvg
+      name="networks/logo-placeholder"
+      width="120px"
+      height="24px"
+      color={{ base: 'blue.600', _dark: 'white' }}
+      aria-label="Network logo placeholder"
+    />
+  );
+};
+
+type Props = {
+  className?: string;
+};
+
+const NetworkLogo = ({ className }: Props) => {
+
+  const logoSrc = useColorModeValue(config.UI.navigation.logo.default, config.UI.navigation.logo.dark || config.UI.navigation.logo.default);
+
+  return (
+    <chakra.a
+      className={ className }
+      href={ route({ pathname: '/' }) }
+      aria-label="Link to main page"
+    >
+      <Image
+        h="24px"
+        skeletonWidth="120px"
+        src={ logoSrc }
+        alt={ `${ config.chain.name } network logo` }
+        fallback={ <LogoFallback/> }
+        filter={{ _dark: !config.UI.navigation.logo.dark ? INVERT_FILTER : undefined }}
+        objectFit="contain"
+        objectPosition="left"
+      />
+    </chakra.a>
+  );
+};
+
+export default React.memo(chakra(NetworkLogo));
diff --git a/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_dark-color-mode_custom-icon-dark-mode-1.png b/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_dark-color-mode_custom-icon-dark-mode-1.png
new file mode 100644
index 0000000000..54760b5d20
Binary files /dev/null and b/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_dark-color-mode_custom-icon-dark-mode-1.png differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-base-view-1.png b/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_dark-color-mode_custom-icon-with-dark-option---default-dark-mode-base-view-1.png
similarity index 100%
rename from ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-base-view-1.png
rename to ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_dark-color-mode_custom-icon-with-dark-option---default-dark-mode-base-view-1.png
diff --git a/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_dark-color-mode_placeholder-icon-dark-mode-1.png b/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_dark-color-mode_placeholder-icon-dark-mode-1.png
new file mode 100644
index 0000000000..4df7a50872
Binary files /dev/null and b/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_dark-color-mode_placeholder-icon-dark-mode-1.png differ
diff --git a/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_default_custom-icon-dark-mode-1.png b/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_default_custom-icon-dark-mode-1.png
new file mode 100644
index 0000000000..29b769ce1c
Binary files /dev/null and b/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_default_custom-icon-dark-mode-1.png differ
diff --git a/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_default_placeholder-icon-dark-mode-1.png b/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_default_placeholder-icon-dark-mode-1.png
new file mode 100644
index 0000000000..4c7f7b3dfe
Binary files /dev/null and b/ui/snippets/networkLogo/__screenshots__/NetworkIcon.pw.tsx_default_placeholder-icon-dark-mode-1.png differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-screen-xl-dark-mode-1.png b/ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-dark-mode-1.png
similarity index 100%
rename from ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-screen-xl-dark-mode-1.png
rename to ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-dark-mode-1.png
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-screen-xl-base-view-1.png b/ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-base-view-1.png
similarity index 100%
rename from ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-screen-xl-base-view-1.png
rename to ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-with-dark-option---default-dark-mode-base-view-1.png
diff --git a/ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_placeholder-logo-dark-mode-1.png b/ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_placeholder-logo-dark-mode-1.png
new file mode 100644
index 0000000000..971bd2f2ca
Binary files /dev/null and b/ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_placeholder-logo-dark-mode-1.png differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_default_custom-logo-screen-xl-dark-mode-1.png b/ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_default_custom-logo-dark-mode-1.png
similarity index 100%
rename from ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_default_custom-logo-screen-xl-dark-mode-1.png
rename to ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_default_custom-logo-dark-mode-1.png
diff --git a/ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_default_placeholder-logo-dark-mode-1.png b/ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_default_placeholder-logo-dark-mode-1.png
new file mode 100644
index 0000000000..80ca0a4a32
Binary files /dev/null and b/ui/snippets/networkLogo/__screenshots__/NetworkLogo.pw.tsx_default_placeholder-logo-dark-mode-1.png differ
diff --git a/ui/snippets/networkLogo/consts.ts b/ui/snippets/networkLogo/consts.ts
new file mode 100644
index 0000000000..e22d3386e0
--- /dev/null
+++ b/ui/snippets/networkLogo/consts.ts
@@ -0,0 +1 @@
+export const INVERT_FILTER = 'brightness(0) invert(1)';
diff --git a/ui/snippets/networkMenu/NetworkLogo.tsx b/ui/snippets/networkMenu/NetworkLogo.tsx
deleted file mode 100644
index 6dbfc7c648..0000000000
--- a/ui/snippets/networkMenu/NetworkLogo.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { chakra } from '@chakra-ui/react';
-import React from 'react';
-
-import { route } from 'nextjs-routes';
-
-import config from 'configs/app';
-import { useColorModeValue } from 'toolkit/chakra/color-mode';
-import { Image } from 'toolkit/chakra/image';
-import IconSvg from 'ui/shared/IconSvg';
-
-interface Props {
-  isCollapsed?: boolean;
-  onClick?: (event: React.SyntheticEvent) => void;
-  className?: string;
-}
-
-const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall?: boolean }) => {
-  const display = isSmall ? {
-    base: 'none',
-    lg: isCollapsed === false ? 'none' : 'block',
-    xl: isCollapsed ? 'block' : 'none',
-  } : {
-    base: 'block',
-    lg: isCollapsed === false ? 'block' : 'none',
-    xl: isCollapsed ? 'none' : 'block',
-  };
-
-  return (
-    <IconSvg
-      name={ isSmall ? 'networks/icon-placeholder' : 'networks/logo-placeholder' }
-      width={ isSmall ? '30px' : '120px' }
-      height="100%"
-      color={{ base: 'blue.600', _dark: 'white' }}
-      display={ display }
-      aria-label={ isSmall ? 'Network icon placeholder' : 'Network logo placeholder' }
-    />
-  );
-};
-
-const INVERT_FILTER = 'brightness(0) invert(1)';
-
-const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
-
-  const logoSrc = useColorModeValue(config.UI.navigation.logo.default, config.UI.navigation.logo.dark || config.UI.navigation.logo.default);
-  const iconSrc = useColorModeValue(config.UI.navigation.icon.default, config.UI.navigation.icon.dark || config.UI.navigation.icon.default);
-
-  return (
-    <chakra.a
-      className={ className }
-      href={ route({ pathname: '/' }) }
-      width={{ base: '120px', lg: isCollapsed === false ? '120px' : '30px', xl: isCollapsed ? '30px' : '120px' }}
-      height={{ base: '24px', lg: isCollapsed === false ? '24px' : '30px', xl: isCollapsed ? '30px' : '24px' }}
-      display="inline-flex"
-      overflow="hidden"
-      onClick={ onClick }
-      flexShrink={ 0 }
-      aria-label="Link to main page"
-    >
-      { /* big logo */ }
-      <Image
-        w="100%"
-        h="100%"
-        src={ logoSrc }
-        alt={ `${ config.chain.name } network logo` }
-        fallback={ <LogoFallback isCollapsed={ isCollapsed }/> }
-        display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
-        filter={{ _dark: !config.UI.navigation.logo.dark ? INVERT_FILTER : undefined }}
-        objectFit="contain"
-        objectPosition="left"
-      />
-      { /* small logo */ }
-      <Image
-        w="100%"
-        h="100%"
-        src={ iconSrc }
-        alt={ `${ config.chain.name } network icon` }
-        fallback={ <LogoFallback isCollapsed={ isCollapsed } isSmall/> }
-        display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
-        filter={{ _dark: !config.UI.navigation.icon.dark ? INVERT_FILTER : undefined }}
-        objectFit="contain"
-        objectPosition="left"
-      />
-    </chakra.a>
-  );
-};
-
-export default React.memo(chakra(NetworkLogo));
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-dark-mode-1.png b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-dark-mode-1.png
deleted file mode 100644
index 7bab119740..0000000000
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_custom-logo-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_placeholder-logo-dark-mode-1.png b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_placeholder-logo-dark-mode-1.png
deleted file mode 100644
index 47e865b496..0000000000
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_placeholder-logo-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_placeholder-logo-screen-xl-dark-mode-1.png b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_placeholder-logo-screen-xl-dark-mode-1.png
deleted file mode 100644
index ab307c6e46..0000000000
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_dark-color-mode_placeholder-logo-screen-xl-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_default_custom-logo-dark-mode-1.png b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_default_custom-logo-dark-mode-1.png
deleted file mode 100644
index 305d3cb044..0000000000
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_default_custom-logo-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_default_placeholder-logo-dark-mode-1.png b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_default_placeholder-logo-dark-mode-1.png
deleted file mode 100644
index 51c639dcdf..0000000000
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_default_placeholder-logo-dark-mode-1.png and /dev/null differ
diff --git a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_default_placeholder-logo-screen-xl-dark-mode-1.png b/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_default_placeholder-logo-screen-xl-dark-mode-1.png
deleted file mode 100644
index ab88a52750..0000000000
Binary files a/ui/snippets/networkMenu/__screenshots__/NetworkLogo.pw.tsx_default_placeholder-logo-screen-xl-dark-mode-1.png and /dev/null differ