diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
new file mode 100644
index 0000000..f19a3ca
--- /dev/null
+++ b/ui/src/components/Header.tsx
@@ -0,0 +1,42 @@
+export type HeaderProps = {
+    title: string;
+    subtitle: string;
+    hasBackButton: boolean;
+    rightComponent?: React.ReactNode;
+};
+
+export function Header({ props }: { props: HeaderProps }) {
+    return (
+        <header className="bg-[#0f0f0f] border-b border-[#0e0e0e]">
+            <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>
+                    <div>
+                        <h1 className="text-xl font-bold">{props.title}</h1>
+                        <p className="text-sm text-gray-400">
+                            {props.subtitle}
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center space-x-6">
+                    {props.rightComponent}
+                </div>
+            </div>
+        </header>
+    );
+}
diff --git a/ui/src/index.css b/ui/src/index.css
index 7cfc7ff..9e99382 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -1,5 +1,5 @@
 @import "tailwindcss";
 
 body {
-    @apply bg-gray-950 text-gray-300;
+    @apply bg-[#0a0a0a] text-gray-300;
 }
diff --git a/ui/src/pages/home.tsx b/ui/src/pages/home.tsx
index c886cb8..519f210 100644
--- a/ui/src/pages/home.tsx
+++ b/ui/src/pages/home.tsx
@@ -1,8 +1,20 @@
+import { Header } from "@/components/Header";
+
 export function HomePage() {
     return (
         <div>
-            <h1>Welcome to Status Monitor</h1>
-            <p>This is the home page.</p>
+            <Header
+                props={{
+                    title: "Status Monitor",
+                    subtitle: "Home",
+                    hasBackButton: false,
+                }}
+            />
+            <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>
+            </main>
         </div>
     );
 }