diff --git a/app/(admin)/admin/dashboard/page.tsx b/app/(admin)/admin/dashboard/page.tsx
index 7f3d529..b1cecd4 100644
--- a/app/(admin)/admin/dashboard/page.tsx
+++ b/app/(admin)/admin/dashboard/page.tsx
@@ -1,11 +1,11 @@
 import DashboardContainer from "@/components/main/dashboard/dashboard-container";
 
 export default function AdminPage() {
-    return (
-        <div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
-            <div className="px-4">
-                <DashboardContainer />
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small">
+      <div className="px-4">
+        <DashboardContainer />
+      </div>
+    </div>
+  );
+}
diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx
index 0d09829..a86382a 100644
--- a/components/main/dashboard/dashboard-container.tsx
+++ b/components/main/dashboard/dashboard-container.tsx
@@ -1,5 +1,14 @@
-'use client'
-import { DashboardBookmarkIcon, DashboardBriefcaseIcon, DashboardConnectIcon, DashboardMailboxIcon, DashboardRightDownPointIcon, DashboardSpeecIcon, DashboardTopLeftPointIcon, DashboardUserIcon } from "@/components/icons/dashboard-icon";
+"use client";
+import {
+  DashboardBookmarkIcon,
+  DashboardBriefcaseIcon,
+  DashboardConnectIcon,
+  DashboardMailboxIcon,
+  DashboardRightDownPointIcon,
+  DashboardSpeecIcon,
+  DashboardTopLeftPointIcon,
+  DashboardUserIcon,
+} from "@/components/icons/dashboard-icon";
 import { Submenu1Icon } from "@/components/icons/sidebar-icon";
 import { Button, Select, SelectItem, SelectSection } from "@nextui-org/react";
 import ApexChartColumn from "./chart/column-chart";
@@ -7,170 +16,202 @@ import ApexChartDonut from "./chart/donut-chart";
 import ApexChartLineArea from "./chart/line-area-chart";
 
 export default function DashboardContainer() {
-    return (
-        <div className="p-8 flex justify-center">
-            <div className="w-full flex flex-col gap-6">
-                <div className="w-full flex flex-col md:flex-row gap-6 justify-center">
-                    <div className="w-full md:w-[160px] h-[160px] bg-[#ecf2ff] flex flex-col justify-center items-center rounded-lg">
-                        <div className="h-1/2 flex items-center justify-center"><DashboardUserIcon className="w-[50px]" /></div>
-                        <div className="text-[#6484fd] font-semibold">Employees</div>
-                        <div className="text-[#6484fd] font-semibold text-lg">96</div>
-                    </div>
-                    <div className="w-full md:w-[160px] h-[160px] bg-[#fef5e5] flex flex-col justify-center items-center rounded-lg">
-                        <div className="h-1/2 flex items-center justify-center"><DashboardBriefcaseIcon className="w-[50px]" /></div>
-                        <div className="text-[#feaf2d] font-semibold">Clients</div>
-                        <div className="text-[#feaf2d] font-semibold text-lg">3650</div>
-                    </div>
-                    <div className="w-full md:w-[160px] h-[160px] bg-[#e8f7ff] flex flex-col justify-center items-center rounded-lg">
-                        <div className="h-1/2 flex items-center justify-center"><DashboardMailboxIcon className="w-[50px]" /></div>
-                        <div className="text-[#57c0fd] font-semibold">Projects</div>
-                        <div className="text-[#57c0fd] font-semibold text-lg">356</div>
-                    </div>
-                    <div className="w-full md:w-[160px] h-[160px] bg-[#fdede8] flex flex-col justify-center items-center rounded-lg">
-                        <div className="h-1/2 flex items-center justify-center"><DashboardBookmarkIcon className="w-[50px]" /></div>
-                        <div className="text-[#f98e75] font-semibold">Events</div>
-                        <div className="text-[#f98e75] font-semibold text-lg">696</div>
-                    </div>
-                    <div className="w-full md:w-[160px] h-[160px] bg-[#e6fffa] flex flex-col justify-center items-center rounded-lg">
-                        <div className="h-1/2 flex items-center justify-center"><DashboardSpeecIcon className="w-[50px]" /></div>
-                        <div className="text-[#29e2be] font-semibold">Payroll</div>
-                        <div className="text-[#29e2be] font-semibold text-lg">$96k</div>
-                    </div>
-                    <div className="w-full md:w-[160px] h-[160px] bg-[#ebf3fe] flex flex-col justify-center items-center rounded-lg">
-                        <div className="h-1/2 flex items-center justify-center"><DashboardConnectIcon className="w-[50px]" /></div>
-                        <div className="text-[#5797fd] font-semibold">Reports</div>
-                        <div className="text-[#5797fd] font-semibold text-lg">56</div>
-                    </div>
-                </div>
-                <div className="w-full flex flex-row gap-6 justify-center">
-                    <div className="border-1 shadow-sm w-full rounded-lg md:w-[712px] p-6 flex flex-col">
-                        <div className="flex justify-between mb-3">
-                            <div className="font-semibold flex flex-col">Revenue Update
-                                <span className="font-normal text-xs text-gray-600">Overview of Profit</span>
-                            </div>
-                            <div className="w-auto md:w-[140px]">
-                                <Select
-                                    label=""
-                                    labelPlacement="outside"
-                                    placeholder=""
-                                    className="w-full"
-                                    variant="bordered"
-                                    classNames={{
-                                        mainWrapper: "rounded",
-                                        listboxWrapper:
-                                            "bg-white w-full !text-indigo-500 text-center font-bold",
-                                        popoverContent: "bg-white !text-indigo-500",
-                                        trigger:
-                                            "border-1 border-gray-200 hover:!bg-gray-100 !text-black",
-                                    }}
-                                    listboxProps={{
-                                        itemClasses: {
-                                            base: [
-                                                "!text-left",
-                                                "!bg-white",
-                                                "text-indigo-500 ",
-                                                "data-[selectable=true]:!text-indigo-500",
-                                                "data-[pressed=true]:text-indigo-500",
-                                                "data-[hover=true]:!text-indigo-300",
-                                            ],
-                                            wrapper: ["!bg-white border-none"],
-                                        },
-                                    }}
-                                    defaultSelectedKeys={["march"]}
-                                    // onChange={onChangeFilterStatus}
-                                    renderValue={(items) => {
-                                        return items.map((item) => (
-                                            <span key={item.props?.value} className="text-black text-xs">
-                                                {item.textValue}
-                                            </span>
-                                        ));
-                                    }}
-                                >
-                                    <SelectSection>
-                                        <SelectItem key="march">March 2023</SelectItem>
-                                        <SelectItem key="april">April 2023</SelectItem>
-                                        <SelectItem key="may">May 2023</SelectItem>
-                                    </SelectSection>
-                                </Select>
-                            </div>
-                        </div>
-                        <div className="flex flex-row w-full">
-                            <div className="w-3/4">
-                                <ApexChartColumn />
-                            </div>
-                            <div className="w-1/4 flex flex-col px-2 justify-between">
-                                <div className="flex flex-row items-center gap-2">
-                                    <div className="bg-[#e8f7ff] p-2 rounded-md">
-                                        <Submenu1Icon className="h-full text-[#6484fd]" />
-                                    </div>
-                                    <div className="flex flex-col">
-                                        <p className="font-semibold text-xl">$63,489.50</p>
-                                        <p className="text-xs">Total Earnings</p>
-                                    </div>
-                                </div>
-                                <div className="flex flex-row gap-3 items-center">
-                                    <div className="w-2 h-2 bg-[#6484fd] rounded-full" />
-                                    <div className="flex flex-col">
-                                        <p className="text-xs">Earning this month</p>
-                                        <p className="font-semibold text-md">$48,820</p>
-                                    </div>
-                                </div>
-                                <div className="flex flex-row gap-3 items-center">
-                                    <div className="w-2 h-2 bg-[#57c0fd] rounded-full" />
-                                    <div className="flex flex-col">
-                                        <p className="text-xs">Expense this month</p>
-                                        <p className="font-semibold text-md">$26,498</p>
-                                    </div>
-                                </div>
-                                <Button className="w-full h-[35px] rounded-md" color="primary" variant="solid">View Full Report</Button>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="flex flex-col w-[344px] gap-6">
-                        <div className="h-1/2 border-1 shadow-sm w-full rounded-lg p-6 flex flex-row gap-2">
-                            <div className="w-1/2 flex flex-col justify-between">
-                                <p className="font-semibold">Yearly Breakup</p>
-                                <div className="lflex flex-col">
-                                    <p className="font-semibold text-xl ">$36,358</p>
-                                    <div className="flex flex-row text-xs item-center">
-                                        <div className="rounded-full w-6 h-6 bg-[#e6fffa] p-[2px] flex items-center justify-center"><DashboardTopLeftPointIcon className="text-[#29e2be]" /></div>
-                                        <p className="pt-[3px]"> +9% last year</p></div>
-                                </div>
-                                <p className="font-semibold flex flex-row gap-3">
-                                    <div className="flex flex-row text-tiny items-center gap-2">
-                                        <div className="w-2 h-2 rounded-full bg-[#5c6ac4]" />
-                                        2020
-                                    </div>
-                                    <div className="flex flex-row text-tiny items-center gap-2">
-                                        <div className="w-2 h-2 rounded-full bg-[#d4d4d8]" />
-                                        2020
-                                    </div>
-                                </p>
-
-                            </div>
-                            <div className="w-1/2 h-full flex items-center"><ApexChartDonut /></div>
-                        </div>
-                        <div className="h-1/2 border-1 shadow-sm w-full rounded-lg flex flex-col justify-between">
-                            <div className="p-6 flex flex-col">
-                                <div className="flex justify-between items-center font-semibold">
-                                    Monthly Earning
-                                    <a className="cursor-pointer w-10 h-10 bg-blue-300 flex justify-center items-center rounded-full text-white text-xl">$</a>
-                                </div>
-                                <div className="lflex flex-col">
-                                    <p className="font-semibold text-xl ">$6,820</p>
-                                    <div className="flex flex-row text-xs item-center">
-                                        <div className="rounded-full w-6 h-6 bg-[#fdede8] p-[2px] flex items-center justify-center">
-                                            <DashboardRightDownPointIcon className="text-[#f98e75]" />
-                                        </div>
-                                        <p className="pt-[3px]"> -6% last year</p></div>
-                                </div>
-                            </div>
-                            <div className="w-auto object-cover"><ApexChartLineArea /></div>
-                        </div>
-                    </div>
-                </div>
-                <div>bawah</div>
+  return (
+    <div className="p-8 flex justify-center">
+      <div className="w-full flex flex-col gap-6">
+        <div className="w-full flex flex-col md:flex-row gap-6 justify-center">
+          <div className="w-full md:w-[160px] h-[160px] bg-[#ecf2ff] flex flex-col justify-center items-center rounded-lg">
+            <div className="h-1/2 flex items-center justify-center">
+              <DashboardUserIcon className="w-[50px]" />
             </div>
+            <div className="text-[#6484fd] font-semibold">Employees</div>
+            <div className="text-[#6484fd] font-semibold text-lg">96</div>
+          </div>
+          <div className="w-full md:w-[160px] h-[160px] bg-[#fef5e5] flex flex-col justify-center items-center rounded-lg">
+            <div className="h-1/2 flex items-center justify-center">
+              <DashboardBriefcaseIcon className="w-[50px]" />
+            </div>
+            <div className="text-[#feaf2d] font-semibold">Clients</div>
+            <div className="text-[#feaf2d] font-semibold text-lg">3650</div>
+          </div>
+          <div className="w-full md:w-[160px] h-[160px] bg-[#e8f7ff] flex flex-col justify-center items-center rounded-lg">
+            <div className="h-1/2 flex items-center justify-center">
+              <DashboardMailboxIcon className="w-[50px]" />
+            </div>
+            <div className="text-[#57c0fd] font-semibold">Projects</div>
+            <div className="text-[#57c0fd] font-semibold text-lg">356</div>
+          </div>
+          <div className="w-full md:w-[160px] h-[160px] bg-[#fdede8] flex flex-col justify-center items-center rounded-lg">
+            <div className="h-1/2 flex items-center justify-center">
+              <DashboardBookmarkIcon className="w-[50px]" />
+            </div>
+            <div className="text-[#f98e75] font-semibold">Events</div>
+            <div className="text-[#f98e75] font-semibold text-lg">696</div>
+          </div>
+          <div className="w-full md:w-[160px] h-[160px] bg-[#e6fffa] flex flex-col justify-center items-center rounded-lg">
+            <div className="h-1/2 flex items-center justify-center">
+              <DashboardSpeecIcon className="w-[50px]" />
+            </div>
+            <div className="text-[#29e2be] font-semibold">Payroll</div>
+            <div className="text-[#29e2be] font-semibold text-lg">$96k</div>
+          </div>
+          <div className="w-full md:w-[160px] h-[160px] bg-[#ebf3fe] flex flex-col justify-center items-center rounded-lg">
+            <div className="h-1/2 flex items-center justify-center">
+              <DashboardConnectIcon className="w-[50px]" />
+            </div>
+            <div className="text-[#5797fd] font-semibold">Reports</div>
+            <div className="text-[#5797fd] font-semibold text-lg">56</div>
+          </div>
         </div>
-    )
-}
\ No newline at end of file
+        <div className="w-full flex flex-row gap-6 justify-center">
+          <div className="border-1 shadow-sm w-full rounded-lg md:w-[712px] p-6 flex flex-col">
+            <div className="flex justify-between mb-3">
+              <div className="font-semibold flex flex-col">
+                Revenue Update
+                <span className="font-normal text-xs text-gray-600">
+                  Overview of Profit
+                </span>
+              </div>
+              <div className="w-auto md:w-[140px]">
+                <Select
+                  label=""
+                  labelPlacement="outside"
+                  placeholder=""
+                  className="w-full"
+                  variant="bordered"
+                  classNames={{
+                    mainWrapper: "rounded",
+                    listboxWrapper:
+                      "bg-white w-full !text-indigo-500 text-center font-bold",
+                    popoverContent: "bg-white !text-indigo-500",
+                    trigger:
+                      "border-1 border-gray-200 hover:!bg-gray-100 !text-black",
+                  }}
+                  listboxProps={{
+                    itemClasses: {
+                      base: [
+                        "!text-left",
+                        "!bg-white",
+                        "text-indigo-500 ",
+                        "data-[selectable=true]:!text-indigo-500",
+                        "data-[pressed=true]:text-indigo-500",
+                        "data-[hover=true]:!text-indigo-300",
+                      ],
+                      wrapper: ["!bg-white border-none"],
+                    },
+                  }}
+                  defaultSelectedKeys={["march"]}
+                  // onChange={onChangeFilterStatus}
+                  renderValue={(items) => {
+                    return items.map((item) => (
+                      <span
+                        key={item.props?.value}
+                        className="text-black text-xs"
+                      >
+                        {item.textValue}
+                      </span>
+                    ));
+                  }}
+                >
+                  <SelectSection>
+                    <SelectItem key="march">March 2023</SelectItem>
+                    <SelectItem key="april">April 2023</SelectItem>
+                    <SelectItem key="may">May 2023</SelectItem>
+                  </SelectSection>
+                </Select>
+              </div>
+            </div>
+            <div className="flex flex-row w-full">
+              <div className="w-3/4">
+                <ApexChartColumn />
+              </div>
+              <div className="w-1/4 flex flex-col px-2 justify-between">
+                <div className="flex flex-row items-center gap-2">
+                  <div className="bg-[#e8f7ff] p-2 rounded-md">
+                    <Submenu1Icon className="h-full text-[#6484fd]" />
+                  </div>
+                  <div className="flex flex-col">
+                    <p className="font-semibold text-xl">$63,489.50</p>
+                    <p className="text-xs">Total Earnings</p>
+                  </div>
+                </div>
+                <div className="flex flex-row gap-3 items-center">
+                  <div className="w-2 h-2 bg-[#6484fd] rounded-full" />
+                  <div className="flex flex-col">
+                    <p className="text-xs">Earning this month</p>
+                    <p className="font-semibold text-md">$48,820</p>
+                  </div>
+                </div>
+                <div className="flex flex-row gap-3 items-center">
+                  <div className="w-2 h-2 bg-[#57c0fd] rounded-full" />
+                  <div className="flex flex-col">
+                    <p className="text-xs">Expense this month</p>
+                    <p className="font-semibold text-md">$26,498</p>
+                  </div>
+                </div>
+                <Button
+                  className="w-full h-[35px] rounded-md"
+                  color="primary"
+                  variant="solid"
+                >
+                  View Full Report
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col w-[344px] gap-6">
+            <div className="h-1/2 border-1 shadow-sm w-full rounded-lg p-6 flex flex-row gap-2">
+              <div className="w-1/2 flex flex-col justify-between">
+                <p className="font-semibold">Yearly Breakup</p>
+                <div className="lflex flex-col">
+                  <p className="font-semibold text-xl ">$36,358</p>
+                  <div className="flex flex-row text-xs item-center">
+                    <div className="rounded-full w-6 h-6 bg-[#e6fffa] p-[2px] flex items-center justify-center">
+                      <DashboardTopLeftPointIcon className="text-[#29e2be]" />
+                    </div>
+                    <p className="pt-[3px]"> +9% last year</p>
+                  </div>
+                </div>
+                <p className="font-semibold flex flex-row gap-3">
+                  <div className="flex flex-row text-tiny items-center gap-2">
+                    <div className="w-2 h-2 rounded-full bg-[#5c6ac4]" />
+                    2020
+                  </div>
+                  <div className="flex flex-row text-tiny items-center gap-2">
+                    <div className="w-2 h-2 rounded-full bg-[#d4d4d8]" />
+                    2020
+                  </div>
+                </p>
+              </div>
+              <div className="w-1/2 h-full flex items-center">
+                <ApexChartDonut />
+              </div>
+            </div>
+            <div className="h-1/2 border-1 shadow-sm w-full rounded-lg flex flex-col justify-between">
+              <div className="p-6 flex flex-col">
+                <div className="flex justify-between items-center font-semibold">
+                  Monthly Earning
+                  <a className="cursor-pointer w-10 h-10 bg-blue-300 flex justify-center items-center rounded-full text-white text-xl">
+                    $
+                  </a>
+                </div>
+                <div className="lflex flex-col">
+                  <p className="font-semibold text-xl ">$6,820</p>
+                  <div className="flex flex-row text-xs item-center">
+                    <div className="rounded-full w-6 h-6 bg-[#fdede8] p-[2px] flex items-center justify-center">
+                      <DashboardRightDownPointIcon className="text-[#f98e75]" />
+                    </div>
+                    <p className="pt-[3px]"> -6% last year</p>
+                  </div>
+                </div>
+              </div>
+              <div className="w-auto object-cover">
+                <ApexChartLineArea />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}