diff --git a/ui/bun.lock b/ui/bun.lock
index 76b0669..467bb61 100644
--- a/ui/bun.lock
+++ b/ui/bun.lock
@@ -4,6 +4,7 @@
     "": {
       "name": "ui",
       "dependencies": {
+        "lucide-react": "^0.525.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
       },
@@ -442,6 +443,8 @@
 
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
+    "lucide-react": ["lucide-react@0.525.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ=="],
+
     "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
 
     "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
diff --git a/ui/package.json b/ui/package.json
index c93437e..6842c43 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -10,6 +10,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
+        "lucide-react": "^0.525.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0"
     },
diff --git a/ui/src/components/AgentCard.tsx b/ui/src/components/AgentCard.tsx
new file mode 100644
index 0000000..6cbc09b
--- /dev/null
+++ b/ui/src/components/AgentCard.tsx
@@ -0,0 +1,36 @@
+export type AgentOverviewCardProps = {
+    title: string;
+    icon: {
+        ref: React.ReactNode;
+        color: string;
+        bgColor: string;
+    };
+};
+
+export function AgentOverviewCard({
+    props,
+}: {
+    props: AgentOverviewCardProps;
+}) {
+    return (
+        <div className="bg-[#111111] border border-[#262626] rounded-lg p-6">
+            <div className="flex items-center justify-between">
+                <div>
+                    <p className="text-sm text-gray-400 uppercase tracking-wider">
+                        {props.title}
+                    </p>
+                    <p className="text-2xl font-bold text-white">0</p>
+                </div>
+                <div
+                    className="w-12 h-12 rounded-lg flex items-center justify-center"
+                    style={{
+                        color: props.icon.color,
+                        backgroundColor: props.icon.bgColor,
+                    }}
+                >
+                    {props.icon.ref}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index f19a3ca..b2b86eb 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -1,3 +1,5 @@
+import { Zap } from "lucide-react";
+
 export type HeaderProps = {
     title: string;
     subtitle: string;
@@ -7,24 +9,11 @@ export type HeaderProps = {
 
 export function Header({ props }: { props: HeaderProps }) {
     return (
-        <header className="bg-[#0f0f0f] border-b border-[#0e0e0e]">
+        <header className="bg-[#111111] border-b border-[#111111]">
             <div className="max-w-7xl mx-auto py-4 flex justify-between items-center">
                 <div className="flex items-center space-x-3">
-                    <div className="w-11 h-11 bg-pink-300 text-pink-500 p-1 rounded-lg flex">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="3"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            className="lucide lucide-chart-no-axes-column-increasing-icon lucide-chart-no-axes-column-increasing"
-                        >
-                            <line x1="12" x2="12" y1="20" y2="10" />
-                            <line x1="18" x2="18" y1="20" y2="4" />
-                            <line x1="6" x2="6" y1="20" y2="16" />
-                        </svg>
+                    <div className="w-11 h-11 text-yellow-500 flex items-center justify-center">
+                        <Zap className="w-9 h-9" />
                     </div>
                     <div>
                         <h1 className="text-xl font-bold">{props.title}</h1>
diff --git a/ui/src/pages/home.tsx b/ui/src/pages/home.tsx
index 519f210..92495f2 100644
--- a/ui/src/pages/home.tsx
+++ b/ui/src/pages/home.tsx
@@ -1,4 +1,6 @@
+import { AgentOverviewCard } from "@/components/AgentCard";
 import { Header } from "@/components/Header";
+import { Box } from "lucide-react";
 
 export function HomePage() {
     return (
@@ -11,8 +13,47 @@ export function HomePage() {
                 }}
             />
             <main className="max-w-7xl mx-auto py-8">
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-                    <h1>helo vilag</h1>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+                    <AgentOverviewCard
+                        props={{
+                            title: "total agents",
+                            icon: {
+                                ref: <Box />,
+                                color: "rgb(96, 165, 250)",
+                                bgColor: "rgba(59, 130, 246, 0.2)",
+                            },
+                        }}
+                    />
+                    <AgentOverviewCard
+                        props={{
+                            title: "online",
+                            icon: {
+                                ref: (
+                                    <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse-slow" />
+                                ),
+                                color: "rgb(34, 197, 94)",
+                                bgColor: "rgba(34, 197, 94, 0.2)",
+                            },
+                        }}
+                    />
+                    <AgentOverviewCard
+                        props={{
+                            title: "offline",
+                            icon: {
+                                ref: (
+                                    <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse-slow" />
+                                ),
+                                color: "rgb(239, 68, 68)",
+                                bgColor: "rgba(239, 68, 68, 0.2)",
+                            },
+                        }}
+                    />
+                </div>
+
+                <div className="mb-6">
+                    <h2 className="text-xl font-semibold mb-4">Agents</h2>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
                 </div>
             </main>
         </div>