diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
deleted file mode 100644
index 44e7e25..0000000
--- a/src/pages/Home.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { useEffect } from 'react';
-import { useAppDispatch } from '../app/hooks';
-import { useGetDashboardQuery } from '../services/dashboardApi';
-import { setBreadcrumb } from '../features/breadcrumbSlice';
-import Breadcrumb from '../components/Breadcrumb';
-import { showErrorToast } from '../components/Toast';
-
-import type { Game, School } from '../types';
-import { getPercentage } from '../utilities/numberUtils';
-
-function Home() {
-  const dispatch = useAppDispatch();
-  const {
-    data: dashboards,
-    isLoading,
-    isSuccess,
-    isError,
-  } = useGetDashboardQuery();
-
-  if (isError) {
-    showErrorToast('Gagal memuat data');
-  }
-
-  useEffect(() => {
-    dispatch(setBreadcrumb([]));
-  }, [dispatch]);
-
-  return (
-    <div className="">
-      <div className="mb-6">
-        <Breadcrumb />
-        <h5 className="font-semibold text-3xl mb-1.5">Home (Test)</h5>
-        <p className="text-gray-500">Selamat datang di Dashboard Gameon.</p>
-      </div>
-      <div className="bg-white p-5 rounded-xl dark:bg-gray-800">
-        {isLoading && <p>Loading...</p>}
-        {isSuccess && (
-          <div className="mb-12">
-            <h3 className="mb-4 text-lg font-semibold">Analitik</h3>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-              <div className="bg-gray-100 p-4 rounded-lg dark:bg-gray-700">
-                <div className="grid grid-cols-2 gap-y-3">
-                  <div className="">
-                    <h5 className="text-2xl font-bold mb-0.5">
-                      {dashboards?.data?.gameCount}
-                    </h5>
-                    <h5 className="mb-0.5">Total Permainan</h5>
-                  </div>
-                </div>
-              </div>
-              <div className="bg-gray-100 p-4 rounded-lg dark:bg-gray-700">
-                <div className="grid grid-cols-2 gap-y-3">
-                  <div className="">
-                    <h5 className="text-2xl font-bold mb-0.5">
-                      {dashboards?.data?.schoolCount}
-                    </h5>
-                    <h5 className="mb-0.5">Total Sekolah</h5>
-                  </div>
-                </div>
-              </div>
-              <div className="bg-gray-100 p-4 rounded-lg dark:bg-gray-700">
-                <div className="grid grid-cols-2 gap-y-3">
-                  <div className="">
-                    <h5 className="text-2xl font-bold mb-0.5">
-                      {dashboards?.data?.adminCount}
-                    </h5>
-                    <h5 className="mb-0.5">Total Admin</h5>
-                    <p className="text-gray-400 text-xs">
-                      {dashboards?.data?.activeAdmin} admin aktif
-                    </p>
-                  </div>
-                  <div className="">
-                    <p className="text-2xl font-bold">
-                      {getPercentage(
-                        dashboards?.data?.activeAdmin,
-                        dashboards?.data?.adminCount
-                      )}
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="bg-gray-100 p-4 rounded-lg dark:bg-gray-700">
-                <div className="grid grid-cols-2 gap-y-3">
-                  <div className="">
-                    <h5 className="text-2xl font-bold mb-0.5">
-                      {dashboards?.data?.studentsCount}
-                    </h5>
-                    <h5 className="mb-0.5">Total Siswa</h5>
-                    <p className="text-gray-400 text-xs">
-                      {dashboards?.data?.activeStudents} siswa aktif
-                    </p>
-                  </div>
-                  <div className="">
-                    <p className="text-2xl font-bold">
-                      {' '}
-                      {getPercentage(
-                        dashboards?.data?.activeStudents,
-                        dashboards?.data?.studentsCount
-                      )}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-        {isSuccess && (
-          <div className="mb-12">
-            <h3 className="mb-4 text-lg font-semibold">Permainan</h3>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-              {dashboards?.data?.games?.map((game: Game) => (
-                <div
-                  key={game._id}
-                  className="bg-gray-100 p-4 rounded-lg dark:bg-gray-700">
-                  <h5 className="mb-2 text-lg font-semibold">{game.name}</h5>
-                  <p className="text-gray-400">{game.description}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-        {isSuccess && (
-          <div className="mb-3">
-            <h3 className="mb-4 text-lg font-semibold">Sekolah</h3>
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-              {dashboards?.data?.schools?.map((school: School) => (
-                <div
-                  key={school._id}
-                  className="bg-gray-100 p-4 rounded-lg dark:bg-gray-700">
-                  <h5 className="mb-2 text-lg font-semibold">{school.name}</h5>
-                  <p className="text-gray-400">{school.address}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default Home;
diff --git a/src/pages/Home/components/PerformanceWidget.tsx b/src/pages/Home/components/PerformanceWidget.tsx
new file mode 100644
index 0000000..0abe57c
--- /dev/null
+++ b/src/pages/Home/components/PerformanceWidget.tsx
@@ -0,0 +1,80 @@
+import {
+  Gamepad2Icon,
+  GraduationCapIcon,
+  SchoolIcon,
+  UserIcon,
+} from 'lucide-react';
+import { getPercentage } from '../../../utilities/numberUtils';
+
+import type { PerformanceWidgetProps, WidgetIconType } from '../../../types';
+
+function PerformanceWidget({
+  type,
+  countItem,
+  activeItem,
+  name,
+  children,
+}: PerformanceWidgetProps) {
+  const widgetIcon: WidgetIconType = {
+    permainan: (
+      <Gamepad2Icon
+        size={24}
+        className="dark:stroke-gray-200"
+      />
+    ),
+    sekolah: (
+      <SchoolIcon
+        size={24}
+        className="dark:stroke-gray-200"
+      />
+    ),
+    admin: (
+      <UserIcon
+        size={24}
+        className="dark:stroke-gray-200"
+      />
+    ),
+    siswa: (
+      <GraduationCapIcon
+        size={24}
+        className="dark:stroke-gray-200"
+      />
+    ),
+  };
+
+  return (
+    <div className="bg-white p-5 rounded-xl dark:bg-gray-800">
+      <div className={type === 'advanced' ? 'flex justify-between' : ''}>
+        <div className="flex size-10 rounded-lg dark:bg-gray-700/70 items-center justify-center mb-8">
+          {widgetIcon[name as keyof WidgetIconType]}
+        </div>
+        {type === 'advanced' && (
+          <div className="text-right">
+            <p className="font-medium dark:text-gray-200 text-right text-2xl">
+              {getPercentage(activeItem, countItem)}
+            </p>
+            <p className="text-xs dark:text-gray-400">
+              {activeItem} {name} aktif
+            </p>
+          </div>
+        )}
+      </div>
+      <div className={type === 'advanced' ? 'grid grid-cols-2 gap-x-3' : ''}>
+        <div className="">
+          <h5 className="dark:text-gray-400 mb-1 capitalize">
+            Performa {name}
+          </h5>
+          <p className="dark:text-gray-100 text-2xl">
+            {countItem}{' '}
+            <span className="text-lg dark:text-gray-400">
+              {name === 'admin' || name === 'siswa' ? 'orang' : 'item'}
+            </span>
+          </p>
+        </div>
+        {type === 'advanced' && <div className="">{children}</div>}
+      </div>
+    </div>
+  );
+}
+
+export default PerformanceWidget;
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
new file mode 100644
index 0000000..e0503eb
--- /dev/null
+++ b/src/pages/Home/index.tsx
@@ -0,0 +1,94 @@
+import { useEffect } from 'react';
+import { useAppDispatch } from '../../app/hooks';
+import { useGetDashboardQuery } from '../../services/dashboardApi';
+import { setBreadcrumb } from '../../features/breadcrumbSlice';
+import { showErrorToast } from '../../components/Toast';
+import Breadcrumb from '../../components/Breadcrumb';
+import PerformanceWidget from './components/PerformanceWidget';
+
+import type { Game, School } from '../../types';
+
+function Home() {
+  const dispatch = useAppDispatch();
+  const {
+    data: dashboards,
+    isLoading,
+    isSuccess,
+    isError,
+  } = useGetDashboardQuery();
+
+  if (isError) {
+    showErrorToast('Gagal memuat data');
+  }
+
+  useEffect(() => {
+    dispatch(setBreadcrumb([]));
+  }, [dispatch]);
+
+  return (
+    <div className="">
+      <div className="mb-6">
+        <Breadcrumb />
+        <h5 className="font-semibold text-3xl mb-1.5">Home (Test)</h5>
+        <p className="text-gray-500">Selamat datang di Dashboard Gameon.</p>
+      </div>
+      <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-6 gap-4">
+        <PerformanceWidget
+          countItem={dashboards?.data?.gameCount}
+          name="permainan"
+          type="simple"
+        />
+        <PerformanceWidget
+          countItem={dashboards?.data?.schoolCount}
+          name="sekolah"
+          type="simple"
+        />
+        <PerformanceWidget
+          activeItem={dashboards?.data?.activeAdmin}
+          countItem={dashboards?.data?.adminCount}
+          name="admin"
+          type="advanced"></PerformanceWidget>
+        <PerformanceWidget
+          activeItem={dashboards?.data?.activeStudents}
+          countItem={dashboards?.data?.studentsCount}
+          name="siswa"
+          type="advanced"></PerformanceWidget>
+      </div>
+      <div className="bg-white p-5 rounded-xl dark:bg-gray-800">
+        {isLoading && <p>Loading...</p>}
+        {isSuccess && (
+          <div className="mb-12">
+            <h3 className="mb-4 text-lg font-semibold">Permainan</h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+              {dashboards?.data?.games?.map((game: Game) => (
+                <div
+                  key={game._id}
+                  className="bg-gray-100 p-4 rounded-lg dark:bg-gray-700">
+                  <h5 className="mb-2 text-lg font-semibold">{game.name}</h5>
+                  <p className="text-gray-400">{game.description}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        {isSuccess && (
+          <div className="mb-3">
+            <h3 className="mb-4 text-lg font-semibold">Sekolah</h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+              {dashboards?.data?.schools?.map((school: School) => (
+                <div
+                  key={school._id}
+                  className="bg-gray-100 p-4 rounded-lg dark:bg-gray-700">
+                  <h5 className="mb-2 text-lg font-semibold">{school.name}</h5>
+                  <p className="text-gray-400">{school.address}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Home;
diff --git a/src/types/componentType.ts b/src/types/componentType.ts
index 13471d1..65f2eac 100644
--- a/src/types/componentType.ts
+++ b/src/types/componentType.ts
@@ -99,6 +99,14 @@ interface ModalDisplayProps {
   title: string;
 }
 
+interface PerformanceWidgetProps {
+  activeItem?: number;
+  countItem: number | undefined;
+  children?: ReactNode;
+  name: string;
+  type: 'simple' | 'advanced';
+}
+
 export type {
   AlertDialogProps,
   Breadcrumb,
@@ -110,6 +118,7 @@ export type {
   HeaderContainerProps,
   HeaderProfileProps,
   ModalDisplayProps,
+  PerformanceWidgetProps,
   ProfileUserProps,
   ScoreTableProps,
   StudentTableProps,
diff --git a/src/types/utilitiesType.ts b/src/types/utilitiesType.ts
index bbe4857..32cb480 100644
--- a/src/types/utilitiesType.ts
+++ b/src/types/utilitiesType.ts
@@ -12,5 +12,16 @@ interface NormalizedScore {
 interface NormalizeScoreChartDataEntry {
   [key: string]: number | string;
 }
+interface WidgetIconType {
+  permainan: JSX.Element;
+  sekolah: JSX.Element;
+  admin: JSX.Element;
+  siswa: JSX.Element;
+}
 
-export type { NormalizedScore, NormalizeScoreChartDataEntry, ThemeState };
+export type {
+  NormalizedScore,
+  NormalizeScoreChartDataEntry,
+  ThemeState,
+  WidgetIconType,
+};