diff --git a/src/app/item-page/simple/field-components/preview-section/preview-section.component.html b/src/app/item-page/simple/field-components/preview-section/preview-section.component.html
index cd937f7b465..de3462c6e8f 100644
--- a/src/app/item-page/simple/field-components/preview-section/preview-section.component.html
+++ b/src/app/item-page/simple/field-components/preview-section/preview-section.component.html
@@ -1,10 +1,24 @@
-<!-- Loading Spinner -->
-<div *ngIf="(listOfFiles | async)?.length === 0" class="d-flex flex-column justify-content-center align-items-center my-3">
-  <div class="spinner-border text-primary" role="status"></div>
-  <div class="px-4 pt-2">{{'item.preview.loading-files' | translate}}
-    <a *ngIf="emailToContact" [href]="'mailto:' + emailToContact" class="email-text">{{ emailToContact }}</a>
+<ng-container *ngIf="(listOfFiles | async) as files; else loading">
+  <!-- Show "No files" message -->
+  <div *ngIf="(hasNoFiles | async)" class="text-center text-muted my-3">
+    {{ 'item.view.box.no-files.message' | translate }}
   </div>
-</div>
-<div *ngFor="let file of (listOfFiles | async)">
-  <ds-file-description [fileInput] = 'file'></ds-file-description>
-</div>
+
+  <!-- Show list of files -->
+  <div *ngFor="let file of files">
+    <ds-file-description [fileInput]="file"></ds-file-description>
+  </div>
+</ng-container>
+
+<!-- Spinner shown only while listOfFiles is null or undefined -->
+<ng-template #loading>
+  <div class="d-flex flex-column justify-content-center align-items-center my-3">
+    <div class="spinner-border text-primary" role="status"></div>
+    <div class="px-4 pt-2">
+      {{ 'item.preview.loading-files' | translate }}
+      <a *ngIf="emailToContact" [href]="'mailto:' + emailToContact" class="email-text">
+        {{ emailToContact }}
+      </a>
+    </div>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/item-page/simple/field-components/preview-section/preview-section.component.ts b/src/app/item-page/simple/field-components/preview-section/preview-section.component.ts
index 3f485e70f08..9968e942534 100644
--- a/src/app/item-page/simple/field-components/preview-section/preview-section.component.ts
+++ b/src/app/item-page/simple/field-components/preview-section/preview-section.component.ts
@@ -16,6 +16,7 @@ export class PreviewSectionComponent implements OnInit {
 
   listOfFiles: BehaviorSubject<MetadataBitstream[]> = new BehaviorSubject<MetadataBitstream[]>([] as any);
   emailToContact: string;
+  hasNoFiles: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
 
   constructor(protected registryService: RegistryService,
               private configService: ConfigurationDataService) {} // Modified
@@ -26,11 +27,10 @@ export class PreviewSectionComponent implements OnInit {
       .pipe(getAllSucceededRemoteListPayload())
       .subscribe((data: MetadataBitstream[]) => {
         this.listOfFiles.next(data);
+        this.hasNoFiles.next(!Array.isArray(data) || data.length === 0);
       });
     this.configService.findByPropertyName('lr.help.mail')?.subscribe(remoteData => {
       this.emailToContact = remoteData.payload?.values?.[0];
     });
   }
-
-
 }