diff --git a/apps/playground/frontend/package.json b/apps/playground/frontend/package.json
index 2a5fe09..c190cdc 100644
--- a/apps/playground/frontend/package.json
+++ b/apps/playground/frontend/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@meshsdk/midnight-react": "*",
+    "@meshsdk/midnight-core": "*",
+    "@meshsdk/midnight-wallet": "*",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/vite": "^4.1.11",
diff --git a/apps/playground/frontend/src/App.tsx b/apps/playground/frontend/src/App.tsx
index 9914ccb..7de3baf 100644
--- a/apps/playground/frontend/src/App.tsx
+++ b/apps/playground/frontend/src/App.tsx
@@ -1,9 +1,11 @@
 import * as pino from "pino";
 import { MidnightMeshProvider } from "@meshsdk/midnight-react";
 import { ThemeProvider } from "@/components/theme-provider"
-import "@meshsdk/midnight-react/styles.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { Home } from "./pages/home";
+import { MainLayout } from "./layouts/layout";
+import { WalletUI } from "./pages/wallet-ui";
+import { Counter } from "./pages/counter";
 
 const logger = pino.pino({
   level: "trace",
@@ -11,18 +13,20 @@ const logger = pino.pino({
 
 function App() { 
 
-  return (
-    <>
+  return (    
     <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
       <MidnightMeshProvider logger={logger}>
-      <BrowserRouter basename="/">
-          <Routes>            
-            <Route path="/" element={<Home />} />            
-          </Routes>
-        </BrowserRouter>           
+        <BrowserRouter basename="/">      
+              <Routes>
+                <Route element={<MainLayout />}>
+                  <Route path="/" element={<Home />} />                
+                  <Route path="/wallet-ui" element={<WalletUI />} />
+                  <Route path="/counter" element={<Counter />} />
+                </Route>
+              </Routes>
+            </BrowserRouter>                
       </MidnightMeshProvider>
-    </ThemeProvider>
-    </>
+    </ThemeProvider>    
   )
 }
 
diff --git a/apps/playground/frontend/src/components/loading.tsx b/apps/playground/frontend/src/components/loading.tsx
new file mode 100644
index 0000000..0f7eef8
--- /dev/null
+++ b/apps/playground/frontend/src/components/loading.tsx
@@ -0,0 +1,7 @@
+export const Loading = () => {
+    return (
+        <div>
+            <p>Loading...</p>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/apps/playground/frontend/src/layouts/layout.tsx b/apps/playground/frontend/src/layouts/layout.tsx
new file mode 100644
index 0000000..e7309d0
--- /dev/null
+++ b/apps/playground/frontend/src/layouts/layout.tsx
@@ -0,0 +1,40 @@
+import { Outlet, NavLink } from 'react-router-dom';
+
+export const MainLayout = () => {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="bg-primary text-primary-foreground shadow">
+        <nav className="container mx-auto flex gap-4 p-4">
+          <NavLink
+            to="/"
+            className={({ isActive }) =>
+              `font-semibold transition hover:opacity-80 ${isActive ? 'underline' : ''}`
+            }
+            end
+          >
+            Home
+          </NavLink>
+          <NavLink
+            to="/counter"
+            className={({ isActive }) =>
+              `font-semibold transition hover:opacity-80 ${isActive ? 'underline' : ''}`
+            }
+          >
+            Counter
+          </NavLink>         
+          <NavLink
+            to="/wallet-ui"
+            className={({ isActive }) =>
+              `font-semibold transition hover:opacity-80 ${isActive ? 'underline' : ''}`
+            }
+          >
+            Wallet UI
+          </NavLink>
+        </nav>
+      </header>
+      <main className="container mx-auto flex-1 py-6">
+        <Outlet />
+      </main>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/playground/frontend/src/main.tsx b/apps/playground/frontend/src/main.tsx
index 8090697..1ae3cfa 100644
--- a/apps/playground/frontend/src/main.tsx
+++ b/apps/playground/frontend/src/main.tsx
@@ -1,11 +1,16 @@
-import { StrictMode } from 'react'
+import { StrictMode, Suspense, lazy } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
+import { Loading } from '@/components/loading'
+
 import './index.css'
 import '@/global.ts'
 
+const LazyApp = lazy(() => import('./App'));
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <Suspense fallback={<Loading />}>
+      <LazyApp />
+    </Suspense>
   </StrictMode>,
 )
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/button.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/button.tsx
new file mode 100644
index 0000000..3f29f7a
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/button.tsx
@@ -0,0 +1,58 @@
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+import { cn } from "./cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/cn.ts b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/cn.ts
new file mode 100644
index 0000000..88283f0
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/cn.ts
@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/dialog.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/dialog.tsx
new file mode 100644
index 0000000..9ce8acc
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/dialog.tsx
@@ -0,0 +1,121 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "./cn";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    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",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
+,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-foreground text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/dropdown-menu.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/dropdown-menu.tsx
new file mode 100644
index 0000000..004b854
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/dropdown-menu.tsx
@@ -0,0 +1,202 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "./cn"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn(
+      "-mx-1 my-1 h-px bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-book-dashed.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-book-dashed.tsx
new file mode 100644
index 0000000..185604a
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-book-dashed.tsx
@@ -0,0 +1,34 @@
+export default function IconBookDashed() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="gray"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "24px",
+        height: "24px",
+        strokeWidth: "1px",
+      }}
+      className="hover:mesh-fill-white"
+    >
+      <path d="M12 17h2" />
+      <path d="M12 22h2" />
+      <path d="M12 2h2" />
+      <path d="M18 22h1a1 1 0 0 0 1-1" />
+      <path d="M18 2h1a1 1 0 0 1 1 1v1" />
+      <path d="M20 15v2h-2" />
+      <path d="M20 8v3" />
+      <path d="M4 11V9" />
+      <path d="M4 19.5V15" />
+      <path d="M4 5v-.5A2.5 2.5 0 0 1 6.5 2H8" />
+      <path d="M8 22H6.5a1 1 0 0 1 0-5H8" />
+    </svg>
+  );
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-chevron-right.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-chevron-right.tsx
new file mode 100644
index 0000000..513880f
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-chevron-right.tsx
@@ -0,0 +1,24 @@
+export default function IconChevronRight() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="gray"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "24px",
+        height: "24px",
+        strokeWidth: "1px",
+      }}
+      className="hover:mesh-fill-white"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-download.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-download.tsx
new file mode 100644
index 0000000..d2cd1b7
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-download.tsx
@@ -0,0 +1,26 @@
+export default function IconDownload() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="gray"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "24px",
+        height: "24px",
+        strokeWidth: "1px",
+      }}
+      className="hover:mesh-fill-white"
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" x2="12" y1="15" y2="3" />
+    </svg>
+  );
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-fingerprint.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-fingerprint.tsx
new file mode 100644
index 0000000..dae5b32
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-fingerprint.tsx
@@ -0,0 +1,32 @@
+export default function IconFingerprint() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "24px",
+        height: "24px",
+        strokeWidth: "1px",
+      }}
+      className="hover:mesh-fill-white"
+    >
+      <path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" />
+      <path d="M14 13.12c0 2.38 0 6.38-1 8.88" />
+      <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02" />
+      <path d="M2 12a10 10 0 0 1 18-6" />
+      <path d="M2 16h.01" />
+      <path d="M21.8 16c.2-2 .131-5.354 0-6" />
+      <path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" />
+      <path d="M8.65 22c.21-.66.45-1.32.57-2" />
+      <path d="M9 6.8a6 6 0 0 1 9 5.2v2" />
+    </svg>
+  );
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-lace.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-lace.tsx
new file mode 100644
index 0000000..79d14a1
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-lace.tsx
@@ -0,0 +1,16 @@
+export default function IconLace() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="35" viewBox="0 0 173.777 175.055">
+    <defs>
+      <radialGradient id="radial-gradient" cx="0.5" cy="0.5" r="0.506" gradientTransform="translate(-0.004) scale(1.007 1)" gradientUnits="objectBoundingBox">
+        <stop offset="0.47" stop-color="#feb14f"/>
+        <stop offset="1" stop-color="#ff92de"/>
+      </radialGradient>
+    </defs>
+    <g id="Layer_1" transform="translate(0.003 0)">
+      <path id="Caminho_181" data-name="Caminho 181" d="M45.11,117.71c1.18.78,2.33,1.58,3.53,2.33,10.95,6.79,22.88,10.15,35.73,9.01,17.02-1.51,30.84-9.2,41.11-22.93a55.466,55.466,0,0,0,11.36-38.09c-1.34-18.8-9.7-33.93-25.44-44.57a56.482,56.482,0,0,0-34.21-9.64,44.466,44.466,0,0,0-14.11,2.44c-6.31,2.35-12.8,4.13-19.1,6.49a72.923,72.923,0,0,0-26.74,17.2c-.26.27-.57.49-1.11.95a4.784,4.784,0,0,1,.79-2.68C28.82,16.66,46.99,4.02,71.34.65a65.626,65.626,0,0,1,41.17,7.62c21.31,11.68,33.94,29.8,37.31,53.94,2.75,19.7-2.24,37.63-14.4,53.26-12.22,15.7-28.42,24.79-48.32,27a72.388,72.388,0,0,1-25.05-1.73,14.239,14.239,0,0,1-9-5.77,46.032,46.032,0,0,1-7.92-17.26Zm110.76,18.45a76.9,76.9,0,0,1-25.72,16.35c-4.05,1.61-8.4,2.2-12.38,3.96a56.459,56.459,0,0,1-34.56,3.92,57.572,57.572,0,0,1-45.99-50.98c-1.1-11.87.95-23.26,7-33.71C54.78,57.45,70.59,47.36,91.66,46.13c12.81-.75,24.58,2.9,35.18,10.21.61.42,1.14,1.07,2,1.03.33-.55.07-1.05-.08-1.52a53.434,53.434,0,0,0-10.22-18.39,5.375,5.375,0,0,0-2.57-1.65,70.512,70.512,0,0,0-33.19-2.53A68.756,68.756,0,0,0,38.5,59.79c-12.27,15.85-17,33.95-14.3,53.87,2.46,18.2,10.76,33.36,24.84,45,17.17,14.2,37.03,19.14,58.94,14.96,18.85-3.6,33.52-13.83,44.58-29.37a40.861,40.861,0,0,0,4.97-8.91,1.964,1.964,0,0,0-1.64.82ZM22.19,43.45C-.18,65.52-5.3,92.19,5.3,121.68c5.54,15.42,25.85,36.61,34.81,37.08-.08-.58-.56-.85-.91-1.21a78.3,78.3,0,0,1-15.69-23.87c-2.48-5.74-3.48-11.92-5.87-17.67a54.177,54.177,0,0,1-2.98-31.64C18.14,66.5,27.97,53.05,43.84,44.05c1.91-1.08,4.04-1.71,5.83-3.06A70.856,70.856,0,0,1,75.3,28.87c4.71-1.21,9.52-1.73,14.26-2.62-25.51-6.24-48.61-1.33-67.38,17.19ZM134.53,17.36a79.516,79.516,0,0,1,18.61,31.92c.7,2.29,1.03,4.71,1.96,6.89,4.61,10.81,6.38,21.97,4.36,33.6q-4.44,25.485-26.21,39.57c-3.05,1.96-6.46,3.28-9.44,5.38a73.767,73.767,0,0,1-30.18,12.71c-3.05.53-6.14.9-9.54,1.39,29.34,9.02,69.14-3.67,84.47-41.81,15.02-37.38-4.23-76.75-34.58-90.58-.12.49.3.67.54.92Zm-3.41,50.96a3.138,3.138,0,0,0-1.04-1.81,51.844,51.844,0,0,0-15.23-10.24c-.35-.15-.75-.58-1.3.05a61.246,61.246,0,0,1,14.51,31.85c2.14-3.99,3.79-15.61,3.06-19.85ZM60.3,118.89A58.967,58.967,0,0,1,45.99,86.85c-.35.25-.43.28-.45.33-2.47,6.39-2.94,13.05-2.62,19.82.04.85.67,1.36,1.2,1.92a44.227,44.227,0,0,0,9.83,7.5c1.91,1.12,3.96,2.02,5.95,3.02l.39-.54Z" fill="url(#radial-gradient)"/>
+    </g>
+  </svg>
+  
+  );
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-monitor-smartphone.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-monitor-smartphone.tsx
new file mode 100644
index 0000000..5efbaf0
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-monitor-smartphone.tsx
@@ -0,0 +1,26 @@
+export default function IconMonitorSmartphone() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="black"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "56px",
+        height: "56px",
+        strokeWidth: "1px",
+      }}
+    >
+      <path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8" />
+      <path d="M10 19v-3.96 3.15" />
+      <path d="M7 19h5" />
+      <rect width="6" height="10" x="16" y="12" rx="2" />
+    </svg>
+  );
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-plus.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-plus.tsx
new file mode 100644
index 0000000..3edadba
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/icons/icon-plus.tsx
@@ -0,0 +1,24 @@
+export default function IconPlus() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="black"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "56px",
+        height: "56px",
+        strokeWidth: "1px",
+      }}
+    >
+      <path d="M5 12h14" />
+      <path d="M12 5v14" />
+    </svg>
+  );
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/common/tooltip.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/tooltip.tsx
new file mode 100644
index 0000000..e13c14b
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/common/tooltip.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "./cn"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-2 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/index.ts b/apps/playground/frontend/src/modules/midnight/wallet-widget/index.ts
new file mode 100644
index 0000000..96e9a89
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/index.ts
@@ -0,0 +1,2 @@
+export * from "./midnight-wallet";
+
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/connected-button.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/connected-button.tsx
new file mode 100644
index 0000000..96c5611
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/connected-button.tsx
@@ -0,0 +1,40 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../common/dropdown-menu';
+import { Button } from '../common/button';
+import { useAssets, useWallet } from '@meshsdk/midnight-react';
+
+export default function ConnectedButton() {
+  const { disconnect } = useWallet();
+  const { address } = useAssets();
+
+  return (
+    <>
+      {address && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">
+              {address.slice(0, 4)}...{address.slice(-4)}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => {
+                navigator.clipboard.writeText(address);
+              }}
+            >
+              Copy Address
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => {
+                disconnect();
+              }}
+            >
+              Disconnect
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </>
+  );
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/data.ts b/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/data.ts
new file mode 100644
index 0000000..d2fad0d
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/data.ts
@@ -0,0 +1,5 @@
+export const screens = {
+  main: {
+    title: "Connect Wallet",
+  },  
+};
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/index.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/index.tsx
new file mode 100644
index 0000000..4eb713f
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/index.tsx
@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { Button } from "../common/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../common/dialog";
+import { useAssets, useWallet } from "@meshsdk/midnight-react";
+import ConnectedButton from "./connected-button";
+import { screens } from "./data";
+import ScreenMain from "./screen-main";
+
+export const MidnightWallet = () => {
+  const { open, setOpen } = useWallet();
+  const [screen] = useState("main");
+  const { hasConnectedWallet } = useAssets();
+
+  return (    
+      <Dialog open={open} onOpenChange={setOpen}>
+      <div>
+        {!hasConnectedWallet ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" className="">
+              Connect Wallet
+            </Button>
+          </DialogTrigger>
+        ) : (
+          <ConnectedButton />
+        )}
+      </div>
+
+      <DialogContent
+        className="sm:max-w-[425px] justify-center items-center"
+        onOpenAutoFocus={(event) => event.preventDefault()}
+      >
+        <Header screen={screen} />
+        {screen == "main" && <ScreenMain setOpen={setOpen} />}
+        <Footer />
+      </DialogContent>
+    </Dialog>    
+  );
+};
+
+interface HeaderProps {
+  screen: string;
+  setScreen: (screen: string) => void;
+}
+
+function Header({
+  screen,
+}: Omit<HeaderProps, 'setScreen'>) {
+  return (
+    <DialogHeader>
+      <DialogTitle className="flex justify-between">
+        <span style={{ width: "24px" }}></span>
+        <span className="">
+          {/* @ts-expect-error any type */}
+          {screens[screen].title}
+        </span>
+        <span style={{ width: "24px" }}></span>
+      </DialogTitle>
+    </DialogHeader>
+  );
+}
+
+function Footer() {
+  return (
+    <DialogFooter className="justify-center text-sm">
+      <a
+        href="https://meshjs.dev/"
+        target="_blank"
+        className="flex gap-1 items-center justify-center text-accent-foreground hover:text-zinc-500 fill-foreground hover:fill-zinc-500 dark:hover:text-orange-200 dark:hover:fill-zinc-200"
+      >
+        <span className="">Powered by</span>
+        <svg
+          width={22}
+          height={22}
+          enableBackground="new 0 0 300 200"
+          viewBox="0 0 300 200"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <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="">Mesh SDK</span>
+      </a>
+    </DialogFooter>
+  );
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/screen-main.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/screen-main.tsx
new file mode 100644
index 0000000..57ff999
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/screen-main.tsx
@@ -0,0 +1,51 @@
+import IconLace from '../common/icons/icon-lace';
+import { TooltipProvider } from '../common/tooltip';
+import { useWallet, useWalletList } from '@meshsdk/midnight-react';
+import WalletIcon from './wallet-icon';
+import { type JSX } from 'react';
+
+export default function ScreenMain({
+  setOpen,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  setOpen: Function;
+}) {
+  const wallets = useWalletList();
+  const { connectWallet } = useWallet();
+
+  // Example config map for wallet overrides
+  const walletsConfig: { [key: string]: { key: string; displayName: string; icon: JSX.Element } } = {
+    lace: { key: 'mnLace', displayName: 'LACE', icon: <IconLace /> }
+  };
+
+  return (
+    <TooltipProvider>
+      <div
+        className="grid gap-4 py-7 place-items-center gap-y-8"
+        style={{
+          gridTemplateColumns: `repeat(${wallets.length}, minmax(0, 1fr))`,
+        }}
+      >
+        {wallets.map((wallet, index) => {
+          const config = walletsConfig[wallet.name];
+          if (!config) return null; // Skip rendering if config is not found
+          const walletKey = config.key;
+          const displayName = config.displayName;
+          const icon = config.icon;
+
+          return (
+            <WalletIcon
+              key={index}
+              iconReactNode={icon}
+              name={displayName}
+              action={() => {
+                connectWallet(walletKey);
+                setOpen(false);
+              }}
+            />
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/wallet-icon.tsx b/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/wallet-icon.tsx
new file mode 100644
index 0000000..b31f507
--- /dev/null
+++ b/apps/playground/frontend/src/modules/midnight/wallet-widget/midnight-wallet/wallet-icon.tsx
@@ -0,0 +1,34 @@
+import {
+  Tooltip,
+  TooltipContent,  
+  TooltipTrigger,
+} from "../common/tooltip";
+
+export default function WalletIcon({
+  icon,
+  name,
+  action,
+  iconReactNode,
+}: {
+  icon?: string;
+  name: string;
+  action: () => void;
+  iconReactNode?: React.ReactNode;
+}) {
+  return (
+    <Tooltip delayDuration={0} defaultOpen={false}>
+      <TooltipTrigger asChild>
+        <button
+          className="flex items-center justify-center rounded-lg w-10 h-10 border border-zinc-700 hover:border-zinc-200 cursor-pointer"
+          onClick={action}
+        >
+          {icon && <img src={icon} alt={name} className="w-8 h-8"/>}
+          {iconReactNode && iconReactNode}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{name}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/apps/playground/frontend/src/pages/counter/index.tsx b/apps/playground/frontend/src/pages/counter/index.tsx
new file mode 100644
index 0000000..e426407
--- /dev/null
+++ b/apps/playground/frontend/src/pages/counter/index.tsx
@@ -0,0 +1,9 @@
+export const Counter = () => {
+  
+  return (
+    <>
+      Work in progress...
+    </>
+  );
+};
+
diff --git a/apps/playground/frontend/src/pages/home/index.tsx b/apps/playground/frontend/src/pages/home/index.tsx
index 2b836e7..10d1798 100644
--- a/apps/playground/frontend/src/pages/home/index.tsx
+++ b/apps/playground/frontend/src/pages/home/index.tsx
@@ -1,76 +1,8 @@
-import {
-    MidnightWallet,
-    useAssets,
-    useWallet,
-  } from "@meshsdk/midnight-react";
-  import { ModeToggle } from "@/components/mode-toggle";
-  
-  export function Home() {
-    const {
-      address,
-      coinPublicKey,
-      encryptionPublicKey,
-      hasConnectedWallet,
-      isProofServerOnline,
-      uris,
-      walletName,
-    } = useAssets();
-    const { connectingWallet, disconnect, setOpen, connectWallet } = useWallet();
-  
-    return (
-      <>
-        <h1 className="text-2xl font-bold mb-4">Wallet Dashboard</h1>
-        <div className="grid md:grid-cols-2 gap-6 break-all">
-          <div className="card bg-card shadow p-6 flex flex-col gap-4">
-            <h2 className="text-lg font-semibold">Wallet Widget</h2>
-            <MidnightWallet />
-            <ModeToggle />   
-            <div className="card bg-card shadow p-6 flex flex-col gap-4 md:col-span-2">
-              <h2 className="text-lg font-semibold">Wallet Actions</h2>
-              <div className="flex gap-4 flex-wrap items-center">
-                <button
-                  className="px-4 py-2 bg-secondary text-secondary-foreground rounded cursor-pointer"
-                  onClick={disconnect}
-                >
-                  Disconnect
-                </button>
-                <button
-                  className="px-4 py-2 bg-secondary text-secondary-foreground rounded cursor-pointer"
-                  onClick={() => setOpen(true)}
-                >
-                  Open Wallet Dialog
-                </button>
-                <button
-                  className="px-4 py-2 bg-accent text-accent-foreground rounded cursor-pointer"
-                  onClick={() => connectWallet("mnLace")}
-                >
-                  Connect Lace
-                </button>
-              </div>
-            </div>
-          </div>
-  
-          <div className="card bg-card shadow p-6">
-            <h2 className="text-lg font-semibold mb-2">Asset Details</h2>
-            <div className="space-y-1 break-all">
-              <div>Wallet Name: {walletName}</div>
-              <div>Address: {address}</div>
-              <div>Coin Public Key: {coinPublicKey}</div>
-              <div>Encryption Public Key: {encryptionPublicKey}</div>
-              <div>Has Connected Wallet: {hasConnectedWallet ? "Yes" : "No"}</div>
-              <div>
-                Is Proof Server Online: {isProofServerOnline ? "Yes" : "No"}
-              </div>
-              <div>Indexer: {uris?.indexerUri}</div>
-              <div>IndexerWS: {uris?.indexerWsUri}</div>
-              <div>Proof Server: {uris?.proverServerUri}</div>
-              <div>Node: {uris?.substrateNodeUri}</div>
-              <span className="text-sm opacity-70">
-                Connecting: {connectingWallet ? "Yes" : "No"}
-              </span>
-            </div>
-          </div>
-        </div>
-      </>
-    );
-  }
\ No newline at end of file
+export function Home() {
+ 
+  return (
+    <>
+      Work in progress...
+    </>
+  );
+}
diff --git a/apps/playground/frontend/src/pages/wallet-ui/index.tsx b/apps/playground/frontend/src/pages/wallet-ui/index.tsx
new file mode 100644
index 0000000..9f106ea
--- /dev/null
+++ b/apps/playground/frontend/src/pages/wallet-ui/index.tsx
@@ -0,0 +1,79 @@
+import {
+  MidnightWallet, 
+} from "@/modules/midnight/wallet-widget";
+
+import { 
+  useAssets,
+  useWallet,
+} from "@meshsdk/midnight-react";
+import { ModeToggle } from "@/components/mode-toggle";
+
+export function WalletUI() {
+  const {
+    address,
+    coinPublicKey,
+    encryptionPublicKey,
+    hasConnectedWallet,
+    isProofServerOnline,
+    uris,
+    walletName,
+  } = useAssets();
+  const { connectingWallet, disconnect, setOpen, connectWallet } = useWallet();
+
+  return (
+    <>
+      <h1 className="text-2xl font-bold mb-4">Wallet Dashboard</h1>
+      <div className="grid md:grid-cols-2 gap-6 break-all">
+        <div className="card bg-card shadow p-6 flex flex-col gap-4">
+          <h2 className="text-lg font-semibold">Wallet Widget</h2>
+          <MidnightWallet />
+           <ModeToggle />
+          <div className="card bg-card shadow p-6 flex flex-col gap-4 md:col-span-2">
+            <h2 className="text-lg font-semibold">Wallet Actions</h2>
+            <div className="flex gap-4 flex-wrap items-center">
+              <button
+                className="px-4 py-2 bg-secondary text-secondary-foreground rounded cursor-pointer"
+                onClick={disconnect}
+              >
+                Disconnect
+              </button>
+              <button
+                className="px-4 py-2 bg-secondary text-secondary-foreground rounded cursor-pointer"
+                onClick={() => setOpen(true)}
+              >
+                Open Wallet Dialog
+              </button>
+              <button
+                className="px-4 py-2 bg-accent text-accent-foreground rounded cursor-pointer"
+                onClick={() => connectWallet("mnLace")}
+              >
+                Connect Lace
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="card bg-card shadow p-6">
+          <h2 className="text-lg font-semibold mb-2">Asset Details</h2>
+          <div className="space-y-1 break-all">
+            <div>Wallet Name: {walletName}</div>
+            <div>Address: {address}</div>
+            <div>Coin Public Key: {coinPublicKey}</div>
+            <div>Encryption Public Key: {encryptionPublicKey}</div>
+            <div>Has Connected Wallet: {hasConnectedWallet ? "Yes" : "No"}</div>
+            <div>
+              Is Proof Server Online: {isProofServerOnline ? "Yes" : "No"}
+            </div>
+            <div>Indexer: {uris?.indexerUri}</div>
+            <div>IndexerWS: {uris?.indexerWsUri}</div>
+            <div>Proof Server: {uris?.proverServerUri}</div>
+            <div>Node: {uris?.substrateNodeUri}</div>
+            <span className="text-sm opacity-70">
+              Connecting: {connectingWallet ? "Yes" : "No"}
+            </span>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 3a84d08..4b35847 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -146,7 +146,9 @@
     "apps/playground/frontend": {
       "version": "0.0.0",
       "dependencies": {
+        "@meshsdk/midnight-core": "*",
         "@meshsdk/midnight-react": "*",
+        "@meshsdk/midnight-wallet": "*",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@radix-ui/react-slot": "^1.2.3",
         "@tailwindcss/vite": "^4.1.11",
@@ -3154,6 +3156,7 @@
       "version": "1.1.14",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
       "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
@@ -3297,6 +3300,16 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+      "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -3511,6 +3524,7 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.7.tgz",
       "integrity": "sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
@@ -3666,6 +3680,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
       "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-primitive": "2.1.3"
@@ -21027,10 +21042,6 @@
       "dependencies": {
         "@meshsdk/midnight-core": "0.0.5",
         "@meshsdk/midnight-wallet": "0.0.5",
-        "@radix-ui/react-dialog": "^1.1.6",
-        "@radix-ui/react-dropdown-menu": "^2.1.6",
-        "@radix-ui/react-slot": "^1.1.2",
-        "@radix-ui/react-tooltip": "^1.1.8",
         "class-variance-authority": "^0.7.1",
         "lucide-react": "^0.532.0",
         "tailwind-merge": "^2.6.0",
@@ -21038,6 +21049,11 @@
       },
       "devDependencies": {
         "@meshsdk/configs": "*",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-dropdown-menu": "^2.1.6",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-tooltip": "^1.1.8",
         "@types/react": "^19.1.9",
         "@types/react-dom": "^19.1.7",
         "autoprefixer": "^10.4.18",
diff --git a/packages/mesh-midnight-cli/README.md b/packages/mesh-midnight-cli/README.md
new file mode 100644
index 0000000..d7dc898
--- /dev/null
+++ b/packages/mesh-midnight-cli/README.md
@@ -0,0 +1 @@
+# npx-able CLI that installs templates into a user app
\ No newline at end of file
diff --git a/packages/mesh-midnight-core/package.json b/packages/mesh-midnight-core/package.json
index 4c5c985..7a5784b 100644
--- a/packages/mesh-midnight-core/package.json
+++ b/packages/mesh-midnight-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/midnight-core",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Core",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
diff --git a/packages/mesh-midnight-react/package.json b/packages/mesh-midnight-react/package.json
index 5fe4a36..13d1660 100644
--- a/packages/mesh-midnight-react/package.json
+++ b/packages/mesh-midnight-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/midnight-react",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "React component library ",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -29,12 +29,8 @@
     "prepack:all": "npm run clean && npm install && npm run build && npm run pack"
   },
   "dependencies": {
-    "@meshsdk/midnight-core": "0.0.5",
-    "@meshsdk/midnight-wallet": "0.0.5",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.1.8",
+    "@meshsdk/midnight-core": "0.0.6",
+    "@meshsdk/midnight-wallet": "0.0.6",    
     "class-variance-authority": "^0.7.1",
     "lucide-react": "^0.532.0",
     "tailwind-merge": "^2.6.0",
@@ -48,7 +44,12 @@
     "concurrently": "^8.0.1",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
-    "typescript": "latest"
+    "typescript": "latest",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8"
   },
   "peerDependencies": {
     "@types/react": "*",
diff --git a/packages/mesh-midnight-react/src/common/button.tsx b/packages/mesh-midnight-react/src/common/button.tsx
index 0c0adc8..1c0bcfc 100644
--- a/packages/mesh-midnight-react/src/common/button.tsx
+++ b/packages/mesh-midnight-react/src/common/button.tsx
@@ -1,25 +1,24 @@
-import type { VariantProps } from "class-variance-authority";
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "./cn";
+import { cn } from "./cn"
 
 const buttonVariants = cva(
-  "mesh-inline-flex mesh-items-center mesh-justify-center mesh-gap-2 mesh-whitespace-nowrap mesh-rounded-md mesh-text-sm mesh-font-medium mesh-transition-colors mesh-focus-visible:outline-none mesh-focus-visible:ring-1 mesh-focus-visible:ring-ring mesh-disabled:pointer-events-none mesh-disabled:opacity-50 [&_svg]:mesh-pointer-events-none [&_svg]:mesh-size-4 [&_svg]:mesh-shrink-0",
+  "mesh-inline-flex mesh-items-center mesh-justify-center mesh-whitespace-nowrap mesh-rounded-md mesh-text-sm mesh-font-medium mesh-transition-colors focus-visible:mesh-outline-none focus-visible:mesh-ring-1 focus-visible:mesh-ring-zinc-950 disabled:mesh-pointer-events-none disabled:mesh-opacity-50 dark:focus-visible:mesh-ring-zinc-300 dark:mesh-text-white",
   {
     variants: {
       variant: {
         default:
-          "mesh-bg-primary mesh-text-primary-foreground mesh-shadow mesh-hover:bg-primary/90",
+          "mesh-bg-zinc-900 mesh-text-zinc-50 mesh-shadow hover:mesh-bg-zinc-900/90 dark:mesh-bg-zinc-50 dark:mesh-text-zinc-900 dark:hover:mesh-bg-zinc-50/90",
         destructive:
-          "mesh-bg-destructive mesh-text-destructive-foreground mesh-shadow-sm mesh-hover:bg-destructive/90",
+          "mesh-bg-red-500 mesh-text-zinc-50 mesh-shadow-sm hover:mesh-bg-red-500/90 dark:mesh-bg-red-900 dark:mesh-text-zinc-50 dark:hover:mesh-bg-red-900/90",
         outline:
-          "mesh-border mesh-border-input mesh-bg-background mesh-shadow-sm mesh-hover:bg-accent mesh-hover:text-accent-foreground",
+          "mesh-border mesh-border-zinc-200 mesh-bg-white mesh-shadow-sm hover:mesh-bg-zinc-100 hover:mesh-text-zinc-900 dark:mesh-border-zinc-800 dark:mesh-bg-zinc-950 dark:hover:mesh-bg-zinc-800 dark:hover:mesh-text-zinc-50",
         secondary:
-          "mesh-bg-secondary mesh-text-secondary-foreground mesh-shadow-sm mesh-hover:bg-secondary/80",
-        ghost: "mesh-hover:bg-accent mesh-hover:text-accent-foreground",
-        link: "mesh-text-primary mesh-underline-offset-4 mesh-hover:underline",
+          "mesh-bg-zinc-100 mesh-text-zinc-900 mesh-shadow-sm hover:mesh-bg-zinc-100/80 dark:mesh-bg-zinc-800 dark:mesh-text-zinc-50 dark:hover:mesh-bg-zinc-800/80",
+        ghost: "hover:mesh-bg-zinc-100 hover:mesh-text-zinc-900 dark:hover:mesh-bg-zinc-800 dark:hover:mesh-text-zinc-50",
+        link: "mesh-text-zinc-900 mesh-underline-offset-4 hover:mesh-underline dark:mesh-text-zinc-50",
       },
       size: {
         default: "mesh-h-9 mesh-px-4 mesh-py-2",
@@ -32,27 +31,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
-);
+  }
+)
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+  asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
+    const Comp = asChild ? Slot : "button"
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    );
-  },
-);
-Button.displayName = "Button";
+    )
+  }
+)
+Button.displayName = "Button"
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
diff --git a/packages/mesh-midnight-react/src/common/dialog.tsx b/packages/mesh-midnight-react/src/common/dialog.tsx
index 4ac344c..dd4bfe1 100644
--- a/packages/mesh-midnight-react/src/common/dialog.tsx
+++ b/packages/mesh-midnight-react/src/common/dialog.tsx
@@ -1,35 +1,31 @@
-"use client";
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
 
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import { cn } from "./cn"
 
-import { cn } from "./cn";
+const Dialog = DialogPrimitive.Root
 
-const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger
 
-const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal
 
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
+const DialogClose = DialogPrimitive.Close
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <div className="mesh-fixed mesh-inset-0">
-    <DialogPrimitive.Overlay
-      ref={ref}
-      className={cn(
-        "mesh-fixed mesh-inset-0 mesh-z-10 mesh-bg-black/80 data-[state=open]:mesh-animate-in data-[state=closed]:mesh-animate-out data-[state=closed]:mesh-fade-out-0 data-[state=open]:mesh-fade-in-0",
-        className,
-      )}
-      {...props}
-    />
-  </div>
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "mesh-fixed mesh-inset-0 mesh-z-50 mesh-bg-black/80 data-[state=open]:mesh-animate-in data-[state=closed]:mesh-animate-out data-[state=closed]:mesh-fade-out-0 data-[state=open]:mesh-fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -37,25 +33,23 @@ const DialogContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
-    <div className="mesh-fixed mesh-inset-0 mesh-pointer-events-none">
-      <DialogPrimitive.Content
-        ref={ref}
-        className={cn(
-          "mesh-absolute mesh-z-60 mesh-left-1/2 mesh-top-1/2 mesh-w-full mesh-max-w-lg mesh--translate-x-1/2 mesh--translate-y-1/2 mesh-grid mesh-gap-4 mesh-border mesh-bg-background2 mesh-text-foreground mesh-p-6 mesh-shadow-lg mesh-pointer-events-auto data-[state=open]:mesh-animate-in data-[state=closed]:mesh-animate-out data-[state=closed]:mesh-fade-out-0 data-[state=open]:mesh-fade-in-0 data-[state=closed]:mesh-zoom-out-95 data-[state=open]:mesh-zoom-in-95 data-[state=closed]:mesh-slide-out-to-left-1/2 data-[state=closed]:mesh-slide-out-to-top-[48%] data-[state=open]:mesh-slide-in-from-left-1/2 data-[state=open]:mesh-slide-in-from-top-[48%] sm:mesh-rounded-lg",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <DialogPrimitive.Close className="mesh-absolute mesh-right-4 mesh-top-4 mesh-rounded-sm mesh-opacity-70 mesh-ring-offset-background mesh-transition-opacity mesh-hover:opacity-100 mesh-focus:outline-none mesh-focus:ring-2 mesh-focus:ring-ring mesh-focus:ring-offset-2 mesh-disabled:pointer-events-none data-[state=open]:mesh-bg-accent data-[state=open]:mesh-text-muted-foreground">
-          <X className="mesh-h-4 mesh-w-4" />
-          <span className="mesh-sr-only">Close</span>
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </div>
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        `mesh-fixed mesh-left-[50%] mesh-top-[50%] mesh-z-50 mesh-grid mesh-w-full mesh-max-w-lg mesh-translate-x-[-50%] mesh-translate-y-[-50%] mesh-gap-4 mesh-p-6 mesh-shadow-lg mesh-duration-200 data-[state=open]:mesh-animate-in data-[state=closed]:mesh-animate-out data-[state=closed]:mesh-fade-out-0 data-[state=open]:mesh-fade-in-0 data-[state=closed]:mesh-zoom-out-95 data-[state=open]:mesh-zoom-in-95 data-[state=closed]:mesh-slide-out-to-left-1/2 data-[state=closed]:mesh-slide-out-to-top-[48%] data-[state=open]:mesh-slide-in-from-left-1/2 data-[state=open]:mesh-slide-in-from-top-[48%] sm:mesh-rounded-lg mesh-bg-zinc-900 mesh-text-white mesh-border mesh-border-zinc-700`,
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="mesh-absolute mesh-right-4 mesh-top-4 mesh-rounded-sm mesh-opacity-70 mesh-ring-offset-background mesh-transition-opacity hover:mesh-opacity-100 disabled:mesh-pointer-events-none data-[state=open]:mesh-bg-black data-[state=open]:mesh-text-white">
+        <Cross2Icon className="mesh-h-4 mesh-w-4" />
+        <span className="mesh-sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
   </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({
   className,
@@ -63,13 +57,13 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "mesh-flex mesh-flex-col mesh-space-y-1.5 mesh-text-foreground mesh-text-center sm:mesh-text-left",
-      className,
+      "mesh-flex mesh-flex-col mesh-space-y-1.5 mesh-text-center sm:mesh-text-left",
+      className
     )}
     {...props}
   />
-);
-DialogHeader.displayName = "DialogHeader";
+)
+DialogHeader.displayName = "DialogHeader"
 
 const DialogFooter = ({
   className,
@@ -78,12 +72,12 @@ const DialogFooter = ({
   <div
     className={cn(
       "mesh-flex mesh-flex-col-reverse sm:mesh-flex-row sm:mesh-justify-end sm:mesh-space-x-2",
-      className,
+      className
     )}
     {...props}
   />
-);
-DialogFooter.displayName = "DialogFooter";
+)
+DialogFooter.displayName = "DialogFooter"
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -93,12 +87,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "mesh-text-lg mesh-font-semibold mesh-leading-none mesh-tracking-tight",
-      className,
+      className
     )}
     {...props}
   />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -106,11 +100,11 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("mesh-text-sm mesh-text-muted-foreground", className)}
+    className={cn("mesh-text-sm mesh-text-white", className)}
     {...props}
   />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
@@ -123,4 +117,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-};
+}
\ No newline at end of file
diff --git a/packages/mesh-midnight-react/src/common/dropdown-menu.tsx b/packages/mesh-midnight-react/src/common/dropdown-menu.tsx
index 253734e..2bb07a3 100644
--- a/packages/mesh-midnight-react/src/common/dropdown-menu.tsx
+++ b/packages/mesh-midnight-react/src/common/dropdown-menu.tsx
@@ -1,6 +1,10 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons"
 
 import { cn } from "./cn"
 
@@ -25,14 +29,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "mesh-flex mesh-cursor-default mesh-gap-2 mesh-select-none mesh-items-center mesh-rounded-sm mesh-px-2 mesh-py-1.5 mesh-text-sm mesh-outline-none focus:mesh-bg-accent data-[state=open]:mesh-bg-accent [&_svg]:mesh-pointer-events-none [&_svg]:mesh-size-4 [&_svg]:mesh-shrink-0",
+      "mesh-flex mesh-cursor-default mesh-select-none mesh-items-center mesh-rounded-sm mesh-px-2 mesh-py-1.5 mesh-text-sm mesh-outline-none focus:mesh-bg-slate-100 data-[state=open]:mesh-bg-slate-100",
       inset && "mesh-pl-8",
       className
     )}
     {...props}
   >
     {children}
-    <ChevronRight className="mesh-ml-auto" />
+    <ChevronRightIcon className="mesh-ml-auto mesh-h-4 mesh-w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -45,7 +49,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "mesh-z-50 mesh-min-w-[8rem] mesh-overflow-hidden mesh-rounded-md mesh-border mesh-bg-popover mesh-p-1 mesh-text-popover-foreground mesh-shadow-lg data-[state=open]:mesh-animate-in data-[state=closed]:mesh-animate-out data-[state=closed]:mesh-fade-out-0 data-[state=open]:mesh-fade-in-0 data-[state=closed]:mesh-zoom-out-95 data-[state=open]:mesh-zoom-in-95 data-[side=bottom]:mesh-slide-in-from-top-2 data-[side=left]:mesh-slide-in-from-right-2 data-[side=right]:mesh-slide-in-from-left-2 data-[side=top]:mesh-slide-in-from-bottom-2",
+      "mesh-z-50 mesh-min-w-[8rem] mesh-overflow-hidden mesh-rounded-md mesh-border mesh-border-slate-200 mesh-bg-white mesh-p-1 mesh-text-slate-900 mesh-shadow-lg data-[state=open]:mesh-animate-in data-[state=closed]:mesh-animate-out data-[state=closed]:mesh-fade-out-0 data-[state=open]:mesh-fade-in-0 data-[state=closed]:mesh-zoom-out-95 data-[state=open]:mesh-zoom-in-95 data-[side=bottom]:mesh-slide-in-from-top-2 data-[side=left]:mesh-slide-in-from-right-2 data-[side=right]:mesh-slide-in-from-left-2 data-[side=top]:mesh-slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -63,7 +67,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "mesh-z-50 mesh-min-w-[8rem] mesh-overflow-hidden mesh-rounded-md mesh-border mesh-bg-popover mesh-p-1 mesh-text-popover-foreground mesh-shadow-md",
+        "mesh-z-50 mesh-min-w-[8rem] mesh-overflow-hidden mesh-rounded-md mesh-border mesh-border-slate-200 mesh-bg-white mesh-p-1 mesh-text-slate-900 mesh-shadow-lg",
         "data-[state=open]:mesh-animate-in data-[state=closed]:mesh-animate-out data-[state=closed]:mesh-fade-out-0 data-[state=open]:mesh-fade-in-0 data-[state=closed]:mesh-zoom-out-95 data-[state=open]:mesh-zoom-in-95 data-[side=bottom]:mesh-slide-in-from-top-2 data-[side=left]:mesh-slide-in-from-right-2 data-[side=right]:mesh-slide-in-from-left-2 data-[side=top]:mesh-slide-in-from-bottom-2",
         className
       )}
@@ -82,8 +86,8 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "mesh-relative mesh-flex mesh-cursor-default mesh-select-none mesh-items-center mesh-gap-2 mesh-rounded-sm mesh-px-2 mesh-py-1.5 mesh-text-sm mesh-outline-none mesh-transition-colors focus:mesh-bg-accent focus:mesh-text-accent-foreground data-[disabled]:mesh-pointer-events-none data-[disabled]:mesh-opacity-50 [&>svg]:mesh-size-4 [&>svg]:mesh-shrink-0",
-      inset && "pl-8",
+      "mesh-relative mesh-flex mesh-cursor-default mesh-select-none mesh-items-center mesh-rounded-sm mesh-px-2 mesh-py-1.5 mesh-text-sm mesh-outline-none mesh-transition-colors hover:mesh-bg-slate-100 focus:mesh-bg-slate-100 focus:mesh-text-slate-900 data-[disabled]:mesh-pointer-events-none data-[disabled]:mesh-opacity-50",
+      inset && "mesh-pl-8",
       className
     )}
     {...props}
@@ -98,7 +102,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "mesh-relative mesh-flex mesh-cursor-default mesh-select-none mesh-items-center mesh-rounded-sm mesh-py-1.5 mesh-pl-8 mesh-pr-2 mesh-text-sm mesh-outline-none mesh-transition-colors focus:mesh-bg-accent focus:mesh-text-accent-foreground data-[disabled]:mesh-pointer-events-none data-[disabled]:mesh-opacity-50",
+      "mesh-relative mesh-flex mesh-cursor-default mesh-select-none mesh-items-center mesh-rounded-sm mesh-py-1.5 mesh-pl-8 mesh-pr-2 mesh-text-sm mesh-outline-none mesh-transition-colors hover:mesh-bg-slate-100 focus:mesh-bg-slate-100 focus:mesh-text-slate-900 data-[disabled]:mesh-pointer-events-none data-[disabled]:mesh-opacity-50",
       className
     )}
     checked={checked}
@@ -106,7 +110,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="mesh-absolute mesh-left-2 mesh-flex mesh-h-3.5 mesh-w-3.5 mesh-items-center mesh-justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="mesh-h-4 mesh-w-4" />
+        <CheckIcon className="mesh-h-4 mesh-w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -122,14 +126,14 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "mesh-relative mesh-flex mesh-cursor-default mesh-select-none mesh-items-center mesh-rounded-sm mesh-py-1.5 mesh-pl-8 mesh-pr-2 mesh-text-sm mesh-outline-none mesh-transition-colors focus:mesh-bg-accent focus:mesh-text-accent-foreground data-[disabled]:mesh-pointer-events-none data-[disabled]:mesh-opacity-50",
+      "mesh-relative mesh-flex mesh-cursor-default mesh-select-none mesh-items-center mesh-rounded-sm mesh-py-1.5 mesh-pl-8 mesh-pr-2 mesh-text-sm mesh-outline-none mesh-transition-colors hover:mesh-bg-slate-100 focus:mesh-bg-slate-100 focus:mesh-text-slate-900 data-[disabled]:mesh-pointer-events-none data-[disabled]:mesh-opacity-50",
       className
     )}
     {...props}
   >
     <span className="mesh-absolute mesh-left-2 mesh-flex mesh-h-3.5 mesh-w-3.5 mesh-items-center mesh-justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="mesh-h-2 mesh-w-2 mesh-fill-current" />
+        <DotFilledIcon className="mesh-h-4 mesh-w-4 mesh-fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -161,7 +165,8 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("mesh--mx-1 mesh-my-1 mesh-h-px mesh-bg-muted", className)}
+    className={cn(
+      "-mesh-mx-1 mesh-my-1 mesh-h-px mesh-bg-slate-200", className)}
     {...props}
   />
 ))
diff --git a/packages/mesh-midnight-react/src/common/tooltip.tsx b/packages/mesh-midnight-react/src/common/tooltip.tsx
index cb580e7..e34bd33 100644
--- a/packages/mesh-midnight-react/src/common/tooltip.tsx
+++ b/packages/mesh-midnight-react/src/common/tooltip.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
@@ -15,17 +13,15 @@ const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "mesh-z-50 mesh-overflow-hidden mesh-rounded-md mesh-bg-primary mesh-px-2 mesh-py-1.5 mesh-text-xs mesh-text-primary-foreground mesh-animate-in mesh-fade-in-0 mesh-zoom-in-95 data-[state=closed]:mesh-animate-out data-[state=closed]:mesh-fade-out-0 data-[state=closed]:mesh-zoom-out-95 data-[side=bottom]:mesh-slide-in-from-top-2 data-[side=left]:mesh-slide-in-from-right-2 data-[side=right]:mesh-slide-in-from-left-2 data-[side=top]:mesh-slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "mesh-z-50 mesh-overflow-hidden mesh-rounded-md mesh-bg-primary mesh-px-3 mesh-py-1.5 mesh-text-xs mesh-text-primary-foreground mesh-animate-in mesh-fade-in-0 mesh-zoom-in-95 data-[state=closed]:mesh-animate-out data-[state=closed]:mesh-fade-out-0 data-[state=closed]:mesh-zoom-out-95 data-[side=bottom]:mesh-slide-in-from-top-2 data-[side=left]:mesh-slide-in-from-right-2 data-[side=right]:mesh-slide-in-from-left-2 data-[side=top]:mesh-slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
diff --git a/packages/mesh-midnight-react/src/index.ts b/packages/mesh-midnight-react/src/index.ts
index 2b34e62..3050f8a 100644
--- a/packages/mesh-midnight-react/src/index.ts
+++ b/packages/mesh-midnight-react/src/index.ts
@@ -2,5 +2,5 @@
 export * from "./midnight-wallet";
 export * from "./contexts";
 export * from "./hooks";
-export * from "./mesh-badge";
+
 
diff --git a/packages/mesh-midnight-react/src/mesh-badge/index.tsx b/packages/mesh-midnight-react/src/mesh-badge/index.tsx
deleted file mode 100644
index b3c4a89..0000000
--- a/packages/mesh-midnight-react/src/mesh-badge/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { MeshLogo } from "./mesh-logo";
-
-export const MeshBadge = ({ isDark = false }) => (
-  <a
-    className={`mesh-flex mesh-max-w-fit mesh-flex-col mesh-items-center mesh-rounded-md mesh-border mesh-border-solid mesh-border-current mesh-p-1 mesh-text-xl mesh-font-semibold mesh-no-underline ${isDark ? `mesh-bg-neutral-950	mesh-text-neutral-50` : `mesh-bg-neutral-50	mesh-text-neutral-950`}`}
-    style={{
-      color: isDark ? "#EEEEEE" : "#111111",
-      backgroundColor: isDark ? "#111111" : "#EEEEEE",
-    }}
-    href="https://meshjs.dev/"
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    <MeshLogo />
-    Mesh
-  </a>
-);
diff --git a/packages/mesh-midnight-react/src/mesh-badge/mesh-logo.tsx b/packages/mesh-midnight-react/src/mesh-badge/mesh-logo.tsx
deleted file mode 100644
index 0af0411..0000000
--- a/packages/mesh-midnight-react/src/mesh-badge/mesh-logo.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const MeshLogo = () => (
-  <svg
-    className="mesh-h-16 mesh-p-2"
-    fill="currentColor"
-    viewBox="0 0 300 200"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <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>
-);
diff --git a/packages/mesh-midnight-react/src/midnight-wallet/connected-button.tsx b/packages/mesh-midnight-react/src/midnight-wallet/connected-button.tsx
index 712fb81..f7d73f8 100644
--- a/packages/mesh-midnight-react/src/midnight-wallet/connected-button.tsx
+++ b/packages/mesh-midnight-react/src/midnight-wallet/connected-button.tsx
@@ -11,7 +11,7 @@ export default function ConnectedButton() {
       {address && (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="mesh-text-foreground">
+            <Button variant="outline">
               {address.slice(0, 4)}...{address.slice(-4)}
             </Button>
           </DropdownMenuTrigger>
diff --git a/packages/mesh-midnight-react/src/midnight-wallet/index.tsx b/packages/mesh-midnight-react/src/midnight-wallet/index.tsx
index 55c350c..2e58567 100644
--- a/packages/mesh-midnight-react/src/midnight-wallet/index.tsx
+++ b/packages/mesh-midnight-react/src/midnight-wallet/index.tsx
@@ -13,29 +13,36 @@ import ConnectedButton from './connected-button';
 import { screens } from './data';
 import ScreenMain from './screen-main';
 
-export const MidnightWallet = () => {  
+interface ButtonProps { 
+  isDark?: boolean;  
+}
+
+export const MidnightWallet = ({ isDark }: ButtonProps) => {  
   const { open, setOpen } = useWallet();
   const [screen, setScreen] = useState('main');
-  const { hasConnectedWallet } = useAssets();
+  const { hasConnectedWallet } = useAssets();   
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <div className={isDark ? "mesh-dark" : ""}>     
+    <Dialog open={open} onOpenChange={setOpen}>   
       <div>
         {!hasConnectedWallet ? (
           <DialogTrigger asChild>
-            <Button variant="outline" className="mesh-text-foreground">Connect Wallet</Button>
+            <Button variant="outline">Connect Wallet</Button>
           </DialogTrigger>
         ) : (
           <ConnectedButton />
         )}
       </div>
-
       <DialogContent className="sm:mesh-max-w-[425px]" onOpenAutoFocus={(event) => event.preventDefault()}>
         <Header screen={screen} setScreen={setScreen} />
         {screen == 'main' && <ScreenMain setOpen={setOpen} />}
         <Footer />
       </DialogContent>
+    
     </Dialog>
+    </div>
+    
   );
 };
 
@@ -61,11 +68,12 @@ function Footer() {
       <a
         href="https://meshjs.dev/"
         target="_blank"
-        className="mesh-grow mesh-flex mesh-gap-1 mesh-items-center mesh-justify-center mesh-text-accent-foreground hover:mesh-text-zinc-500 mesh-fill-foreground hover:mesh-fill-zinc-500 dark:hover:mesh-text-orange-200 dark:hover:mesh-fill-zinc-200"
+        className="mesh-grow mesh-flex mesh-gap-1 mesh-items-center mesh-justify-center hover:mesh-text-zinc-300 hover:mesh-fill-zinc-300"
       >
         <span className="">Powered by</span>
         <svg width={22} height={22} enableBackground="new 0 0 300 200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
-          <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 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"
+          fill="#fff" />
         </svg>
         <span className="">Mesh SDK</span>
       </a>
diff --git a/packages/mesh-midnight-react/src/styles.css b/packages/mesh-midnight-react/src/styles.css
index 00cf810..a90f074 100644
--- a/packages/mesh-midnight-react/src/styles.css
+++ b/packages/mesh-midnight-react/src/styles.css
@@ -2,58 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: 0 0% 100%;
-  --background2: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --ring: 0 0% 3.9%;
-  --chart-1: 12 76% 61%;
-  --chart-2: 173 58% 39%;
-  --chart-3: 197 37% 24%;
-  --chart-4: 43 74% 66%;
-  --chart-5: 27 87% 67%;
-  --radius: 0.5rem;
-}
-.dark {
-  --background: 0 0% 3.9%;
-  --background2: 0 0% 3.9%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 0 0% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
-  --secondary: 0 0% 14.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 63.9%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 14.9%;
-  --input: 0 0% 14.9%;
-  --ring: 0 0% 83.1%;
-  --chart-1: 220 70% 50%;
-  --chart-2: 160 60% 45%;
-  --chart-3: 30 80% 55%;
-  --chart-4: 280 65% 60%;
-  --chart-5: 340 75% 55%;
-}
\ No newline at end of file
diff --git a/packages/mesh-midnight-react/tailwind.config.ts b/packages/mesh-midnight-react/tailwind.config.ts
index 1564147..814cb56 100644
--- a/packages/mesh-midnight-react/tailwind.config.ts
+++ b/packages/mesh-midnight-react/tailwind.config.ts
@@ -8,53 +8,10 @@ const config: Pick<
 > = {
   content: ["./src/**/*.tsx", "./src/common/**/*.tsx"],
   darkMode: 'class',
-  prefix: "mesh-", 
+  prefix: "mesh-",
   presets: [sharedConfig],
   theme: {
     extend: {
-      colors: {
-  			background: 'hsl(var(--background))',
-			background2: 'hsl(var(--background2))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		},
       keyframes: {
         "accordion-down": {
           from: {
diff --git a/packages/mesh-midnight-ui-templates/README.md b/packages/mesh-midnight-ui-templates/README.md
new file mode 100644
index 0000000..3821b66
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/README.md
@@ -0,0 +1 @@
+# The copyable UI source (Tailwind v4 + ShadCN)
\ No newline at end of file
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/button.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/common/button.tsx
new file mode 100644
index 0000000..3f29f7a
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/button.tsx
@@ -0,0 +1,58 @@
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+import { cn } from "./cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/cn.ts b/packages/mesh-midnight-ui-templates/wallet-widget/common/cn.ts
new file mode 100644
index 0000000..88283f0
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/cn.ts
@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/dialog.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/common/dialog.tsx
new file mode 100644
index 0000000..9ce8acc
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/dialog.tsx
@@ -0,0 +1,121 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "./cn";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    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",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
+,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-foreground text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/dropdown-menu.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/common/dropdown-menu.tsx
new file mode 100644
index 0000000..004b854
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/dropdown-menu.tsx
@@ -0,0 +1,202 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "./cn"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn(
+      "-mx-1 my-1 h-px bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-book-dashed.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-book-dashed.tsx
new file mode 100644
index 0000000..185604a
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-book-dashed.tsx
@@ -0,0 +1,34 @@
+export default function IconBookDashed() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="gray"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "24px",
+        height: "24px",
+        strokeWidth: "1px",
+      }}
+      className="hover:mesh-fill-white"
+    >
+      <path d="M12 17h2" />
+      <path d="M12 22h2" />
+      <path d="M12 2h2" />
+      <path d="M18 22h1a1 1 0 0 0 1-1" />
+      <path d="M18 2h1a1 1 0 0 1 1 1v1" />
+      <path d="M20 15v2h-2" />
+      <path d="M20 8v3" />
+      <path d="M4 11V9" />
+      <path d="M4 19.5V15" />
+      <path d="M4 5v-.5A2.5 2.5 0 0 1 6.5 2H8" />
+      <path d="M8 22H6.5a1 1 0 0 1 0-5H8" />
+    </svg>
+  );
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-chevron-right.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-chevron-right.tsx
new file mode 100644
index 0000000..513880f
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-chevron-right.tsx
@@ -0,0 +1,24 @@
+export default function IconChevronRight() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="gray"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "24px",
+        height: "24px",
+        strokeWidth: "1px",
+      }}
+      className="hover:mesh-fill-white"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-download.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-download.tsx
new file mode 100644
index 0000000..d2cd1b7
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-download.tsx
@@ -0,0 +1,26 @@
+export default function IconDownload() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="gray"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "24px",
+        height: "24px",
+        strokeWidth: "1px",
+      }}
+      className="hover:mesh-fill-white"
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" x2="12" y1="15" y2="3" />
+    </svg>
+  );
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-fingerprint.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-fingerprint.tsx
new file mode 100644
index 0000000..dae5b32
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-fingerprint.tsx
@@ -0,0 +1,32 @@
+export default function IconFingerprint() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "24px",
+        height: "24px",
+        strokeWidth: "1px",
+      }}
+      className="hover:mesh-fill-white"
+    >
+      <path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" />
+      <path d="M14 13.12c0 2.38 0 6.38-1 8.88" />
+      <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02" />
+      <path d="M2 12a10 10 0 0 1 18-6" />
+      <path d="M2 16h.01" />
+      <path d="M21.8 16c.2-2 .131-5.354 0-6" />
+      <path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" />
+      <path d="M8.65 22c.21-.66.45-1.32.57-2" />
+      <path d="M9 6.8a6 6 0 0 1 9 5.2v2" />
+    </svg>
+  );
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-lace.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-lace.tsx
new file mode 100644
index 0000000..79d14a1
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-lace.tsx
@@ -0,0 +1,16 @@
+export default function IconLace() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="35" viewBox="0 0 173.777 175.055">
+    <defs>
+      <radialGradient id="radial-gradient" cx="0.5" cy="0.5" r="0.506" gradientTransform="translate(-0.004) scale(1.007 1)" gradientUnits="objectBoundingBox">
+        <stop offset="0.47" stop-color="#feb14f"/>
+        <stop offset="1" stop-color="#ff92de"/>
+      </radialGradient>
+    </defs>
+    <g id="Layer_1" transform="translate(0.003 0)">
+      <path id="Caminho_181" data-name="Caminho 181" d="M45.11,117.71c1.18.78,2.33,1.58,3.53,2.33,10.95,6.79,22.88,10.15,35.73,9.01,17.02-1.51,30.84-9.2,41.11-22.93a55.466,55.466,0,0,0,11.36-38.09c-1.34-18.8-9.7-33.93-25.44-44.57a56.482,56.482,0,0,0-34.21-9.64,44.466,44.466,0,0,0-14.11,2.44c-6.31,2.35-12.8,4.13-19.1,6.49a72.923,72.923,0,0,0-26.74,17.2c-.26.27-.57.49-1.11.95a4.784,4.784,0,0,1,.79-2.68C28.82,16.66,46.99,4.02,71.34.65a65.626,65.626,0,0,1,41.17,7.62c21.31,11.68,33.94,29.8,37.31,53.94,2.75,19.7-2.24,37.63-14.4,53.26-12.22,15.7-28.42,24.79-48.32,27a72.388,72.388,0,0,1-25.05-1.73,14.239,14.239,0,0,1-9-5.77,46.032,46.032,0,0,1-7.92-17.26Zm110.76,18.45a76.9,76.9,0,0,1-25.72,16.35c-4.05,1.61-8.4,2.2-12.38,3.96a56.459,56.459,0,0,1-34.56,3.92,57.572,57.572,0,0,1-45.99-50.98c-1.1-11.87.95-23.26,7-33.71C54.78,57.45,70.59,47.36,91.66,46.13c12.81-.75,24.58,2.9,35.18,10.21.61.42,1.14,1.07,2,1.03.33-.55.07-1.05-.08-1.52a53.434,53.434,0,0,0-10.22-18.39,5.375,5.375,0,0,0-2.57-1.65,70.512,70.512,0,0,0-33.19-2.53A68.756,68.756,0,0,0,38.5,59.79c-12.27,15.85-17,33.95-14.3,53.87,2.46,18.2,10.76,33.36,24.84,45,17.17,14.2,37.03,19.14,58.94,14.96,18.85-3.6,33.52-13.83,44.58-29.37a40.861,40.861,0,0,0,4.97-8.91,1.964,1.964,0,0,0-1.64.82ZM22.19,43.45C-.18,65.52-5.3,92.19,5.3,121.68c5.54,15.42,25.85,36.61,34.81,37.08-.08-.58-.56-.85-.91-1.21a78.3,78.3,0,0,1-15.69-23.87c-2.48-5.74-3.48-11.92-5.87-17.67a54.177,54.177,0,0,1-2.98-31.64C18.14,66.5,27.97,53.05,43.84,44.05c1.91-1.08,4.04-1.71,5.83-3.06A70.856,70.856,0,0,1,75.3,28.87c4.71-1.21,9.52-1.73,14.26-2.62-25.51-6.24-48.61-1.33-67.38,17.19ZM134.53,17.36a79.516,79.516,0,0,1,18.61,31.92c.7,2.29,1.03,4.71,1.96,6.89,4.61,10.81,6.38,21.97,4.36,33.6q-4.44,25.485-26.21,39.57c-3.05,1.96-6.46,3.28-9.44,5.38a73.767,73.767,0,0,1-30.18,12.71c-3.05.53-6.14.9-9.54,1.39,29.34,9.02,69.14-3.67,84.47-41.81,15.02-37.38-4.23-76.75-34.58-90.58-.12.49.3.67.54.92Zm-3.41,50.96a3.138,3.138,0,0,0-1.04-1.81,51.844,51.844,0,0,0-15.23-10.24c-.35-.15-.75-.58-1.3.05a61.246,61.246,0,0,1,14.51,31.85c2.14-3.99,3.79-15.61,3.06-19.85ZM60.3,118.89A58.967,58.967,0,0,1,45.99,86.85c-.35.25-.43.28-.45.33-2.47,6.39-2.94,13.05-2.62,19.82.04.85.67,1.36,1.2,1.92a44.227,44.227,0,0,0,9.83,7.5c1.91,1.12,3.96,2.02,5.95,3.02l.39-.54Z" fill="url(#radial-gradient)"/>
+    </g>
+  </svg>
+  
+  );
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-monitor-smartphone.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-monitor-smartphone.tsx
new file mode 100644
index 0000000..5efbaf0
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-monitor-smartphone.tsx
@@ -0,0 +1,26 @@
+export default function IconMonitorSmartphone() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="black"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "56px",
+        height: "56px",
+        strokeWidth: "1px",
+      }}
+    >
+      <path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8" />
+      <path d="M10 19v-3.96 3.15" />
+      <path d="M7 19h5" />
+      <rect width="6" height="10" x="16" y="12" rx="2" />
+    </svg>
+  );
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-plus.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-plus.tsx
new file mode 100644
index 0000000..3edadba
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/icons/icon-plus.tsx
@@ -0,0 +1,24 @@
+export default function IconPlus() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="black"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        color: "#ffadff",
+        width: "56px",
+        height: "56px",
+        strokeWidth: "1px",
+      }}
+    >
+      <path d="M5 12h14" />
+      <path d="M12 5v14" />
+    </svg>
+  );
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/common/tooltip.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/common/tooltip.tsx
new file mode 100644
index 0000000..e13c14b
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/common/tooltip.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "./cn"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-2 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/index.ts b/packages/mesh-midnight-ui-templates/wallet-widget/index.ts
new file mode 100644
index 0000000..96e9a89
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/index.ts
@@ -0,0 +1,2 @@
+export * from "./midnight-wallet";
+
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/connected-button.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/connected-button.tsx
new file mode 100644
index 0000000..96c5611
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/connected-button.tsx
@@ -0,0 +1,40 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../common/dropdown-menu';
+import { Button } from '../common/button';
+import { useAssets, useWallet } from '@meshsdk/midnight-react';
+
+export default function ConnectedButton() {
+  const { disconnect } = useWallet();
+  const { address } = useAssets();
+
+  return (
+    <>
+      {address && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">
+              {address.slice(0, 4)}...{address.slice(-4)}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => {
+                navigator.clipboard.writeText(address);
+              }}
+            >
+              Copy Address
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => {
+                disconnect();
+              }}
+            >
+              Disconnect
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </>
+  );
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/data.ts b/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/data.ts
new file mode 100644
index 0000000..d2fad0d
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/data.ts
@@ -0,0 +1,5 @@
+export const screens = {
+  main: {
+    title: "Connect Wallet",
+  },  
+};
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/index.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/index.tsx
new file mode 100644
index 0000000..4eb713f
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/index.tsx
@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { Button } from "../common/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../common/dialog";
+import { useAssets, useWallet } from "@meshsdk/midnight-react";
+import ConnectedButton from "./connected-button";
+import { screens } from "./data";
+import ScreenMain from "./screen-main";
+
+export const MidnightWallet = () => {
+  const { open, setOpen } = useWallet();
+  const [screen] = useState("main");
+  const { hasConnectedWallet } = useAssets();
+
+  return (    
+      <Dialog open={open} onOpenChange={setOpen}>
+      <div>
+        {!hasConnectedWallet ? (
+          <DialogTrigger asChild>
+            <Button variant="outline" className="">
+              Connect Wallet
+            </Button>
+          </DialogTrigger>
+        ) : (
+          <ConnectedButton />
+        )}
+      </div>
+
+      <DialogContent
+        className="sm:max-w-[425px] justify-center items-center"
+        onOpenAutoFocus={(event) => event.preventDefault()}
+      >
+        <Header screen={screen} />
+        {screen == "main" && <ScreenMain setOpen={setOpen} />}
+        <Footer />
+      </DialogContent>
+    </Dialog>    
+  );
+};
+
+interface HeaderProps {
+  screen: string;
+  setScreen: (screen: string) => void;
+}
+
+function Header({
+  screen,
+}: Omit<HeaderProps, 'setScreen'>) {
+  return (
+    <DialogHeader>
+      <DialogTitle className="flex justify-between">
+        <span style={{ width: "24px" }}></span>
+        <span className="">
+          {/* @ts-expect-error any type */}
+          {screens[screen].title}
+        </span>
+        <span style={{ width: "24px" }}></span>
+      </DialogTitle>
+    </DialogHeader>
+  );
+}
+
+function Footer() {
+  return (
+    <DialogFooter className="justify-center text-sm">
+      <a
+        href="https://meshjs.dev/"
+        target="_blank"
+        className="flex gap-1 items-center justify-center text-accent-foreground hover:text-zinc-500 fill-foreground hover:fill-zinc-500 dark:hover:text-orange-200 dark:hover:fill-zinc-200"
+      >
+        <span className="">Powered by</span>
+        <svg
+          width={22}
+          height={22}
+          enableBackground="new 0 0 300 200"
+          viewBox="0 0 300 200"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <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="">Mesh SDK</span>
+      </a>
+    </DialogFooter>
+  );
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/screen-main.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/screen-main.tsx
new file mode 100644
index 0000000..57ff999
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/screen-main.tsx
@@ -0,0 +1,51 @@
+import IconLace from '../common/icons/icon-lace';
+import { TooltipProvider } from '../common/tooltip';
+import { useWallet, useWalletList } from '@meshsdk/midnight-react';
+import WalletIcon from './wallet-icon';
+import { type JSX } from 'react';
+
+export default function ScreenMain({
+  setOpen,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  setOpen: Function;
+}) {
+  const wallets = useWalletList();
+  const { connectWallet } = useWallet();
+
+  // Example config map for wallet overrides
+  const walletsConfig: { [key: string]: { key: string; displayName: string; icon: JSX.Element } } = {
+    lace: { key: 'mnLace', displayName: 'LACE', icon: <IconLace /> }
+  };
+
+  return (
+    <TooltipProvider>
+      <div
+        className="grid gap-4 py-7 place-items-center gap-y-8"
+        style={{
+          gridTemplateColumns: `repeat(${wallets.length}, minmax(0, 1fr))`,
+        }}
+      >
+        {wallets.map((wallet, index) => {
+          const config = walletsConfig[wallet.name];
+          if (!config) return null; // Skip rendering if config is not found
+          const walletKey = config.key;
+          const displayName = config.displayName;
+          const icon = config.icon;
+
+          return (
+            <WalletIcon
+              key={index}
+              iconReactNode={icon}
+              name={displayName}
+              action={() => {
+                connectWallet(walletKey);
+                setOpen(false);
+              }}
+            />
+          );
+        })}
+      </div>
+    </TooltipProvider>
+  );
+}
diff --git a/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/wallet-icon.tsx b/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/wallet-icon.tsx
new file mode 100644
index 0000000..b31f507
--- /dev/null
+++ b/packages/mesh-midnight-ui-templates/wallet-widget/midnight-wallet/wallet-icon.tsx
@@ -0,0 +1,34 @@
+import {
+  Tooltip,
+  TooltipContent,  
+  TooltipTrigger,
+} from "../common/tooltip";
+
+export default function WalletIcon({
+  icon,
+  name,
+  action,
+  iconReactNode,
+}: {
+  icon?: string;
+  name: string;
+  action: () => void;
+  iconReactNode?: React.ReactNode;
+}) {
+  return (
+    <Tooltip delayDuration={0} defaultOpen={false}>
+      <TooltipTrigger asChild>
+        <button
+          className="flex items-center justify-center rounded-lg w-10 h-10 border border-zinc-700 hover:border-zinc-200 cursor-pointer"
+          onClick={action}
+        >
+          {icon && <img src={icon} alt={name} className="w-8 h-8"/>}
+          {iconReactNode && iconReactNode}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{name}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/packages/mesh-midnight-wallet/package.json b/packages/mesh-midnight-wallet/package.json
index 807e40d..0823711 100644
--- a/packages/mesh-midnight-wallet/package.json
+++ b/packages/mesh-midnight-wallet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/midnight-wallet",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Wallets",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@meshsdk/configs": "*",
-    "@meshsdk/midnight-core": "0.0.5",
+    "@meshsdk/midnight-core": "0.0.6",
     "eslint": "^8.57.0",
     "tsup": "^8.0.2",
     "typedoc": "^0.26.3",
diff --git a/packages/mesh-midnight-wallet/src/embedded/embedded-wallet.ts b/packages/mesh-midnight-wallet/src/embedded/embedded-wallet.ts
index 908c2c7..473b9de 100644
--- a/packages/mesh-midnight-wallet/src/embedded/embedded-wallet.ts
+++ b/packages/mesh-midnight-wallet/src/embedded/embedded-wallet.ts
@@ -7,52 +7,60 @@ import { wordlist as english } from '@scure/bip39/wordlists/english';
 import { HDKey } from '@scure/bip32';
 import { generateRandomSeed, HDWallet, Roles } from '@midnight-ntwrk/wallet-sdk-hd';
 
-export const mnemonicToWords: (mnemonic: string) => string[] = (mnemonic: string) => mnemonic.split(' ');
-
-export const generateMnemonicWords: (strength?: number) => string[] = (strength = 256) =>
-  mnemonicToWords(bip39.generateMnemonic(english, strength));
-
-export const validateMnemonic = (mnemonic: string): boolean => bip39.validateMnemonic(mnemonic, english);
-
-const mnemonicWords = generateMnemonicWords().join(' ');
-const seedDerived = mnemonicToSeedSync(mnemonicWords); // 64 bytes
-
-const seddDerivedHex = Buffer.from(seedDerived).toString('hex'); // 64 bytes
-// This is the seed that will be used to generate the wallet since the wallet implementation expects 32 bytes hex string.
-const seedDerivedHex32 = Buffer.from(seedDerived).subarray(0, 32).toString('hex'); // 32 bytes
-// Optionally generate a random seed
-const seedGenerated = generateRandomSeed(); //32 bytes
-
-// The following code is for reference only, Midnight provides a HDWallet abstraction using the HdKey from scure/bip32 implementation
-const rootKey = HDKey.fromMasterSeed(seedDerived);
-// How to calculate the path
-// const path = `m/${PURPOSE}'/${COIN_TYPE}'/${this.account}'/${this.role}/${index}`;
-// const derivedKey = rootKey.derive(path);
-
-// This is for reference only, another way to create a root key using BIP32
-const bip32 = BIP32Factory(ecc);
-const root = bip32.fromSeed(seedDerived);
-
-console.log({ mnemonicWords: mnemonicWords });
-console.log({ seedDerived });
-console.log({ seddDerivedHex });
-console.log({ seedDerivedHex32 });
-console.log({ seedGenerated });
-console.log({ rootKey });
-console.log({ root });
-console.log({ validateMnemonic: validateMnemonic(mnemonicWords) });
-
-const generatedWallet = HDWallet.fromSeed(seedDerived); //seed could be 32 bytes or 64 bytes
-
-if (generatedWallet.type == 'seedOk') {
-  const zswapKey = generatedWallet.hdWallet.selectAccount(0).selectRole(Roles.Zswap).deriveKeyAt(0);
-  if (zswapKey.type === 'keyDerived') {
-    console.log('success', zswapKey.key);
+export function initializeWallet() {
+  const mnemonicToWords: (mnemonic: string) => string[] = (mnemonic: string) => mnemonic.split(' ');
+
+  const generateMnemonicWords: (strength?: number) => string[] = (strength = 256) =>
+    mnemonicToWords(bip39.generateMnemonic(english, strength));
+
+  const validateMnemonic = (mnemonic: string): boolean => bip39.validateMnemonic(mnemonic, english);
+
+  const mnemonicWords = generateMnemonicWords().join(' ');
+  const seedDerived = mnemonicToSeedSync(mnemonicWords); // 64 bytes
+
+  const seddDerivedHex = Buffer.from(seedDerived).toString('hex'); // 64 bytes
+  // This is the seed that will be used to generate the wallet since the wallet implementation expects 32 bytes hex string.
+  const seedDerivedHex32 = Buffer.from(seedDerived).subarray(0, 32).toString('hex'); // 32 bytes
+  // Optionally generate a random seed
+  const seedGenerated = generateRandomSeed(); //32 bytes
+
+  // The following code is for reference only, Midnight provides a HDWallet abstraction using the HdKey from scure/bip32 implementation
+  const rootKey = HDKey.fromMasterSeed(seedDerived);
+  // How to calculate the path
+  // const path = `m/${PURPOSE}'/${COIN_TYPE}'/${this.account}'/${this.role}/${index}`;
+  // const derivedKey = rootKey.derive(path);
+
+  // This is for reference only, another way to create a root key using BIP32
+  const bip32 = BIP32Factory(ecc);
+  const root = bip32.fromSeed(seedDerived);
+
+  console.log({ mnemonicWords });
+  console.log({ seedDerived });
+  console.log({ seddDerivedHex });
+  console.log({ seedDerivedHex32 });
+  console.log({ seedGenerated });
+  console.log({ rootKey });
+  console.log({ root });
+  console.log({ validateMnemonic: validateMnemonic(mnemonicWords) });
+
+  const generatedWallet = HDWallet.fromSeed(seedDerived); //seed could be 32 bytes or 64 bytes
+
+  if (generatedWallet.type == 'seedOk') {
+    const zswapKey = generatedWallet.hdWallet.selectAccount(0).selectRole(Roles.Zswap).deriveKeyAt(0);
+    if (zswapKey.type === 'keyDerived') {
+      console.log('success', zswapKey.key);
+      return { success: true, key: zswapKey.key };
+    } else {
+      console.error('Error deriving key');
+      return { success: false, error: 'Error deriving key' };
+    }
   } else {
-    console.error('Error deriving key');
+    console.error('Error generating HDWallet');
+    return { success: false, error: 'Error generating HDWallet' };
   }
-} else {
-  console.error('Error generating HDWallet');
 }
 
+// Uncomment this line if you want to run the wallet initialization when this module is imported
+// initializeWallet();
+