diff --git a/static/css/styles.css b/static/css/styles.css
index d49fec2..f1ed0c1 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -4696,6 +4696,15 @@ td [role="switch"] {
     contrast(1.08) brightness(0.88) drop-shadow(0 12px 24px rgb(42 52 57 / 18%));
 }
 
+/* Opaque images (no alpha, e.g. JPG): circle-crop via CSS instead of
+   showing a rigid squared box. Transparent images keep their shape. */
+.places-pin-media-opaque img {
+  width: 88%;
+  height: 88%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
 .places-pin-media-placeholder {
   display: flex;
   align-items: center;
diff --git a/static/places.js b/static/places.js
index fe7af30..68661ae 100644
--- a/static/places.js
+++ b/static/places.js
@@ -422,9 +422,11 @@
 
   function renderHoneymoonPin(place) {
     const title = escapeHtml(place.label || place.name || "Stop");
+    // Transparent images keep their natural shape; opaque ones (e.g. JPG)
+    // are circle-cropped so they never render as a rigid squared box.
     const transparentClass = supportsTransparency(place.image)
       ? " places-pin-media-transparent"
-      : "";
+      : " places-pin-media-opaque";
     return place.image
       ? '<div class="places-pin-media' +
           transparentClass +