diff --git a/apps/backoffice/public/gacha-clip.png b/apps/backoffice/public/gacha-clip.png
deleted file mode 100644
index 9fe05c0..0000000
Binary files a/apps/backoffice/public/gacha-clip.png and /dev/null differ
diff --git a/apps/backoffice/public/gacha-clip.webp b/apps/backoffice/public/gacha-clip.webp
new file mode 100644
index 0000000..65f37d3
Binary files /dev/null and b/apps/backoffice/public/gacha-clip.webp differ
diff --git a/apps/backoffice/public/gacha.png b/apps/backoffice/public/gacha.png
deleted file mode 100644
index 04a57c3..0000000
Binary files a/apps/backoffice/public/gacha.png and /dev/null differ
diff --git a/apps/backoffice/public/gacha.webp b/apps/backoffice/public/gacha.webp
new file mode 100644
index 0000000..b41964e
Binary files /dev/null and b/apps/backoffice/public/gacha.webp differ
diff --git a/apps/backoffice/src/app/accounts/layout.tsx b/apps/backoffice/src/app/accounts/layout.tsx
index 5d2c643..a770c99 100644
--- a/apps/backoffice/src/app/accounts/layout.tsx
+++ b/apps/backoffice/src/app/accounts/layout.tsx
@@ -7,7 +7,7 @@ export const AppLayout: FC = (): ReactElement => {
     <div className="bg-primary-50 min-h-screen flex justify-center">
       <div className="bg-primary-50 min-h-screen w-full flex">
         <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
           <Outlet />
         </div>
       </div>
diff --git a/apps/backoffice/src/app/dashboard/layout.tsx b/apps/backoffice/src/app/dashboard/layout.tsx
index 5d2c643..a770c99 100644
--- a/apps/backoffice/src/app/dashboard/layout.tsx
+++ b/apps/backoffice/src/app/dashboard/layout.tsx
@@ -7,7 +7,7 @@ export const AppLayout: FC = (): ReactElement => {
     <div className="bg-primary-50 min-h-screen flex justify-center">
       <div className="bg-primary-50 min-h-screen w-full flex">
         <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
           <Outlet />
         </div>
       </div>
diff --git a/apps/backoffice/src/app/dashboard/page.tsx b/apps/backoffice/src/app/dashboard/page.tsx
index d1f76c6..09fc3ba 100644
--- a/apps/backoffice/src/app/dashboard/page.tsx
+++ b/apps/backoffice/src/app/dashboard/page.tsx
@@ -1,4 +1,10 @@
-import { ArrowDownOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  PlusOutlined,
+  ReloadOutlined,
+  UsergroupAddOutlined,
+  UsergroupDeleteOutlined,
+  UserSwitchOutlined,
+} from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { FC, ReactElement } from 'react';
 
@@ -18,23 +24,51 @@ export const Components: FC = (): ReactElement => {
               Summary
             </h2>
             <div className="grid grid-cols-2 gap-4">
-              {/* Summary Cards */}
-              {[1, 2, 3, 4].map((item) => (
-                <div
-                  key={item}
-                  className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100"
-                >
-                  <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
-                    <ArrowDownOutlined className="text-[20px]" />
-                  </div>
-                  <div className="flex flex-col gap-1">
-                    <h3 className="text-p1 font-semibold">1000</h3>
-                    <p className="text-label1 text-neutral-500">
-                      Total Participants
-                    </p>
-                  </div>
+              {/* Participants */}
+              <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                  <UsergroupAddOutlined className="text-[20px]" />
                 </div>
-              ))}
+                <div className="flex flex-col gap-1">
+                  <h3 className="text-p1 font-semibold">1000</h3>
+                  <p className="text-label1 text-neutral-500">Participants</p>
+                </div>
+              </div>
+
+              {/* Roll and Reroll */}
+              <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                  <ReloadOutlined className="text-[20px]" />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <h3 className="text-p1 font-semibold">1000</h3>
+                  <p className="text-label1 text-neutral-500">
+                    Roll and Reroll
+                  </p>
+                </div>
+              </div>
+
+              {/* Redeem */}
+              <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                  <UserSwitchOutlined className="text-[20px]" />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <h3 className="text-p1 font-semibold">1000</h3>
+                  <p className="text-label1 text-neutral-500">Redeem</p>
+                </div>
+              </div>
+
+              {/* Inactive Users */}
+              <div className="bg-white rounded-lg shadow-sm py-4 px-6 flex items-center border border-neutral-100">
+                <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded-md">
+                  <UsergroupDeleteOutlined className="text-[20px]" />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <h3 className="text-p1 font-semibold">1000</h3>
+                  <p className="text-label1 text-neutral-500">Inactive Users</p>
+                </div>
+              </div>
             </div>
           </section>
 
@@ -78,7 +112,7 @@ export const Components: FC = (): ReactElement => {
                       <Button
                         variant="text"
                         size="sm"
-                        className="text-[10px] text-neutral-500 p-0 font-normal hover:bg-transparent hover:text-red-500"
+                        className="text-[10px] text-red-500 p-0 font-normal hover:bg-transparent hover:text-red-700"
                       >
                         Delete
                       </Button>
@@ -87,7 +121,7 @@ export const Components: FC = (): ReactElement => {
 
                   {/* Lebih baik gunakan gambar yang sudah di-clip dengan size height: 78px daripada hard-code object-position dan margin */}
                   <img
-                    src="gacha-clip.png"
+                    src="gacha-clip.webp"
                     alt="Lanyard IMPHNEN"
                     className="h-full"
                   />
@@ -99,7 +133,7 @@ export const Components: FC = (): ReactElement => {
 
         {/* Right-side illustration */}
         <img
-          src="gacha.png"
+          src="gacha.webp"
           alt=""
           className="rounded-lg hidden xl:block xl:min-w-[436px] h-auto object-cover"
         />
diff --git a/apps/backoffice/src/app/transactions/layout.tsx b/apps/backoffice/src/app/transactions/layout.tsx
index 5d2c643..a770c99 100644
--- a/apps/backoffice/src/app/transactions/layout.tsx
+++ b/apps/backoffice/src/app/transactions/layout.tsx
@@ -7,7 +7,7 @@ export const AppLayout: FC = (): ReactElement => {
     <div className="bg-primary-50 min-h-screen flex justify-center">
       <div className="bg-primary-50 min-h-screen w-full flex">
         <BackofficeSidebar />
-        <div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] 2xl:max-w-[1280px] mx-auto">
           <Outlet />
         </div>
       </div>
diff --git a/libs/ui/src/organisms/datatable/datatable.tsx b/libs/ui/src/organisms/datatable/datatable.tsx
index dddbcf5..3a3a425 100644
--- a/libs/ui/src/organisms/datatable/datatable.tsx
+++ b/libs/ui/src/organisms/datatable/datatable.tsx
@@ -5,6 +5,7 @@ import {
   getPaginationRowModel,
   flexRender,
   ColumnDef,
+  Table,
 } from '@tanstack/react-table';
 import { Pagination } from '../../molecules';
 
@@ -13,6 +14,7 @@ import React from 'react';
 interface DataTableProps<T> {
   data: T[];
   columns: ColumnDef<T>[];
+  table: Table<T>;
   pageSize?: number;
 }