diff --git a/blocks/offices/offices.css b/blocks/offices/offices.css
index 55d86723..d49c96be 100644
--- a/blocks/offices/offices.css
+++ b/blocks/offices/offices.css
@@ -52,6 +52,7 @@
 .offices.block.agents .cards-list .cards-item .card-image {
   display: inline-block;
   width: 33%;
+  height: 100%;
 }
 
 .offices.block .cards-list .cards-item .card-image picture {
@@ -69,6 +70,7 @@
   object-position: center;
   width: 100%;
   height: 100%;
+  object-fit: contain;
 }
 
 .offices.block.agents .cards-list .cards-item .card-body {
diff --git a/blocks/offices/offices.js b/blocks/offices/offices.js
index a4c5b764..497eada1 100644
--- a/blocks/offices/offices.js
+++ b/blocks/offices/offices.js
@@ -49,11 +49,14 @@ function buildAgentCards(list, data) {
     cardsItem.className = 'cards-item';
     const cardImage = document.createElement('div');
     cardImage.className = 'card-image';
-    const tmpImage = 'https://main--hsf-commonmoves--hlxsites.hlx.page/media/images/no-profile-image.png';
-    const image = createOptimizedPicture(tmpImage, item.name, true);
-    image.style = 'padding-bottom: 75%';
-
-    cardImage.append(image);
+    const tmpImage = item.image ? item.image : 'https://main--hsf-commonmoves--hlxsites.hlx.page/media/images/no-profile-image.png';
+    const pic = document.createElement('picture');
+    const image = document.createElement('img');
+    pic.append(image);
+    pic.style = 'padding-bottom: 75%';
+    image.src = tmpImage;
+    image.loading = 'eager';
+    cardImage.append(pic);
     cardsItem.append(cardImage);
     const cardBody = document.createElement('div');
     cardBody.className = 'card-body';