diff --git a/frontend/src/components/ServerCardMetrics.tsx b/frontend/src/components/ServerCardMetrics.tsx
index 7cca7ce..f96eb27 100644
--- a/frontend/src/components/ServerCardMetrics.tsx
+++ b/frontend/src/components/ServerCardMetrics.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import api from "../Api";
 import { ServerTypeLabels, type ServersType } from "../types/enums";
+import { Code, Database, FlaskConical, Server } from "lucide-icons-react";
 
 interface ServerCount {
     type: ServersType;
@@ -37,12 +38,34 @@ export const ServerCardMetrics = () => {
         return <div className={Styles.placeholder}>Carregando métricas...</div>;
     }
 
+    const handleCardIcon = (type: ServersType) => {
+        const iconProps = { size: 32, strokeWidth: 1.5 };
+
+        switch (type) {
+            case "DATABASE":
+                return <Database {...iconProps} />;
+            case "HOMOLOGATION":
+                return <FlaskConical {...iconProps} />;
+            case "PRODUCTION":
+                return <Server {...iconProps} />;
+            default:
+                return <Code {...iconProps} />;
+        }
+    };
+
+    const formatTotal = (value: number) => value.toLocaleString("pt-BR");
+
     return (
         <div className={Styles.grid}>
             {counts.map(({ type, total }) => (
                 <div key={type} className={Styles.card}>
-                    <p className={Styles.label}>{ServerTypeLabels[type]}</p>
-                    <p className={Styles.value}>{total}</p>
+                    <div className={Styles.iconWrapper}>
+                        {handleCardIcon(type)}
+                    </div>
+                    <div className={Styles.textGroup}>
+                        <p className={Styles.value}>{formatTotal(total)}</p>
+                        <p className={Styles.label}>{ServerTypeLabels[type]}</p>
+                    </div>
                 </div>
             ))}
         </div>
@@ -51,9 +74,11 @@ export const ServerCardMetrics = () => {
 
 const Styles = {
     grid: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-    card: "rounded-lg border border-cardBorder bg-card p-4 shadow-sm space-y-1",
-    label: "text-sm text-text-secondary uppercase tracking-wide",
-    value: "text-3xl font-semibold text-text",
+    card: "flex items-center gap-4 rounded-xl border border-cardBorder bg-gradient-to-br from-white/90 to-card p-5 shadow-sm",
+    iconWrapper: "flex h-14 w-14 items-center justify-center rounded-lg border border-accent/20 bg-accent/10 text-accent",
+    textGroup: "flex flex-col",
+    label: "text-xs font-medium uppercase tracking-wide text-text-secondary",
+    value: "text-3xl font-semibold text-text leading-tight",
     placeholder: "p-4 rounded-lg border border-cardBorder bg-card text-text-secondary text-sm",
     error: "p-4 rounded-lg border border-red-200 bg-red-50 text-red-600 text-sm",
 };
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 6808447..7bf0d6b 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -8,7 +8,7 @@ export default {
     extend: {
       colors: {
         bg: '#FAFAF9',
-        card: '#FFFFFF',
+        card: '#F4F4F2',
         cardBorder: '#E5E7EB',
         text: '#1A1A1A',
         'text-secondary': '#6B7280',
@@ -28,4 +28,3 @@ export default {
   },
   plugins: [],
 }
-