diff --git a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.html b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.html
index 067ac092d..1ee025f26 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.html
@@ -22,31 +22,33 @@
         <div class="section">
             <div *ngFor="let attr of fileAttributes$ | async" class="attribute">
                 <div class="small-label">{{ attr.label }}:</div>
-                <div>{{ attr.value || '-' }}</div>
+                <div>{{ attr.value ? (isDate(attr) ? (attr.value | date : 'd MMM yyyy') : attr.value) : '-' }}</div>
             </div>
         </div>
 
         <div *ngIf="stateService.dossier$ | async as dossier" 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>
+                <span>{{ 'file-preview.tabs.document-info.details.dossier' | translate : { dossierName: dossier.dossierName } }}</span>
             </div>
 
             <div>
                 <mat-icon svgIcon="iqser:document"></mat-icon>
-                <span>{{ 'file-preview.tabs.document-info.details.pages' | translate: { pages: file.numberOfPages } }}</span>
+                <span>{{ 'file-preview.tabs.document-info.details.pages' | translate : { pages: file.numberOfPages } }}</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' }
+                    'file-preview.tabs.document-info.details.created-on' | translate : { date: file.added | date : 'mediumDate' }
                 }}</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>
+                <span>{{
+                    'file-preview.tabs.document-info.details.due' | translate : { date: dossier.dueDate | date : 'mediumDate' }
+                }}</span>
             </div>
 
             <div>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
index 27bd89855..7503142bf 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
@@ -5,10 +5,16 @@ import { combineLatest, Observable, switchMap } from 'rxjs';
 import { PermissionsService } from '@services/permissions.service';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { map } from 'rxjs/operators';
-import { File } from '@red/domain';
+import { File, FileAttributeConfigType, FileAttributeConfigTypes } from '@red/domain';
 import { FilePreviewDialogService } from '../../services/file-preview-dialog.service';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 
+interface FileAttribute {
+    label: string;
+    value: string;
+    type: FileAttributeConfigType;
+}
+
 @Component({
     selector: 'redaction-document-info',
     templateUrl: './document-info.component.html',
@@ -16,7 +22,7 @@ import { FileAttributesService } from '@services/entity-services/file-attributes
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DocumentInfoComponent {
-    readonly fileAttributes$: Observable<{ label: string; value: string }[]>;
+    readonly fileAttributes$: Observable<FileAttribute[]>;
     readonly dossierTemplateName$: Observable<string>;
 
     constructor(
@@ -43,4 +49,8 @@ export class DocumentInfoComponent {
     edit(file: File) {
         this._dialogService.openDialog('documentInfo', null, file);
     }
+
+    isDate(attribute: FileAttribute) {
+        return attribute.type === FileAttributeConfigTypes.DATE;
+    }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/document-info-dialog/document-info-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/document-info-dialog/document-info-dialog.component.html
index 09d055434..fac0145f1 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/document-info-dialog/document-info-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/document-info-dialog/document-info-dialog.component.html
@@ -4,8 +4,14 @@
     <form (submit)="save()" [formGroup]="form">
         <div class="dialog-content">
             <div *ngFor="let attr of attributes" class="iqser-input-group w-300">
-                <label>{{ attr.label }}</label>
-                <input [formControlName]="attr.id" [name]="attr.id" type="text" />
+                <iqser-dynamic-input
+                    [formControlName]="attr.id"
+                    [id]="attr.id"
+                    [label]="attr.label"
+                    [type]="attr.type"
+                    [classList]="'w-300'"
+                >
+                </iqser-dynamic-input>
             </div>
         </div>
         <div class="dialog-actions">
diff --git a/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts b/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts
index 08c4583ea..f8ba9fa2e 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/document-info.service.ts
@@ -67,6 +67,7 @@ export class DocumentInfoService {
         return attributes.map(attr => ({
             label: attr.label,
             value: file?.fileAttributes?.attributeIdToValue[attr.id],
+            type: attr.type,
         }));
     }
 }
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
index 69eb2c148..5595207f9 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
@@ -10,31 +10,15 @@
             icon="red:attribute"
         ></iqser-empty-state>
 
-        <div
+        <iqser-dynamic-input
             *ngFor="let attr of customAttributes"
-            [class.datepicker-wrapper]="isSpecificType(attr, dossierAttributeConfigTypes.DATE)"
-            class="iqser-input-group"
+            [formControlName]="attr.id"
+            [id]="attr.id"
+            [label]="attr.label"
+            [type]="attr.type"
+            [classList]="'w-full'"
         >
-            <label>{{ attr.label }}</label>
-
-            <ng-container
-                *ngIf="isSpecificType(attr, dossierAttributeConfigTypes.NUMBER) || isSpecificType(attr, dossierAttributeConfigTypes.TEXT)"
-            >
-                <input
-                    [formControlName]="attr.id"
-                    [name]="attr.id"
-                    [type]="isSpecificType(attr, dossierAttributeConfigTypes.NUMBER) ? 'number' : 'text'"
-                />
-            </ng-container>
-
-            <ng-container *ngIf="isSpecificType(attr, dossierAttributeConfigTypes.DATE)">
-                <input [formControlName]="attr.id" [matDatepicker]="picker" placeholder="dd/mm/yy" />
-                <mat-datepicker-toggle [for]="picker" matSuffix>
-                    <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
-                </mat-datepicker-toggle>
-                <mat-datepicker #picker></mat-datepicker>
-            </ng-container>
-        </div>
+        </iqser-dynamic-input>
     </div>
 
     <div class="separator"></div>
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
index bb8b9318c..07d985086 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
@@ -28,10 +28,6 @@
             margin-top: 3px;
         }
 
-        .datepicker-wrapper:not(:first-child) {
-            margin-top: 14px;
-        }
-
         .image-attribute {
             &.displayed-preview {
                 flex-direction: row;
diff --git a/libs/common-ui b/libs/common-ui
index 1bef72a32..eb84e5f34 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 1bef72a321c0747eac535294be3b1bbc4f7c38af
+Subproject commit eb84e5f34801445fd0ff4b3764e9d3f7d6a6e251