diff --git a/src/app/components/button/button.tsx b/src/app/components/button/button.tsx
index 6d0c377..5245285 100644
--- a/src/app/components/button/button.tsx
+++ b/src/app/components/button/button.tsx
@@ -66,4 +66,4 @@ const ButtonUi = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 ButtonUi.displayName = "Button"
 
-export { Button, buttonVariants }
\ No newline at end of file
+export { buttonVariants }
\ No newline at end of file
diff --git a/src/app/dashboard/components/client/create-random-invoice/create-random-invoice.tsx b/src/app/dashboard/components/client/create-random-invoice/create-random-invoice.tsx
new file mode 100644
index 0000000..8a80645
--- /dev/null
+++ b/src/app/dashboard/components/client/create-random-invoice/create-random-invoice.tsx
@@ -0,0 +1,13 @@
+"use client"
+
+import Button from "@/app/components/button/button"
+import CreateRandomInvoiceButtonVM from "@/app/dashboard/vm/create-random-invoice-button-vm"
+import { useDI } from "@/bootstrap/di/di-context"
+import { useRef } from "react"
+
+export default function CreateRandomInvoiceContainer() {
+    const di = useDI()
+    const vm = useRef(di.resolve(CreateRandomInvoiceButtonVM))
+
+    return <Button vm={vm.current}/>
+}
\ No newline at end of file
diff --git a/src/app/dashboard/components/server/latest-invoices/latest-invoices.tsx b/src/app/dashboard/components/server/latest-invoices/latest-invoices.tsx
index dc3c7be..09b140b 100644
--- a/src/app/dashboard/components/server/latest-invoices/latest-invoices.tsx
+++ b/src/app/dashboard/components/server/latest-invoices/latest-invoices.tsx
@@ -1,3 +1,4 @@
+import CreateRandomInvoiceContainer from '@/app/dashboard/components/client/create-random-invoice/create-random-invoice';
 import latestInvoicesController from '@/app/dashboard/components/server/latest-invoices/latest-invoices-controller';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
@@ -52,10 +53,11 @@ export default async function LatestInvoices() {
         <div className="bg-white px-6">
           {invoices}
         </div>
-        <div className="flex items-center pb-2 pt-6">
+        <div className="flex items-end mt-auto pb-2 pt-6">
           <ArrowPathIcon className="h-5 w-5 text-gray-500" />
           <h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
         </div>
+        <CreateRandomInvoiceContainer />
       </div>
     </div>
   );
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 75b7ecb..55125e7 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -1,13 +1,20 @@
+"use client"
 import SideNav from "@/app/dashboard/components/server/sidenav";
+import dashboardAppModule from "@/app/dashboard/module/dashboard-app-module";
+import { DiContext } from "@/bootstrap/di/di-context";
+import { useRef } from "react";
 
  
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const di = useRef(dashboardAppModule())
   return (
-    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
-      <div className="w-full flex-none md:w-64">
-        <SideNav />
+    <DiContext.Provider value={di.current}>
+      <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
+        <div className="w-full flex-none md:w-64">
+          <SideNav />
+        </div>
+        <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
       </div>
-      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
-    </div>
+    </DiContext.Provider>
   );
 }
\ No newline at end of file
diff --git a/src/app/dashboard/module/dashboard-app-module.ts b/src/app/dashboard/module/dashboard-app-module.ts
index fd9f144..a3611c1 100644
--- a/src/app/dashboard/module/dashboard-app-module.ts
+++ b/src/app/dashboard/module/dashboard-app-module.ts
@@ -1,27 +1,9 @@
+import CreateRandomInvoiceButtonVM from "@/app/dashboard/vm/create-random-invoice-button-vm";
 import di from "@/bootstrap/di/init-di"
-import fetchCustomerInvoicesUsecase from "@/feature/core/customer-invoice/domain/usecase/fetch-customer-invoices-usecase";
-import fetchCustomersUsecase from "@/feature/core/customer/domain/usecase/fetch-customers-usecase";
-import fetchAllInvoicesAmountUsecase from "@/feature/core/invoice/domain/usecase/fetch-all-invoices-amount-usecase";
-import fetchRevenuesUsecase from "@/feature/core/revenue/domain/usecase/fetch-revenues-usecase";
 
 export default function dashboardAppModule() {
     const dashboardDi = di.createChildContainer()
     
-    dashboardDi.register(fetchCustomersUsecase.name, {
-        useValue: fetchCustomersUsecase
-    })
-
-    dashboardDi.register(fetchAllInvoicesAmountUsecase.name, {
-        useValue: fetchAllInvoicesAmountUsecase
-    })
-    dashboardDi.register(fetchAllInvoicesAmountUsecase.name, {
-        useValue: fetchAllInvoicesAmountUsecase
-    })
-    dashboardDi.register(fetchCustomerInvoicesUsecase.name, {
-        useValue: fetchCustomerInvoicesUsecase
-    })
-    dashboardDi.register(fetchRevenuesUsecase.name, {
-        useValue: fetchRevenuesUsecase
-    })
+    dashboardDi.register(CreateRandomInvoiceButtonVM, CreateRandomInvoiceButtonVM)
     return dashboardDi
 }
diff --git a/src/app/dashboard/vm/create-random-invoice-button-vm.ts b/src/app/dashboard/vm/create-random-invoice-button-vm.ts
new file mode 100644
index 0000000..3bbf802
--- /dev/null
+++ b/src/app/dashboard/vm/create-random-invoice-button-vm.ts
@@ -0,0 +1,15 @@
+import ButtonVm from "@/app/components/button/button-vm";
+import BaseVM from "@/bootstrap/helpers/vm/base-vm";
+
+export default class CreateRandomInvoiceButtonVM extends BaseVM<ButtonVm> {
+    useVM(): ButtonVm {
+        return {
+            props: {
+                title: "Button Title"
+            },
+            onClick: () => {
+                console.log('clicked');
+            }
+        }
+    }
+} 
\ No newline at end of file