diff --git a/shop/package-lock.json b/shop/package-lock.json
index ced2677..1a83fc8 100644
--- a/shop/package-lock.json
+++ b/shop/package-lock.json
@@ -32,6 +32,7 @@
         "recharts": "^2.10.4",
         "tailwind-merge": "^2.2.0",
         "tailwindcss-animate": "^1.0.7",
+        "vaul": "^0.8.0",
         "viem": "^1.21.4",
         "wagmi": "^1.4.13"
       },
@@ -10008,6 +10009,18 @@
         }
       }
     },
+    "node_modules/vaul": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.8.0.tgz",
+      "integrity": "sha512-9nUU2jIObJvJZxeQU1oVr/syKo5XqbRoOMoTEt0hHlWify4QZFlqTh6QSN/yxoKzNrMeEQzxbc3XC/vkPLOIqw==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/victory-vendor": {
       "version": "36.8.1",
       "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.8.1.tgz",
diff --git a/shop/package.json b/shop/package.json
index 8d2a795..3b4e9d2 100644
--- a/shop/package.json
+++ b/shop/package.json
@@ -33,6 +33,7 @@
     "recharts": "^2.10.4",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.8.0",
     "viem": "^1.21.4",
     "wagmi": "^1.4.13"
   },
diff --git a/shop/src/app/dashboard/components/cash-out-button.tsx b/shop/src/app/dashboard/components/cash-out-button.tsx
new file mode 100644
index 0000000..0770c37
--- /dev/null
+++ b/shop/src/app/dashboard/components/cash-out-button.tsx
@@ -0,0 +1,42 @@
+import { PrimaryButton as Button } from '@/components/ui/button'
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer'
+
+export function CashOutButton() {
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button className="text-xl py-4 px-6 transition-colors hover:text-secondary hover:bg-primary-foreground">
+          Cash Out
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent className="mx-auto w-full max-w-md">
+        <DrawerHeader>
+          <DrawerTitle className="text-2xl text-center font-semibold">
+            Withdraw Funds
+          </DrawerTitle>
+          <DrawerDescription className="text-md text-center">
+            489.97 GHO
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="flex justify-end space-x-4">
+          <DrawerClose asChild>
+            <Button variant="outline" className="px-4 py-2">
+              Cancel
+            </Button>
+          </DrawerClose>
+          <Button className="px-4 py-2 bg-primary text-white">Withdraw</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/shop/src/app/dashboard/components/main-nav.tsx b/shop/src/app/dashboard/components/main-nav.tsx
index bdbf43d..459d74f 100644
--- a/shop/src/app/dashboard/components/main-nav.tsx
+++ b/shop/src/app/dashboard/components/main-nav.tsx
@@ -12,25 +12,25 @@ export function MainNav({
       {...props}
     >
       <Link
-        href="/examples/dashboard"
+        href="/dashboard"
         className="text-sm font-medium transition-colors hover:text-primary"
       >
         Overview
       </Link>
       <Link
-        href="/examples/dashboard"
+        href="/dashboard"
         className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
       >
         Customers
       </Link>
       <Link
-        href="/examples/dashboard"
+        href="/dashboard"
         className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
       >
         Products
       </Link>
       <Link
-        href="/examples/dashboard"
+        href="/dashboard"
         className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
       >
         Settings
diff --git a/shop/src/app/dashboard/components/overview.tsx b/shop/src/app/dashboard/components/overview.tsx
index 0c19d46..ade89a3 100644
--- a/shop/src/app/dashboard/components/overview.tsx
+++ b/shop/src/app/dashboard/components/overview.tsx
@@ -75,7 +75,7 @@ export function Overview() {
           dataKey="total"
           fill="currentColor"
           radius={[4, 4, 0, 0]}
-          className="fill-primary"
+          className="fill-primary hover:fill-primary-foreground"
         />
       </BarChart>
     </ResponsiveContainer>
diff --git a/shop/src/app/dashboard/components/recent-sales.tsx b/shop/src/app/dashboard/components/recent-sales.tsx
index 5c804aa..d901979 100644
--- a/shop/src/app/dashboard/components/recent-sales.tsx
+++ b/shop/src/app/dashboard/components/recent-sales.tsx
@@ -1,4 +1,6 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { RefundButton } from './refund-button'
+
 
 export function RecentSales() {
   return (
@@ -14,7 +16,8 @@ export function RecentSales() {
             olivia.martin@email.com
           </p>
         </div>
-        <div className="ml-auto font-medium">+$1,999.00</div>
+        <div className="ml-auto font-medium">+$1,999.00</div> 
+        <RefundButton></RefundButton>       
       </div>
       <div className="flex items-center">
         <Avatar className="flex h-9 w-9 items-center justify-center space-y-0 border">
@@ -26,6 +29,7 @@ export function RecentSales() {
           <p className="text-sm text-muted-foreground">jackson.lee@email.com</p>
         </div>
         <div className="ml-auto font-medium">+$39.00</div>
+        <RefundButton></RefundButton> 
       </div>
       <div className="flex items-center">
         <Avatar className="h-9 w-9">
@@ -39,6 +43,7 @@ export function RecentSales() {
           </p>
         </div>
         <div className="ml-auto font-medium">+$299.00</div>
+        <RefundButton></RefundButton> 
       </div>
       <div className="flex items-center">
         <Avatar className="h-9 w-9">
@@ -50,6 +55,7 @@ export function RecentSales() {
           <p className="text-sm text-muted-foreground">will@email.com</p>
         </div>
         <div className="ml-auto font-medium">+$99.00</div>
+        <RefundButton></RefundButton> 
       </div>
       <div className="flex items-center">
         <Avatar className="h-9 w-9">
@@ -61,6 +67,7 @@ export function RecentSales() {
           <p className="text-sm text-muted-foreground">sofia.davis@email.com</p>
         </div>
         <div className="ml-auto font-medium">+$39.00</div>
+        <RefundButton></RefundButton> 
       </div>
     </div>
   )
diff --git a/shop/src/app/dashboard/components/refund-button.tsx b/shop/src/app/dashboard/components/refund-button.tsx
new file mode 100644
index 0000000..20f3f6d
--- /dev/null
+++ b/shop/src/app/dashboard/components/refund-button.tsx
@@ -0,0 +1,42 @@
+import { PrimaryButton as Button } from '@/components/ui/button'
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer'
+
+export function RefundButton() {
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button className="text-xs ml-4 transition:colors hover:text-secondary hover:bg-primary-foreground">
+          Refund
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent className="mx-auto w-full max-w-md">
+        <DrawerHeader>
+          <DrawerTitle className="text-2xl text-center font-semibold">
+            Refund Customer Order
+          </DrawerTitle>
+          <DrawerDescription className="text-md text-center">
+            Revert On-Chain Transaction
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="flex justify-end space-x-4">
+          <DrawerClose asChild>
+            <Button variant="outline" className="px-4 py-2">
+              Cancel
+            </Button>
+          </DrawerClose>
+          <Button className="px-4 py-2 bg-primary text-white">Refund</Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/shop/src/app/dashboard/components/team-switcher.tsx b/shop/src/app/dashboard/components/team-switcher.tsx
index bba6f6b..96219e5 100644
--- a/shop/src/app/dashboard/components/team-switcher.tsx
+++ b/shop/src/app/dashboard/components/team-switcher.tsx
@@ -48,7 +48,7 @@ const groups = [
     label: 'Personal Account',
     teams: [
       {
-        label: 'Alicia Koch',
+        label: 'Stani K',
         value: 'personal',
       },
     ],
@@ -57,12 +57,12 @@ const groups = [
     label: 'Teams',
     teams: [
       {
-        label: 'Acme Inc.',
-        value: 'acme-inc',
+        label: 'Nice Shoes Inc.',
+        value: 'nice-shoes-inc',
       },
       {
-        label: 'Monsters Inc.',
-        value: 'monsters',
+        label: 'Cool Poaps Inc.',
+        value: 'cool-poaps-inc',
       },
     ],
   },
diff --git a/shop/src/app/dashboard/components/user-nav.tsx b/shop/src/app/dashboard/components/user-nav.tsx
index ee198f8..98d7099 100644
--- a/shop/src/app/dashboard/components/user-nav.tsx
+++ b/shop/src/app/dashboard/components/user-nav.tsx
@@ -18,16 +18,16 @@ export function UserNav() {
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">
           <Avatar className="h-8 w-8">
             <AvatarImage src="/avatars/01.png" alt="@shadcn" />
-            <AvatarFallback>SC</AvatarFallback>
+            <AvatarFallback>GM</AvatarFallback>
           </Avatar>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="end" forceMount>
         <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
-            <p className="text-sm font-medium leading-none">shadcn</p>
+            <p className="text-sm font-medium leading-none">stani</p>
             <p className="text-xs leading-none text-muted-foreground">
-              m@example.com
+              gm@aave.com
             </p>
           </div>
         </DropdownMenuLabel>
diff --git a/shop/src/app/dashboard/page.tsx b/shop/src/app/dashboard/page.tsx
index 697768b..caa23d2 100644
--- a/shop/src/app/dashboard/page.tsx
+++ b/shop/src/app/dashboard/page.tsx
@@ -1,6 +1,5 @@
 import { Metadata } from 'next'
 import Image from 'next/image'
-
 import { PrimaryButton as Button } from '@/components/ui/button'
 import {
   Card,
@@ -18,6 +17,7 @@ import { RecentSales } from '@/app/dashboard/components/recent-sales'
 import { Search } from '@/app/dashboard/components/search'
 import TeamSwitcher from '@/app/dashboard/components/team-switcher'
 import { UserNav } from '@/app/dashboard/components/user-nav'
+import { CashOutButton } from './components/cash-out-button'
 
 export const metadata: Metadata = {
   title: 'Dashboard',
@@ -60,8 +60,7 @@ export default function DashboardPage() {
               Esprit Merchant Dashboard
             </h2>
             <div className="flex items-center space-x-2">
-              {/* <CalendarDateRangePicker /> */}
-              <Button className="text-2xl px-6 py-6">Cash Out</Button>
+              <CashOutButton></CashOutButton>
             </div>
           </div>
           <Tabs defaultValue="overview" className="space-y-4">
diff --git a/shop/src/components/ui/drawer.tsx b/shop/src/components/ui/drawer.tsx
new file mode 100644
index 0000000..6a0ef53
--- /dev/null
+++ b/shop/src/components/ui/drawer.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}