diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 5d06de65..c603d280 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -387,11 +387,4 @@ html {
   padding: 0;
   height: 100%;
 }
-
-.thumbnail-fit {
-  max-height: 120px;
-  max-width: 240px;
-  object-fit: contain;
-  overflow-y: hidden;
-}
 </style>
diff --git a/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue b/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
index d9b32d11..8e8af469 100644
--- a/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
+++ b/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
@@ -5,10 +5,11 @@
         <div class="view-image uk-padding-remove uk-height-1-1">
           <img
             id="thumbnail-stitched-image"
+            :class="[itemData?.dzi ? 'thumbnail-fit clickable' : 'thumbnail-fit disabled']"
             class="thumbnail-fit"
             :src="thumbnailPath"
             onerror="this.src = '/titleiconpink.svg'"
-            @click="requestViewer"
+            @click="itemData?.dzi && requestViewer()"
           />
         </div>
       </div>
@@ -192,4 +193,19 @@ ul {
 .gallery-card-title {
   text-align: center;
 }
+
+.thumbnail-fit {
+  max-height: 120px;
+  max-width: 240px;
+  object-fit: contain;
+  overflow-y: hidden;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.disabled {
+  cursor: not-allowed;
+}
 </style>