diff --git a/public/src/app/generated/generated.component.html b/public/src/app/generated/generated.component.html
index c873f6b..5579388 100644
--- a/public/src/app/generated/generated.component.html
+++ b/public/src/app/generated/generated.component.html
@@ -1,5 +1,5 @@
-<form [formGroup]="form">
-  @if (isAdmin) {
+<form [formGroup]="form()">
+  @if (isAdmin()) {
     <div class="inline-bloc">
       <mat-form-field class="full-width">
         <mat-label>Numéro de Commande</mat-label>
@@ -16,7 +16,7 @@
         <option value="facture">Facture</option>
         <option value="proforma">Facture Proforma</option>
       </select>
-      <mat-error *ngIf="form.controls['invoiceType']?.errors?.['required']">Le type de document est obligatoire</mat-error>
+      <mat-error *ngIf="form().controls['invoiceType']?.errors?.['required']">Le type de document est obligatoire</mat-error>
     </mat-form-field>
   </div>
   <div class="inline-bloc">
@@ -26,7 +26,7 @@
         <option value="fr">Français</option>
         <option value="en">English</option>
       </select>
-      <mat-error *ngIf="form.controls['lang']?.errors?.['required']">La langue est obligatoire</mat-error>
+      <mat-error *ngIf="form().controls['lang']?.errors?.['required']">La langue est obligatoire</mat-error>
     </mat-form-field>
   </div>
   <div class="inline-bloc">
@@ -40,7 +40,7 @@
       <mat-label>URL du site de la société</mat-label>
 
       <input matInput type="url" formControlName="siteUrl" />
-      <mat-error *ngIf="form.controls['siteUrl']?.errors?.['required']">L'URL du site est obligatoire</mat-error>
+      <mat-error *ngIf="form().controls['siteUrl']?.errors?.['required']">L'URL du site est obligatoire</mat-error>
     </mat-form-field>
   </div>
   <div class="inline-bloc">
@@ -49,7 +49,7 @@
 
       <input autocomplete="chrome-off" matInput type="text" formControlName="address" />
 
-      <mat-error *ngIf="form.controls['address']?.errors?.['required']">L'adresse est obligatoire</mat-error>
+      <mat-error *ngIf="form().controls['address']?.errors?.['required']">L'adresse est obligatoire</mat-error>
     </mat-form-field>
   </div>
   <div class="inline-bloc">
@@ -57,8 +57,8 @@
       <mat-label>SIRET</mat-label>
 
       <input matInput type="text" formControlName="siret" />
-      <mat-error *ngIf="form.controls['siret']?.errors?.['required']">Le siret est obligatoire</mat-error>
-      <mat-error *ngIf="form.controls['siret']?.errors?.['siret']">Le numéro de siret n'est pas valide</mat-error>
+      <mat-error *ngIf="form().controls['siret']?.errors?.['required']">Le siret est obligatoire</mat-error>
+      <mat-error *ngIf="form().controls['siret']?.errors?.['siret']">Le numéro de siret n'est pas valide</mat-error>
     </mat-form-field>
   </div>
   <div class="inline-bloc">
@@ -66,7 +66,7 @@
       <mat-label>Représentant</mat-label>
 
       <input matInput type="text" formControlName="representant" />
-      <mat-error *ngIf="form.controls['representant']?.errors?.['required']">Le Représentant est obligatoire</mat-error>
+      <mat-error *ngIf="form().controls['representant']?.errors?.['required']">Le Représentant est obligatoire</mat-error>
     </mat-form-field>
   </div>
   <div class="inline-bloc">
@@ -74,11 +74,11 @@
       <mat-label>Rôle dans l'entreprise</mat-label>
 
       <input matInput type="text" formControlName="role" />
-      <mat-error *ngIf="form.controls['role']?.errors?.['required']">Le role est obligatoire</mat-error>
+      <mat-error *ngIf="form().controls['role']?.errors?.['required']">Le role est obligatoire</mat-error>
     </mat-form-field>
   </div>
 </form>
-@if (company()?.status?.generated === 'done') {
+@if (companySignal()?.status?.generated === 'done') {
   <p>Vous trouverez ci joint :</p>
   <ul>
     <li>la convention pour ce partenariat à nous retourner signée</li>
@@ -87,32 +87,32 @@
   </ul>
   <p>
     Vous pouvez nous faire parvenir la convention soit en retour de ce mail, soit en la transférant sur ce site. Ce pack
-    {{ company()?.sponsoring }} vous est reservé jusqu'au {{ company()?.creationDate | add: 15 | date }}.
+    {{ companySignal()?.sponsoring }} vous est reservé jusqu'au {{ companySignal()?.creationDate | add: 15 | date }}.
   </p>
   <div>
-    <cms-files [files]="files"></cms-files>
+    <cms-files [files]="files()"></cms-files>
   </div>
 }
 
 <div class="inline-bloc">
-  <button [disabled]="!form.valid" mat-raised-button color="primary" (click)="updateSponsoring()">
+  <button [disabled]="!form().valid" mat-raised-button color="primary" (click)="updateSponsoring()">
     <mat-icon>save</mat-icon>
     Sauvegarder
   </button>
-  @if (isAdmin && company()?.status?.generated !== 'done') {
+  @if (isAdmin() && companySignal()?.status?.generated !== 'done') {
     <button mat-raised-button color="primary" (click)="setDone()">
       <mat-icon>precision_manufacturing</mat-icon>
 
       Générer
     </button>
   }
-  @if (isAdmin && company()?.status?.generated === 'done') {
+  @if (isAdmin() && companySignal()?.status?.generated === 'done') {
     <button mat-raised-button color="primary" (click)="regenerate()">
       <mat-icon>redo</mat-icon>
       Regénérer
     </button>
   }
-  @if (isAdmin) {
+  @if (isAdmin()) {
     <cms-upload (uploadFile)="uploadConvention($event)" [isEnable]="" accept=".pdf" label="Convention"> Choisir une convention </cms-upload>
     <cms-upload (uploadFile)="uploadDevis($event)" [isEnable]="" accept=".pdf" label="Facture">Choisir un devis</cms-upload>
   }
diff --git a/public/src/app/generated/generated.component.ts b/public/src/app/generated/generated.component.ts
index a3a5dd4..3af0013 100644
--- a/public/src/app/generated/generated.component.ts
+++ b/public/src/app/generated/generated.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, inject, input } from '@angular/core';
+import { Component, computed, inject, input, resource, signal } from '@angular/core';
 import { Auth } from '@angular/fire/auth';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -9,7 +9,7 @@ import { MatInputModule } from '@angular/material/input';
 import { ToastrService } from 'ngx-toastr';
 
 import { environment } from '../../environments/environment';
-import { Workflow, WorkflowStep, Company, State } from '../model/company';
+import { Company, State, Workflow, WorkflowStep } from '../model/company';
 import { AddPipe } from '../pipe/add.pipe';
 import { PartnerService } from '../services/partner.service';
 import { StorageService } from '../storage.service';
@@ -28,23 +28,18 @@ export class GeneratedComponent {
   readonly step = input<WorkflowStep>();
   readonly company = input<Company>();
   readonly id = input<string>();
-  files: Record<string, string> = {
-    ...environment.files
-  };
-  isAdmin = false;
+
+  isAdmin = signal(false);
+  companySignal = computed(() => this.company as unknown as Company);
+
   private readonly partnerService = inject(PartnerService);
   private readonly storageService = inject(StorageService);
   private readonly auth: Auth = inject(Auth);
   private readonly toastr: ToastrService = inject(ToastrService);
 
-  form!: FormGroup;
-
-  ngOnInit() {
-    const company = this.company();
-    if (!company) {
-      return;
-    }
-    this.form = new FormGroup({
+  form = computed(() => {
+    const company = this.companySignal();
+    return new FormGroup({
       officialName: new FormControl(company.officialName),
       address: new FormControl(company.address, Validators.required),
       siret: new FormControl(company.siret, {
@@ -57,49 +52,58 @@ export class GeneratedComponent {
       PO: new FormControl(company.PO),
       lang: new FormControl(company.lang, Validators.required)
     });
+  });
 
-    const step = this.step();
-    if (step?.state === 'done') {
-      this.storageService.getDepositInvoice(company.id!).then((deposit) => {
-        this.files = {
-          ...this.files,
-          'Facture Accompte 100%': deposit
-        };
-      });
-    }
-
-    this.auth.onAuthStateChanged((state) => {
-      this.isAdmin = state?.email?.endsWith('@' + environment.emailDomain) ?? false;
-    });
+  filesResources = resource({
+    request: () => ({ company: this.companySignal() }),
+    loader: ({ request: { company } }): Promise<string[]> => {
+      const step = this.step as unknown as WorkflowStep;
 
-    if (step?.state === 'done') {
-      Promise.all([
+      if (step?.state !== 'done') {
+        return Promise.resolve([]);
+      }
+      return Promise.all([
+        this.storageService.getDepositInvoice(company.id!),
         this.storageService.getConvention(company.id!),
         this.storageService.getProformaInvoice(company.id!),
         this.storageService.getDevis(company.id!),
         this.storageService.getInvoice(company.id!)
-      ]).then(([convention, proforma, devis, invoice]) => {
-        this.files = {
-          ...this.files,
-          Convention: convention,
-          'Facture Proforma': proforma,
-          Devis: devis,
-          Facture: invoice
-        };
-      });
+      ]);
+    }
+  });
+
+  files = computed(() => {
+    const resources = this.filesResources.value();
+    if (!resources) {
+      return { ...environment.files };
     }
+    const [deposit, convention, proforma, devis, invoice] = resources;
+    return {
+      'Facture Accompte 100%': deposit,
+      Convention: convention,
+      'Facture Proforma': proforma,
+      Devis: devis,
+      Facture: invoice,
+      ...environment.files
+    };
+  });
+
+  ngOnInit() {
+    this.auth.onAuthStateChanged((state) => {
+      this.isAdmin.set(state?.email?.endsWith('@' + environment.emailDomain) ?? false);
+    });
   }
 
   uploadConvention(file: Blob) {
-    this.storageService.uploadConvention(this.id()!, file).then((url) => {
-      this.partnerService.update(this.id()!, {
+    this.storageService.uploadConvention(this.id as unknown as string, file).then((url) => {
+      this.partnerService.update(this.id as unknown as string, {
         conventionUrl: url
       });
     });
   }
   uploadDevis(file: Blob) {
-    this.storageService.uploadDevis(this.id()!, file).then((url) => {
-      this.partnerService.update(this.id()!, {
+    this.storageService.uploadDevis(this.id as unknown as string, file).then((url) => {
+      this.partnerService.update(this.id as unknown as string, {
         devisUrl: url
       });
     });
@@ -110,10 +114,10 @@ export class GeneratedComponent {
   }
 
   updateStatus(status: State) {
-    this.partnerService.update(this.id()!, {
+    this.partnerService.update(this.id as unknown as string, {
       status: {
-        ...(this.company()?.status ?? {}),
-        [this.step()?.key ?? '']: status
+        ...(this.companySignal()?.status ?? {}),
+        [(this.step as unknown as WorkflowStep)?.key ?? '']: status
       }
     });
   }
@@ -122,7 +126,7 @@ export class GeneratedComponent {
   }
 
   updateSponsoring() {
-    const sponsor: Partial<Company> = this.form.value;
-    this.partnerService.update(this.id()!, sponsor).then(() => this.toastr.success('Les informations ont été sauvegardées'));
+    const sponsor: Partial<Company> = this.form().value as Partial<Company>;
+    this.partnerService.update(this.id as unknown as string, sponsor).then(() => this.toastr.success('Les informations ont été sauvegardées'));
   }
 }
diff --git a/public/src/app/ui/admin-validated/admin-validated.component.html b/public/src/app/ui/admin-validated/admin-validated.component.html
index 5c7a609..db5e3a2 100644
--- a/public/src/app/ui/admin-validated/admin-validated.component.html
+++ b/public/src/app/ui/admin-validated/admin-validated.component.html
@@ -2,13 +2,13 @@
   @if (companySignal().status?.validated !== 'done') {
     <p>
       Etant donné la forte affluence des demandes de partenariat, nous reviendrons vers vous par email dans une dizaine de jours maximum pour vous valider la réservation du pack
-      <strong>{{ company().sponsoring }}</strong> ou de votre choix de pack sponsor de replis le cas échéant.
+      <strong>{{ companySignal().sponsoring }}</strong> ou de votre choix de pack sponsor de replis le cas échéant.
     </p>
   }
   @if (companySignal().status?.validated === 'done') {
     <p>
       Bonne nouvelle ! Votre demande de pack
-      <strong>{{ company().sponsoring }}</strong> pour le DevLille 2025 a été validé.
+      <strong>{{ companySignal().sponsoring }}</strong> pour le DevLille 2025 a été validé.
     </p>
     <p>Veuillez remplir dans l'étape suivante les informations qui seront utilisées pour la génération de la convention et de la facture.</p>
   }