diff --git a/web/src/components/ShopCard.tsx b/web/src/components/ShopCard.tsx
index 6d83670..fe6027c 100644
--- a/web/src/components/ShopCard.tsx
+++ b/web/src/components/ShopCard.tsx
@@ -4,43 +4,63 @@ import { BarberShop } from '../types';
 import { Card } from './ui/card';
 import { Button } from './ui/button';
 
-export const ShopCard = ({ shop }: { shop: BarberShop }) => (
-  <Card hover className="p-6 space-y-4 group">
-    <div className="flex items-start justify-between">
-      <div className="space-y-2 flex-1">
-        <div className="flex items-center gap-2">
-          <div className="p-2 bg-gradient-to-br from-indigo-500 to-blue-600 rounded-lg text-white shadow-sm">
-            <Scissors size={18} />
+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">
+      <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">
+            {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>
+            )}
+          </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">
+              {shop.rating ? shop.rating.toFixed(1) : '0.0'}
+            </span>
           </div>
-          <h2 className="text-lg font-bold text-slate-900 group-hover:text-indigo-700 transition-colors">{shop.name}</h2>
         </div>
-        <div className="flex items-center gap-4 text-sm text-slate-600">
-          <span className="flex items-center gap-1 font-medium">
-            <MapPin size={14} />
-            {shop.address}
-          </span>
-          <span className="flex items-center gap-1 text-indigo-600 font-semibold">
-            <Star size={14} className="fill-indigo-500 text-indigo-500" />
-            {(shop.rating || 0).toFixed(1)}
-          </span>
-        </div>
-        <div className="flex items-center gap-3 text-xs text-slate-500 pt-1">
-          <span>{(shop.services || []).length} serviços</span>
-          <span>•</span>
-          <span>{(shop.barbers || []).length} barbeiros</span>
+
+        {/* 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">
+            {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-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>
         </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]">
+          <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">
+          <Link to={`/agendar/${shop.id}`}>Agendar</Link>
+        </Button>
+      </div>
     </div>
-    <div className="flex gap-2 pt-2 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">
-        <Link to={`/agendar/${shop.id}`}>Agendar</Link>
-      </Button>
-    </div>
-  </Card>
-);
+  );
+};