diff --git a/src/components/dashboard/BenchmarkingEscritorio.tsx b/src/components/dashboard/BenchmarkingEscritorio.tsx
index 29db6db..e8f6b96 100644
--- a/src/components/dashboard/BenchmarkingEscritorio.tsx
+++ b/src/components/dashboard/BenchmarkingEscritorio.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useBenchmarking } from '../../hooks/useBenchmarking';
+import { CheckCircleIcon, XCircleIcon, FolderOpenIcon } from '@heroicons/react/24/solid';
 
 export const BenchmarkingEscritorio: React.FC = () => {
   // Hook para buscar e calcular benchmarking
@@ -9,23 +10,45 @@ export const BenchmarkingEscritorio: React.FC = () => {
   if (error) return <div className="text-red-600">Erro ao buscar benchmarking</div>;
   if (!benchmarking) return null;
 
+  // Cálculo da porcentagem de sucesso das causas
+  const totalCausas = benchmarking.procedentes + benchmarking.improcedentesOuSemMerito;
+  const sucessoPercent = totalCausas > 0 ? Math.round((benchmarking.procedentes / totalCausas) * 100) : 0;
+
   return (
-    <div className="border rounded p-4 shadow flex flex-col gap-4">
-      <div>
-        <span className="font-semibold">Total de processos:</span>
-        <span className="ml-2 text-blue-700 font-bold">{benchmarking.totalProcessos}</span>
+    <div className="border rounded-xl p-6 shadow-lg bg-white dark:bg-gray-900 flex flex-col gap-6 max-w-md mx-auto">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="flex items-center gap-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3">
+          <FolderOpenIcon className="h-7 w-7 text-blue-600" />
+          <div>
+            <div className="text-xs text-gray-500">Total de processos</div>
+            <div className="text-lg font-bold text-blue-700 dark:text-blue-300">{benchmarking.totalProcessos}</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 bg-green-50 dark:bg-green-900 rounded-lg p-3">
+          <CheckCircleIcon className="h-7 w-7 text-green-600" />
+          <div>
+            <div className="text-xs text-gray-500">Processos ativos</div>
+            <div className="text-lg font-bold text-green-700 dark:text-green-300">{benchmarking.ativos}</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 bg-green-50 dark:bg-green-900 rounded-lg p-3">
+          <CheckCircleIcon className="h-7 w-7 text-green-600" />
+          <div>
+            <div className="text-xs text-gray-500">Julgados procedentes</div>
+            <div className="text-lg font-bold text-green-700 dark:text-green-300">{benchmarking.procedentes}</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 bg-red-50 dark:bg-red-900 rounded-lg p-3">
+          <XCircleIcon className="h-7 w-7 text-red-600" />
+          <div>
+            <div className="text-xs text-gray-500">Improcedentes/Sem mérito</div>
+            <div className="text-lg font-bold text-red-700 dark:text-red-300">{benchmarking.improcedentesOuSemMerito}</div>
+          </div>
+        </div>
       </div>
-      <div>
-        <span className="font-semibold">Processos ativos:</span>
-        <span className="ml-2 text-green-700 font-bold">{benchmarking.ativos}</span>
-      </div>
-      <div>
-        <span className="font-semibold">Julgados procedentes:</span>
-        <span className="ml-2 text-green-700 font-bold">{benchmarking.procedentes}</span>
-      </div>
-      <div>
-        <span className="font-semibold">Improcedentes/Sem análise de mérito:</span>
-        <span className="ml-2 text-red-700 font-bold">{benchmarking.improcedentesOuSemMerito}</span>
+      <div className="mt-4 flex flex-col items-center">
+        <span className="text-sm text-gray-500">% de sucesso das causas</span>
+        <span className="text-3xl font-extrabold text-green-600 dark:text-green-400">{sucessoPercent}%</span>
       </div>
     </div>
   );