diff --git a/src/components/common/overall-layout/layout.tsx b/src/components/common/overall-layout/layout.tsx
index 870d142c..914bd2f1 100644
--- a/src/components/common/overall-layout/layout.tsx
+++ b/src/components/common/overall-layout/layout.tsx
@@ -12,9 +12,8 @@ import useAppWallet from "@/hooks/useAppWallet";
 import SessionProvider from "@/components/SessionProvider";
 import { getServerSession } from "next-auth";
 
-import MenuWallets from "@/components/common/overall-layout/menus/wallets";
+// import MenuWallets from "@/components/common/overall-layout/menus/wallets";
 import MenuWallet from "@/components/common/overall-layout/menus/multisig-wallet";
-import WalletDropDown from "@/components/common/overall-layout/wallet-drop-down";
 import {
   WalletDataLoaderWrapper,
   DialogReportWrapper,
@@ -27,13 +26,6 @@ import ConnectWallet from "@/components/common/cardano-objects/connect-wallet";
 import Loading from "@/components/common/overall-layout/loading";
 import { MobileNavigation } from "@/components/ui/mobile-navigation";
 import { MobileActionsMenu } from "@/components/ui/mobile-actions-menu";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
 
 // Enhanced error boundary component for wallet errors
 class WalletErrorBoundary extends Component<
@@ -161,19 +153,6 @@ export default function RootLayout({
           return;
         }
         
-        // Handle connection errors with retry logic
-        if (error instanceof Error && (
-          error.message.includes("Could not establish connection") ||
-          error.message.includes("Receiving end does not exist") ||
-          error.message.includes("Cannot read properties of undefined")
-        )) {
-          console.log("Browser extension connection error detected, retrying in 2 seconds...");
-          setTimeout(() => {
-            window.location.reload();
-          }, 2000);
-          return;
-        }
-        
         // For other errors, don't throw to prevent app crash
         // The user can retry by reconnecting their wallet
       }
@@ -187,106 +166,33 @@ export default function RootLayout({
   const isLoggedIn = !!user;
 
   return (
-    <div className={`grid h-screen w-screen overflow-hidden ${isLoggedIn ? 'md:grid-cols-[240px_1fr] lg:grid-cols-[260px_1fr]' : ''}`}>
+    <div className="flex h-screen w-screen flex-col overflow-hidden">
       {isLoading && <Loading />}
 
-      {/* Sidebar for larger screens - shown when logged in */}
-      {isLoggedIn && (
-        <aside className="hidden border-r border-gray-200/30 bg-muted/40 dark:border-white/[0.03] md:block">
-        <div className="flex h-full max-h-screen flex-col">
-          <header
-            className="flex h-14 items-center border-b border-gray-200/30 px-4 dark:border-white/[0.03] lg:h-16 lg:px-6"
-            id="logo-header"
-            data-header="sidebar"
-          >
-            <Link href="/" className="flex items-center gap-3">
-              <Logo />
-              <span className="select-none text-sm font-medium tracking-[-0.01em] md:text-base lg:text-lg">
-                Multi-Sig Platform
-              </span>
-            </Link>
-          </header>
-          <nav className="flex-1 pt-2">
-            <MenuWallets />
-            {isWalletPath && <MenuWallet />}
-          </nav>
-          <div className="mt-auto p-4" />
-        </div>
-      </aside>
-      )}
-
-      {/* Main content area */}
-      <div className="flex h-screen flex-col">
-        <header
-          className="pointer-events-auto relative z-10 border-b border-gray-200/30 bg-muted/40 px-4 dark:border-white/[0.03] lg:px-6"
-          data-header="main"
-        >
+      {/* Header - full width, always on top */}
+      <header
+        className="pointer-events-auto relative z-[100] border-b border-gray-300/50 bg-muted/40 pl-2 pr-4 dark:border-white/[0.03] lg:pl-4 lg:pr-6"
+        data-header="main"
+      >
           <div className="flex h-14 items-center gap-4 lg:h-16">
-            {/* Mobile menu button - only when logged in */}
-            {isLoggedIn && <MobileNavigation isWalletPath={isWalletPath} />}
+            {/* Mobile menu button - only in wallet context */}
+            {isWalletPath && <MobileNavigation isWalletPath={isWalletPath} />}
 
-            {/* Logo in header - left on landing page (all sizes), centered on mobile when logged in */}
-            <div className={`flex flex-1 ${!isLoggedIn ? 'justify-start' : 'justify-center md:hidden'}`}>
+            {/* Logo - in fixed-width container matching sidebar width */}
+            <div className={`flex items-center md:w-[260px] lg:w-[280px] ${isWalletPath ? 'flex-1 justify-center md:flex-none md:justify-start' : ''}`}>
               <Link
                 href="/"
-                className="flex items-center gap-2 rounded-md px-2 py-1 transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-800/50"
+                className="flex items-center gap-2 rounded-md px-4 py-2 text-sm transition-all duration-200 hover:bg-gray-100/50 dark:hover:bg-white/5 md:px-4"
               >
-                <svg
-                  className="h-7 w-7 flex-shrink-0 text-foreground"
-                  enableBackground="new 0 0 300 200"
-                  viewBox="0 0 300 200"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                >
-                  <path d="m289 127-45-60-45-60c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-37 49.3c-2 2.7-6 2.7-8 0l-37-49.3c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-45 60-45 60c-1.3 1.8-1.3 4.2 0 6l45 60c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l45-60c1.3-1.8 1.3-4.2 0-6zm-90-103.3 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-90 0 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-53 152.6-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0z" />
-                </svg>
-                <span className="whitespace-nowrap text-base font-medium text-foreground">
-                  Multi-Sig Platform
+                <Logo />
+                <span className="select-none font-medium tracking-[-0.01em]" style={{ fontSize: '17px' }}>
+                  Multisig Platform
                 </span>
               </Link>
             </div>
 
-            {/* Wallet selection + breadcrumb row on desktop */}
-            {isLoggedIn && (
-              <div className="hidden md:block">
-                <div className="mx-1 w-full py-2">
-                  <nav className="flex items-center">
-                    <WalletDropDown />
-
-                    {/* Right: Breadcrumb */}
-                    <div className="flex-shrink-0">
-                      {isWalletPath && appWallet ? (
-                        <Breadcrumb>
-                          <BreadcrumbList>
-                            {walletPageNames.map((name, index) => (
-                              <React.Fragment key={index}>
-                                <BreadcrumbSeparator />
-                                <BreadcrumbItem>
-                                  <BreadcrumbLink asChild>
-                                    <Link
-                                      href={`/wallets/${appWallet.id}/${walletPageNames
-                                        .slice(0, index + 1)
-                                        .join("/")}`}
-                                    >
-                                      {name.toUpperCase()}
-                                    </Link>
-                                  </BreadcrumbLink>
-                                </BreadcrumbItem>
-                              </React.Fragment>
-                            ))}
-                          </BreadcrumbList>
-                        </Breadcrumb>
-                      ) : (
-                        <div className="w-40" /> /* Placeholder to keep right side spacing */
-                      )}
-                    </div>
-                  </nav>
-                </div>
-              </div>
-            )}
-
             {/* Right: Control buttons */}
-            <div className="ml-auto flex items-center space-x-2">
+            <div className="ml-auto flex items-center gap-2">
               {!connected ? (
                 <ConnectWallet />
               ) : (
@@ -309,17 +215,31 @@ export default function RootLayout({
               )}
             </div>
           </div>
-        </header>
+      </header>
 
+      {/* Content area with sidebar + main */}
+      <div className={`flex flex-1 overflow-hidden ${isWalletPath ? '' : ''}`}>
+        {/* Sidebar for larger screens - only in wallet context */}
+        {isWalletPath && (
+          <aside className="hidden w-[260px] border-r border-gray-300/50 bg-muted/40 dark:border-white/[0.03] md:block lg:w-[280px]">
+            <div className="flex h-full max-h-screen flex-col">
+              <nav className="flex-1 pt-2">
+                <MenuWallet />
+              </nav>
+              <div className="mt-auto p-4" />
+            </div>
+          </aside>
+        )}
 
+        {/* Main content */}
         <main className="relative flex flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden p-4 md:p-8">
-          <WalletErrorBoundary 
+          <WalletErrorBoundary
             fallback={
               <div className="flex flex-col items-center justify-center h-full">
                 <h2 className="text-xl font-semibold mb-2">Something went wrong</h2>
                 <p className="text-gray-600 mb-4">Please try refreshing the page or reconnecting your wallet.</p>
-                <button 
-                  onClick={() => window.location.reload()} 
+                <button
+                  onClick={() => window.location.reload()}
                   className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
                 >
                   Refresh Page
diff --git a/src/components/common/overall-layout/logo.tsx b/src/components/common/overall-layout/logo.tsx
index b71d6a39..5d6c65ec 100644
--- a/src/components/common/overall-layout/logo.tsx
+++ b/src/components/common/overall-layout/logo.tsx
@@ -1,7 +1,7 @@
 export default function Logo() {
   return (
     <svg
-      className="h-10 w-10"
+      className="h-9 w-9"
       enableBackground="new 0 0 300 200"
       viewBox="0 0 300 200"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/common/overall-layout/menus/menu-link.tsx b/src/components/common/overall-layout/menus/menu-link.tsx
index 3c3e4e85..aac5c51f 100644
--- a/src/components/common/overall-layout/menus/menu-link.tsx
+++ b/src/components/common/overall-layout/menus/menu-link.tsx
@@ -12,7 +12,7 @@ export default function MenuLink({
   return (
     <Link
       href={href}
-      className={`flex items-center gap-3 rounded-md px-3 py-2 text-muted-foreground transition-all duration-200 hover:bg-gray-100/50 dark:hover:bg-white/5 hover:text-foreground ${className && className === "text-white" ? "!bg-gray-900 dark:!bg-white/10 !text-white dark:!text-white !font-medium" : className}`}
+      className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-all duration-200 hover:bg-gray-100/50 dark:hover:bg-white/5 hover:text-foreground ${className && className === "text-white" ? "!bg-gray-900 dark:!bg-white/10 !text-white dark:!text-white !font-medium" : className}`}
     >
       {children}
     </Link>
diff --git a/src/components/common/overall-layout/menus/multisig-wallet.tsx b/src/components/common/overall-layout/menus/multisig-wallet.tsx
index 4a04314a..0c4b9c82 100644
--- a/src/components/common/overall-layout/menus/multisig-wallet.tsx
+++ b/src/components/common/overall-layout/menus/multisig-wallet.tsx
@@ -1,5 +1,6 @@
-import { Banknote, Info, List, Landmark, UserRoundPen, ChartNoAxesColumnIncreasing, FileCode2 } from "lucide-react";
+import { Banknote, Info, List, Landmark, UserRoundPen, ChartNoAxesColumnIncreasing, FileCode2, ArrowLeft, ChevronDown, ChevronUp, Wallet2, Plus } from "lucide-react";
 import { useRouter } from "next/router";
+import { useState, useEffect } from "react";
 import MenuLink from "./menu-link";
 import usePendingTransactions from "@/hooks/usePendingTransactions";
 import useUserWallets from "@/hooks/useUserWallets";
@@ -7,26 +8,96 @@ import { Badge } from "@/components/ui/badge";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
 import usePendingSignables from "@/hooks/usePendingSignables";
 import useMultisigWallet from "@/hooks/useMultisigWallet";
+import useAppWallet from "@/hooks/useAppWallet";
+import WalletNavLink from "@/components/common/overall-layout/wallet-nav-link";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 export default function MenuWallet() {
   const router = useRouter();
   const baseUrl = `/wallets/${router.query.wallet as string | undefined}/`;
   const { wallets } = useUserWallets();
+  const { appWallet } = useAppWallet();
   const { transactions } = usePendingTransactions();
   const { signables } = usePendingSignables();
   const { multisigWallet } = useMultisigWallet();
+  const [open, setOpen] = useState(false);
+
+  // Close dropdown on route change
+  useEffect(() => {
+    const handleRouteChange = () => {
+      setOpen(false);
+    };
+    router.events.on("routeChangeStart", handleRouteChange);
+    return () => {
+      router.events.off("routeChangeStart", handleRouteChange);
+    };
+  }, [router.events]);
+
   if (!wallets) return;
+
   return (
-    <nav className="grid h-full items-start px-2 text-sm font-medium lg:px-4">
-      <div className="grid items-start">
+    <nav className="grid h-full items-start px-2 font-medium lg:px-4">
+      <div className="grid items-start space-y-1">
+        {/* Wallet Selector */}
+        <div className="mt-1 mb-1">
+          <DropdownMenu open={open} onOpenChange={setOpen}>
+            <DropdownMenuTrigger asChild>
+              <button type="button" className="flex w-full max-w-[244px] lg:max-w-[248px] items-center gap-3 rounded-md px-3 py-2 text-sm transition-all duration-200 bg-white dark:bg-zinc-900 border border-zinc-300/40 dark:border-white/10 text-muted-foreground hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-foreground">
+                <Wallet2 className="h-5 w-5 flex-shrink-0" />
+                <span className="truncate">{appWallet?.name || "Select Wallet"}</span>
+                {open ? (
+                  <ChevronUp className="h-5 w-5 flex-shrink-0 ml-auto" />
+                ) : (
+                  <ChevronDown className="h-5 w-5 flex-shrink-0 ml-auto" />
+                )}
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-[var(--radix-dropdown-menu-trigger-width)]">
+              {wallets
+                .filter((wallet) => !wallet.isArchived)
+                .sort((a, b) => a.name.localeCompare(b.name))
+                .map((wallet) => (
+                  <DropdownMenuItem asChild key={wallet.id}>
+                    <WalletNavLink wallet={wallet} />
+                  </DropdownMenuItem>
+                ))}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem asChild>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setOpen(false);
+                    void router.push("/wallets/new-wallet-flow/save");
+                  }}
+                  className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-all duration-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-foreground cursor-pointer"
+                >
+                  <Plus className="h-5 w-5 flex-shrink-0" />
+                  <span>New Wallet</span>
+                </button>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* Menu Items */}
+        <div className="mt-1 pt-1 space-y-1">
+          <div className="px-3 py-1 text-xs font-medium text-muted-foreground">
+            Menu
+          </div>
         <MenuLink
-          href={`${baseUrl}governance`}
+          href={`${baseUrl}`}
           className={
-            router.pathname == "/wallets/[wallet]/governance" ? "text-white" : ""
+            router.pathname == "/wallets/[wallet]" || router.pathname == "/wallets/[wallet]/info" ? "text-white" : ""
           }
         >
-          <Landmark className="h-5 w-5" />
-          <div className="flex items-center gap-2">Governance</div>
+          <Info className="h-5 w-5" />
+          Overview
         </MenuLink>
         <MenuLink
           href={`${baseUrl}transactions`}
@@ -37,14 +108,21 @@ export default function MenuWallet() {
           }
         >
           <List className="h-5 w-5" />
-          <div className="flex items-center gap-2">
-            Transactions
-            {transactions && transactions.length > 0 && (
-              <Badge className="ml-auto flex h-4 w-4 shrink-0 items-center justify-center rounded-full">
-                {transactions.length}
-              </Badge>
-            )}
-          </div>
+          <span className="flex-1">Transactions</span>
+          {transactions && transactions.length > 0 && (
+            <Badge className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full">
+              {transactions.length}
+            </Badge>
+          )}
+        </MenuLink>
+        <MenuLink
+          href={`${baseUrl}governance`}
+          className={
+            router.pathname == "/wallets/[wallet]/governance" ? "text-white" : ""
+          }
+        >
+          <Landmark className="h-5 w-5" />
+          Governance
         </MenuLink>
         <MenuLink
           href={`${baseUrl}signing`}
@@ -53,14 +131,12 @@ export default function MenuWallet() {
           }
         >
           <UserRoundPen className="h-5 w-5" />
-          <div className="flex items-center gap-2">
-            Signing
-            {signables && signables.length > 0 && (
-              <Badge className="ml-auto flex h-4 w-4 shrink-0 items-center justify-center rounded-full">
-                {signables.length}
-              </Badge>
-            )}
-          </div>
+          <span className="flex-1">Signing</span>
+          {signables && signables.length > 0 && (
+            <Badge className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full">
+              {signables.length}
+            </Badge>
+          )}
         </MenuLink>
         {multisigWallet && multisigWallet.stakingEnabled() && <MenuLink
           href={`${baseUrl}staking`}
@@ -68,18 +144,9 @@ export default function MenuWallet() {
             router.pathname == "/wallets/[wallet]/staking" ? "text-white" : ""
           }
         >
-          <ChartNoAxesColumnIncreasing className="h-6 w-6" />
+          <ChartNoAxesColumnIncreasing className="h-5 w-5" />
           Staking
         </MenuLink>}
-        <MenuLink
-          href={`${baseUrl}dapps`}
-          className={
-            router.pathname == "/wallets/[wallet]/dapps" ? "text-white" : ""
-          }
-        >
-          <FileCode2 className="h-5 w-5" />
-          <div className="flex items-center gap-2">Dapps</div>
-        </MenuLink>
         <MenuLink
           href={`${baseUrl}assets`}
           className={
@@ -87,7 +154,7 @@ export default function MenuWallet() {
           }
         >
           <Banknote className="h-5 w-5" />
-          <div className="flex items-center gap-2">Assets</div>
+          Assets
         </MenuLink>
         <MenuLink
           href={`${baseUrl}chat`}
@@ -96,23 +163,27 @@ export default function MenuWallet() {
           }
         >
           <ChatBubbleIcon className="h-5 w-5" />
-          <div className="flex items-center gap-2">Chat</div>
+          Chat
         </MenuLink>
         <MenuLink
-          href={`${baseUrl}info`}
+          href={`${baseUrl}dapps`}
           className={
-            router.pathname == "/wallets/[wallet]/info" ? "text-white" : ""
+            router.pathname == "/wallets/[wallet]/dapps" ? "text-white" : ""
           }
         >
-          <Info className="h-5 w-5" />
-          <div className="flex items-center gap-2">Info</div>
+          <FileCode2 className="h-5 w-5" />
+          Dapps
         </MenuLink>
-      </div>
+        </div>
 
-      {/* <MenuLink href={`/`} className={"self-end"}>
-        <ArrowLeft className="h-4 w-4" />
-        <div className="flex items-center gap-2">Back</div>
-      </MenuLink> */}
+        {/* Back to All Wallets */}
+        <div className="mt-2 border-t border-gray-300/50 dark:border-white/[0.03] pt-1">
+          <MenuLink href={`/`}>
+            <ArrowLeft className="h-5 w-5" />
+            All Wallets
+          </MenuLink>
+        </div>
+      </div>
     </nav>
   );
 }
diff --git a/src/components/common/overall-layout/wallet-nav-link.tsx b/src/components/common/overall-layout/wallet-nav-link.tsx
index d2296bd8..52c90450 100644
--- a/src/components/common/overall-layout/wallet-nav-link.tsx
+++ b/src/components/common/overall-layout/wallet-nav-link.tsx
@@ -21,26 +21,22 @@ const WalletNavLink = React.forwardRef<HTMLSpanElement, WalletNavLinkProps>(
       <span ref={ref} className="block">
         <MenuLink
           href={`/wallets/${wallet.id}`}
-          className={`border-x px-4 py-2 ${
+          className={`${
             isActive
-              ? "border-primary text-primary"
-              : "border-transparent text-muted-foreground hover:border-secondary"
+              ? "text-white"
+              : ""
           }`}
         >
-          <div className="flex items-start gap-1">
-            <Wallet2 className="h-4 w-4 mt-0.5 flex-shrink-0" />
-            <div className="flex-1 min-w-0">
-              <div className="break-words">
-                {wallet.name}
-                {wallet.isArchived && " (Archived)"}
-              </div>
-            </div>
-            {transactions && transactions.length > 0 && (
-              <Badge className="ml-2 flex h-6 w-6 items-center justify-center rounded-full flex-shrink-0">
-                {transactions.length}
-              </Badge>
-            )}
-          </div>
+          <Wallet2 className="h-5 w-5 flex-shrink-0" />
+          <span className="flex-1 min-w-0 truncate">
+            {wallet.name}
+            {wallet.isArchived && " (Archived)"}
+          </span>
+          {transactions && transactions.length > 0 && (
+            <Badge className="flex h-4 w-4 items-center justify-center rounded-full flex-shrink-0">
+              {transactions.length}
+            </Badge>
+          )}
         </MenuLink>
       </span>
     );
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index bee9d005..10cbe0e0 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean
   }
->(({ className, inset, ...props }, ref) => (
+>(({ className, inset, ...props}, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
diff --git a/src/components/ui/mobile-navigation.tsx b/src/components/ui/mobile-navigation.tsx
index b7b38575..5b37553c 100644
--- a/src/components/ui/mobile-navigation.tsx
+++ b/src/components/ui/mobile-navigation.tsx
@@ -1,17 +1,19 @@
 import React, { useState } from "react";
+import { createPortal } from "react-dom";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
 import {
   Sheet,
-  SheetContent,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
+  SheetPortal,
+  SheetOverlay,
 } from "@/components/ui/sheet";
 import { Button } from "@/components/ui/button";
 import Logo from "@/components/common/overall-layout/logo";
-import MenuWallets from "@/components/common/overall-layout/menus/wallets";
 import MenuWallet from "@/components/common/overall-layout/menus/multisig-wallet";
-import WalletDropDown from "@/components/common/overall-layout/wallet-drop-down";
 import useUser from "@/hooks/useUser";
+import { cn } from "@/lib/utils";
 
 interface MobileNavigationProps {
   isWalletPath: boolean;
@@ -22,52 +24,55 @@ export function MobileNavigation({ isWalletPath }: MobileNavigationProps) {
   const { user } = useUser();
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        <Button 
-          variant="ghost" 
-          size="icon"
-          className="md:hidden"
-          aria-label="Open navigation menu"
-        >
-          <svg
-            className="h-5 w-5"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+    <>
+      {/* Custom overlay - rendered outside of Sheet via Portal */}
+      {open && typeof window !== 'undefined' && createPortal(
+        <div
+          className="fixed z-40 bg-white/50 dark:bg-black/50 transition-opacity duration-200"
+          style={{
+            top: '56px',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            pointerEvents: 'auto'
+          }}
+          onClick={(e) => {
+            // Only close if clicking the overlay itself (not header)
+            const header = document.querySelector('[data-header="main"]');
+            if (!header || !header.contains(e.target as Node)) {
+              setOpen(false);
+            }
+          }}
+        />,
+        document.body
+      )}
+
+      <Sheet open={open} onOpenChange={setOpen} modal={false}>
+        <SheetTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="md:hidden"
+            aria-label={open ? "Close navigation menu" : "Open navigation menu"}
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M4 6h16M4 12h16M4 18h16"
-            />
-          </svg>
-        </Button>
-      </SheetTrigger>
-      <SheetContent side="left" className="w-[280px] sm:w-[350px] p-0 bg-white/95 dark:bg-zinc-950/95 backdrop-blur-xl border-r border-gray-200/30 dark:border-white/[0.03]">
-        <SheetHeader className="border-b border-gray-200/30 dark:border-white/[0.03] px-4 py-3">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
+            {open ? (
               <svg
-                className="h-6 w-6 text-foreground"
-                enableBackground="new 0 0 300 200"
-                viewBox="0 0 300 200"
+                className="h-5 w-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
               >
-                <path d="m289 127-45-60-45-60c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-37 49.3c-2 2.7-6 2.7-8 0l-37-49.3c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-45 60-45 60c-1.3 1.8-1.3 4.2 0 6l45 60c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l45-60c1.3-1.8 1.3-4.2 0-6zm-90-103.3 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-90 0 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-53 152.6-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0z" />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
               </svg>
-              <span className="font-semibold text-base text-foreground">Multi-Sig Platform</span>
-            </div>
-            <button
-              onClick={() => setOpen(false)}
-              className="rounded-md p-1.5 opacity-70 ring-offset-white transition-opacity hover:opacity-100 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 dark:ring-offset-zinc-950 dark:focus:ring-zinc-300"
-              aria-label="Close"
-            >
+            ) : (
               <svg
-                className="h-4 w-4"
+                className="h-5 w-5"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -77,32 +82,50 @@ export function MobileNavigation({ isWalletPath }: MobileNavigationProps) {
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
+                  d="M4 6h16M4 12h16M4 18h16"
                 />
               </svg>
-            </button>
-          </div>
-        </SheetHeader>
-        <nav className="flex-1 overflow-y-auto py-3">
-          <div className="space-y-1">
-            {/* Wallet Selection at the top of mobile menu */}
-            {user && (
-              <div className="px-2 pb-2 w-full min-w-0">
-                <WalletDropDown forceMobile={true} onPlusClick={() => setOpen(false)} />
-              </div>
             )}
-            
-            <div onClick={() => setOpen(false)} className="mobile-menu-wrapper">
-              <MenuWallets />
+          </Button>
+        </SheetTrigger>
+        <SheetPortal>
+        <SheetPrimitive.Content
+          className={cn(
+            "fixed z-50 inset-y-0 left-0 w-[260px] sm:w-[280px] p-0",
+            "bg-muted/100 border-r border-gray-200/30 dark:border-white/[0.03]",
+            "shadow-lg transition ease-in-out",
+            "data-[state=closed]:duration-300 data-[state=open]:duration-500",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"
+          )}
+          style={{ top: '56px', height: 'calc(100vh - 56px)' }}
+          onInteractOutside={(e) => {
+            // Check if click was in header
+            const header = document.querySelector('[data-header="main"]');
+            if (header && header.contains(e.target as Node)) {
+              // Click was in header - don't close
+              e.preventDefault();
+              return;
+            }
+            // Click was on content - close
+            setOpen(false);
+          }}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Navigation Menu</SheetTitle>
+          </SheetHeader>
+          <nav className="flex-1 overflow-y-auto py-3">
+            <div className="space-y-1">
+              {isWalletPath && (
+                <div onClick={() => setOpen(false)} className="mobile-menu-wrapper">
+                  <MenuWallet />
+                </div>
+              )}
             </div>
-            {isWalletPath && (
-              <div onClick={() => setOpen(false)} className="mobile-menu-wrapper">
-                <MenuWallet />
-              </div>
-            )}
-          </div>
-        </nav>
-      </SheetContent>
+          </nav>
+        </SheetPrimitive.Content>
+      </SheetPortal>
     </Sheet>
+    </>
   );
 }
\ No newline at end of file
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 17b6cbaa..b2ab1fa8 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -16,12 +16,13 @@ const SheetPortal = SheetPrimitive.Portal
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+>(({ className, style, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-40 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
+    style={style}
     {...props}
     ref={ref}
   />