diff --git a/application/src/components/ssl-domain/SSLCertificateStatusCards.tsx b/application/src/components/ssl-domain/SSLCertificateStatusCards.tsx
index d449cfe..7ef844a 100644
--- a/application/src/components/ssl-domain/SSLCertificateStatusCards.tsx
+++ b/application/src/components/ssl-domain/SSLCertificateStatusCards.tsx
@@ -1,9 +1,9 @@
-
 import React from "react";
 import { SSLCertificate } from "@/types/ssl.types";
 import { useLanguage } from "@/contexts/LanguageContext";
-import { OverviewCard } from "@/components/schedule-incident/common/OverviewCard";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Shield, ShieldAlert, ShieldX } from "lucide-react";
+import { useTheme } from "@/contexts/ThemeContext";
 
 interface SSLCertificateStatusCardsProps {
   certificates: SSLCertificate[];
@@ -11,37 +11,113 @@ interface SSLCertificateStatusCardsProps {
 
 export const SSLCertificateStatusCards = ({ certificates }: SSLCertificateStatusCardsProps) => {
   const { t } = useLanguage();
-  
+  const { theme } = useTheme();
+
   // Count certificates by status
-  const validCount = certificates.filter(cert => cert.status === 'valid').length;
-  const expiringCount = certificates.filter(cert => cert.status === 'expiring_soon').length;
-  const expiredCount = certificates.filter(cert => cert.status === 'expired').length;
+  const validCount = certificates.filter(cert => cert.status === "valid").length;
+  const expiringCount = certificates.filter(cert => cert.status === "expiring_soon").length;
+  const expiredCount = certificates.filter(cert => cert.status === "expired").length;
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-      <OverviewCard
-        title={t('validCertificates')}
-        value={validCount}
-        icon={<Shield className="h-6 w-6 text-white" />}
-        color="green"
-        className="hover:scale-105 transition-transform duration-200"
-      />
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 w-full">
+      {/* Valid Certificates */}
+      <Card
+        className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative z-10"
+        style={{
+          background:
+            theme === "dark"
+              ? "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, rgba(34,197,94,0.6) 100%)"
+              : "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, #22c55e 100%)",
+        }}
+      >
+        <div className="absolute inset-0 z-0 opacity-10">
+          <div
+            className="w-full h-full"
+            style={{
+              backgroundImage: `linear-gradient(#000 1px, transparent 1px),
+                                linear-gradient(90deg, #fff 1px, transparent 1px)`,
+              backgroundSize: "20px 20px",
+            }}
+          />
+        </div>
+        <CardHeader className="pb-2 relative z-10">
+          <CardTitle className="text-sm font-medium text-white">
+            {t("validCertificates")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="flex items-center justify-between relative z-10">
+          <span className="text-5xl font-bold text-white">{validCount}</span>
+          <div className="rounded-full p-3 bg-white/25 backdrop-blur-sm">
+            <Shield className="h-6 w-6 text-white" />
+          </div>
+        </CardContent>
+      </Card>
 
-      <OverviewCard
-        title={t('expiringSoon')}
-        value={expiringCount}
-        icon={<ShieldAlert className="h-6 w-6 text-white" />}
-        color="amber"
-        className="hover:scale-105 transition-transform duration-200"
-      />
+      {/* Expiring Soon */}
+      <Card
+        className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative z-10"
+        style={{
+          background:
+            theme === "dark"
+              ? "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, rgba(251,191,36,0.6) 100%)"
+              : "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, #fbbf24 100%)",
+        }}
+      >
+        <div className="absolute inset-0 z-0 opacity-10">
+          <div
+            className="w-full h-full"
+            style={{
+              backgroundImage: `linear-gradient(#000 1px, transparent 1px),
+                                linear-gradient(90deg, #fff 1px, transparent 1px)`,
+              backgroundSize: "20px 20px",
+            }}
+          />
+        </div>
+        <CardHeader className="pb-2 relative z-10">
+          <CardTitle className="text-sm font-medium text-white">
+            {t("expiringSoon")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="flex items-center justify-between relative z-10">
+          <span className="text-5xl font-bold text-white">{expiringCount}</span>
+          <div className="rounded-full p-3 bg-white/25 backdrop-blur-sm">
+            <ShieldAlert className="h-6 w-6 text-white" />
+          </div>
+        </CardContent>
+      </Card>
 
-      <OverviewCard
-        title={t('expired')}
-        value={expiredCount}
-        icon={<ShieldX className="h-6 w-6 text-white" />}
-        color="red"
-        className="hover:scale-105 transition-transform duration-200"
-      />
+      {/* Expired */}
+      <Card
+        className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative z-10"
+        style={{
+          background:
+            theme === "dark"
+              ? "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, rgba(239,68,68,0.6) 100%)"
+              : "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, #ef4444 100%)",
+        }}
+      >
+        <div className="absolute inset-0 z-0 opacity-10">
+          <div
+            className="w-full h-full"
+            style={{
+              backgroundImage: `linear-gradient(#000 1px, transparent 1px),
+                                linear-gradient(90deg, #fff 1px, transparent 1px)`,
+              backgroundSize: "20px 20px",
+            }}
+          />
+        </div>
+        <CardHeader className="pb-2 relative z-10">
+          <CardTitle className="text-sm font-medium text-white">
+            {t("expired")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="flex items-center justify-between relative z-10">
+          <span className="text-5xl font-bold text-white">{expiredCount}</span>
+          <div className="rounded-full p-3 bg-white/25 backdrop-blur-sm">
+            <ShieldX className="h-6 w-6 text-white" />
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
-};
\ No newline at end of file
+};