diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.html
index 6d6f693e2..399c3cbbb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.html
@@ -1,54 +1,58 @@
-<div class="right-title heading" translate="file-preview.tabs.document-info.label">
-    <div>
-        <iqser-circle-button
-            (action)="edit()"
-            *ngIf="permissionsService.canEditFileAttributes(dossier, file)"
-            [tooltip]="'file-preview.tabs.document-info.edit' | translate"
-            icon="iqser:edit"
-            tooltipPosition="before"
-        ></iqser-circle-button>
+<ng-container *ngIf="stateService.file$ | async as file">
+    <div class="right-title heading" translate="file-preview.tabs.document-info.label">
+        <div>
+            <iqser-circle-button
+                (action)="edit()"
+                *ngIf="permissionsService.canEditFileAttributes(file)"
+                [tooltip]="'file-preview.tabs.document-info.edit' | translate"
+                icon="iqser:edit"
+                tooltipPosition="before"
+            ></iqser-circle-button>
 
-        <iqser-circle-button
-            (action)="documentInfoService.hide()"
-            [tooltip]="'file-preview.tabs.document-info.close' | translate"
-            icon="iqser:close"
-            tooltipPosition="before"
-        ></iqser-circle-button>
-    </div>
-</div>
-
-<div class="right-content" iqserHasScrollbar>
-    <div class="section">
-        <div *ngFor="let attr of fileAttributes$ | async" class="attribute">
-            <div class="small-label">{{ attr.label }}:</div>
-            <div>{{ attr.value || '-' }}</div>
+            <iqser-circle-button
+                (action)="documentInfoService.hide()"
+                [tooltip]="'file-preview.tabs.document-info.close' | translate"
+                icon="iqser:close"
+                tooltipPosition="before"
+            ></iqser-circle-button>
         </div>
     </div>
 
-    <div class="section small-label stats-subtitle">
-        <div>
-            <mat-icon svgIcon="red:folder"></mat-icon>
-            <span>{{ 'file-preview.tabs.document-info.details.dossier' | translate: { dossierName: dossier.dossierName } }}</span>
+    <div class="right-content" iqserHasScrollbar>
+        <div class="section">
+            <div *ngFor="let attr of fileAttributes$ | async" class="attribute">
+                <div class="small-label">{{ attr.label }}:</div>
+                <div>{{ attr.value || '-' }}</div>
+            </div>
         </div>
 
-        <div>
-            <mat-icon svgIcon="iqser:document"></mat-icon>
-            <span>{{ 'file-preview.tabs.document-info.details.pages' | translate: { pages: file.numberOfPages } }}</span>
-        </div>
+        <div class="section small-label stats-subtitle">
+            <div>
+                <mat-icon svgIcon="red:folder"></mat-icon>
+                <span>{{ 'file-preview.tabs.document-info.details.dossier' | translate: { dossierName: dossier.dossierName } }}</span>
+            </div>
 
-        <div>
-            <mat-icon svgIcon="red:calendar"></mat-icon>
-            <span>{{ 'file-preview.tabs.document-info.details.created-on' | translate: { date: file.added | date: 'mediumDate' } }}</span>
-        </div>
+            <div>
+                <mat-icon svgIcon="iqser:document"></mat-icon>
+                <span>{{ 'file-preview.tabs.document-info.details.pages' | translate: { pages: file.numberOfPages } }}</span>
+            </div>
 
-        <div *ngIf="dossier.dueDate">
-            <mat-icon svgIcon="red:lightning"></mat-icon>
-            <span>{{ 'file-preview.tabs.document-info.details.due' | translate: { date: dossier.dueDate | date: 'mediumDate' } }}</span>
-        </div>
+            <div>
+                <mat-icon svgIcon="red:calendar"></mat-icon>
+                <span>{{
+                    'file-preview.tabs.document-info.details.created-on' | translate: { date: file.added | date: 'mediumDate' }
+                }}</span>
+            </div>
 
-        <div>
-            <mat-icon svgIcon="red:template"></mat-icon>
-            {{ dossierTemplateName }}
+            <div *ngIf="dossier.dueDate">
+                <mat-icon svgIcon="red:lightning"></mat-icon>
+                <span>{{ 'file-preview.tabs.document-info.details.due' | translate: { date: dossier.dueDate | date: 'mediumDate' } }}</span>
+            </div>
+
+            <div>
+                <mat-icon svgIcon="red:template"></mat-icon>
+                {{ dossierTemplateName$ }}
+            </div>
         </div>
     </div>
-</div>
+</ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.ts
index 0ab68a6d7..bac4a4366 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/components/document-info/document-info.component.ts
@@ -1,44 +1,42 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { Dossier, File } from '@red/domain';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
-import { AutoUnsubscribe } from '@iqser/common-ui';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
 import { DocumentInfoService } from '../../services/document-info.service';
-import { Observable } from 'rxjs';
-import { PermissionsService } from '@services/permissions.service';
+import { combineLatest, Observable, switchMap } from 'rxjs';
+import { PermissionsService } from '../../../../../../services/permissions.service';
+import { FilePreviewStateService } from '../../services/file-preview-state.service';
+import { DossiersService } from '../../../../../../services/entity-services/dossiers.service';
+import { map } from 'rxjs/operators';
 
 @Component({
-    selector: 'redaction-document-info [file] [dossier]',
+    selector: 'redaction-document-info',
     templateUrl: './document-info.component.html',
     styleUrls: ['./document-info.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DocumentInfoComponent extends AutoUnsubscribe implements OnInit {
-    @Input() file: File;
-    @Input() dossier: Dossier;
-
-    fileAttributes$: Observable<{ label: string; value: string }[]>;
-    dossierTemplateName: string;
+export class DocumentInfoComponent {
+    readonly fileAttributes$: Observable<{ label: string; value: string }[]>;
+    readonly dossierTemplateName$: Observable<string>;
 
     constructor(
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _dialogService: DossiersDialogService,
+        private readonly _dossiersService: DossiersService,
+        readonly stateService: FilePreviewStateService,
         readonly permissionsService: PermissionsService,
         readonly documentInfoService: DocumentInfoService,
     ) {
-        super();
-    }
-
-    ngOnInit(): void {
-        this.dossierTemplateName = this._dossierTemplatesService.find(this.dossier.dossierTemplateId).name;
-        this.fileAttributes$ = this.documentInfoService.fileAttributes$(
-            this.file.fileId,
-            this.file.dossierId,
-            this.dossier.dossierTemplateId,
+        const _dossier$ = this.stateService.file$.pipe(switchMap(file => this._dossiersService.getEntityChanged$(file.dossierId)));
+        this.fileAttributes$ = combineLatest([this.stateService.file$, _dossier$]).pipe(
+            switchMap(([file, dossier]) => this.documentInfoService.fileAttributes$(file.fileId, dossier.id, dossier.dossierTemplateId)),
+        );
+        this.dossierTemplateName$ = _dossier$.pipe(
+            switchMap(dossier => this._dossierTemplatesService.getEntityChanged$(dossier.dossierTemplateId)),
+            map(dossierTemplate => dossierTemplate.name),
         );
     }
 
     edit() {
-        this._dialogService.openDialog('documentInfo', null, this.file);
+        this._dialogService.openDialog('documentInfo', null, this.stateService.fileData.file);
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
index 2e8737844..63d312a1c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
@@ -88,11 +88,7 @@
                         icon="red:needs-work"
                     ></iqser-empty-state>
 
-                    <redaction-document-info
-                        *ngIf="documentInfoService.shown$ | async"
-                        [dossier]="dossier"
-                        [file]="file"
-                    ></redaction-document-info>
+                    <redaction-document-info *ngIf="documentInfoService.shown$ | async"></redaction-document-info>
 
                     <redaction-file-workload
                         #fileWorkloadComponent
diff --git a/apps/red-ui/src/app/services/permissions.service.ts b/apps/red-ui/src/app/services/permissions.service.ts
index 55eeaf96b..a69c5e6a7 100644
--- a/apps/red-ui/src/app/services/permissions.service.ts
+++ b/apps/red-ui/src/app/services/permissions.service.ts
@@ -18,7 +18,8 @@ export class PermissionsService {
         return this.isApprover(dossier);
     }
 
-    canEditFileAttributes(dossier: Dossier, file: File): boolean {
+    canEditFileAttributes(file: File): boolean {
+        const dossier = this._getDossier(file);
         return ((file.isUnderReview || file.isNew) && this.isDossierMember(dossier)) || (file.isUnderApproval && this.isApprover(dossier));
     }