diff --git a/_includes/models/card.html b/_includes/models/card.html
index 5abcefb43a..0aa2335f37 100644
--- a/_includes/models/card.html
+++ b/_includes/models/card.html
@@ -9,7 +9,7 @@
         </div>
         <h4 class="pattern-name">{{model.name}}</h4>
         <div class="pattern-image-container">
-          <img class= "pattern-image model-image" 
+          <img class= "model-image" 
           data-modelicon-light="{{model.colorIcon}}"
           data-modelicon-dark="{{model.whiteIcon}}"
           src="{{model.colorIcon}}" 
diff --git a/_sass/catalog.scss b/_sass/catalog.scss
index a9047441eb..f019dc182f 100644
--- a/_sass/catalog.scss
+++ b/_sass/catalog.scss
@@ -336,7 +336,7 @@ p {
   display: flex;
   justify-content: center;
 }
-.pattern-image {
+.pattern-image, .model-image {
   width: 60%;
   margin-top: 24px;
   object-fit: contain;
diff --git a/collections/_pages/catalog.html b/collections/_pages/catalog.html
index f9d42eeeb4..ebdb7cc348 100644
--- a/collections/_pages/catalog.html
+++ b/collections/_pages/catalog.html
@@ -206,6 +206,8 @@ <h2 class="not-found" style="display: none;" id="not-found">
     document.querySelectorAll(".pattern-image").forEach(e => {
       e.src = event.detail.value == "dark-mode" ? e.dataset.snapshotDark : e.dataset.snapshotLight;
     });
-  
+    document.querySelectorAll(".model-image").forEach(e => {
+      e.src = event.detail.value == "dark-mode" ? e.dataset.modeliconDark : e.dataset.modeliconLight;
+    })
   }) 
 </script>