diff --git a/web/src/components/BarberList.tsx b/web/src/components/BarberList.tsx
new file mode 100644
index 0000000..1c68c2d
--- /dev/null
+++ b/web/src/components/BarberList.tsx
@@ -0,0 +1,44 @@
+import { Card } from './ui/card';
+import { Barber } from '../types';
+import { User, Scissors } from 'lucide-react';
+
+export const BarberList = ({ barbers }: { barbers: Barber[] }) => (
+  <div className="grid md:grid-cols-3 gap-4">
+    {barbers.map((b) => (
+      <Card key={b.id} hover className="p-5 flex flex-col items-center text-center gap-4 group">
+        <div className="relative">
+          <div className="w-24 h-24 rounded-full overflow-hidden border-4 border-slate-50 bg-slate-100 flex items-center justify-center shadow-sm group-hover:border-amber-100 transition-colors">
+            {b.imageUrl ? (
+              <img src={b.imageUrl} alt={b.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
+            ) : (
+              <User size={40} className="text-slate-300" />
+            )}
+          </div>
+          <div className="absolute -bottom-1 -right-1 w-8 h-8 bg-amber-600 rounded-full flex items-center justify-center text-white border-2 border-white shadow-sm">
+            <Scissors size={14} />
+          </div>
+        </div>
+        
+        <div>
+          <h3 className="font-bold text-slate-900 text-lg group-hover:text-amber-700 transition-colors">{b.name}</h3>
+          <div className="mt-2 flex flex-wrap justify-center gap-1">
+            {b.specialties.map((spec, i) => (
+              <span key={i} className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-[10px] font-bold uppercase tracking-wider">
+                {spec}
+              </span>
+            ))}
+            {b.specialties.length === 0 && (
+              <span className="text-xs text-slate-400 italic">Especialista em tudo</span>
+            )}
+          </div>
+        </div>
+      </Card>
+    ))}
+    {barbers.length === 0 && (
+      <div className="col-span-full py-20 text-center">
+        <User size={48} className="mx-auto text-slate-200 mb-4" />
+        <p className="text-slate-500 font-medium">Esta barbearia ainda não registou barbeiros.</p>
+      </div>
+    )}
+  </div>
+);
diff --git a/web/src/pages/ShopDetails.tsx b/web/src/pages/ShopDetails.tsx
index a734ffc..8356440 100644
--- a/web/src/pages/ShopDetails.tsx
+++ b/web/src/pages/ShopDetails.tsx
@@ -9,6 +9,7 @@ import { useMemo, useState } from 'react';
 import { Tabs } from '../components/ui/tabs';
 import { ServiceList } from '../components/ServiceList';
 import { ProductList } from '../components/ProductList';
+import { BarberList } from '../components/BarberList';
 import { Button } from '../components/ui/button';
 import { useApp } from '../context/AppContext';
 import { Dialog } from '../components/ui/dialog';
@@ -18,7 +19,7 @@ export default function ShopDetails() {
   const { id } = useParams<{ id: string }>();
   const { shops, shopsReady, addToCart, toggleFavorite, isFavorite } = useApp();
   const shop = useMemo(() => shops.find((s) => s.id === id), [shops, id]);
-  const [tab, setTab] = useState<'servicos' | 'produtos'>('servicos');
+  const [tab, setTab] = useState<'servicos' | 'produtos' | 'barbeiros'>('servicos');
   const [imageOpen, setImageOpen] = useState(false);
 
   if (!shopsReady) {
@@ -92,6 +93,7 @@ export default function ShopDetails() {
       <Tabs
         tabs={[
           { id: 'servicos', label: 'Serviços' },
+          { id: 'barbeiros', label: 'Barbeiros' },
           { id: 'produtos', label: 'Produtos' },
         ]}
         active={tab}
@@ -105,6 +107,8 @@ export default function ShopDetails() {
             window.location.href = `/agendar/${shop.id}?service=${sid}`;
           }}
         />
+      ) : tab === 'barbeiros' ? (
+        <BarberList barbers={shop.barbers} />
       ) : (
         <ProductList products={shop.products} onAdd={(pid) => addToCart({ shopId: shop.id, type: 'product', refId: pid, qty: 1 })} />
       )}