diff --git a/app/components/ui/chart.tsx b/app/components/ui/chart.tsx
new file mode 100644
index 0000000..ed1074a
--- /dev/null
+++ b/app/components/ui/chart.tsx
@@ -0,0 +1,66 @@
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+  type ChartOptions,
+} from 'chart.js'
+import { Pie } from 'react-chartjs-2'
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+export const ChartPie = () => {
+  const data = {
+    labels: [
+      'Pidana',
+      'Perdata',
+      'Perceraian',
+      'Surat Bisnis',
+      'Surat Tanah',
+      'Lainnya',
+    ],
+    datasets: [
+      {
+        data: [33.7, 13, 22.8, 9.3, 9.3, 21.2],
+        backgroundColor: [
+          '#FFB300',
+          '#4CAF50',
+          '#3F51B5',
+          '#F44336',
+          '#2196F3',
+          '#FF9800',
+        ],
+        hoverOffset: 4,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'pie'> = {
+    maintainAspectRatio: true,
+    responsive: false,
+    plugins: {
+      legend: {
+        position: 'right',
+        labels: {
+          usePointStyle: true,
+          pointStyle: 'circle',
+          padding: 20,
+        },
+      },
+    },
+    layout: {
+      padding: 0,
+    },
+  }
+
+  return (
+    <div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 text-center">
+      <h2 className="text-xl font-bold">Top 5 Konten</h2>
+      <Pie
+        height={225}
+        width={450}
+        data={data}
+        options={options}
+      />
+    </div>
+  )
+}
diff --git a/app/pages/dashboard/index.tsx b/app/pages/dashboard/index.tsx
index a9b8029..72edebc 100644
--- a/app/pages/dashboard/index.tsx
+++ b/app/pages/dashboard/index.tsx
@@ -1,68 +1,55 @@
 import { CardReport } from '~/components/ui/card-report'
+import { ChartPie } from '~/components/ui/chart'
 
 import { HISTORY, REPORT } from './data'
 export const DashboardPage = () => {
   return (
     <div className="relative">
-      <div className="container mx-auto">
-        <section className="mb-5 flex items-center justify-between">
-          <h1 className="text-xl font-bold">Dashboard</h1>
-          <div className="flex items-center gap-2">
-            <span>Tanggal:</span>
-            <input
-              type="date"
-              className="rounded border p-2"
-            />
-            <input
-              type="date"
-              className="rounded border p-2"
-            />
-          </div>
-        </section>
+      <div className="mt-5 grid grid-cols-1 grid-rows-1 gap-6 sm:grid-cols-3">
+        {REPORT.map(({ title, amount, icon }, index) => (
+          <CardReport
+            key={index}
+            title={title}
+            amount={amount}
+            icon={icon}
+          />
+        ))}
+      </div>
 
-        <div className="mb-5 grid grid-cols-3 gap-4">
-          {REPORT.map(({ title, amount, icon }, index) => (
-            <CardReport
-              key={index}
-              title={title}
-              amount={amount}
-              icon={icon}
-            />
-          ))}
+      <div className="mt-5 grid grid-cols-1 gap-6 sm:grid-cols-3 sm:grid-rows-2">
+        {HISTORY.map(({ title, amount, icon, counter }, index) => (
+          <CardReport
+            key={index}
+            title={title}
+            amount={amount}
+            icon={icon}
+            counter={counter}
+          />
+        ))}
+        <div className="max-h-[300px] sm:col-span-2 sm:col-start-2 sm:row-span-2 sm:row-start-1">
+          <ChartPie />
         </div>
+      </div>
 
-        <div className="grid grid-cols-3 gap-x-4 gap-y-4">
-          <div className="grid gap-y-4">
-            {HISTORY.map(({ title, amount, icon, counter }, index) => (
-              <CardReport
-                key={index}
-                title={title}
-                amount={amount}
-                icon={icon}
-                counter={counter}
+      <div className="my-5 grid grid-cols-1 grid-rows-2 gap-6 sm:grid-cols-5 sm:grid-rows-1">
+        <div className="sm:col-span-3">
+          <div className="h-30 w-full">
+            <div className="shadow-sm">
+              <img
+                src="/images/dummy-chart-1.svg"
+                alt=""
               />
-            ))}
-          </div>
-          <div className="col-span-2">
-            <img
-              src="/images/dummy-chart-2.svg"
-              alt=""
-            />
+            </div>
           </div>
         </div>
-
-        <div className="mt-5 flex justify-between gap-5">
-          <div className="w-[600px] shadow-sm">
-            <img
-              src="/images/dummy-chart-1.svg"
-              alt=""
-            />
-          </div>
-          <div className="w-[480px] shadow-sm">
-            <img
-              src="/images/dummy-chart-3.svg"
-              alt=""
-            />
+        <div className="sm:col-span-2 sm:col-start-4">
+          <div className="h-30 w-full">
+            <div className="shadow-sm">
+              <img
+                src="/images/dummy-chart-3.svg"
+                alt=""
+              />
+            </div>
           </div>
         </div>
       </div>