diff --git a/src/app/dashboard/(overview)/page.tsx b/src/app/dashboard/(overview)/page.tsx
index e6017fc..519d478 100644
--- a/src/app/dashboard/(overview)/page.tsx
+++ b/src/app/dashboard/(overview)/page.tsx
@@ -1,6 +1,6 @@
 import { LatestInvoicesSkeleton, RevenueChartSkeleton } from "@/app/dashboard/components/skeletons/skeletons";
 import CardWrapper from "@/app/dashboard/components/cards/cards";
-import LatestInvoices from "@/app/dashboard/components/latest-invoices";
+import LatestInvoices from "@/app/dashboard/components/latest-invoices/latest-invoices";
 import RevenueChart from "@/app/dashboard/components/revenue-chart/revenue-chart";
 import { Suspense } from "react";
 
diff --git a/src/app/dashboard/components/latest-invoices/latest-invoices-controller.ts b/src/app/dashboard/components/latest-invoices/latest-invoices-controller.ts
new file mode 100644
index 0000000..45bde22
--- /dev/null
+++ b/src/app/dashboard/components/latest-invoices/latest-invoices-controller.ts
@@ -0,0 +1,5 @@
+import fetchCustomerInvoicesUsecase from "@/feature/core/customer-invoice/domain/usecase/fetch-customer-invoices-usecase";
+
+export default function latestInvoicesController() {
+    return fetchCustomerInvoicesUsecase()
+}
\ No newline at end of file
diff --git a/src/app/dashboard/components/latest-invoices.tsx b/src/app/dashboard/components/latest-invoices/latest-invoices.tsx
similarity index 88%
rename from src/app/dashboard/components/latest-invoices.tsx
rename to src/app/dashboard/components/latest-invoices/latest-invoices.tsx
index 6f62655..0db6556 100644
--- a/src/app/dashboard/components/latest-invoices.tsx
+++ b/src/app/dashboard/components/latest-invoices/latest-invoices.tsx
@@ -1,19 +1,12 @@
-import fetchCustomerInvoicesUsecase from '@/feature/core/customer-invoice/domain/usecase/fetch-customer-invoices-usecase';
+import latestInvoicesController from '@/app/dashboard/components/latest-invoices/latest-invoices-controller';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Image from 'next/image';
+
 export default async function LatestInvoices() {
-  const latestInvoices = await fetchCustomerInvoicesUsecase();
+  const latestInvoices = await latestInvoicesController();
 
-  return (
-    <div className="flex w-full flex-col md:col-span-4">
-      <h2 className="mb-4 text-xl md:text-2xl">
-        Latest Invoices
-      </h2>
-      <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
-
-        <div className="bg-white px-6">
-          {latestInvoices.map((invoice, i) => {
+  const invoices = latestInvoices.map((invoice, i) => {
             return (
               <div
                 key={invoice.id}
@@ -48,7 +41,16 @@ export default async function LatestInvoices() {
                 </p>
               </div>
             );
-          })}
+          })
+  return (
+    <div className="flex w-full flex-col md:col-span-4">
+      <h2 className="mb-4 text-xl md:text-2xl">
+        Latest Invoices
+      </h2>
+      <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
+
+        <div className="bg-white px-6">
+          {invoices}
         </div>
         <div className="flex items-center pb-2 pt-6">
           <ArrowPathIcon className="h-5 w-5 text-gray-500" />