diff --git a/web/src/components/BarberList.tsx b/web/src/components/BarberList.tsx
index 1c68c2d..ba5413a 100644
--- a/web/src/components/BarberList.tsx
+++ b/web/src/components/BarberList.tsx
@@ -7,7 +7,7 @@ export const BarberList = ({ barbers }: { barbers: Barber[] }) => (
     {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">
+          <div className="w-full aspect-square rounded-2xl 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" />
             ) : (
diff --git a/web/src/pages/Booking.tsx b/web/src/pages/Booking.tsx
index 1afcefe..f3e017c 100644
--- a/web/src/pages/Booking.tsx
+++ b/web/src/pages/Booking.tsx
@@ -251,7 +251,7 @@ export default function Booking() {
                       : 'border-slate-100 hover:border-amber-300 hover:bg-amber-50/30'
                       }`}
                   >
-                    <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-slate-200 bg-slate-50">
+                    <div className="w-full aspect-square rounded-2xl overflow-hidden border-2 border-slate-200 bg-slate-50">
                       {b.imageUrl ? (
                         <img src={b.imageUrl} alt={b.name} className="w-full h-full object-cover" />
                       ) : (
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index 641a201..9b5b0c7 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -908,7 +908,7 @@ function DashboardInner({ shop }: { shop: BarberShop }) {
                   <div className="flex items-center justify-between mb-4">
                     <div className="flex items-center gap-4">
                       <div className="relative group/avatar">
-                        <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-slate-100 bg-slate-50 flex items-center justify-center">
+                        <div className="w-16 h-16 rounded-2xl overflow-hidden border-2 border-slate-100 bg-slate-50 flex items-center justify-center">
                           {b.imageUrl ? (
                             <img src={b.imageUrl} alt={b.name} className="w-full h-full object-cover" />
                           ) : (
@@ -924,7 +924,7 @@ function DashboardInner({ shop }: { shop: BarberShop }) {
                         />
                         <label
                           htmlFor={`barber-img-${b.id}`}
-                          className="absolute inset-0 bg-black/40 text-white flex items-center justify-center rounded-full opacity-0 group-hover/avatar:opacity-100 cursor-pointer transition-opacity"
+                          className="absolute inset-0 bg-black/40 text-white flex items-center justify-center rounded-2xl opacity-0 group-hover/avatar:opacity-100 cursor-pointer transition-opacity"
                         >
                           {uploadingBarberId === b.id ? <RefreshCw size={14} className="animate-spin" /> : <Plus size={14} />}
                         </label>