diff --git a/public/admin-dashboard/icons/arrowUp.svg b/public/admin-dashboard/icons/arrowUp.svg
new file mode 100644
index 000000000..8d1856ede
--- /dev/null
+++ b/public/admin-dashboard/icons/arrowUp.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 17L17 7" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 7H17V17" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/admin-dashboard/icons/box.svg b/public/admin-dashboard/icons/box.svg
new file mode 100644
index 000000000..a07b9e2de
--- /dev/null
+++ b/public/admin-dashboard/icons/box.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.25 15.9999V7.9999C21.2496 7.64918 21.1571 7.30471 20.9815 7.00106C20.806 6.69742 20.5537 6.44526 20.25 6.2699L13.25 2.2699C12.946 2.09437 12.6011 2.00195 12.25 2.00195C11.8989 2.00195 11.554 2.09437 11.25 2.2699L4.25 6.2699C3.94626 6.44526 3.69398 6.69742 3.51846 7.00106C3.34294 7.30471 3.25036 7.64918 3.25 7.9999V15.9999C3.25036 16.3506 3.34294 16.6951 3.51846 16.9987C3.69398 17.3024 3.94626 17.5545 4.25 17.7299L11.25 21.7299C11.554 21.9054 11.8989 21.9979 12.25 21.9979C12.6011 21.9979 12.946 21.9054 13.25 21.7299L20.25 17.7299C20.5537 17.5545 20.806 17.3024 20.9815 16.9987C21.1571 16.6951 21.2496 16.3506 21.25 15.9999Z" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.54004 7L12.25 12L20.96 7" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.25 22V12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/admin-dashboard/icons/dollarSign.svg b/public/admin-dashboard/icons/dollarSign.svg
new file mode 100644
index 000000000..a6c75e629
--- /dev/null
+++ b/public/admin-dashboard/icons/dollarSign.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.75 2V22" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.75 5H10.25C9.32174 5 8.4315 5.36875 7.77513 6.02513C7.11875 6.6815 6.75 7.57174 6.75 8.5C6.75 9.42826 7.11875 10.3185 7.77513 10.9749C8.4315 11.6313 9.32174 12 10.25 12H15.25C16.1783 12 17.0685 12.3687 17.7249 13.0251C18.3813 13.6815 18.75 14.5717 18.75 15.5C18.75 16.4283 18.3813 17.3185 17.7249 17.9749C17.0685 18.6313 16.1783 19 15.25 19H6.75" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/admin-dashboard/icons/user.svg b/public/admin-dashboard/icons/user.svg
new file mode 100644
index 000000000..5a3075414
--- /dev/null
+++ b/public/admin-dashboard/icons/user.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 21V19C19.5 17.9391 19.0786 16.9217 18.3284 16.1716C17.5783 15.4214 16.5609 15 15.5 15H9.5C8.43913 15 7.42172 15.4214 6.67157 16.1716C5.92143 16.9217 5.5 17.9391 5.5 19V21" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 11C14.7091 11 16.5 9.20914 16.5 7C16.5 4.79086 14.7091 3 12.5 3C10.2909 3 8.5 4.79086 8.5 7C8.5 9.20914 10.2909 11 12.5 11Z" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/app/dashboard/(admin)/_components/layout/Sidebar/index.tsx b/src/app/dashboard/(admin)/_components/layout/Sidebar/index.tsx
index 8a5c04adf..715c4ce55 100644
--- a/src/app/dashboard/(admin)/_components/layout/Sidebar/index.tsx
+++ b/src/app/dashboard/(admin)/_components/layout/Sidebar/index.tsx
@@ -1,6 +1,14 @@
 "use client";
 
-import { Box, House, LucideProps, Mail, Settings, Users } from "lucide-react";
+import {
+  Box,
+  House,
+  List,
+  LucideProps,
+  Mail,
+  Settings,
+  Users,
+} from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { FC, ForwardRefExoticComponent, RefAttributes } from "react";
@@ -10,43 +18,43 @@ import DashboardLogo from "../logo";
 const sideItems = [
   {
     route: "Dashboard",
-    link: "/admin/dashboard",
+    link: "/dashboard/admin/dashboard",
     icon: House,
     id: "dashboard",
   },
   {
     route: "Products",
-    link: "/admin/products",
+    link: "/dashboard/admin/products",
     icon: Box,
     id: "products",
   },
   {
     route: "Users",
-    link: "/admin/users",
+    link: "/dashboard/admin/users",
     icon: Users,
     id: "users",
   },
   {
     route: "Email Templates",
-    link: "/admin/email",
+    link: "/dashboard/admin/email",
     icon: Mail,
     id: "email",
   },
   {
     route: "Squeeze Pages",
-    link: "/admin/squeeze-pages",
+    link: "/dashboard/admin/squeeze-pages",
     icon: Users,
     id: "squeeze",
   },
   {
     route: "Waitlist Page",
-    link: "/admin/waitlist-page",
-    icon: Mail,
+    link: "/dashboard/admin/waitlist-page",
+    icon: List,
     id: "waitlist",
   },
   {
     route: "Settings",
-    link: "/admin/settings",
+    link: "/dashboard/admin/settings",
     icon: Settings,
     id: "settings",
   },
@@ -67,18 +75,19 @@ const Sidebar: FC<Iproperties> = ({
   currenPathName,
 }) => {
   const pathname = usePathname();
-  const currentPath = pathname?.split("/")[2];
+  const currentPath = pathname?.split("/")[3];
+
   return (
-    <div className="flex flex-col items-center justify-start border-r bg-muted/40 md:block md:px-4">
+    <div className="fixed bottom-0 left-0 top-0 z-50 flex h-screen w-[50px] flex-col items-center justify-start border-r bg-[#FDFDFD] md:block md:w-[220px] md:px-4 lg:w-[252px]">
       <DashboardLogo />
-      <section className="flex flex-col items-center gap-5 pt-6 md:items-stretch">
+      <section className="flex flex-col items-center gap-y-3 pt-6 md:items-stretch">
         {sideNavitems.map((item, index) => (
           <Link
             key={index}
             href={item.link}
             data-testid={item.id}
             role="sidebar-link"
-            className={`${currenPathName || currentPath === item.id ? "bg-primary text-white" : "bg-transparent text-neutral-dark-2"} flex h-10 w-10 items-center justify-center gap-3 rounded-full px-2.5 py-4 transition-all duration-300 hover:bg-primary hover:text-white md:h-auto md:w-auto md:justify-start md:rounded-[8px]`}
+            className={`${currenPathName || currentPath === item.id ? "bg-primary text-white" : "bg-transparent text-neutral-dark-2 hover:bg-gray-200"} flex items-center justify-center gap-2.5 rounded-full px-2.5 py-3 text-sm transition-all duration-300 ease-in md:h-auto md:w-auto md:justify-start md:rounded-sm`}
           >
             <item.icon className="h-5 w-5" role="sidebar-icon" />
             <span className="hidden md:block">{item.route}</span>
diff --git a/src/app/dashboard/(admin)/_components/layout/Sidebar/sidebar.test.tsx b/src/app/dashboard/(admin)/_components/layout/Sidebar/sidebar.test.tsx
index 4c35021e9..9a0355ec8 100644
--- a/src/app/dashboard/(admin)/_components/layout/Sidebar/sidebar.test.tsx
+++ b/src/app/dashboard/(admin)/_components/layout/Sidebar/sidebar.test.tsx
@@ -1,48 +1,48 @@
-import Sidebar from ".";
-import { Box, House, Mail, Settings, Users } from "lucide-react";
+import { Box, House, List, Mail, Settings, Users } from "lucide-react";
 
 import { render, screen } from "~/test/utils";
+import Sidebar from "./index";
 
 const sideItems = [
   {
     route: "Dashboard",
-    link: "/admin/dashboard",
+    link: "/dashboard/admin/dashboard",
     icon: House,
     id: "dashboard",
   },
   {
     route: "Products",
-    link: "/admin/products",
+    link: "/dashboard/admin/products",
     icon: Box,
     id: "products",
   },
   {
     route: "Users",
-    link: "/admin/users",
+    link: "/dashboard/admin/users",
     icon: Users,
     id: "users",
   },
   {
     route: "Email Templates",
-    link: "/admin/email",
+    link: "/dashboard/admin/email",
     icon: Mail,
     id: "email",
   },
   {
     route: "Squeeze Pages",
-    link: "/admin/squeeze-pages",
+    link: "/dashboard/admin/squeeze-pages",
     icon: Users,
     id: "squeeze",
   },
   {
     route: "Waitlist Page",
-    link: "/admin/waitlist-page",
-    icon: Mail,
+    link: "/dashboard/admin/waitlist-page",
+    icon: List,
     id: "waitlist",
   },
   {
     route: "Settings",
-    link: "/admin/settings",
+    link: "/dashboard/admin/settings",
     icon: Settings,
     id: "settings",
   },
diff --git a/src/app/dashboard/(admin)/_components/layout/navbar/index.tsx b/src/app/dashboard/(admin)/_components/layout/navbar/index.tsx
index 5b8f3d713..8c2ba1c8e 100644
--- a/src/app/dashboard/(admin)/_components/layout/navbar/index.tsx
+++ b/src/app/dashboard/(admin)/_components/layout/navbar/index.tsx
@@ -10,8 +10,11 @@ import UnreadNotificationCard from "../../unread-notification-card/UnreadNotific
 
 const DashboardNavbar = () => {
   return (
-    <nav className="border-b-[0.5px] border-border" role="navbar">
-      <div className="flex items-center justify-between gap-2 bg-background px-[10px] py-[14px]">
+    <nav
+      className="fixed left-[50px] right-0 top-0 z-50 border-b-[0.5px] border-border md:left-[220px] lg:left-[252px]"
+      role="navbar"
+    >
+      <div className="flex items-center justify-between gap-2 bg-[#FDFDFD] px-[10px] py-[14px]">
         <div className="flex h-10 items-center justify-between gap-2 rounded-[6px] border border-border bg-white px-3 text-sm font-normal placeholder:text-sm">
           <SearchIcon
             data-testid="search"
@@ -23,7 +26,7 @@ const DashboardNavbar = () => {
             data-testid="input"
           />
         </div>
-        <div className="flex w-full max-w-[152px] items-center justify-between gap-1">
+        <div className="flex items-center justify-between gap-1 md:gap-2 lg:gap-4">
           <div className="relative flex items-center justify-center">
             <Popover>
               <PopoverTrigger>
diff --git a/src/app/dashboard/(admin)/admin/dashboard/client.tsx b/src/app/dashboard/(admin)/admin/dashboard/client.tsx
new file mode 100644
index 000000000..676bccc57
--- /dev/null
+++ b/src/app/dashboard/(admin)/admin/dashboard/client.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import CardComponent from "~/components/adminDashboard/CardComponent";
+import { cardData } from "~/components/adminDashboard/cardData";
+import { Chart } from "~/components/adminDashboard/Chart";
+import { chartConfig, chartData } from "~/components/adminDashboard/chartData";
+import { data, gradients } from "~/components/adminDashboard/productData";
+import TopProductsComponent from "~/components/adminDashboard/TopProductsComponent";
+import { Card } from "~/components/ui/card";
+
+const Client = () => {
+  return (
+    <section>
+      <div className="mb-4 md:mb-0">
+        <div className="flex flex-col items-start justify-start">
+          <h1 className="text-2xl font-bold text-neutral-dark-1">Overview</h1>
+          <p className="text-base font-normal leading-[19.36px] text-neutral-dark-1">
+            Showing records from the last .....
+          </p>
+        </div>
+      </div>
+
+      <div className="mb-6 mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {cardData.map((card, index) => (
+          <CardComponent
+            key={index}
+            title={card.title}
+            value={card.value}
+            description={card.description}
+            icon={card.icon}
+          />
+        ))}
+      </div>
+
+      <div className="mt-8 flex w-full flex-col gap-4 xl:flex-row">
+        <Card className="basis-2/3 rounded-xl border border-border bg-white px-[24px] pb-[28px] pt-[23px] shadow-spread">
+          <h2 className="mb-2 ml-3 text-base font-semibold leading-[19.36px] text-zinc-950">
+            Overview
+          </h2>
+          <Chart chartData={chartData} chartConfig={chartConfig} />
+        </Card>
+        <TopProductsComponent data={data} gradients={gradients} />
+      </div>
+    </section>
+  );
+};
+
+export default Client;
diff --git a/src/app/dashboard/(admin)/admin/dashboard/page.tsx b/src/app/dashboard/(admin)/admin/dashboard/page.tsx
index 2779a4430..1f476ebc5 100644
--- a/src/app/dashboard/(admin)/admin/dashboard/page.tsx
+++ b/src/app/dashboard/(admin)/admin/dashboard/page.tsx
@@ -1,5 +1,13 @@
-const page = () => {
-  return <div>Admin dashboard</div>;
+import Client from "./client";
+
+export const metadata = {
+  title: "Dashboard",
+  description:
+    "Super Admin Dashboard using ShadCN UI components, adhering to design specifications and best practices for accessibility.",
+};
+
+const AdminDashboardPage = () => {
+  return <Client />;
 };
 
-export default page;
+export default AdminDashboardPage;
diff --git a/src/app/dashboard/(admin)/layout.tsx b/src/app/dashboard/(admin)/layout.tsx
index 05f695776..f348cb15d 100644
--- a/src/app/dashboard/(admin)/layout.tsx
+++ b/src/app/dashboard/(admin)/layout.tsx
@@ -9,11 +9,11 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="grid min-h-screen grid-cols-[60px_1fr] md:grid-cols-[252px_1fr]">
+    <div className="min-h-screen w-full pl-[50px] md:pl-[220px] lg:pl-[252px]">
       <Sidebar />
-      <div className="grid grid-rows-[auto_1fr]">
-        <DashboardNavbar />
-        <main className="p-8">
+      <DashboardNavbar />
+      <div className="">
+        <main className="mt-12 p-3 pt-6 md:p-5 md:pt-8">
           <Suspense>{children}</Suspense>
         </main>
       </div>
diff --git a/src/components/adminDashboard/CardComponent.tsx b/src/components/adminDashboard/CardComponent.tsx
new file mode 100644
index 000000000..9e2fca3ed
--- /dev/null
+++ b/src/components/adminDashboard/CardComponent.tsx
@@ -0,0 +1,47 @@
+import Image from "next/image";
+import { FC } from "react";
+
+interface CardProperties {
+  title: string;
+  value: string;
+  description: string;
+  icon: string;
+}
+
+const CardComponent: FC<CardProperties> = ({
+  title,
+  value,
+  description,
+  icon,
+}) => {
+  return (
+    <>
+      <div className="rounded-xl bg-white px-[24px] pb-[28px] pt-[23px] shadow-spread ring-1 ring-border">
+        <div className="flex flex-row items-center justify-between">
+          <h4 className="text-sm font-[500] leading-[16.94px] text-neutral-dark-2">
+            {title}
+          </h4>
+
+          <Image
+            src={icon}
+            alt={title}
+            width={24}
+            height={24}
+            className="mr-2"
+          />
+        </div>
+
+        <div className="mt-1">
+          <h2 className="text-2xl font-semibold leading-[29.05px] text-neutral-dark-2">
+            {value}
+          </h2>
+          <small className="mt-0 text-xs leading-[14.52px] text-neutral-dark-1">
+            {description}
+          </small>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CardComponent;
diff --git a/src/components/adminDashboard/Chart.tsx b/src/components/adminDashboard/Chart.tsx
new file mode 100644
index 000000000..52f0a9f6a
--- /dev/null
+++ b/src/components/adminDashboard/Chart.tsx
@@ -0,0 +1,58 @@
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import { CardContent } from "~/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "~/components/ui/chart";
+
+type ChartProperties = {
+  chartData: { month: string; revenue: number }[];
+  chartConfig: ChartConfig;
+};
+
+export function Chart({ chartData = [], chartConfig }: ChartProperties) {
+  return (
+    <>
+      <div className="h-full w-full">
+        <CardContent className="h-full w-full pl-0">
+          <ChartContainer className="h-full w-full p-0" config={chartConfig}>
+            <BarChart
+              className="w-full"
+              accessibilityLayer
+              data={chartData}
+              margin={{ top: 20, bottom: 2 }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="month"
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                tickFormatter={(value) => value.slice(0, 3)}
+              />
+              <YAxis
+                ticks={[0, 1500, 3000, 4500, 6000]}
+                axisLine={false}
+                tickLine={false}
+                tickFormatter={(value) => `$${value}`}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent hideLabel />}
+              />
+              <Bar
+                dataKey="revenue"
+                fill="var(--color-desktop)"
+                radius={8}
+                data-testid="bar"
+              />
+            </BarChart>
+          </ChartContainer>
+        </CardContent>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/adminDashboard/TopProductsComponent.tsx b/src/components/adminDashboard/TopProductsComponent.tsx
new file mode 100644
index 000000000..d25f26505
--- /dev/null
+++ b/src/components/adminDashboard/TopProductsComponent.tsx
@@ -0,0 +1,83 @@
+import Image from "next/image";
+import React from "react";
+
+import { Card } from "../ui/card";
+
+type ProductData = {
+  name: string;
+  amount: string;
+};
+
+type TopProductsProperties = {
+  data: ProductData[];
+  gradients: string[];
+};
+
+const ExternalLinkIcon = () => {
+  return (
+    <>
+      <Image
+        src="/admin-dashboard/icons/arrowUp.svg"
+        alt="external link icon"
+        height={16}
+        width={16}
+        className="invert"
+      />
+    </>
+  );
+};
+
+const TopProductsComponent: React.FC<TopProductsProperties> = ({
+  data,
+  gradients,
+}) => {
+  return (
+    <Card className="basis-1/2 rounded-xl border border-border bg-white p-3 md:p-5">
+      <div className="mb-6 flex items-center justify-between">
+        <div className="flex flex-col items-start gap-2">
+          <h2 className="text-xl font-semibold text-neutral-dark-2 md:text-2xl">
+            Top Products
+          </h2>
+          <p className="text-xs font-normal text-neutral-dark-1">
+            Your top selling products appear here.
+          </p>
+        </div>
+        <button className="flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-orange-500 px-4 py-2 text-sm font-medium text-neutral-50">
+          <div className="text-base font-[500] leading-[24px]">View All</div>
+          <ExternalLinkIcon />
+        </button>
+      </div>
+      <ul className="text-[#0A0A0A]">
+        {data.map((item, index) => (
+          <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-md"
+                style={{ background: gradients[index % gradients.length] }}
+              />
+              <div>
+                <p
+                  data-testid={`product-name-${index}`}
+                  className="text-xs font-medium md:text-base"
+                >
+                  {item.name}
+                </p>
+              </div>
+            </div>
+            <p
+              data-testid={`product-amount-${index}`}
+              className="text-[16px] font-semibold"
+            >
+              {item.amount}
+            </p>
+          </li>
+        ))}
+      </ul>
+    </Card>
+  );
+};
+
+export default TopProductsComponent;
diff --git a/src/components/adminDashboard/cardData.ts b/src/components/adminDashboard/cardData.ts
new file mode 100644
index 000000000..96692068e
--- /dev/null
+++ b/src/components/adminDashboard/cardData.ts
@@ -0,0 +1,33 @@
+type CardData = {
+  title: string;
+  value: string;
+  description: string;
+  icon: string;
+};
+
+export const cardData: CardData[] = [
+  {
+    title: "Total Revenue",
+    value: "$45,000.00",
+    description: "+20% from last month",
+    icon: `/admin-dashboard/icons/dollarSign.svg`,
+  },
+  {
+    title: "Total Users",
+    value: "+4,000",
+    description: "+10% from last month",
+    icon: `/admin-dashboard/icons/user.svg`,
+  },
+  {
+    title: "Total Products",
+    value: "1,000",
+    description: "+20% from last month",
+    icon: `/admin-dashboard/icons/box.svg`,
+  },
+  {
+    title: "Lifetime Sales",
+    value: "$450,000.00",
+    description: "+150% from last month",
+    icon: `/admin-dashboard/icons/arrowUp.svg`,
+  },
+];
diff --git a/src/components/adminDashboard/chartData.ts b/src/components/adminDashboard/chartData.ts
new file mode 100644
index 000000000..4314df6e2
--- /dev/null
+++ b/src/components/adminDashboard/chartData.ts
@@ -0,0 +1,30 @@
+import { ChartConfig } from "~/components/ui/chart";
+
+export const generateRandomRevenue = () =>
+  (Math.floor(Math.random() * 11) + 1) * 500;
+
+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() },
+];
+
+export const chartConfig: ChartConfig = {
+  desktop: {
+    label: "Revenue",
+    color: "#F97316",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "#F97316",
+  },
+};
diff --git a/src/components/adminDashboard/productData.ts b/src/components/adminDashboard/productData.ts
new file mode 100644
index 000000000..697e26b0f
--- /dev/null
+++ b/src/components/adminDashboard/productData.ts
@@ -0,0 +1,37 @@
+const data = [
+  {
+    name: "The Lemonade blender",
+    amount: "500 sales",
+  },
+  {
+    name: "Bean Cake Powder",
+    amount: "250 sales",
+  },
+  {
+    name: "Flour Mixer",
+    amount: "230 sales",
+  },
+  {
+    name: "Blender",
+    amount: "500 sales",
+  },
+  {
+    name: "A Food Product",
+    amount: "150 sales",
+  },
+  {
+    name: "Cake Powder",
+    amount: "100 sales",
+  },
+];
+
+const gradients = [
+  " linear-gradient(180deg, #F6C790 0%, #E77F1E 100%)",
+  "linear-gradient(180deg, #D6F690 0%, #D7E71E 100%)",
+  "linear-gradient(180deg, #9290F6 0%, #461EE7 100%)",
+  " linear-gradient(180deg, #F690A8 0%, #E71E4E 100%)",
+  "linear-gradient(180deg, #B4F690 0%, #64E71E 100%)",
+  "linear-gradient(180deg, #E990F6 0%, #CB1EE7 100%)",
+];
+
+export { data, gradients };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 6b39931f0..153881b0a 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -36,8 +36,8 @@ const CardTitle = React.forwardRef<
   <h3
     ref={reference}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
       className,
+      "text-2xl font-semibold leading-none tracking-tight",
     )}
     {...properties}
   />
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
new file mode 100644
index 000000000..94664dbb6
--- /dev/null
+++ b/src/components/ui/chart.tsx
@@ -0,0 +1,367 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "~/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProperties = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProperties | undefined>(
+  undefined,
+);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
+  }
+>(({ id, className, children, config, ...properties }, reference) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replaceAll(":", "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={reference}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...properties}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (colorConfig.length === 0) {
+    return;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : undefined;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    reference,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={reference}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {nestLabel ? undefined : tooltipLabel}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            },
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : undefined}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    reference,
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return;
+    }
+
+    return (
+      <div
+        ref={reference}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className,
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};