diff --git a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
index f55ef07b..16b6102a 100644
--- a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
@@ -94,6 +94,8 @@ export default function SwarmMonitorCard() {
 				return <CheckCircle className="h-4 w-4 text-green-500" />;
 			case "Down":
 				return <AlertCircle className="h-4 w-4 text-red-500" />;
+			case "Disconnected":
+				return <AlertCircle className="h-4 w-4 text-red-800" />;
 			default:
 				return <HelpCircle className="h-4 w-4 text-yellow-500" />;
 		}
@@ -101,7 +103,7 @@ export default function SwarmMonitorCard() {
 
 	return (
 		<div className="w-full max-w-7xl mx-auto">
-			<Card className="mb-6">
+			<Card className="mb-6 bg-transparent">
 				<CardHeader className="flex flex-row items-center justify-between">
 					<CardTitle className="flex items-center gap-2">
 						<Server className="h-6 w-6" />
diff --git a/apps/dokploy/components/dashboard/swarm/show/deatils-card.tsx b/apps/dokploy/components/dashboard/swarm/show/deatils-card.tsx
index b622ba82..83d226a5 100644
--- a/apps/dokploy/components/dashboard/swarm/show/deatils-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/show/deatils-card.tsx
@@ -56,7 +56,7 @@ export function NodeCard({ node }: NodeCardProps) {
 
 	if (isLoading) {
 		return (
-			<Card className="w-full">
+			<Card className="w-full bg-transparent">
 				<CardHeader>
 					<CardTitle className="flex items-center justify-between">
 						<span className="flex items-center gap-2">
@@ -79,7 +79,7 @@ export function NodeCard({ node }: NodeCardProps) {
 
 	console.log(data);
 	return (
-		<Card className="w-full">
+		<Card className="w-full bg-transparent">
 			<CardHeader>
 				<CardTitle className="flex items-center justify-between">
 					<span className="flex items-center gap-2">