diff --git a/frontend/app/admin/home/page.tsx b/frontend/app/admin/home/page.tsx
index 9293251f..6f9afbf9 100644
--- a/frontend/app/admin/home/page.tsx
+++ b/frontend/app/admin/home/page.tsx
@@ -7,6 +7,8 @@ import { User } from '@/types'
 import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/table'
 import { siteConfig } from "@/config/site";
 import { title } from "@/components/primitives";
+import { Card, CardBody } from "@nextui-org/card";
+import { FlagIcon, UserCircleIcon } from "@heroicons/react/24/solid";
 
 axios.defaults.withCredentials = true;
 
@@ -63,8 +65,85 @@ const AdminHomepage = () => {
     <div>
       <h1 className={title()}>Admin Home</h1>
 
-      {error && <p className="text-red-600 text-center text-xl m-2">{error}</p>}
+      <div className="flex">
+
+        {/* Users Card */}
+        <Card className="m-2 xl:max-w-sm bg-primary rounded-xl shadow-md p-3 w-full">
+          <CardBody className="py-5">
+            <div className="flex gap-2.5">
+              <UserCircleIcon className="w-6 h-6" />
+              <div className="flex flex-col">
+                <span className="text-white">Number of Users</span>
+              </div>
+            </div>
+            <div className="flex gap-2.5 py-2 items-center">
+              <span className="text-white text-xl font-semibold">{users.length}</span>
+            </div>
+
+            <div className="flex items-center gap-6">
+              <div>
+                <div>
+                  <span className="text-xs text-white">{users.filter(user => user.role == "user").length}</span>
+                </div>
+                <span className="text-white text-xs">Default</span>
+              </div>
+              <div>
+                <div>
+                  <span className="text-xs text-white">{users.filter(user => user.role == "admin").length}</span>
+                </div>
+                <span className="text-white text-xs">Admins</span>
+              </div>
+              <div>
+                <div>
+                  <span className="text-xs text-white">{users.filter(user => user.role == "banned").length}</span>
+                </div>
+                <span className="text-white text-xs">Banned</span>
+              </div>
+            </div>
+
+          </CardBody>
+        </Card>
+
+        {/* Reports Card */}
+        <Card className="m-2 xl:max-w-sm bg-secondary rounded-xl shadow-md p-3 w-full">
+          <CardBody className="py-5">
+            <div className="flex gap-2.5">
+              <FlagIcon className="w-6 h-6" />
+              <div className="flex flex-col">
+                <span className="text-white">Number of Reports</span>
+              </div>
+            </div>
+            <div className="flex gap-2.5 py-2 items-center">
+              <span className="text-white text-xl font-semibold">{users.length}</span>
+            </div>
 
+            <div className="flex items-center gap-6">
+              <div>
+                <div>
+                  <span className="text-xs text-white">{users.filter(user => user.role == "user").length}</span>
+                </div>
+                <span className="text-white text-xs">Pending</span>
+              </div>
+              <div>
+                <div>
+                  <span className="text-xs text-white">{users.filter(user => user.role == "admin").length}</span>
+                </div>
+                <span className="text-white text-xs">Completed</span>
+              </div>
+              <div>
+                <div>
+                  <span className="text-xs text-white">{users.filter(user => user.role == "banned").length}</span>
+                </div>
+                <span className="text-white text-xs">Irrelevant</span>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+
+      </div>
+
+      {/* User Summary */}
+      {error && <p className="text-red-600 text-center text-xl m-2">{error}</p>}
       <div className="p-2">
         <Table aria-label="Users Table">
           <TableHeader>
@@ -93,7 +172,7 @@ const AdminHomepage = () => {
           </TableBody>
         </Table>
       </div>
-    </div>
+    </div >
   )
 }