diff --git a/src/app/dashboard/(user-dashboard)/_components/RecentSales.tsx b/src/app/dashboard/(user-dashboard)/_components/RecentSales.tsx
index 59191a410..2c4e35d9d 100644
--- a/src/app/dashboard/(user-dashboard)/_components/RecentSales.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/RecentSales.tsx
@@ -1,85 +1,28 @@
-import React from "react";
+"use client";
 
+import React, { useEffect, useState } from "react";
+
+import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import { Card } from "~/components/ui/card";
 
-type ProductData = {
-  name: string;
-  amount: string;
-  email: string;
-};
+const RecentSales: React.FC = () => {
+  const [loading, setLoading] = useState(true);
 
-type TopProductsProperties = {
-  data: ProductData[];
-  gradients: string[];
-  noOfSales: number;
-};
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false);
+    }, 3000); // 3 seconds
 
-const RecentSales: React.FC<TopProductsProperties> = ({
-  data,
-  gradients,
-  noOfSales,
-}) => {
-  return (
-    <Card className="h-full basis-1/2 rounded-xl border border-border bg-white p-3 shadow-spread md:p-5">
-      <div className="mb-6 flex items-center justify-between">
-        <div className="flex flex-col items-start">
-          <h2 className="text-base font-semibold text-[#080808]">
-            Recent Sales
-          </h2>
-          <p className="text-sm font-medium text-[#626262] md:text-sm">
-            You made {noOfSales} sales this month
-          </p>
-        </div>
-      </div>
-      <ul className="text-[#0A0A0A]">
-        {data.map((item, index) => {
-          let amount = Number(item.amount).toFixed(2);
-          amount = amount
-            .replaceAll(
-              new RegExp(
-                String.raw`^(\d{` +
-                  (amount.length % 3 ?? 0) +
-                  String.raw`})(\d{3})`,
-                "g",
-              ),
-              "$1 $2",
-            )
-            .replaceAll(/(\d{3})+?/gi, "$1 ")
-            .trim();
-          const separator = ",";
-          amount = amount.replaceAll(/\s/g, separator);
-          amount = amount.replace(",.", ".");
+    return () => clearTimeout(timer);
+  }, []);
 
-          return (
-            <li
-              key={index}
-              className="mb-2 flex items-center justify-between py-2"
-            >
-              <div className="flex items-center space-x-4">
-                <div
-                  className="h-10 w-10 rounded-full"
-                  style={{ background: gradients[index % gradients.length] }}
-                />
-                <div>
-                  <p
-                    data-testid={`product-name-${index}`}
-                    className="text-base font-medium"
-                  >
-                    {item.name}
-                  </p>
-                  <p className="text-sm text-neutral-dark-1">{item.email}</p>
-                </div>
-              </div>
-              <p
-                data-testid={`product-amount-${index}`}
-                className="text-base font-semibold"
-              >
-                +${amount}
-              </p>
-            </li>
-          );
-        })}
-      </ul>
+  return (
+    <Card className="flex h-full basis-1/2 flex-col items-center justify-center rounded-xl border border-border bg-white p-3 shadow-spread md:p-5">
+      {loading ? (
+        <LoadingSpinner />
+      ) : (
+        <p className="text-base font-medium text-[#080808]">No recent sales</p>
+      )}
     </Card>
   );
 };
diff --git a/src/app/dashboard/(user-dashboard)/_components/overview-sales/index.tsx b/src/app/dashboard/(user-dashboard)/_components/overview-sales/index.tsx
index 95952ac66..688365366 100644
--- a/src/app/dashboard/(user-dashboard)/_components/overview-sales/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/overview-sales/index.tsx
@@ -1,11 +1,17 @@
+// import RecentSales from "~/app/dashboard/(user-dashboard)/_components/RecentSales";
+// import {
+//   data,
+//   gradients,
+// } from "~/app/dashboard/(user-dashboard)/_components/salesData";
+
+// export function OverviewSales() {
+//   return (
+//     <RecentSales data={data} gradients={gradients} noOfSales={data.length} />
+//   );
+// }
+
 import RecentSales from "~/app/dashboard/(user-dashboard)/_components/RecentSales";
-import {
-  data,
-  gradients,
-} from "~/app/dashboard/(user-dashboard)/_components/salesData";
 
 export function OverviewSales() {
-  return (
-    <RecentSales data={data} gradients={gradients} noOfSales={data.length} />
-  );
+  return <RecentSales />;
 }
diff --git a/src/components/userDashboard/chartData.ts b/src/components/userDashboard/chartData.ts
index 4314df6e2..54c9301b3 100644
--- a/src/components/userDashboard/chartData.ts
+++ b/src/components/userDashboard/chartData.ts
@@ -1,21 +1,20 @@
 import { ChartConfig } from "~/components/ui/chart";
 
-export const generateRandomRevenue = () =>
-  (Math.floor(Math.random() * 11) + 1) * 500;
+export const generateZeroRevenue = () => 0;
 
 export const chartData = [
-  { month: "January", revenue: generateRandomRevenue() },
-  { month: "February", revenue: generateRandomRevenue() },
-  { month: "March", revenue: generateRandomRevenue() },
-  { month: "April", revenue: generateRandomRevenue() },
-  { month: "May", revenue: generateRandomRevenue() },
-  { month: "June", revenue: generateRandomRevenue() },
-  { month: "July", revenue: generateRandomRevenue() },
-  { month: "August", revenue: generateRandomRevenue() },
-  { month: "September", revenue: generateRandomRevenue() },
-  { month: "October", revenue: generateRandomRevenue() },
-  { month: "November", revenue: generateRandomRevenue() },
-  { month: "December", revenue: generateRandomRevenue() },
+  { month: "January", revenue: generateZeroRevenue() },
+  { month: "February", revenue: generateZeroRevenue() },
+  { month: "March", revenue: generateZeroRevenue() },
+  { month: "April", revenue: generateZeroRevenue() },
+  { month: "May", revenue: generateZeroRevenue() },
+  { month: "June", revenue: generateZeroRevenue() },
+  { month: "July", revenue: generateZeroRevenue() },
+  { month: "August", revenue: generateZeroRevenue() },
+  { month: "September", revenue: generateZeroRevenue() },
+  { month: "October", revenue: generateZeroRevenue() },
+  { month: "November", revenue: generateZeroRevenue() },
+  { month: "December", revenue: generateZeroRevenue() },
 ];
 
 export const chartConfig: ChartConfig = {