diff --git a/web/src/components/ShopCard.tsx b/web/src/components/ShopCard.tsx
index fe6027c..fd399e6 100644
--- a/web/src/components/ShopCard.tsx
+++ b/web/src/components/ShopCard.tsx
@@ -5,64 +5,58 @@ import { Card } from './ui/card';
 import { Button } from './ui/button';
 
 export const ShopCard = ({ shop }: { shop: BarberShop }) => {
-  // Distância simulada para o layout
-  const mockDistance = (Math.abs(shop.id.charCodeAt(0) * 11) % 900) + 100;
-
   return (
-    <div className="bg-[#121212] rounded-2xl p-4 flex flex-col w-full border border-[#262626] hover:border-[#3a3a3a] transition-colors shadow-lg group">
+    <Card hover className="p-4 sm:p-5 flex flex-col w-full group">
       <div className="flex gap-4">
         {/* Avatar Circular com Badge de Rating */}
         <div className="relative shrink-0 mt-1">
-          <div className="w-[72px] h-[72px] md:w-[84px] md:h-[84px] rounded-full border-2 border-[#1c1c1e] overflow-hidden bg-white flex items-center justify-center shadow-md">
+          <div className="w-16 h-16 md:w-20 md:h-20 rounded-full border-2 border-slate-100 overflow-hidden bg-white flex items-center justify-center shadow-sm">
             {shop.imageUrl ? (
               <img src={shop.imageUrl} alt={shop.name} className="w-full h-full object-cover" />
             ) : (
-              <div className="text-[#121212] font-black text-center leading-none flex flex-col items-center justify-center h-full w-full bg-slate-100">
-                <Scissors size={24} className="text-slate-800 mb-1" />
+              <div className="text-slate-400 font-black text-center leading-none flex flex-col items-center justify-center h-full w-full bg-slate-50">
+                <Scissors size={24} className="text-slate-400 mb-1" />
               </div>
             )}
           </div>
-          {/* Rating Badge - Posicionado em cima à direita como na imagem */}
-          <div className="absolute -top-1 -right-2 bg-[#1c1c1e] border border-[#2c2c2e] px-2 py-0.5 rounded-full flex items-center gap-[2px] shadow-lg">
-            <Star size={11} className="fill-amber-500 text-amber-500" />
-            <span className="text-[#f5f5f7] text-[11px] font-semibold tracking-wide">
+          {/* Rating Badge - Posicionado em cima à direita como na imagem base */}
+          <div className="absolute -top-1 -right-2 bg-slate-800 border border-slate-700 px-2 py-0.5 rounded-full flex items-center gap-[2px] shadow-sm z-10">
+            <Star size={11} className="fill-amber-400 text-amber-400" />
+            <span className="text-white text-[11px] font-semibold tracking-wide">
               {shop.rating ? shop.rating.toFixed(1) : '0.0'}
             </span>
           </div>
         </div>
 
         {/* Informações da Barbearia */}
-        <div className="flex flex-col justify-center flex-1 py-1">
-          <h2 className="text-[#f5f5f7] text-[16px] md:text-[17px] font-semibold uppercase tracking-wide truncate mb-1.5 group-hover:text-amber-500 transition-colors">
+        <div className="flex flex-col flex-1 py-1">
+          <h2 className="text-slate-900 text-base md:text-lg font-bold uppercase tracking-wide truncate mb-1.5 group-hover:text-amber-600 transition-colors">
             {shop.name}
           </h2>
-          <p className="text-[#8e8e93] text-[13px] leading-snug line-clamp-2 pr-1 mb-3">
-            {shop.address || 'Endereço Indisponível'}
-          </p>
+          <div className="flex items-start gap-1.5 text-slate-500 mb-2">
+            <MapPin size={16} className="shrink-0 mt-0.5 text-amber-600" />
+            <p className="text-sm leading-snug line-clamp-2 pr-1">
+              {shop.address || 'Endereço Indisponível'}
+            </p>
+          </div>
 
-          <div className="flex items-center gap-1.5 mt-auto">
-            <MapPin size={15} className="text-[#ff3b30] fill-[#ff3b30]" />
-            <span className="text-[#e5e5ea] text-[14px] font-medium tracking-wide">
-              {mockDistance} m
-            </span>
+          <div className="flex items-center gap-2 text-xs text-slate-500 mt-auto font-medium">
+            <span>{(shop.services || []).length} serviços</span>
+            <span className="text-slate-300">•</span>
+            <span>{(shop.barbers || []).length} barbeiros</span>
           </div>
         </div>
       </div>
 
       {/* Botões de Ação na base */}
-      <div className="flex gap-2 pt-4 mt-4 border-t border-[#262626]">
-        <Button asChild variant="outline" size="sm" className="flex-1 bg-transparent border-[#3a3a3a] text-[#c7c7cc] hover:bg-[#1c1c1e] hover:text-[#f5f5f7] hover:border-[#4a4a4a]">
+      <div className="flex gap-2 pt-4 mt-4 border-t border-slate-100">
+        <Button asChild variant="outline" size="sm" className="flex-1">
           <Link to={`/barbearia/${shop.id}`}>Ver detalhes</Link>
         </Button>
-        <Button asChild size="sm" className="flex-1 bg-[#2563eb] hover:bg-[#1d4ed8] text-white border-0 shadow-md">
+        <Button asChild size="sm" className="flex-1 bg-amber-600 hover:bg-amber-700 border-0">
           <Link to={`/agendar/${shop.id}`}>Agendar</Link>
         </Button>
       </div>
-    </div>
+    </Card>
   );
 };
-
-
-
-
-