diff --git a/src/app/dashboard/(overview)/page.tsx b/src/app/dashboard/(overview)/page.tsx
index c6b1b07..e6017fc 100644
--- a/src/app/dashboard/(overview)/page.tsx
+++ b/src/app/dashboard/(overview)/page.tsx
@@ -1,7 +1,7 @@
 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 RevenueChart from "@/app/dashboard/components/revenue-chart";
+import RevenueChart from "@/app/dashboard/components/revenue-chart/revenue-chart";
 import { Suspense } from "react";
 
 export default async function Dashboard() {
diff --git a/src/app/lib/utils.ts b/src/app/dashboard/components/revenue-chart/revenue-chart-controller.ts
similarity index 52%
rename from src/app/lib/utils.ts
rename to src/app/dashboard/components/revenue-chart/revenue-chart-controller.ts
index b7b6e70..becc678 100644
--- a/src/app/lib/utils.ts
+++ b/src/app/dashboard/components/revenue-chart/revenue-chart-controller.ts
@@ -1,7 +1,21 @@
 import Revenue from "@/feature/core/revenue/domain/entity/revenue";
+import fetchRevenuesUsecase from "@/feature/core/revenue/domain/usecase/fetch-revenues-usecase";
 
+export default async function revenueChartController() {
+  const revenue = await fetchRevenuesUsecase();
+  const chartHeight = 350;
 
-export const generateYAxis = (revenue: Revenue[]) => {
+  const { yAxisLabels, topLabel } = generateYAxis(revenue);
+
+  return {
+    revenue,
+    chartHeight,
+    yAxisLabels,
+    topLabel
+  }
+}
+
+function generateYAxis(revenue: Revenue[]) {
   // Calculate what labels we need to display on the y-axis
   // based on highest record and in 1000s
   const yAxisLabels = [];
diff --git a/src/app/dashboard/components/revenue-chart.tsx b/src/app/dashboard/components/revenue-chart/revenue-chart.tsx
similarity index 84%
rename from src/app/dashboard/components/revenue-chart.tsx
rename to src/app/dashboard/components/revenue-chart/revenue-chart.tsx
index f6a6f91..608163c 100644
--- a/src/app/dashboard/components/revenue-chart.tsx
+++ b/src/app/dashboard/components/revenue-chart/revenue-chart.tsx
@@ -1,13 +1,8 @@
-import { generateYAxis } from '@/app/lib/utils';
-import fetchRevenuesUsecase from '@/feature/core/revenue/domain/usecase/fetch-revenues-usecase';
+import revenueChartController from '@/app/dashboard/components/revenue-chart/revenue-chart-controller';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 
 export default async function RevenueChart() {
-  const revenue = await fetchRevenuesUsecase();
-
-  const chartHeight = 350;
-
-  const { yAxisLabels, topLabel } = generateYAxis(revenue);
+  const { chartHeight, revenue, topLabel, yAxisLabels } = await revenueChartController()
 
   if (!revenue || revenue.length === 0) {
     return <p className="mt-4 text-gray-400">No data available.</p>;