diff --git a/apps/backoffice/public/gacha.png b/apps/backoffice/public/gacha.png
new file mode 100644
index 0000000..04a57c3
Binary files /dev/null and b/apps/backoffice/public/gacha.png differ
diff --git a/apps/backoffice/src/app/dashboard/page.tsx b/apps/backoffice/src/app/dashboard/page.tsx
index 21b343c..67cb9c4 100644
--- a/apps/backoffice/src/app/dashboard/page.tsx
+++ b/apps/backoffice/src/app/dashboard/page.tsx
@@ -1,130 +1,106 @@
+import { ArrowDownOutlined } from '@ant-design/icons';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { FC, ReactElement } from 'react';
 
 export const Components: FC = (): ReactElement => {
   return (
     <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
       {/* Dashboard Header */}
-      <div className="bg-white rounded-md shadow p-4">
-        <h1 className="text-xl font-medium">Dashboard</h1>
-      </div>
+      <header className="bg-white py-4 px-8 rounded-md shadow p-4">
+        <h1 className="text-p2 font-semibold">Dashboard</h1>
+      </header>
 
-      {/* Summary Section */}
-      <div className="flex flex-col gap-4">
-        <h2 className="text-lg font-medium">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-md shadow p-4 flex items-center"
-            >
-              <div className="mr-4 text-primary-500">
+      <div className="flex justify-between gap-[40px] p-8 bg-white rounded-md">
+        <div className="w-full flex flex-col gap-[40px]">
+          {/* Summary Section */}
+          <section>
+            <h2 className="text-p2 font-medium text-primary-500 mb-8">
+              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-md shadow py-3 px-6 flex items-center"
+                >
+                  <div className="mr-4 text-primary-500 bg-primary-100 p-[8px] rounded border border-neutral-100">
+                    <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>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* Gacha Items Section */}
+          <section className="flex flex-col gap-4">
+            <div className="flex justify-between items-center">
+              <h2 className="text-p2 font-medium text-primary-500">
+                Gacha Items
+              </h2>
+              <Button variant="primary"></Button>
+              <button className="bg-primary-500 text-white px-4 py-2 rounded-md flex items-center gap-2">
+                <span>Tambah Item</span>
                 <svg
-                  className="w-6 h-6"
+                  className="w-4 h-4"
                   viewBox="0 0 24 24"
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path d="M12 4L4 8L12 12L20 8L12 4Z" fill="currentColor" />
-                  <path d="M4 12L12 16L20 12" fill="currentColor" />
-                  <path d="M4 16L12 20L20 16" fill="currentColor" />
+                  <path
+                    d="M12 4V20M4 12H20"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                  />
                 </svg>
-              </div>
-              <div>
-                <h3 className="text-2xl font-bold">1000</h3>
-                <p className="text-sm text-gray-500">Total Participants</p>
-              </div>
+              </button>
             </div>
-          ))}
-        </div>
-      </div>
 
-      {/* Gacha Items Section */}
-      <div className="flex flex-col gap-4">
-        <div className="flex justify-between items-center">
-          <h2 className="text-lg font-medium">Gacha Items</h2>
-          <button className="bg-primary-500 text-white px-4 py-2 rounded-md flex items-center gap-2">
-            <span>Tambah Item</span>
-            <svg
-              className="w-4 h-4"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 4V20M4 12H20"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-              />
-            </svg>
-          </button>
-        </div>
-
-        {/* Gacha Items List */}
-        <div className="flex flex-col gap-4">
-          {[1, 2, 3, 4].map((item) => (
-            <div
-              key={item}
-              className="bg-white rounded-md shadow p-4 flex justify-between items-center"
-            >
-              <div className="flex items-center gap-4">
-                <img
-                  src="/gacha/lanyard-id-card.png"
-                  alt="Lanyard IMPHNEN"
-                  className="w-20 h-20 object-contain"
-                />
-                <div>
-                  <h3 className="font-medium">Lanyard IMPHNEN</h3>
-                  <div className="flex items-center gap-2 text-sm text-gray-500">
-                    <span>Prize {item}</span>
-                    <span>•</span>
-                    <span>Chance Rate: (1%)</span>
+            {/* Gacha Items List */}
+            <div className="flex flex-col gap-4">
+              {[1, 2, 3, 4].map((item) => (
+                <div
+                  key={item}
+                  className="bg-white rounded-md shadow p-4 flex justify-between items-center"
+                >
+                  <div className="flex items-center gap-4">
+                    <img
+                      src="/gacha/lanyard-id-card.png"
+                      alt="Lanyard IMPHNEN"
+                      className="w-20 h-20 object-contain"
+                    />
+                    <div>
+                      <h3 className="font-medium">Lanyard IMPHNEN</h3>
+                      <div className="flex items-center gap-2 text-sm text-gray-500">
+                        <span>Prize {item}</span>
+                        <span>•</span>
+                        <span>Chance Rate: (1%)</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <button className="text-gray-500 hover:text-primary-500">
+                      Edit
+                    </button>
+                    <button className="text-gray-500 hover:text-red-500">
+                      Delete
+                    </button>
                   </div>
                 </div>
-              </div>
-              <div className="flex gap-2">
-                <button className="text-gray-500 hover:text-primary-500">
-                  Edit
-                </button>
-                <button className="text-gray-500 hover:text-red-500">
-                  Delete
-                </button>
-              </div>
+              ))}
             </div>
-          ))}
+          </section>
         </div>
-      </div>
 
-      {/* Right side illustration */}
-      <div className="fixed right-8 bottom-8 pointer-events-none z-0">
-        <div className="grid grid-cols-3 gap-2">
-          <img
-            src="/gacha/lanyard-id-card.png"
-            alt="Lanyard"
-            className="w-24 h-24 object-contain"
-          />
-          <img
-            src="/gacha/pin.png"
-            alt="Pin"
-            className="w-24 h-24 object-contain"
-          />
-          <img
-            src="/gacha/sticker.png"
-            alt="Sticker"
-            className="w-24 h-24 object-contain"
-          />
-          <img
-            src="/gacha/certificate.png"
-            alt="Certificate"
-            className="w-24 h-24 object-contain"
-          />
-          <img
-            src="/gacha/gelang-karet.png"
-            alt="Gelang Karet"
-            className="w-24 h-24 object-contain"
-          />
-        </div>
+        {/* Right-side illustration */}
+        <img src="gacha.png" alt="" width={436} className="rounded-md" />
       </div>
     </main>
   );