diff --git a/src/components/Banners/YatBanner.tsx b/src/components/Banners/YatBanner.tsx
index d3134f53917..4e261a376da 100644
--- a/src/components/Banners/YatBanner.tsx
+++ b/src/components/Banners/YatBanner.tsx
@@ -1,7 +1,7 @@
 import type { LinkProps } from '@chakra-ui/react'
 import { Flex, Link, Tooltip, useMediaQuery } from '@chakra-ui/react'
 import { ethChainId, fromAccountId } from '@shapeshiftoss/caip'
-import { useMemo } from 'react'
+import { memo, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { YatIcon } from 'components/Icons/YatIcon'
 import { Text } from 'components/Text'
@@ -14,7 +14,9 @@ type YatBannerProps = {
   isCompact?: boolean
 } & LinkProps
 
-export const YatBanner: React.FC<YatBannerProps> = ({ isCompact, ...rest }) => {
+const hoverProp = { boxShadow: '0 0 0 2px var(--chakra-colors-chakra-body-text) inset' }
+
+export const YatBanner: React.FC<YatBannerProps> = memo(({ isCompact, ...rest }) => {
   const [isLargerThan2xl] = useMediaQuery(`(min-width: ${breakpoints['2xl']})`, { ssr: false })
   const translate = useTranslate()
   const { isDemoWallet } = useWallet().state
@@ -52,11 +54,9 @@ export const YatBanner: React.FC<YatBannerProps> = ({ isCompact, ...rest }) => {
         isExternal
         display='block'
         aria-label={translate('features.yat.banner.title')}
-        _hover={{ boxShadow: '0 0 0 2px var(--chakra-colors-chakra-body-text) inset' }}
+        _hover={hoverProp}
         borderRadius='xl'
-        backgroundImage={
-          'radial-gradient(circle at bottom left, #00C1C165 0%, transparent 30%), radial-gradient(circle at top right, #7B61FF70 0%, transparent 50%)'
-        }
+        backgroundImage='radial-gradient(circle at bottom left, #00C1C165 0%, transparent 30%), radial-gradient(circle at top right, #7B61FF70 0%, transparent 50%)'
         {...rest}
       >
         <Flex
@@ -83,4 +83,4 @@ export const YatBanner: React.FC<YatBannerProps> = ({ isCompact, ...rest }) => {
       </Link>
     </Tooltip>
   )
-}
+})
diff --git a/src/components/Layout/Header/AppLoadingIcon.tsx b/src/components/Layout/Header/AppLoadingIcon.tsx
index f4faf364ef5..50a8725ad2a 100644
--- a/src/components/Layout/Header/AppLoadingIcon.tsx
+++ b/src/components/Layout/Header/AppLoadingIcon.tsx
@@ -1,16 +1,17 @@
 import { Center } from '@chakra-ui/react'
 import { AnimatePresence } from 'framer-motion'
+import { memo } from 'react'
 import { Link } from 'react-router-dom'
 import { CircularProgress } from 'components/CircularProgress/CircularProgress'
 import { FoxIcon } from 'components/Icons/FoxIcon'
 import { SlideTransitionY } from 'components/SlideTransitionY'
 import { useIsAnyApiFetching } from 'hooks/useIsAnyApiFetching/useIsAnyApiFetching'
 
-export const AppLoadingIcon: React.FC = () => {
+export const AppLoadingIcon: React.FC = memo(() => {
   const isLoading = useIsAnyApiFetching()
   return (
     <Link to='/'>
-      <AnimatePresence exitBeforeEnter initial={true}>
+      <AnimatePresence exitBeforeEnter initial>
         {isLoading ? (
           <SlideTransitionY key='loader'>
             <Center boxSize='7'>
@@ -25,4 +26,4 @@ export const AppLoadingIcon: React.FC = () => {
       </AnimatePresence>
     </Link>
   )
-}
+})
diff --git a/src/components/Layout/Header/DegradedStateBanner.tsx b/src/components/Layout/Header/DegradedStateBanner.tsx
index 7b4ab226e1a..9558f0f0734 100644
--- a/src/components/Layout/Header/DegradedStateBanner.tsx
+++ b/src/components/Layout/Header/DegradedStateBanner.tsx
@@ -15,7 +15,7 @@ import {
 } from '@chakra-ui/react'
 import type { AccountId } from '@shapeshiftoss/caip'
 import { entries, isEmpty, uniq } from 'lodash'
-import { useCallback, useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { IoMdRefresh } from 'react-icons/io'
 import { useTranslate } from 'react-polyglot'
 import { useSelector } from 'react-redux'
@@ -26,7 +26,7 @@ import { accountIdToFeeAssetId } from 'state/slices/portfolioSlice/utils'
 import { selectAssets, selectPortfolioLoadingStatusGranular } from 'state/slices/selectors'
 import { useAppDispatch } from 'state/store'
 
-export const DegradedStateBanner = () => {
+export const DegradedStateBanner = memo(() => {
   const dispatch = useAppDispatch()
   const translate = useTranslate()
   const footerBg = useColorModeValue('blackAlpha.100', 'whiteAlpha.100')
@@ -131,4 +131,4 @@ export const DegradedStateBanner = () => {
       </PopoverContent>
     </Popover>
   )
-}
+})
diff --git a/src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx b/src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx
index 3e5cd0fac73..8fc9c7ac227 100644
--- a/src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx
+++ b/src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx
@@ -17,7 +17,7 @@ import {
 import { fromAssetId } from '@shapeshiftoss/caip'
 import { isEvmChainId } from '@shapeshiftoss/chain-adapters'
 import { DefiAction } from 'features/defi/contexts/DefiManagerProvider/DefiCommon'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import MultiRef from 'react-multi-ref'
 import { useTranslate } from 'react-polyglot'
 import { generatePath, useHistory, useLocation } from 'react-router'
@@ -48,7 +48,15 @@ import { StakingResults } from './StakingResults/StakingResults'
 import { TxResults } from './TxResults/TxResults'
 import { makeOpportunityRouteDetails } from './utils'
 
-export const GlobalSeachButton = () => {
+const mrProp = { base: 0, md: 'auto' }
+const widthProp = { base: 'auto', md: 'full' }
+const displayProp1 = { base: 'flex', md: 'none' }
+const displayProp2 = { base: 'none', md: 'flex' }
+const inputGroupProps = { size: 'xl' }
+const sxProp1 = { svg: { width: '18px', height: '18px' } }
+const sxProp2 = { p: 0 }
+
+export const GlobalSeachButton = memo(() => {
   const { isOpen, onClose, onOpen, onToggle } = useDisclosure()
   const [sendResults, setSendResults] = useState<SendResult[]>([])
   const [activeIndex, setActiveIndex] = useState(0)
@@ -301,9 +309,9 @@ export const GlobalSeachButton = () => {
 
   return (
     <>
-      <Box maxWidth='xl' width={{ base: 'auto', md: 'full' }} mr={{ base: 0, md: 'auto' }}>
+      <Box maxWidth='xl' width={widthProp} mr={mrProp}>
         <IconButton
-          display={{ base: 'flex', md: 'none' }}
+          display={displayProp1}
           icon={<SearchIcon />}
           aria-label='Search'
           onClick={onOpen}
@@ -316,8 +324,8 @@ export const GlobalSeachButton = () => {
           fontSize='md'
           alignItems='center'
           color='text.subtle'
-          display={{ base: 'none', md: 'flex' }}
-          sx={{ svg: { width: '18px', height: '18px' } }}
+          display={displayProp2}
+          sx={sxProp1}
         >
           {translate('common.search')}
           {!isMobileApp && ( // Mobile app users are unlikely to have access to a keyboard for the shortcut.
@@ -333,7 +341,7 @@ export const GlobalSeachButton = () => {
           <ModalHeader
             position='sticky'
             top={0}
-            sx={{ p: 0 }}
+            sx={sxProp2}
             borderBottomWidth={1}
             borderColor='whiteAlpha.100'
           >
@@ -341,7 +349,7 @@ export const GlobalSeachButton = () => {
               searchQuery={searchQuery}
               setSearchQuery={setSearchQuery}
               onKeyDown={onKeyDown}
-              inputGroupProps={{ size: 'xl' }}
+              inputGroupProps={inputGroupProps}
               borderBottomRadius={0}
               borderWidth={0}
             />
@@ -353,4 +361,4 @@ export const GlobalSeachButton = () => {
       </Modal>
     </>
   )
-}
+})
diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
index bb6c912e5a0..6ba834b1113 100644
--- a/src/components/Layout/Header/Header.tsx
+++ b/src/components/Layout/Header/Header.tsx
@@ -8,6 +8,7 @@ import {
   HStack,
   IconButton,
   useDisclosure,
+  useMediaQuery,
   usePrevious,
   useToast,
 } from '@chakra-ui/react'
@@ -34,6 +35,7 @@ import {
   selectWalletId,
 } from 'state/slices/selectors'
 import { useAppDispatch } from 'state/store'
+import { breakpoints } from 'theme/theme'
 
 import { AppLoadingIcon } from './AppLoadingIcon'
 import { DegradedStateBanner } from './DegradedStateBanner'
@@ -45,6 +47,14 @@ import { UserMenu } from './NavBar/UserMenu'
 import { SideNavContent } from './SideNavContent'
 import { TxWindow } from './TxWindow/TxWindow'
 
+const paddingBottomProp = { base: '0.5rem', md: 0 }
+const fontSizeProp = { base: 'sm', md: 'md' }
+const paddingTopProp1 = { base: 'calc(0.5rem + env(safe-area-inset-top))', md: 0 }
+const pxProp = { base: 0, xl: 4 }
+const displayProp = { base: 'block', md: 'none' }
+const displayProp2 = { base: 'none', md: 'block' }
+const widthProp = { base: 'auto', md: 'full' }
+
 export const Header = memo(() => {
   const { onToggle, isOpen, onClose } = useDisclosure()
   const isDegradedState = useSelector(selectPortfolioLoadingStatus) === 'error'
@@ -52,6 +62,7 @@ export const Header = memo(() => {
   const isSnapInstalled = useIsSnapInstalled()
   const previousSnapInstall = usePrevious(isSnapInstalled)
   const showSnapModal = useSelector(selectShowSnapsModal)
+  const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`, { ssr: false })
 
   const history = useHistory()
   const {
@@ -149,16 +160,21 @@ export const Header = memo(() => {
     walletAccountIds,
   ])
 
+  const paddingTopProp2 = useMemo(
+    () => ({ base: isDemoWallet ? 0 : 'env(safe-area-inset-top)', md: 0 }),
+    [isDemoWallet],
+  )
+
   return (
     <>
       {isDemoWallet && (
         <Box
           bg='blue.500'
           width='full'
-          paddingTop={{ base: 'calc(0.5rem + env(safe-area-inset-top))', md: 0 }}
-          paddingBottom={{ base: '0.5rem', md: 0 }}
+          paddingTop={paddingTopProp1}
+          paddingBottom={paddingBottomProp}
           minHeight='2.5rem'
-          fontSize={{ base: 'sm', md: 'md' }}
+          fontSize={fontSizeProp}
           as='button'
           onClick={handleBannerClick}
         >
@@ -186,39 +202,41 @@ export const Header = memo(() => {
         transitionProperty='all'
         transitionTimingFunction='cubic-bezier(0.4, 0, 0.2, 1)'
         top={0}
-        paddingTop={{ base: isDemoWallet ? 0 : 'env(safe-area-inset-top)', md: 0 }}
+        paddingTop={paddingTopProp2}
       >
         <HStack height='4.5rem' width='full' px={4}>
-          <HStack width='full' margin='0 auto' px={{ base: 0, xl: 4 }} spacing={0} columnGap={4}>
-            <Box flex={1} display={{ base: 'block', md: 'none' }}>
+          <HStack width='full' margin='0 auto' px={pxProp} spacing={0} columnGap={4}>
+            <Box flex={1} display={displayProp}>
               <IconButton aria-label='Open menu' onClick={onToggle} icon={<HamburgerIcon />} />
             </Box>
 
-            <Box display={{ base: 'block', md: 'none' }} mx='auto'>
+            <Box display={displayProp} mx='auto'>
               <AppLoadingIcon />
             </Box>
 
             <Flex
               justifyContent='flex-end'
               alignItems='center'
-              width={{ base: 'auto', md: 'full' }}
+              width={widthProp}
               flex={1}
               rowGap={4}
               columnGap={2}
             >
               <GlobalSeachButton />
-              {isDegradedState && <DegradedStateBanner />}
-              {isWalletConnectToDappsV2Enabled && (
-                <Box display={{ base: 'none', md: 'block' }}>
+              {isLargerThanMd && isDegradedState && <DegradedStateBanner />}
+              {isLargerThanMd && isWalletConnectToDappsV2Enabled && (
+                <Box display={displayProp2}>
                   <WalletConnectToDappsHeaderButton />
                 </Box>
               )}
-              <ChainMenu display={{ base: 'none', md: 'block' }} />
+              {isLargerThanMd && <ChainMenu display={displayProp2} />}
               <TxWindow />
               <Notifications />
-              <Box display={{ base: 'none', md: 'block' }}>
-                <UserMenu />
-              </Box>
+              {isLargerThanMd && (
+                <Box display={displayProp2}>
+                  <UserMenu />
+                </Box>
+              )}
             </Flex>
           </HStack>
         </HStack>
diff --git a/src/components/Layout/Header/NavBar/ChainMenu.tsx b/src/components/Layout/Header/NavBar/ChainMenu.tsx
index 5c2de4ffa5c..30c12a66e4c 100644
--- a/src/components/Layout/Header/NavBar/ChainMenu.tsx
+++ b/src/components/Layout/Header/NavBar/ChainMenu.tsx
@@ -19,7 +19,7 @@ import type { EvmBaseAdapter, EvmChainId } from '@shapeshiftoss/chain-adapters'
 import type { ETHWallet } from '@shapeshiftoss/hdwallet-core'
 import { supportsEthSwitchChain } from '@shapeshiftoss/hdwallet-core'
 import { utils } from 'ethers'
-import { useCallback, useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { AssetIcon } from 'components/AssetIcon'
 import { CircleIcon } from 'components/Icons/Circle'
@@ -42,14 +42,19 @@ const ChainMenuItem: React.FC<{
 
   const connectedIconColor = useColorModeValue('green.500', 'green.200')
   const connectedChainBgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.50')
+  const assetIcon = useMemo(
+    () => <AssetIcon assetId={nativeAssetId} showNetworkIcon width='6' height='auto' />,
+    [nativeAssetId],
+  )
+  const handleClick = useCallback(() => onClick(ethNetwork), [ethNetwork, onClick])
 
   if (!nativeAsset) return null
 
   return (
     <MenuItem
-      icon={<AssetIcon assetId={nativeAssetId} showNetworkIcon width='6' height='auto' />}
+      icon={assetIcon}
       backgroundColor={isConnected ? connectedChainBgColor : undefined}
-      onClick={() => onClick(ethNetwork)}
+      onClick={handleClick}
       borderRadius='lg'
     >
       <Flex justifyContent={'space-between'}>
@@ -62,7 +67,7 @@ const ChainMenuItem: React.FC<{
 
 type ChainMenuProps = BoxProps
 
-export const ChainMenu = (props: ChainMenuProps) => {
+export const ChainMenu = memo((props: ChainMenuProps) => {
   const { state, load } = useWallet()
   const {
     connectedEvmChainId,
@@ -177,4 +182,4 @@ export const ChainMenu = (props: ChainMenuProps) => {
       </Menu>
     </Box>
   )
-}
+})
diff --git a/src/components/Layout/Header/NavBar/MainNavLink.tsx b/src/components/Layout/Header/NavBar/MainNavLink.tsx
index d7ddd47142c..2c1f027f8bc 100644
--- a/src/components/Layout/Header/NavBar/MainNavLink.tsx
+++ b/src/components/Layout/Header/NavBar/MainNavLink.tsx
@@ -1,6 +1,6 @@
 import type { ButtonProps } from '@chakra-ui/react'
 import { Box, Button, Tag, Tooltip, useMediaQuery } from '@chakra-ui/react'
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import type { NavLinkProps } from 'react-router-dom'
 import { CircleIcon } from 'components/Icons/Circle'
@@ -16,6 +16,14 @@ type SidebarLinkProps = {
   isActive?: boolean
 } & ButtonProps
 
+const styleProp = { width: '0.5em', height: '0.5em', color: 'var(--chakra-colors-pink-200)' }
+const hoverProp = { bg: 'background.button.secondary.base' }
+const activeProp = {
+  bg: 'transparent',
+  color: 'text.base',
+  fontWeight: 'bold',
+}
+
 export const MainNavLink = memo(
   ({ isCompact, onClick, isNew, label, isActive, ...rest }: SidebarLinkProps) => {
     const [isLargerThan2xl] = useMediaQuery(`(min-width: ${breakpoints['2xl']})`, { ssr: false })
@@ -25,11 +33,31 @@ export const MainNavLink = memo(
       [isActive, onClick],
     )
 
+    const justifyContentProp = useMemo(
+      () => ({ base: isCompact ? 'center' : 'flex-start', '2xl': 'flex-start' }),
+      [isCompact],
+    )
+
+    const displayProp1 = useMemo(
+      () => ({ base: isCompact ? 'none' : 'inline-flex', '2xl': 'inline-flex' }),
+      [isCompact],
+    )
+
+    const displayProp2 = useMemo(
+      () => ({ base: isCompact ? 'none' : 'flex', '2xl': 'block' }),
+      [isCompact],
+    )
+
+    const displayProp3 = useMemo(
+      () => ({ base: isCompact ? 'block' : 'none', '2xl': 'none' }),
+      [isCompact],
+    )
+
     return (
       <Tooltip label={label} isDisabled={isLargerThan2xl || !isCompact} placement='right'>
         <Button
           width='full'
-          justifyContent={{ base: isCompact ? 'center' : 'flex-start', '2xl': 'flex-start' }}
+          justifyContent={justifyContentProp}
           variant='nav-link'
           isActive={isActive}
           onClick={handleClick}
@@ -37,30 +65,22 @@ export const MainNavLink = memo(
           fontWeight='medium'
           minWidth={isCompact ? 'auto' : 10}
           iconSpacing={isLargerThan2xl ? 4 : isCompact ? 0 : 4}
-          _active={{
-            bg: 'transparent',
-            color: 'text.base',
-            fontWeight: 'bold',
-          }}
-          _hover={{ bg: 'background.button.secondary.base' }}
+          _active={activeProp}
+          _hover={hoverProp}
           {...rest}
         >
-          <Box display={{ base: isCompact ? 'none' : 'flex', '2xl': 'block' }}>{label}</Box>
+          <Box display={displayProp2}>{label}</Box>
           {isNew && (
             <>
-              <Tag
-                ml='auto'
-                colorScheme='pink'
-                display={{ base: isCompact ? 'none' : 'inline-flex', '2xl': 'inline-flex' }}
-              >
+              <Tag ml='auto' colorScheme='pink' display={displayProp1}>
                 {translate('common.new')}
               </Tag>
               <CircleIcon
-                style={{ width: '0.5em', height: '0.5em', color: 'var(--chakra-colors-pink-200)' }}
+                style={styleProp}
                 right={0}
                 top={0}
                 position='absolute'
-                display={{ base: isCompact ? 'block' : 'none', '2xl': 'none' }}
+                display={displayProp3}
               />
             </>
           )}
diff --git a/src/components/Layout/Header/NavBar/MobileNavBar.tsx b/src/components/Layout/Header/NavBar/MobileNavBar.tsx
index c921143f24e..ea9a1782025 100644
--- a/src/components/Layout/Header/NavBar/MobileNavBar.tsx
+++ b/src/components/Layout/Header/NavBar/MobileNavBar.tsx
@@ -1,17 +1,24 @@
 import { Flex } from '@chakra-ui/react'
 import { union } from 'lodash'
+import { memo, useMemo } from 'react'
 import { routes } from 'Routes/RoutesCommon'
 import { usePlugins } from 'context/PluginProvider/PluginProvider'
 import { bnOrZero } from 'lib/bignumber/bignumber'
 
 import { MobileNavLink } from './MobileNavLink'
 
-export const MobileNavBar = () => {
+const displayProp = { base: 'flex', md: 'none' }
+
+export const MobileNavBar = memo(() => {
   const { routes: pluginRoutes } = usePlugins()
-  const allRoutes = union(routes, pluginRoutes)
-    .filter(route => !route.disable && !route.hide && route.mobileNav)
-    // route mobileNav discriminated union narrowing is lost by the Array.prototype.sort() call
-    .sort((a, b) => bnOrZero(a.priority!).minus(b.priority!).toNumber())
+  const allRoutes = useMemo(
+    () =>
+      union(routes, pluginRoutes)
+        .filter(route => !route.disable && !route.hide && route.mobileNav)
+        // route mobileNav discriminated union narrowing is lost by the Array.prototype.sort() call
+        .sort((a, b) => bnOrZero(a.priority!).minus(b.priority!).toNumber()),
+    [pluginRoutes],
+  )
 
   return (
     <Flex
@@ -24,11 +31,11 @@ export const MobileNavBar = () => {
       justifyContent='space-between'
       px={4}
       paddingBottom='calc(env(safe-area-inset-bottom, 16px) - 16px)'
-      display={{ base: 'flex', md: 'none' }}
+      display={displayProp}
     >
       {allRoutes.map(route => (
         <MobileNavLink key={route.path} {...route} />
       ))}
     </Flex>
   )
-}
+})
diff --git a/src/components/Layout/Header/NavBar/MobileNavLink.tsx b/src/components/Layout/Header/NavBar/MobileNavLink.tsx
index a567a6cc83b..727d0a1b36c 100644
--- a/src/components/Layout/Header/NavBar/MobileNavLink.tsx
+++ b/src/components/Layout/Header/NavBar/MobileNavLink.tsx
@@ -1,10 +1,12 @@
 import { Button, Flex } from '@chakra-ui/react'
-import { useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { Link as ReactRouterLink, matchPath, useLocation } from 'react-router-dom'
 import type { Route } from 'Routes/helpers'
 
-export const MobileNavLink = ({ label, shortLabel, path, icon }: Route) => {
+const activeProp = { bg: 'transparent', svg: { color: 'blue.200' } }
+
+export const MobileNavLink = memo(({ label, shortLabel, path, icon }: Route) => {
   const translate = useTranslate()
   const location = useLocation()
   const isActive = useMemo(() => {
@@ -16,6 +18,11 @@ export const MobileNavLink = ({ label, shortLabel, path, icon }: Route) => {
     return !!match
   }, [path, location.pathname])
 
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => isActive && e.preventDefault(),
+    [isActive],
+  )
+
   return (
     <Button
       key={path}
@@ -28,8 +35,8 @@ export const MobileNavLink = ({ label, shortLabel, path, icon }: Route) => {
       variant='nav-link'
       isActive={isActive}
       fontWeight='medium'
-      onClick={e => isActive && e.preventDefault()}
-      _active={{ bg: 'transparent', svg: { color: 'blue.200' } }}
+      onClick={handleClick}
+      _active={activeProp}
       py={2}
       width='full'
       zIndex='sticky'
@@ -40,4 +47,4 @@ export const MobileNavLink = ({ label, shortLabel, path, icon }: Route) => {
       </Flex>
     </Button>
   )
-}
+})
diff --git a/src/components/Layout/Header/NavBar/NavBar.tsx b/src/components/Layout/Header/NavBar/NavBar.tsx
index 6ff61c16eb1..349236a46ec 100644
--- a/src/components/Layout/Header/NavBar/NavBar.tsx
+++ b/src/components/Layout/Header/NavBar/NavBar.tsx
@@ -45,6 +45,11 @@ export const NavBar = ({ isCompact, onClick, ...rest }: NavBarProps) => {
     return Array.from(groups.entries())
   }, [isLargerThanMd, pluginRoutes])
 
+  const displayProp = useMemo(
+    () => ({ base: isCompact ? 'none' : 'block', '2xl': 'block' }),
+    [isCompact],
+  )
+
   const renderNavGroups = useMemo(() => {
     return navItemGroups.map((group, id) => {
       const [name, values] = group
@@ -58,7 +63,7 @@ export const NavBar = ({ isCompact, onClick, ...rest }: NavBarProps) => {
               textTransform='uppercase'
               fontWeight='bold'
               letterSpacing='wider'
-              display={{ base: isCompact ? 'none' : 'block', '2xl': 'block' }}
+              display={displayProp}
               translation={`navBar.${name}`}
             />
           )}
@@ -88,16 +93,12 @@ export const NavBar = ({ isCompact, onClick, ...rest }: NavBarProps) => {
         </Stack>
       )
     })
-  }, [groupColor, isCompact, navItemGroups, onClick, pathname, translate])
+  }, [displayProp, groupColor, isCompact, navItemGroups, onClick, pathname, translate])
+
+  const divider = useMemo(() => <Divider borderColor={dividerColor} />, [dividerColor])
 
   return (
-    <Stack
-      width='full'
-      flex='1 1 0%'
-      spacing={6}
-      divider={<Divider borderColor={dividerColor} />}
-      {...rest}
-    >
+    <Stack width='full' flex='1 1 0%' spacing={6} divider={divider} {...rest}>
       {renderNavGroups}
       {isYatFeatureEnabled && <YatBanner isCompact={isCompact} />}
     </Stack>
diff --git a/src/components/Layout/Header/NavBar/Notifications.tsx b/src/components/Layout/Header/NavBar/Notifications.tsx
index 5833edfb8bd..f7fdc3a3e44 100644
--- a/src/components/Layout/Header/NavBar/Notifications.tsx
+++ b/src/components/Layout/Header/NavBar/Notifications.tsx
@@ -10,7 +10,7 @@ import {
 } from '@wherever/react-notification-feed'
 import { getConfig } from 'config'
 import { utils } from 'ethers'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { KeyManager } from 'context/WalletProvider/KeyManager'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 import { useWallet } from 'hooks/useWallet/useWallet'
@@ -18,7 +18,7 @@ import { breakpoints, theme } from 'theme/theme'
 
 const eip712SupportedWallets = [KeyManager.KeepKey, KeyManager.Native, KeyManager.Mobile]
 
-export const Notifications = () => {
+export const Notifications = memo(() => {
   const isWhereverEnabled = useFeatureFlag('Wherever')
   const { colorMode } = useColorMode()
   const {
@@ -107,6 +107,16 @@ export const Notifications = () => {
     [wallet, addressNList],
   )
 
+  const customSignerProp = useMemo(
+    () => ({
+      address: ethAddress,
+      chainId: 1,
+      signMessage,
+      signTypedData,
+    }),
+    [ethAddress, signMessage, signTypedData],
+  )
+
   if (
     !isWhereverEnabled ||
     !ethAddress ||
@@ -119,17 +129,12 @@ export const Notifications = () => {
   return (
     <Box>
       <NotificationFeedProvider
-        customSigner={{
-          address: ethAddress,
-          chainId: 1,
-          signMessage,
-          signTypedData,
-        }}
+        customSigner={customSignerProp}
         partnerKey={partnerKey}
         theme={themeObj}
         disableAnalytics={disableAnalytics}
       >
-        <NotificationFeed gapFromBell={10} placement={'bottom-end'}>
+        <NotificationFeed gapFromBell={10} placement='bottom-end'>
           <IconButton aria-label='Open notifications'>
             <NotificationBell size={20} />
           </IconButton>
@@ -137,4 +142,4 @@ export const Notifications = () => {
       </NotificationFeedProvider>
     </Box>
   )
-}
+})
diff --git a/src/components/Layout/Header/NavBar/UserMenu.tsx b/src/components/Layout/Header/NavBar/UserMenu.tsx
index bce884bb241..dba53558f00 100644
--- a/src/components/Layout/Header/NavBar/UserMenu.tsx
+++ b/src/components/Layout/Header/NavBar/UserMenu.tsx
@@ -12,7 +12,7 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react'
 import type { FC } from 'react'
-import { useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { FaWallet } from 'react-icons/fa'
 import { useTranslate } from 'react-polyglot'
 import { MemoryRouter } from 'react-router-dom'
@@ -29,6 +29,10 @@ import { viemEthMainnetClient } from 'lib/viem-client'
 
 export const entries = [WalletConnectedRoutes.Connected]
 
+const maxWidthProp = { base: 'full', md: 'xs' }
+const minWidthProp = { base: 0, md: 'xs' }
+const widthProp = { base: '100%', lg: 'auto' }
+
 const NoWallet = ({ onClick }: { onClick: () => void }) => {
   const translate = useTranslate()
   return (
@@ -106,20 +110,25 @@ const WalletButton: FC<WalletButtonProps> = ({
     return setWalletLabel(walletInfo?.meta?.address ?? '')
   }, [ensName, walletInfo])
 
+  const rightIcon = useMemo(() => <ChevronDownIcon />, [])
+  const leftIcon = useMemo(
+    () => (
+      <HStack>
+        {!(isConnected || isDemoWallet) && <WarningTwoIcon ml={2} w={3} h={3} color='yellow.500' />}
+        <WalletImage walletInfo={walletInfo} />
+      </HStack>
+    ),
+    [isConnected, isDemoWallet, walletInfo],
+  )
+  const connectIcon = useMemo(() => <FaWallet />, [])
+
   return Boolean(walletInfo?.deviceId) || isLoadingLocalWallet ? (
     <MenuButton
       as={Button}
-      width={{ base: '100%', lg: 'auto' }}
+      width={widthProp}
       justifyContent='flex-start'
-      rightIcon={<ChevronDownIcon />}
-      leftIcon={
-        <HStack>
-          {!(isConnected || isDemoWallet) && (
-            <WarningTwoIcon ml={2} w={3} h={3} color='yellow.500' />
-          )}
-          <WalletImage walletInfo={walletInfo} />
-        </HStack>
-      }
+      rightIcon={rightIcon}
+      leftIcon={leftIcon}
     >
       <Flex>
         {walletLabel ? (
@@ -139,13 +148,13 @@ const WalletButton: FC<WalletButtonProps> = ({
       </Flex>
     </MenuButton>
   ) : (
-    <Button onClick={onConnect} leftIcon={<FaWallet />}>
+    <Button onClick={onConnect} leftIcon={connectIcon}>
       <Text translation='common.connectWallet' />
     </Button>
   )
 }
 
-export const UserMenu: React.FC<{ onClick?: () => void }> = ({ onClick }) => {
+export const UserMenu: React.FC<{ onClick?: () => void }> = memo(({ onClick }) => {
   const { state, dispatch, disconnect } = useWallet()
   const { isConnected, isDemoWallet, walletInfo, connectedType, isLocked, isLoadingLocalWallet } =
     state
@@ -168,8 +177,8 @@ export const UserMenu: React.FC<{ onClick?: () => void }> = ({ onClick }) => {
           data-test='navigation-wallet-dropdown-button'
         />
         <MenuList
-          maxWidth={{ base: 'full', md: 'xs' }}
-          minWidth={{ base: 0, md: 'xs' }}
+          maxWidth={maxWidthProp}
+          minWidth={minWidthProp}
           overflow='hidden'
           // Override zIndex to prevent InputLeftElement displaying over menu
           zIndex={2}
@@ -189,4 +198,4 @@ export const UserMenu: React.FC<{ onClick?: () => void }> = ({ onClick }) => {
       </Menu>
     </ButtonGroup>
   )
-}
+})
diff --git a/src/components/Layout/Header/SideNav.tsx b/src/components/Layout/Header/SideNav.tsx
index 75255ec8882..bbd84378f84 100644
--- a/src/components/Layout/Header/SideNav.tsx
+++ b/src/components/Layout/Header/SideNav.tsx
@@ -4,31 +4,35 @@ import { memo } from 'react'
 import { AppLoadingIcon } from './AppLoadingIcon'
 import { SideNavContent } from './SideNavContent'
 
+const justifyContentProp = { base: 'center', md: 'flex-start' }
+const widthProp = { base: 'auto', '2xl': 'xs' }
+const displayProp = { base: 'none', md: 'flex' }
+
 export const SideNav = memo(() => {
   const bgColor = useColorModeValue('white', 'blackAlpha.300')
   const shadow = useColorModeValue('lg', 'none')
   return (
     <chakra.header
-      paddingTop={`env(safe-area-inset-top)`}
+      paddingTop='env(safe-area-inset-top)'
       left='0'
       right='0'
-      height={'100vh'}
+      height='100vh'
       position='sticky'
       borderRightWidth={1}
       borderColor='border.base'
       bg={bgColor}
       top={0}
-      width={{ base: 'auto', '2xl': 'xs' }}
-      display={{ base: 'none', md: 'flex' }}
+      width={widthProp}
+      display={displayProp}
       boxShadow={shadow}
       flexDir='column'
       zIndex='modal'
       gridArea='left-sidebar'
     >
-      <Flex justifyContent={{ base: 'center', md: 'flex-start' }} pt={4} px={8}>
+      <Flex justifyContent={justifyContentProp} pt={4} px={8}>
         <AppLoadingIcon />
       </Flex>
-      <SideNavContent isCompact={true} />
+      <SideNavContent isCompact />
     </chakra.header>
   )
 })
diff --git a/src/components/Layout/Header/SideNavContent.tsx b/src/components/Layout/Header/SideNavContent.tsx
index 4bf7279f374..c3d6da1521d 100644
--- a/src/components/Layout/Header/SideNavContent.tsx
+++ b/src/components/Layout/Header/SideNavContent.tsx
@@ -2,7 +2,7 @@ import { ChatIcon, CloseIcon, SettingsIcon } from '@chakra-ui/icons'
 import type { FlexProps } from '@chakra-ui/react'
 import { Box, Flex, IconButton, Stack, useMediaQuery } from '@chakra-ui/react'
 import { WalletConnectToDappsHeaderButton } from 'plugins/walletConnectToDapps/components/header/WalletConnectToDappsHeaderButton'
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 import { useModal } from 'hooks/useModal/useModal'
@@ -35,6 +35,10 @@ export const SideNavContent = memo(({ isCompact, onClose }: HeaderContentProps)
     onClose && onClose()
   }, [onClose, feedbackSupport])
 
+  const closeIcon = useMemo(() => <CloseIcon boxSize={3} />, [])
+  const settingsIcon = useMemo(() => <SettingsIcon />, [])
+  const chatIcon = useMemo(() => <ChatIcon />, [])
+
   return (
     <Flex
       width='full'
@@ -45,7 +49,7 @@ export const SideNavContent = memo(({ isCompact, onClose }: HeaderContentProps)
       data-test='full-width-header'
       flexDir='column'
       overflowY='auto'
-      paddingTop={`calc(1.5rem + env(safe-area-inset-top))`}
+      paddingTop='calc(1.5rem + env(safe-area-inset-top))'
       p={4}
     >
       {!isLargerThanMd && (
@@ -54,7 +58,7 @@ export const SideNavContent = memo(({ isCompact, onClose }: HeaderContentProps)
             ml='auto'
             aria-label='Close Nav'
             variant='ghost'
-            icon={<CloseIcon boxSize={3} />}
+            icon={closeIcon}
             onClick={onClose}
           />
           <Flex gap={2}>
@@ -78,7 +82,7 @@ export const SideNavContent = memo(({ isCompact, onClose }: HeaderContentProps)
           size='sm'
           onClick={handleClickSettings}
           label={translate('common.settings')}
-          leftIcon={<SettingsIcon />}
+          leftIcon={settingsIcon}
           data-test='navigation-settings-button'
         />
         <MainNavLink
@@ -86,7 +90,7 @@ export const SideNavContent = memo(({ isCompact, onClose }: HeaderContentProps)
           size='sm'
           onClick={handleClickSupport}
           label={translate('common.feedbackAndSupport')}
-          leftIcon={<ChatIcon />}
+          leftIcon={chatIcon}
         />
       </Stack>
     </Flex>
diff --git a/src/components/Layout/Header/TxWindow/TxWindow.tsx b/src/components/Layout/Header/TxWindow/TxWindow.tsx
index 2765af7bd7b..ba0576f1db7 100644
--- a/src/components/Layout/Header/TxWindow/TxWindow.tsx
+++ b/src/components/Layout/Header/TxWindow/TxWindow.tsx
@@ -17,7 +17,7 @@ import {
   Tabs,
 } from '@chakra-ui/react'
 import { TxStatus } from '@shapeshiftoss/unchained-client'
-import React, { useMemo, useState } from 'react'
+import React, { memo, useCallback, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { CircularProgress } from 'components/CircularProgress/CircularProgress'
 import { TxHistoryIcon } from 'components/Icons/TxHistory'
@@ -26,7 +26,9 @@ import { TransactionsGroupByDate } from 'components/TransactionHistory/Transacti
 import { selectTxIdsByFilter } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
-const padding = { base: 4, md: 6 }
+const paddingProp = { base: 4, md: 6 }
+const selectedProp = { color: 'text.base' }
+const hoverProp = { cursor: 'pointer' }
 
 const CustomTab: React.FC<TabProps> = props => (
   <Tab
@@ -34,8 +36,8 @@ const CustomTab: React.FC<TabProps> = props => (
     fontWeight='medium'
     color='text.subtle'
     cursor='pointer'
-    _selected={{ color: 'text.base' }}
-    _hover={{ cursor: 'pointer' }}
+    _selected={selectedProp}
+    _hover={hoverProp}
     {...props}
   />
 )
@@ -53,7 +55,7 @@ const TxsByStatus: React.FC<TxsByStatusProps> = ({ txStatus, limit }) => {
 
   if (limitTxIds.length === 0) {
     return (
-      <RawText px={padding} color='text.subtle'>
+      <RawText px={paddingProp} color='text.subtle'>
         {translate('transactionRow.emptyMessage', { status: txStatus })}
       </RawText>
     )
@@ -61,20 +63,26 @@ const TxsByStatus: React.FC<TxsByStatusProps> = ({ txStatus, limit }) => {
   return <TransactionsGroupByDate txIds={limitTxIds} useCompactMode />
 }
 
-export const TxWindow = () => {
+export const TxWindow = memo(() => {
   const [isOpen, setIsOpen] = useState(false)
   const [limit, setLimit] = useState('25')
   const translate = useTranslate()
   const filter = useMemo(() => ({ txStatus: TxStatus.Pending }), [])
   const pendingTxIds = useAppSelector(state => selectTxIdsByFilter(state, filter))
   const hasPendingTxs = useMemo(() => pendingTxIds.length > 0, [pendingTxIds])
+  const handleToggleIsOpen = useCallback(() => setIsOpen(previousIsOpen => !previousIsOpen), [])
+  const handleClose = useCallback(() => setIsOpen(false), [])
+  const handleSetLimit = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => setLimit(e.target.value),
+    [],
+  )
   return (
     <>
       <Box position='relative'>
         <IconButton
           aria-label='Pending Transactions'
           icon={hasPendingTxs ? <CircularProgress size='18px' /> : <TxHistoryIcon />}
-          onClick={() => setIsOpen(!isOpen)}
+          onClick={handleToggleIsOpen}
         />
         <Circle
           position='absolute'
@@ -92,16 +100,16 @@ export const TxWindow = () => {
           {pendingTxIds.length}
         </Circle>
       </Box>
-      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} size='sm'>
+      <Drawer isOpen={isOpen} onClose={handleClose} size='sm'>
         <DrawerOverlay backdropBlur='10px' />
         <DrawerContent
           minHeight='100vh'
           maxHeight='100vh'
           overflow='auto'
-          paddingTop={`env(safe-area-inset-top)`}
+          paddingTop='env(safe-area-inset-top)'
         >
-          <DrawerCloseButton top={'calc(var(--chakra-space-2) + env(safe-area-inset-top))'} />
-          <DrawerHeader px={padding} display='flex' alignItems='center' gap={2}>
+          <DrawerCloseButton top='calc(var(--chakra-space-2) + env(safe-area-inset-top))' />
+          <DrawerHeader px={paddingProp} display='flex' alignItems='center' gap={2}>
             <TxHistoryIcon color='text.subtle' />
             {translate('navBar.transactions')}
           </DrawerHeader>
@@ -109,7 +117,7 @@ export const TxWindow = () => {
             <Flex
               gap={4}
               justifyContent='space-between'
-              px={padding}
+              px={paddingProp}
               bg='background.surface.overlay.base'
               position='sticky'
               top={0}
@@ -129,7 +137,7 @@ export const TxWindow = () => {
                   size='sm'
                   variant='filled'
                   value={limit}
-                  onChange={e => setLimit(e.target.value)}
+                  onChange={handleSetLimit}
                   borderRadius='lg'
                   fontWeight='medium'
                 >
@@ -155,4 +163,4 @@ export const TxWindow = () => {
       </Drawer>
     </>
   )
-}
+})
diff --git a/src/plugins/walletConnectToDapps/components/header/WalletConnectToDappsHeaderButton.tsx b/src/plugins/walletConnectToDapps/components/header/WalletConnectToDappsHeaderButton.tsx
index ca5723b7151..33c27f1076e 100644
--- a/src/plugins/walletConnectToDapps/components/header/WalletConnectToDappsHeaderButton.tsx
+++ b/src/plugins/walletConnectToDapps/components/header/WalletConnectToDappsHeaderButton.tsx
@@ -3,7 +3,7 @@ import { AvatarGroup, Button, Menu, MenuButton, MenuList } from '@chakra-ui/reac
 import type { SessionTypes } from '@walletconnect/types'
 import { DappHeaderMenuSummary } from 'plugins/walletConnectToDapps/components/header/DappHeaderMenuSummary'
 import { useWalletConnectV2 } from 'plugins/walletConnectToDapps/WalletConnectV2Provider'
-import { type FC, useMemo } from 'react'
+import { type FC, memo, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { RawText } from 'components/Text'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
@@ -38,7 +38,7 @@ const WalletConnectV2ConnectedButtonText = ({
   )
 }
 
-const WalletConnectV2ConnectedButton = () => {
+const WalletConnectV2ConnectedButton = memo(() => {
   const { sessionsByTopic } = useWalletConnectV2()
   const translate = useTranslate()
   const sessions = useMemo(() => Object.values(sessionsByTopic).filter(isSome), [sessionsByTopic])
@@ -50,27 +50,33 @@ const WalletConnectV2ConnectedButton = () => {
       }, undefined),
     [sessions],
   )
+  const rightIcon = useMemo(() => <ChevronDownIcon />, [])
+  const leftIcon = useMemo(
+    () => (
+      <AvatarGroup max={2} size='xs'>
+        {sessions.map(session => {
+          return (
+            <DappAvatar
+              key={session.topic}
+              image={session.peer.metadata.icons[0]}
+              connected={session.acknowledged}
+              size='xs'
+              connectedDotSize={2}
+              borderWidth={1}
+            />
+          )
+        })}
+      </AvatarGroup>
+    ),
+    [sessions],
+  )
+
   return (
     <Menu autoSelect={false}>
       <MenuButton
         as={Button}
-        leftIcon={
-          <AvatarGroup max={2} size='xs'>
-            {sessions.map(session => {
-              return (
-                <DappAvatar
-                  key={session.topic}
-                  image={session.peer.metadata.icons[0]}
-                  connected={session.acknowledged}
-                  size='xs'
-                  connectedDotSize={2}
-                  borderWidth={1}
-                />
-              )
-            })}
-          </AvatarGroup>
-        }
-        rightIcon={<ChevronDownIcon />}
+        leftIcon={leftIcon}
+        rightIcon={rightIcon}
         width={widthProp}
         textAlign='left'
         flexShrink='none'
@@ -104,9 +110,9 @@ const WalletConnectV2ConnectedButton = () => {
       </MenuList>
     </Menu>
   )
-}
+})
 
-export const WalletConnectToDappsHeaderButton: FC = () => {
+export const WalletConnectToDappsHeaderButton: FC = memo(() => {
   const walletConnectV2 = useWalletConnectV2()
 
   const isWalletConnectToDappsV2Enabled = useFeatureFlag('WalletConnectToDappsV2')
@@ -126,4 +132,4 @@ export const WalletConnectToDappsHeaderButton: FC = () => {
     default:
       return <WalletConnectV2ConnectedButton />
   }
-}
+})