diff --git a/ui/src/components/AgentCard.tsx b/ui/src/components/AgentCard.tsx
index 68c4c39..f006b79 100644
--- a/ui/src/components/AgentCard.tsx
+++ b/ui/src/components/AgentCard.tsx
@@ -1,6 +1,6 @@
 import { UptimeMessage } from "@/services/types";
 import { formatRelativeTime, isAgentOnline } from "@/services/utils";
-import { DottedProgressBar } from "./Progressbar";
+import { Progressbar } from "./Progressbar";
 
 export type AgentOverviewCardProps = {
     count: number;
@@ -69,24 +69,23 @@ export function AgentCard({ props }: { props: AgentCardProps }) {
             onClick={() => props.onClick?.()}
             className="bg-[#111111] border border-[#262626] rounded-lg p-6 hover:bg-[#151515] transition-all cursor-pointer group"
         >
-            <div className="flex items-center justify-between">
+            <div className="flex items-center justify-between space-x-10">
                 <div className="flex items-center space-x-3">
                     <div
                         className={`px-2 py-1 rounded-md text-xs font-medium ${status.bgColor} ${status.textColor} border ${status.borderColor}`}
                     >
                         {status.name.toUpperCase()}
                     </div>
-                    <h3 className="text-lg font-semibold text-white transition-colors">
+                    <h3 className="text-sm md:text-md lg:text-lg font-semibold text-white transition-colors">
                         {props.data.agent}
                     </h3>
                 </div>
 
                 <div className="flex items-center space-x-3 flex-1 justify-end">
                     <div className="flex flex-col max-w-lg gap-y-2">
-                        <DottedProgressBar
+                        <Progressbar
                             color={status.color}
                             percentage={props.data.uptime}
-                            totalDots={20}
                         />
                         <div className="flex justify-between items-center text-xs">
                             <span>
diff --git a/ui/src/components/Header.tsx b/ui/src/components/Header.tsx
index b2b86eb..c8a0a23 100644
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -9,7 +9,7 @@ export type HeaderProps = {
 
 export function Header({ props }: { props: HeaderProps }) {
     return (
-        <header className="bg-[#111111] border-b border-[#111111]">
+        <header className="bg-[#0d0d0d] border-b border-[#191919]">
             <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 text-yellow-500 flex items-center justify-center">
diff --git a/ui/src/components/Progressbar.tsx b/ui/src/components/Progressbar.tsx
index 5c797ce..d5d91a6 100644
--- a/ui/src/components/Progressbar.tsx
+++ b/ui/src/components/Progressbar.tsx
@@ -1,20 +1,54 @@
-export function DottedProgressBar({
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+export function Progressbar({
     color,
     percentage,
-    totalDots = 10,
 }: {
     color: string;
     percentage: number;
-    totalDots?: number;
 }) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [totalDots, setTotalDots] = useState<number>(0);
+
+    useEffect(() => {
+        const calculateDots = () => {
+            if (!containerRef.current) return;
+
+            const parent =
+                containerRef.current.parentElement?.parentElement
+                    ?.parentElement;
+
+            if (!parent) return;
+
+            const availableWidth = parent.clientWidth;
+            const dotCount = Math.floor(availableWidth / 48);
+
+            setTotalDots(Math.max(5, Math.min(20, dotCount)));
+        };
+
+        calculateDots();
+
+        const resizeObserver = new ResizeObserver(calculateDots);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+
+        return () => resizeObserver.disconnect();
+    });
+
     const filledDots = Math.round((percentage / 100) * totalDots);
 
     return (
-        <div className="flex items-center justify-center space-x-2">
+        <div
+            ref={containerRef}
+            className="flex items-center justify-center space-x-2"
+        >
             {Array.from({ length: totalDots }).map((_, index) => (
                 <div
                     key={index}
-                    className={`w-[14px] h-[14px] rounded-full transition-all duration-300 ${
+                    className={`w-3 h-3 lg:w-4 lg:h-4 rounded-full transition-all duration-300 ${
                         index < filledDots ? color : "bg-[#232323]"
                     }`}
                 />
diff --git a/ui/src/pages/home.tsx b/ui/src/pages/home.tsx
index 4c09a48..7077c95 100644
--- a/ui/src/pages/home.tsx
+++ b/ui/src/pages/home.tsx
@@ -32,55 +32,60 @@ export function HomePage() {
                 }}
             />
             <main className="max-w-7xl mx-auto py-8">
-                <h2 className="text-xl font-semibold mb-4">Overview</h2>
+                <div className="mx-2">
+                    <h2 className="text-xl font-semibold mb-4">Overview</h2>
 
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-                    <AgentOverviewCard
-                        props={{
-                            count: totalAgents,
-                            title: "total agents",
-                            icon: {
-                                ref: <Box />,
-                                color: "rgb(96, 165, 250)",
-                                bgColor: "rgba(59, 130, 246, 0.2)",
-                            },
-                        }}
-                    />
-                    <AgentOverviewCard
-                        props={{
-                            count: onlineAgents,
-                            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={{
-                            count: offlineAgents,
-                            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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+                        <AgentOverviewCard
+                            props={{
+                                count: totalAgents,
+                                title: "total agents",
+                                icon: {
+                                    ref: <Box />,
+                                    color: "rgb(96, 165, 250)",
+                                    bgColor: "rgba(59, 130, 246, 0.2)",
+                                },
+                            }}
+                        />
+                        <AgentOverviewCard
+                            props={{
+                                count: onlineAgents,
+                                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={{
+                                count: offlineAgents,
+                                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="mb-6">
+                        <h2 className="text-xl font-semibold mb-4">Agents</h2>
 
-                    <div className="space-y-6">
-                        {agents.map((agent, index) => (
-                            <AgentCard key={index} props={{ data: agent }} />
-                        ))}
+                        <div className="space-y-6">
+                            {agents.map((agent, index) => (
+                                <AgentCard
+                                    key={index}
+                                    props={{ data: agent }}
+                                />
+                            ))}
+                        </div>
                     </div>
                 </div>
             </main>