diff --git a/src/components/sections/other/TeamPets.tsx b/src/components/sections/other/TeamPets.tsx
index e881a05..b436e31 100644
--- a/src/components/sections/other/TeamPets.tsx
+++ b/src/components/sections/other/TeamPets.tsx
@@ -5,6 +5,7 @@ import ScrollReveal from "@/components/ui/ScrollReveal";
 
 type Pet = {
   name: string;
+  description?: string;
   imageSrc: string;
 };
 
@@ -18,18 +19,22 @@ type TeamPetsProps = {
 const defaultPets: Pet[] = [
   {
     name: "Barnaby",
+    description: "Chief Tasting Officer",
     imageSrc: "https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxfHxkb2d8ZW58MXwwfHx8MTc3NzM4NDkyMXww&ixlib=rb-4.1.0&q=80&w=1080",
   },
   {
     name: "Luna",
+    description: "Nap Coordinator",
     imageSrc: "https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MXwwfHx8MTc3NzM4NDkyMnww&ixlib=rb-4.1.0&q=80&w=1080",
   },
   {
     name: "Cooper",
+    description: "Door Greeter",
     imageSrc: "https://images.unsplash.com/photo-1552053831-71594a27632d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyfHxkb2d8ZW58MXwwfHx8MTc3NzM4NDkyM3ww&ixlib=rb-4.1.0&q=80&w=1080",
   },
   {
     name: "Milo",
+    description: "Crumb Inspector",
     imageSrc: "https://images.unsplash.com/photo-1573865526739-10659fec78a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4Mzc5ODl8MHwxfHNlYXJjaHwyfHxjYXR8ZW58MXwwfHx8MTc3NzM4NDkyNHww&ixlib=rb-4.1.0&q=80&w=1080",
   }
 ];
@@ -64,16 +69,19 @@ export default function TeamPets({
         </div>
 
         <ScrollReveal variant="slide-up">
-          <div className="flex flex-col md:flex-row justify-center items-center pt-8 md:pl-8">
-            {pets.map((pet, index) => (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            {pets.map((pet) => (
               <Card 
                 key={pet.name} 
-                className={`flex flex-col items-center p-4 w-64 -mt-8 md:mt-0 md:-ml-8 first:mt-0 md:first:ml-0 hover:-translate-y-2 transition-transform ${index % 2 === 0 ? 'rotate-1' : '-rotate-1'} shadow-xl`}
+                className="flex flex-col hover:-translate-y-1 hover:shadow-xl transition-all duration-200"
               >
-                <div className="w-full aspect-square rounded overflow-hidden mb-4">
+                <div className="w-full h-48 rounded overflow-hidden mb-4">
                   <ImageOrVideo imageSrc={pet.imageSrc} className="w-full h-full object-cover" />
                 </div>
-                <h3 className="text-xl font-medium">{pet.name}</h3>
+                <h3 className="text-xl font-semibold text-foreground">{pet.name}</h3>
+                {pet.description && (
+                  <p className="text-base opacity-80 mt-2">{pet.description}</p>
+                )}
               </Card>
             ))}
           </div>