diff --git a/src/app/item-page/clarin-files-section/clarin-files-section.component.html b/src/app/item-page/clarin-files-section/clarin-files-section.component.html
index 09829decf58..ed02eb13675 100644
--- a/src/app/item-page/clarin-files-section/clarin-files-section.component.html
+++ b/src/app/item-page/clarin-files-section/clarin-files-section.component.html
@@ -24,5 +24,5 @@ <h6><i class="fa fa-paperclip">&nbsp;</i>{{'item.page.files.head' | translate}}<
       </a>
     </span>
   </div>
-  <ds-preview-section [item]="item"></ds-preview-section>
+  <ds-preview-section [item]="item" [listOfFiles]="(listOfFiles | async)"></ds-preview-section>
 </ng-container>
diff --git a/src/app/item-page/simple/field-components/preview-section/file-description/file-description.component.html b/src/app/item-page/simple/field-components/preview-section/file-description/file-description.component.html
index 91287138d49..7f70cde7d16 100644
--- a/src/app/item-page/simple/field-components/preview-section/file-description/file-description.component.html
+++ b/src/app/item-page/simple/field-components/preview-section/file-description/file-description.component.html
@@ -47,7 +47,7 @@
     </span>
     <span class="pl-1">
       <a class="preview-btn collapsed" data-toggle="collapse" *ngIf="couldPreview()" role="button"
-         href="#file_file_{{ fileInput.id }}">
+        (click)="showPreview()" href="#file_file_{{ fileInput.id }}">
         <i class="fa fa-eye">&nbsp;</i>
         {{'item.file.description.preview' | translate}}
       </a>
diff --git a/src/app/item-page/simple/field-components/preview-section/file-description/file-description.component.ts b/src/app/item-page/simple/field-components/preview-section/file-description/file-description.component.ts
index f59479a9f3c..361a73d9805 100644
--- a/src/app/item-page/simple/field-components/preview-section/file-description/file-description.component.ts
+++ b/src/app/item-page/simple/field-components/preview-section/file-description/file-description.component.ts
@@ -38,6 +38,15 @@ export class FileDescriptionComponent implements OnInit, OnDestroy {
   handlers_added = false;
   playPromise: Promise<void>;
 
+  /**
+   * Whether the user has clicked the "Show Preview" button for non-video files.
+   */
+  public isPreviewVisible = false;
+  /**
+   * Whether the preview data is currently being loaded for non-video files.
+   */
+  public isLoadingPreview = false;
+
   private subscriptions: Subscription = new Subscription();
 
   constructor(protected halService: HALEndpointService,
@@ -54,30 +63,12 @@ export class FileDescriptionComponent implements OnInit, OnDestroy {
       .subscribe(remoteData => {
       this.emailToContact = remoteData?.payload?.values?.[0];
     });
-    this.content_url$ = this.bitstreamService.findById(this.fileInput.id, true, false, followLink('thumbnail'))
-      .pipe(getFirstCompletedRemoteData(),
-            switchMap((remoteData: RemoteData<Bitstream>) => {
-              if (remoteData.hasSucceeded) {
-                if (remoteData.payload?.thumbnail){
-                  this.thumbnail_url$ = remoteData.payload?.thumbnail.pipe(
-                    switchMap((thumbnailRD: RemoteData<Bitstream>) => {
-                      if (thumbnailRD.hasSucceeded) {
-                        return this.buildUrl(thumbnailRD.payload?._links.content.href);
-                      } else {
-                        return of('');
-                      }
-                    }),
-                  );
-                } else {
-                  this.thumbnail_url$ = of('');
-                }
-                return of(remoteData.payload?._links.content.href);
-              }
-            }
-      ));
-    this.content_url$.pipe(take(1)).subscribe((url) => {
-      this.content_url = url;
-    });
+
+    // If the file is a video, load its data immediately as before.
+    // For all other file types, we will wait for the user to click a button.
+    if (this.isVideo()) {
+      this.loadPreviewData();
+    }
   }
 
   ngAfterViewInit() {
@@ -111,6 +102,57 @@ export class FileDescriptionComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Called when the user clicks the "Show Preview" button for a non-video file.
+   * It sets flags to show the preview section and a loading indicator,
+   * then starts fetching the required data.
+   */
+  public showPreview(): void {
+    this.isLoadingPreview = true;
+    this.isPreviewVisible = true;
+    this.loadPreviewData();
+  }
+
+  /**
+   * A helper method to determine if the file is a video.
+   */
+  public isVideo(): boolean {
+    return this.fileInput?.format.startsWith('video/');
+  }
+
+  /**
+   * Fetches the bitstream content URL and thumbnail.
+   * It is called on-demand for other previews.
+   */
+  private loadPreviewData(): void {
+    this.content_url$ = this.bitstreamService.findById(this.fileInput.id, true, false, followLink('thumbnail'))
+      .pipe(getFirstCompletedRemoteData(),
+            switchMap((remoteData: RemoteData<Bitstream>) => {
+              // Hide loading indicator once the request is complete
+              this.isLoadingPreview = false;
+              if (remoteData.hasSucceeded) {
+                if (remoteData.payload?.thumbnail){
+                  this.thumbnail_url$ = remoteData.payload?.thumbnail.pipe(
+                    switchMap((thumbnailRD: RemoteData<Bitstream>) => {
+                      if (thumbnailRD.hasSucceeded) {
+                        return this.buildUrl(thumbnailRD.payload?._links.content.href);
+                      } else {
+                        return of('');
+                      }
+                    }),
+                  );
+                } else {
+                  this.thumbnail_url$ = of('');
+                }
+                return of(remoteData.payload?._links.content.href);
+              }
+            }
+      ));
+    this.content_url$.pipe(take(1)).subscribe((url) => {
+      this.content_url = url;
+    });
+  }
+
   private add_short_lived_token_handling_to_video_playback(video: HTMLVideoElement) {
       if (this.handlers_added) {
         return;
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..2488856db52 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,10 @@
 <!-- Loading Spinner -->
-<div *ngIf="(listOfFiles | async)?.length === 0" class="d-flex flex-column justify-content-center align-items-center my-3">
+<div *ngIf="listOfFiles?.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>
   </div>
 </div>
-<div *ngFor="let file of (listOfFiles | async)">
+<div *ngFor="let file of listOfFiles">
   <ds-file-description [fileInput] = 'file'></ds-file-description>
 </div>
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 d8dd5faad53..1708deadc0b 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
@@ -1,9 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
 import { MetadataBitstream } from 'src/app/core/metadata/metadata-bitstream.model';
-import { RegistryService } from 'src/app/core/registry/registry.service';
 import { Item } from 'src/app/core/shared/item.model';
-import { getAllSucceededRemoteListPayload } from 'src/app/core/shared/operators';
 import { ConfigurationDataService } from '../../../../core/data/configuration-data.service';
 
 @Component({
@@ -13,20 +10,13 @@ import { ConfigurationDataService } from '../../../../core/data/configuration-da
 })
 export class PreviewSectionComponent implements OnInit {
   @Input() item: Item;
+  @Input() listOfFiles: MetadataBitstream[];
 
-  listOfFiles: BehaviorSubject<MetadataBitstream[]> = new BehaviorSubject<MetadataBitstream[]>([] as any);
   emailToContact: string;
 
-  constructor(protected registryService: RegistryService,
-              private configService: ConfigurationDataService) {} // Modified
+  constructor(private configService: ConfigurationDataService) {} // Modified
 
   ngOnInit(): void {
-    this.registryService
-      .getMetadataBitstream(this.item.handle, 'ORIGINAL')
-      .pipe(getAllSucceededRemoteListPayload())
-      .subscribe((data: MetadataBitstream[]) => {
-        this.listOfFiles.next(data);
-      });
     this.configService.findByPropertyName('lr.help.mail')?.subscribe(remoteData => {
       this.emailToContact = remoteData.payload?.values?.[0];
     });