diff --git a/static/css/components/cards.css b/static/css/components/cards.css
index 681d1acd..45761d14 100644
--- a/static/css/components/cards.css
+++ b/static/css/components/cards.css
@@ -322,6 +322,17 @@ button.favorite-star {
 	overflow: hidden;
 }
 
+/* Thumbnail image inside file-icon (grid and list views) */
+.file-icon .file-thumb {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	z-index: 1;
+}
+
 .file-icon.image-icon::before {
 	content: "";
 	position: absolute;
diff --git a/static/css/components/fileList.css b/static/css/components/fileList.css
index 88b6548a..4dfb4ceb 100644
--- a/static/css/components/fileList.css
+++ b/static/css/components/fileList.css
@@ -145,6 +145,9 @@
 
 .file-item .file-icon.image-icon {
 	background-color: #e0f2fe;
+	position: relative;
+	overflow: hidden;
+	border-radius: 4px;
 }
 
 .file-item .file-icon.image-icon i,
diff --git a/static/js/app/ui.js b/static/js/app/ui.js
index a649e56a..24501261 100644
--- a/static/js/app/ui.js
+++ b/static/js/app/ui.js
@@ -747,13 +747,13 @@ const ui = {
             return null;
         };
 
-        const openFile = (file) => {
+        const openFile = async (file) => {
             if (!file) return;
             if (window.recent) {
                 document.dispatchEvent(new CustomEvent('file-accessed', { detail: { file } }));
             }
             // WOPI editor intercept: open Office documents in the WOPI editor
-            if (window.wopiEditor && window.wopiEditor.canEdit(file.name)) {
+            if (window.wopiEditor && await window.wopiEditor.canEdit(file.name)) {
                 window.wopiEditor.openInModal(file.id, file.name, 'edit');
                 return;
             }
@@ -1139,6 +1139,7 @@ const ui = {
                 <i class="${isFileFav ? 'fas' : 'far'} fa-star"></i>
             </button>
             <div class="file-icon ${iconSpecialClass}">
+                ${iconSpecialClass === 'image-icon' ? `<img class="file-thumb" src="/api/files/${file.id}/thumbnail/icon" loading="lazy" alt="" onerror="this.style.display='none'">` : ''}
                 <i class="${iconClass}"></i>
             </div>
             <div class="file-name">${escapeHtml(file.name)}</div>
@@ -1176,6 +1177,7 @@ const ui = {
             <div class="list-item-checkbox"><input type="checkbox" class="item-checkbox"></div>
             <div class="name-cell">
                 <div class="file-icon ${iconSpecialClass}">
+                    ${iconSpecialClass === 'image-icon' ? `<img class="file-thumb" src="/api/files/${file.id}/thumbnail/icon" loading="lazy" alt="" onerror="this.style.display='none'">` : ''}
                     <i class="${iconClass}"></i>
                 </div>
                 <span>${escapeHtml(file.name)}</span>
diff --git a/static/js/features/files/inlineViewer.js b/static/js/features/files/inlineViewer.js
index 610f7af6..b792f888 100644
--- a/static/js/features/files/inlineViewer.js
+++ b/static/js/features/files/inlineViewer.js
@@ -88,11 +88,11 @@ class InlineViewer {
     console.log('Inline viewer initialized');
   }
   
-  openFile(file) {
+  async openFile(file) {
     console.log('Opening file:', file);
 
     // WOPI editor intercept: open Office documents in the WOPI editor
-    if (window.wopiEditor && window.wopiEditor.canEdit(file.name)) {
+    if (window.wopiEditor && await window.wopiEditor.canEdit(file.name)) {
         window.wopiEditor.openInModal(file.id, file.name, 'edit');
         return;
     }