diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 194d1542de9ff..900ed519787e7 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -348,19 +348,21 @@ table td.filename .thumbnail-wrapper.icon-loading-small {
 	}
 }
 table td.filename .thumbnail {
-	display: inline-block;
-	width: 32px;
-	height: 32px;
-	background-size: contain;
-	background-position: center;
-	background-repeat: no-repeat;
-	margin-left: 9px;
-	margin-top: 9px;
-	border-radius: var(--border-radius);
-	cursor: pointer;
-	position: absolute;
-	z-index: 4;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-left: 9px;
+    margin-top: 9px;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    position: absolute;
+    z-index: 4;
+    background-color: var(--primary-color); /* Set the background color to the primary color */
 }
+
 table td.filename p.name .thumbnail {
 	cursor: default;
 }
diff --git a/apps/files/src/views/ReferenceFileWidget.vue b/apps/files/src/views/ReferenceFileWidget.vue
index 896105f02070d..fa3e252460a29 100644
--- a/apps/files/src/views/ReferenceFileWidget.vue
+++ b/apps/files/src/views/ReferenceFileWidget.vue
@@ -55,7 +55,7 @@
 		:href="richObject.link"
 		target="_blank"
 		@click="navigate">
-		<span class="widget-file__image" :class="filePreviewClass" :style="filePreviewStyle">
+		<span class="widget-file__image" :class="filePreviewClass" :style="{ backgroundColor: primaryColor }">
 			<template v-if="!previewUrl">
 				<FolderIcon v-if="isFolder" :size="88" />
 				<FileIcon v-else :size="88" />
@@ -141,6 +141,7 @@ export default defineComponent({
 		return {
 			previewUrl: null as string | null,
 			failedViewer: false,
+			primaryColor: 'var(--primary-color)'
 		}
 	},