diff --git a/apps/evm/src/components/ConnectButton/ConnectButton.style.tsx b/apps/evm/src/components/ConnectButton/ConnectButton.style.tsx
new file mode 100644
index 00000000..8a55aecd
--- /dev/null
+++ b/apps/evm/src/components/ConnectButton/ConnectButton.style.tsx
@@ -0,0 +1,33 @@
+import { DrawerClose, hexToRgba } from '@gobob/ui';
+import styled from 'styled-components';
+
+type StyledCloseButtonProps = {
+  $isOpen?: boolean;
+};
+
+const StyledCloseButton = styled(DrawerClose)<StyledCloseButtonProps>`
+  background-color: transparent;
+  border: 0;
+  border-top-left-radius: ${({ theme }) => theme.rounded('lg')};
+  border-bottom-left-radius: ${({ theme }) => theme.rounded('lg')};
+  width: 3.5rem;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+  display: flex;
+  padding-top: ${({ theme }) => theme.spacing('3xl')};
+  padding-left: ${({ theme }) => theme.spacing('lg')};
+
+  transform: ${({ $isOpen }) => ($isOpen ? 'translateX(-95%)' : 'translateX(0%)')};
+  ${({ theme }) => theme.transition('common', 'normal')}
+
+  &:hover, &:focus-visible {
+    background-color: ${({ theme }) => hexToRgba(theme.color('grey-300'), 40)};
+    transform: ${({ $isOpen }) => $isOpen && 'translateX(-75%)'};
+  }
+`;
+
+export { StyledCloseButton };
diff --git a/apps/evm/src/components/ConnectButton/ConnectButton.tsx b/apps/evm/src/components/ConnectButton/ConnectButton.tsx
index 165d4534..fbb76250 100644
--- a/apps/evm/src/components/ConnectButton/ConnectButton.tsx
+++ b/apps/evm/src/components/ConnectButton/ConnectButton.tsx
@@ -1,17 +1,28 @@
 'use client';
 
 import { useAccount as useSatsAccount } from '@gobob/sats-wagmi';
-import { Button, DrawerButton, DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle } from '@gobob/ui';
+import {
+  Button,
+  ChevronDoubleRight,
+  DrawerButton,
+  DrawerContent,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerRoot,
+  DrawerTitle
+} from '@gobob/ui';
 import { Trans } from '@lingui/macro';
 import { useStore } from '@tanstack/react-store';
-import { useState } from 'react';
 import { useTheme } from 'styled-components';
 import { useMediaQuery } from 'usehooks-ts';
 import { useAccount } from 'wagmi';
+import { useState } from 'react';
 
 import { Profile } from '../Profile';
 import { ProfileTag } from '../ProfileTag';
 
+import { StyledCloseButton } from './ConnectButton.style';
+
 import { useConnectModal } from '@/connect-ui';
 import { chainL1, chainL2, isValidChain } from '@/constants';
 import { store } from '@/lib/store';
@@ -20,6 +31,8 @@ const ConnectButton = (): JSX.Element => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('s'));
 
+  const [isProfileDrawerOpen, setProfileDrawerOpen] = useState(false);
+
   const { address: evmAddress, chain } = useAccount();
   const { address: btcAddress } = useSatsAccount();
 
@@ -29,7 +42,6 @@ const ConnectButton = (): JSX.Element => {
   const isReceiveModalOpen = useStore(store, (state) => state.shared.isReceiveModalOpen);
   const { isOpen: isConnectModalOpen } = useConnectModal();
 
-  const [isOpen, setOpen] = useState(false);
   const { open } = useConnectModal();
 
   const isLoggedIn = !!(evmAddress || btcAddress);
@@ -40,20 +52,20 @@ const ConnectButton = (): JSX.Element => {
     };
 
     return (
-      <Button variant='ghost' onPress={handleConnect}>
+      <Button style={{ marginLeft: 30 }} variant='ghost' onPress={handleConnect}>
         <Trans>Connect Wallet</Trans>
       </Button>
     );
   }
 
-  const handleClose = () => setOpen(false);
+  const handleClose = () => setProfileDrawerOpen(false);
 
   return (
     <DrawerRoot
       direction={isMobile ? 'bottom' : 'right'}
       dismissible={!(isReceiveModalOpen || isConnectModalOpen)}
-      open={isOpen}
-      onOpenChange={setOpen}
+      open={isProfileDrawerOpen}
+      onOpenChange={setProfileDrawerOpen}
     >
       <DrawerButton variant='ghost'>
         <ProfileTag chain={currentChain} hideAddress={isMobile} size='s' />
@@ -61,10 +73,13 @@ const ConnectButton = (): JSX.Element => {
       <DrawerPortal>
         <DrawerOverlay />
         <DrawerContent>
+          <StyledCloseButton $isOpen={isProfileDrawerOpen}>
+            <ChevronDoubleRight color='grey-50' size='s' />
+          </StyledCloseButton>
           <DrawerTitle hidden>
             <Trans>Profile</Trans>
           </DrawerTitle>
-          <Profile currentChain={currentChain} isMobile={isMobile} otherChain={otherChain} onClose={handleClose} />
+          <Profile currentChain={currentChain} otherChain={otherChain} onClose={handleClose} />
         </DrawerContent>
       </DrawerPortal>
     </DrawerRoot>
diff --git a/apps/evm/src/components/Layout/Header.tsx b/apps/evm/src/components/Layout/Header.tsx
index b0360b33..0460ecd0 100644
--- a/apps/evm/src/components/Layout/Header.tsx
+++ b/apps/evm/src/components/Layout/Header.tsx
@@ -31,7 +31,7 @@ import { useUserAgent } from '@/user-agent';
 const Header = (): JSX.Element => {
   const { i18n } = useLingui();
 
-  const [isOpen, setOpen] = useState(false);
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
 
   const theme = useTheme();
   const isMobileViewport = useMediaQuery(theme.breakpoints.down('md'));
@@ -41,57 +41,61 @@ const Header = (): JSX.Element => {
 
   return (
     <StyledHeader alignItems='center' elementType='header' justifyContent='space-between'>
-      <StyledLogoWrapper alignItems='center' gap='md'>
-        <Sidebar isMobile={isMobile} />
-        <Logo hidden={isMobile} href={RoutesPath.HOME} />
-      </StyledLogoWrapper>
-      <Flex alignItems='center' elementType='header' gap='xl' justifyContent='flex-end'>
-        <Nav hidden={isMobile}>
-          <NavItem href={RoutesPath.BRIDGE} size='s'>
-            <Trans>Bridge</Trans>
-          </NavItem>
-          <NavItem href={RoutesPath.APPS} size='s'>
-            <Trans>Apps</Trans>
-          </NavItem>
-          <NavItem href={RoutesPath.STRATEGIES} size='s'>
-            <Trans>Stake</Trans>
-          </NavItem>
-          <NavItem href={RoutesPath.FUSION} size='s'>
-            <Trans>Fusion</Trans>
-          </NavItem>
-        </Nav>
-        <Popover crossOffset={-50} isOpen={isOpen} onOpenChange={setOpen}>
-          <PopoverTrigger>
-            <Button
-              isIconOnly
-              aria-label={t(i18n)`Show secondary navigation`}
-              hidden={isMobile}
-              size='s'
-              variant='ghost'
-            >
-              <EllipsisHorizontal color='light' size='s' />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent hidden={isMobile}>
-            <PopoverBody onClick={() => setOpen(false)}>
-              <Nav direction='column'>
-                <NavItem isExternal href={ExternalLinks.TERMS_OF_SERVICE} size='s'>
-                  <Trans>T&Cs</Trans>
-                </NavItem>
-                <NavItem isExternal href={ExternalLinks.DOCS} size='s'>
-                  <Trans>Dev</Trans>
-                </NavItem>
-                <NavItem isExternal href={ExternalLinks.HOMEPAGE} size='s'>
-                  <Trans>About</Trans>
-                </NavItem>
-                <NavItem isExternal href={ExternalLinks.SAFE} size='s'>
-                  <Trans>Multisig</Trans>
-                </NavItem>
-              </Nav>
-            </PopoverBody>
-          </PopoverContent>
-        </Popover>
-        <SocialsGroup hidden={isMobile} variant='ghost' />
+      <Flex alignItems='center' gap='4xl'>
+        <StyledLogoWrapper alignItems='center' gap='md'>
+          <Sidebar isMobile={isMobile} />
+          <Logo hidden={isMobile} href={RoutesPath.HOME} />
+        </StyledLogoWrapper>
+        <Flex alignItems='center' gap='xl'>
+          <Nav hidden={isMobile}>
+            <NavItem href={RoutesPath.BRIDGE} size='s'>
+              <Trans>Bridge</Trans>
+            </NavItem>
+            <NavItem href={RoutesPath.APPS} size='s'>
+              <Trans>Apps</Trans>
+            </NavItem>
+            <NavItem href={RoutesPath.STRATEGIES} size='s'>
+              <Trans>Stake</Trans>
+            </NavItem>
+            <NavItem href={RoutesPath.FUSION} size='s'>
+              <Trans>Fusion</Trans>
+            </NavItem>
+          </Nav>
+          <Popover crossOffset={-50} isOpen={isPopoverOpen} onOpenChange={setPopoverOpen}>
+            <PopoverTrigger>
+              <Button
+                isIconOnly
+                aria-label={t(i18n)`Show secondary navigation`}
+                hidden={isMobile}
+                size='s'
+                variant='ghost'
+              >
+                <EllipsisHorizontal color='light' size='s' />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent hidden={isMobile}>
+              <PopoverBody gap='md' onClick={() => setPopoverOpen(false)}>
+                <Nav direction='column'>
+                  <NavItem isExternal href={ExternalLinks.TERMS_OF_SERVICE} size='s'>
+                    <Trans>T&Cs</Trans>
+                  </NavItem>
+                  <NavItem isExternal href={ExternalLinks.DOCS} size='s'>
+                    <Trans>Dev</Trans>
+                  </NavItem>
+                  <NavItem isExternal href={ExternalLinks.HOMEPAGE} size='s'>
+                    <Trans>About</Trans>
+                  </NavItem>
+                  <NavItem isExternal href={ExternalLinks.SAFE} size='s'>
+                    <Trans>Multisig</Trans>
+                  </NavItem>
+                </Nav>
+                <SocialsGroup hidden={isMobile} variant='ghost' />
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+        </Flex>
+      </Flex>
+      <Flex alignItems='center' gap='xl'>
         <FusionPopover />
         <ConnectButton />
       </Flex>
diff --git a/apps/evm/src/components/Layout/NavItem.tsx b/apps/evm/src/components/Layout/NavItem.tsx
index 27bd32fa..f257ed66 100644
--- a/apps/evm/src/components/Layout/NavItem.tsx
+++ b/apps/evm/src/components/Layout/NavItem.tsx
@@ -51,7 +51,7 @@ const NavItem = ({ children, size, isExternal, href, onPress, ...props }: NavIte
   const localizedHref = `/${params.lang}${href}`;
 
   return (
-    <li>
+    <li style={{ lineHeight: 1 }}>
       <StyledNativeNavLink {...props} ref={ref} href={localizedHref} onClick={onPress} onKeyDown={onPress}>
         <StyledNavLink
           as={Span}
diff --git a/apps/evm/src/components/Profile/DisconnectButton.tsx b/apps/evm/src/components/Profile/DisconnectButton.tsx
new file mode 100644
index 00000000..6faa171c
--- /dev/null
+++ b/apps/evm/src/components/Profile/DisconnectButton.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { Button, Flex, Power, Span } from '@gobob/ui';
+import { Trans } from '@lingui/macro';
+import { useEffect, useRef, useState } from 'react';
+
+type DisconnectButtonProps = {
+  onConfirmPress: () => void;
+};
+
+const DisconnectButton = ({ onConfirmPress }: DisconnectButtonProps): JSX.Element => {
+  const [isFocused, setFocused] = useState(false);
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setFocused(false);
+      timeoutRef.current = undefined;
+    }, 500);
+  };
+
+  const handlePress = () => {
+    if (!isFocused) {
+      return setFocused(true);
+    }
+    onConfirmPress();
+  };
+
+  const handleMouseEnter = () => {
+    if (isFocused && timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = undefined;
+    }
+  };
+
+  const handleBlur = () => setFocused(false);
+
+  return (
+    <Button
+      size='s'
+      variant='ghost'
+      onBlur={handleBlur}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onPress={handlePress}
+    >
+      <Power size='s' />
+      <Flex
+        alignItems='center'
+        elementType='span'
+        style={{
+          display: 'grid',
+          gridTemplateColumns: isFocused ? '1fr' : '0fr',
+          transition: 'all 200ms ease 0ms'
+        }}
+      >
+        <Span size='s' style={{ overflow: 'hidden', marginLeft: isFocused ? 4 : 0 }}>
+          <Trans>Disconnect</Trans>
+        </Span>
+      </Flex>
+    </Button>
+  );
+};
+
+export { DisconnectButton };
diff --git a/apps/evm/src/components/Profile/Profile.style.tsx b/apps/evm/src/components/Profile/Profile.style.tsx
index 313b2f0f..989d0892 100644
--- a/apps/evm/src/components/Profile/Profile.style.tsx
+++ b/apps/evm/src/components/Profile/Profile.style.tsx
@@ -12,7 +12,8 @@ const StyledWalletCard = styled(Card)`
 const StyledTokenListItem = styled(Card)<StyledTokenListItemProps>`
   cursor: pointer;
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     ${({ theme }) => theme.list.item.hover}
   }
 
diff --git a/apps/evm/src/components/Profile/Profile.tsx b/apps/evm/src/components/Profile/Profile.tsx
index 2e87a521..dfbeacf2 100644
--- a/apps/evm/src/components/Profile/Profile.tsx
+++ b/apps/evm/src/components/Profile/Profile.tsx
@@ -1,25 +1,14 @@
 'use client';
 
 import { useDisconnect as useSatsDisconnect } from '@gobob/sats-wagmi';
-import {
-  Button,
-  Card,
-  Flex,
-  P,
-  Power,
-  Skeleton,
-  SolidArrowDownCircle,
-  SolidCreditCard,
-  Tooltip,
-  XMark
-} from '@gobob/ui';
-import { t, Trans } from '@lingui/macro';
-import { useLingui } from '@lingui/react';
+import { Card, Flex, P, Skeleton, SolidArrowDownCircle, SolidCreditCard } from '@gobob/ui';
+import { Trans } from '@lingui/macro';
 import { Chain } from 'viem';
 import { useDisconnect } from 'wagmi';
 
 import { ProfileTag } from '../ProfileTag';
 
+import { DisconnectButton } from './DisconnectButton';
 import { ProfileBtcWallet } from './ProfileBtcWallet';
 import { ProfileEvmWallet } from './ProfileEvmWallet';
 import { ProfileTokens } from './ProfileTokens';
@@ -32,15 +21,12 @@ import { store } from '@/lib/store';
 
 type ProfileProps = {
   onClose: () => void;
-  isMobile: boolean;
   currentChain: Chain;
   otherChain: Chain;
 };
 
-const Profile = ({ currentChain, otherChain, onClose, isMobile }: ProfileProps): JSX.Element => {
-  const { i18n } = useLingui();
-
-  const { formatted, isPending: isBalancePending } = useTotalBalance(currentChain.id);
+const Profile = ({ currentChain, otherChain, onClose }: ProfileProps): JSX.Element => {
+  const { formatted, isPending: isBalancePending } = useTotalBalance();
   const { disconnect: evmWalletDisconnect } = useDisconnect();
   const { disconnect: btcWalletDisconnect } = useSatsDisconnect();
   const { open } = useConnectModal();
@@ -83,24 +69,7 @@ const Profile = ({ currentChain, otherChain, onClose, isMobile }: ProfileProps):
     <Flex direction='column' flex={1} gap='xl'>
       <Flex alignItems='center' justifyContent='space-between'>
         <ProfileTag isCopyEnabled chain={currentChain} labelProps={{ weight: 'semibold' }} size='md' />
-        <Flex gap='s'>
-          <Tooltip label='Disconnect'>
-            <Button
-              isIconOnly
-              aria-label={t(i18n)`disconnect wallet(s)`}
-              size='s'
-              variant='ghost'
-              onPress={handleLogout}
-            >
-              <Power size='s' />
-            </Button>
-          </Tooltip>
-          {!isMobile && (
-            <Button isIconOnly aria-label={t(i18n)`close drawer`} size='s' variant='ghost' onPress={onClose}>
-              <XMark size='s' />
-            </Button>
-          )}
-        </Flex>
+        <DisconnectButton onConfirmPress={handleLogout} />
       </Flex>
       {isBalancePending ? (
         <Skeleton height='4xl' width='10rem' />
diff --git a/apps/evm/src/hooks/useTotalBalance.ts b/apps/evm/src/hooks/useTotalBalance.ts
index e0a353b5..00c4b51d 100644
--- a/apps/evm/src/hooks/useTotalBalance.ts
+++ b/apps/evm/src/hooks/useTotalBalance.ts
@@ -1,4 +1,3 @@
-import { ChainId } from '@gobob/chains';
 import { CurrencyAmount } from '@gobob/currency';
 import { usePrices } from '@gobob/hooks';
 import { useAccount as useSatsAccount, useBalance as useSatsBalance } from '@gobob/sats-wagmi';
@@ -10,10 +9,12 @@ import { useAccount } from 'wagmi';
 import { useBalances } from './useBalances';
 
 import { calculateAmountUSD } from '@/utils';
+import { L1_CHAIN, L2_CHAIN } from '@/constants';
 
-const useTotalBalance = (chainId: ChainId) => {
+const useTotalBalance = () => {
   const { getPrice } = usePrices();
-  const { balances, isPending: isEvmBalancePending } = useBalances(chainId);
+  const { balances: l1Balances, isPending: isEvmL1BalancePending } = useBalances(L1_CHAIN);
+  const { balances: l2Balances, isPending: isEvmL2BalancePending } = useBalances(L2_CHAIN);
 
   const { data: btcBalance, isPending: isBtcBalancePending } = useSatsBalance();
   const { address: evmAddress } = useAccount();
@@ -22,18 +23,31 @@ const useTotalBalance = (chainId: ChainId) => {
   const format = useCurrencyFormatter();
   const { locale } = useLocale();
 
-  const total = Object.values(balances).reduce(
+  const l1Total = Object.values(l1Balances).reduce(
     (total, balance) => total.plus(calculateAmountUSD(balance, getPrice(balance.currency.symbol) || 0)),
-    new Big(
-      calculateAmountUSD(
-        CurrencyAmount.fromRawAmount(BITCOIN, btcBalance?.total.toString() || 0),
-        getPrice(BITCOIN.symbol)
-      )
-    )
+    new Big(0)
+  );
+
+  const l2Total = Object.values(l2Balances).reduce(
+    (total, balance) => total.plus(calculateAmountUSD(balance, getPrice(balance.currency.symbol) || 0)),
+    new Big(0)
   );
 
+  const total = l1Total
+    .plus(l2Total)
+    .plus(
+      new Big(
+        calculateAmountUSD(
+          CurrencyAmount.fromRawAmount(BITCOIN, btcBalance?.total.toString() || 0),
+          getPrice(BITCOIN.symbol)
+        )
+      )
+    );
+
   return {
-    isPending: (evmAddress ? isEvmBalancePending : false) || (btcAddress ? isBtcBalancePending : false),
+    isPending:
+      (evmAddress ? isEvmL1BalancePending || isEvmL2BalancePending : false) ||
+      (btcAddress ? isBtcBalancePending : false),
     formatted: format(total.toNumber()),
     compact: Intl.NumberFormat(locale, { notation: 'compact', style: 'currency', currency: 'USD' }).format(
       total.toNumber()
diff --git a/packages/ui/src/icons/ChevronDoubleRight.tsx b/packages/ui/src/icons/ChevronDoubleRight.tsx
new file mode 100644
index 00000000..3ba2ec2f
--- /dev/null
+++ b/packages/ui/src/icons/ChevronDoubleRight.tsx
@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '../components';
+
+const ChevronDoubleRight = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon
+    {...props}
+    ref={ref}
+    fill='none'
+    stroke='currentColor'
+    strokeWidth='1.5'
+    viewBox='0 0 24 24'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d='m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5' strokeLinecap='round' strokeLinejoin='round' />
+  </Icon>
+));
+
+ChevronDoubleRight.displayName = 'ChevronDoubleRight';
+
+export { ChevronDoubleRight };
diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts
index 9b5ec1e2..3afb6b3f 100644
--- a/packages/ui/src/icons/index.ts
+++ b/packages/ui/src/icons/index.ts
@@ -19,6 +19,7 @@ export { Bolt } from './Bolt';
 export { ChatBubbleLeftRight } from './ChatBubbleLeftRight';
 export { Check } from './Check';
 export { CheckCircle } from './CheckCircle';
+export { ChevronDoubleRight } from './ChevronDoubleRight';
 export { ChevronDown } from './ChevronDown';
 export { ChevronLeft } from './ChevronLeft';
 export { ChevronRight } from './ChevronRight';