diff --git a/src/app/dashboard/server/Box.tsx b/src/app/dashboard/server/Box.tsx
index 2c9faec..158e387 100644
--- a/src/app/dashboard/server/Box.tsx
+++ b/src/app/dashboard/server/Box.tsx
@@ -1,10 +1,5 @@
 "use client";
 import { motion } from "framer-motion";
-import Image from "next/image";
-import serverIcon1 from "@/assets/images/server-1-icon.svg";
-import serverIcon2 from "@/assets/images/server-2-icon.svg";
-import serverIcon3 from "@/assets/images/server-3-icon.svg";
-import serverIcon4 from "@/assets/images/server-4-icon.svg";
 
 export default function Box() {
     return (
@@ -22,91 +17,249 @@ export default function Box() {
             }}
             className="relative p-5 border border-white/5 bg-[#0E1618]/10 backdrop-blur-sm"
         >
-            <h3 className="mb-1 font-medium uppercase text-[#0CE77E]">Live and preparing servers</h3>
+            <h3 className="mb-1 font-medium uppercase text-[#0CE77E]">All Systems Operational</h3>
 
-            <p className="mb-4 text-sm text-white/75">List of our GPUs and their current status</p>
+            <p className="mb-4 text-sm text-white/75">
+                Last updated on{" "}
+                {new Date(Date.now() - 3 * 60 * 1000)
+                    .toLocaleString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        hour: "numeric",
+                        minute: "2-digit",
+                        hour12: true,
+                        timeZoneName: "short",
+                    })
+                    .replace(",", "")
+                    .replace("AM", "am")
+                    .replace("PM", "pm")}
+            </p>
 
-            <div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
-                <div className="flex items-center gap-4">
-                    <Image src={serverIcon1} alt="" className="w-[40px] h-[40px]" />
-
-                    <div>
-                        <h3 className="font-medium text-[#0CE77E]">GAMING GPUs</h3>
-                        <p className="text-sm text-white/75">Total GPUs : 52</p>
-                    </div>
+            <div className="py-4 border-t border-[#0CE77E]/25 items-center">
+                <div className="flex items-center justify-between mb-2">
+                    <h3 className="font-medium text-[#0CE77E]">GPU Instance</h3>
+                    <h3 className="font-medium text-[#0CE77E]">99.960% uptime</h3>
                 </div>
 
-                <div className="flex">
-                    <div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
-                        <p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 38</p>
-                    </div>
-
-                    <div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
-                        <p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 14</p>
+                {/* uptime status */}
+                <div className="relative">
+                    <div className="flex h-[28px] w-full overflow-visible relative">
+                        {[
+                            { status: "operational", width: "60%", details: "No incident reported" },
+                            {
+                                status: "degraded",
+                                width: "0.5%",
+                                details: "Resolved - Nvidia driver issue",
+                            },
+                            { status: "operational", width: "39.5%", details: "No incident reported" },
+                        ].map((segment, index) => (
+                            <div
+                                key={index}
+                                className={`h-full group cursor-help relative
+                                    ${
+                                        segment.status === "operational"
+                                            ? "bg-[#0CE77E]"
+                                            : segment.status === "degraded"
+                                            ? "bg-yellow-500"
+                                            : "bg-red-500"
+                                    }`}
+                                style={{ width: segment.width }}
+                            >
+                                <div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
+                                    {segment.status === "operational"
+                                        ? "Fully Operational"
+                                        : segment.status === "degraded"
+                                        ? "Degraded Performance"
+                                        : "System Down"}
+                                    <br />
+                                    Status: {segment.details}
+                                </div>
+                            </div>
+                        ))}
                     </div>
+                    <div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
                 </div>
             </div>
 
-            <div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
-                <div className="flex items-center gap-4">
-                    <Image src={serverIcon2} alt="" className="w-[40px] h-[40px]" />
-
-                    <div>
-                        <h3 className="font-medium text-[#E2F410]">Datacenter GPUs</h3>
-                        <p className="text-sm text-white/75">Total GPUs : 45</p>
-                    </div>
+            <div className="py-4 border-t border-[#0CE77E]/25 items-center">
+                <div className="flex items-center justify-between mb-2">
+                    <h3 className="font-medium text-[#0CE77E]">Console</h3>
+                    <h3 className="font-medium text-[#0CE77E]">99.890% uptime</h3>
                 </div>
 
-                <div className="flex">
-                    <div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
-                        <p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 33</p>
-                    </div>
-
-                    <div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
-                        <p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 12</p>
+                {/* uptime status */}
+                <div className="relative">
+                    <div className="flex h-[28px] w-full overflow-visible relative">
+                        {[
+                            { status: "operational", width: "10%", details: "No incident reported" },
+                            {
+                                status: "downtime",
+                                width: "0.5%",
+                                details: "Service Unavailable",
+                            },
+                            { status: "operational", width: "28%", details: "No incident reported" },
+                            { status: "degraded", width: "0.5%", details: "Updating SMTP" },
+                            { status: "operational", width: "61%", details: "No incident reported" },
+                        ].map((segment, index) => (
+                            <div
+                                key={index}
+                                className={`h-full group cursor-help relative
+                                    ${
+                                        segment.status === "operational"
+                                            ? "bg-[#0CE77E]"
+                                            : segment.status === "degraded"
+                                            ? "bg-yellow-500"
+                                            : "bg-red-500"
+                                    }`}
+                                style={{ width: segment.width }}
+                            >
+                                <div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
+                                    {segment.status === "operational"
+                                        ? "Fully Operational"
+                                        : segment.status === "degraded"
+                                        ? "Degraded Performance"
+                                        : "System Down"}
+                                    <br />
+                                    Status: {segment.details}
+                                </div>
+                            </div>
+                        ))}
                     </div>
+                    <div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
                 </div>
             </div>
 
-            <div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
-                <div className="flex items-center gap-4">
-                    <Image src={serverIcon3} alt="" className="w-[40px] h-[40px]" />
-
-                    <div>
-                        <h3 className="font-medium text-[#F65927]">Integrated GPUs</h3>
-                        <p className="text-sm text-white/75">Total GPUs : 17</p>
-                    </div>
+            <div className="py-4 border-t border-[#0CE77E]/25 items-center">
+                <div className="flex items-center justify-between mb-2">
+                    <h3 className="font-medium text-[#0CE77E]">Network</h3>
+                    <h3 className="font-medium text-[#0CE77E]">99.940% uptime</h3>
                 </div>
 
-                <div className="flex">
-                    <div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
-                        <p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 12</p>
-                    </div>
-
-                    <div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
-                        <p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 5</p>
+                {/* uptime status */}
+                <div className="relative">
+                    <div className="flex h-[28px] w-full overflow-visible relative">
+                        {[
+                            { status: "operational", width: "34%", details: "No incident reported" },
+                            {
+                                status: "degraded",
+                                width: "0.5%",
+                                details: "Resolved - Unusual high latency on some regions",
+                            },
+                            { status: "operational", width: "35%", details: "No incident reported" },
+                            { status: "downtime", width: "0.5%", details: "Service Unavailable" },
+                            { status: "operational", width: "30%", details: "No incident reported" },
+                        ].map((segment, index) => (
+                            <div
+                                key={index}
+                                className={`h-full group cursor-help relative
+                                    ${
+                                        segment.status === "operational"
+                                            ? "bg-[#0CE77E]"
+                                            : segment.status === "degraded"
+                                            ? "bg-yellow-500"
+                                            : "bg-red-500"
+                                    }`}
+                                style={{ width: segment.width }}
+                            >
+                                <div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
+                                    {segment.status === "operational"
+                                        ? "Fully Operational"
+                                        : segment.status === "degraded"
+                                        ? "Degraded Performance"
+                                        : "System Down"}
+                                    <br />
+                                    Status: {segment.details}
+                                </div>
+                            </div>
+                        ))}
                     </div>
+                    <div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
                 </div>
             </div>
 
-            <div className="py-4 border-t border-[#0CE77E]/25 grid grid-cols-[250px_auto] items-center">
-                <div className="flex items-center gap-4">
-                    <Image src={serverIcon4} alt="" className="w-[40px] h-[40px]" />
-
-                    <div>
-                        <h3 className="font-medium text-[#0CBFE7]">AI GPUs</h3>
-                        <p className="text-sm text-white/75">Total GPUs : 61</p>
-                    </div>
+            <div className="py-4 border-t border-[#0CE77E]/25 items-center">
+                <div className="flex items-center justify-between mb-2">
+                    <h3 className="font-medium text-[#0CE77E]">Proxy</h3>
+                    <h3 className="font-medium text-[#0CE77E]">100% uptime</h3>
                 </div>
 
-                <div className="flex">
-                    <div className="flex-1 h-[28px] px-5 bg-[#0CE77E] flex items-center">
-                        <p className="text-sm font-semibold uppercase text-[#0B1315]">Ready : 44</p>
+                {/* uptime status */}
+                <div className="relative">
+                    <div className="flex h-[28px] w-full overflow-visible relative">
+                        {[{ status: "operational", width: "100%", details: "No incident reported" }].map(
+                            (segment, index) => (
+                                <div
+                                    key={index}
+                                    className={`h-full group cursor-help relative
+                                    ${
+                                        segment.status === "operational"
+                                            ? "bg-[#0CE77E]"
+                                            : segment.status === "degraded"
+                                            ? "bg-yellow-500"
+                                            : "bg-red-500"
+                                    }`}
+                                    style={{ width: segment.width }}
+                                >
+                                    <div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
+                                        {segment.status === "operational"
+                                            ? "Fully Operational"
+                                            : segment.status === "degraded"
+                                            ? "Degraded Performance"
+                                            : "System Down"}
+                                        <br />
+                                        Status: {segment.details}
+                                    </div>
+                                </div>
+                            )
+                        )}
                     </div>
+                    <div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
+                </div>
+            </div>
 
-                    <div className="h-[28px] px-5 bg-[#0A492F] flex items-center">
-                        <p className="text-sm font-medium uppercase text-[#0CE77E]">PREPARING : 17</p>
+            <div className="py-4 border-t border-[#0CE77E]/25 items-center">
+                <div className="flex items-center justify-between mb-2">
+                    <h3 className="font-medium text-[#0CE77E]">Database</h3>
+                    <h3 className="font-medium text-[#0CE77E]">99.910% uptime</h3>
+                </div>
+
+                {/* uptime status */}
+                <div className="relative">
+                    <div className="flex h-[28px] w-full overflow-visible relative">
+                        {[
+                            { status: "operational", width: "90%", details: "No incident reported" },
+                            {
+                                status: "degraded",
+                                width: "0.5%",
+                                details: "Resolved - Deprecated DB API",
+                            },
+                            { status: "operational", width: "9%", details: "No incident reported" },
+                        ].map((segment, index) => (
+                            <div
+                                key={index}
+                                className={`h-full group cursor-help relative
+                                    ${
+                                        segment.status === "operational"
+                                            ? "bg-[#0CE77E]"
+                                            : segment.status === "degraded"
+                                            ? "bg-yellow-500"
+                                            : "bg-red-500"
+                                    }`}
+                                style={{ width: segment.width }}
+                            >
+                                <div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
+                                    {segment.status === "operational"
+                                        ? "Fully Operational"
+                                        : segment.status === "degraded"
+                                        ? "Degraded Performance"
+                                        : "System Down"}
+                                    <br />
+                                    Status: {segment.details}
+                                </div>
+                            </div>
+                        ))}
                     </div>
+                    <div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
                 </div>
             </div>