diff --git a/src/app/app.html b/src/app/app.html
index 298a3e2..413ed55 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -75,7 +75,9 @@
                 <app-modal-nav nameIcon="user" name="Profil">
                     <app-profil></app-profil>
                 </app-modal-nav>
-                <app-modal-nav nameIcon="setting" name="Paramètres"></app-modal-nav>
+                <app-modal-nav nameIcon="setting" name="Paramètres">
+                    <app-setting-form></app-setting-form>
+                </app-modal-nav>
             </div>
         </div>
     </nz-header>
diff --git a/src/app/app.ts b/src/app/app.ts
index 8747de2..376bcc3 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -6,10 +6,11 @@ import {NzIconDirective} from "ng-zorro-antd/icon";
 import {ModalNav} from "./components/modal-nav/modal-nav";
 import {Profil} from "./components/profil/profil";
 import {NotifList} from "./components/notif-list/notif-list";
+import {SettingForm} from "./components/setting-form/setting-form";
 
 @Component({
   selector: 'app-root',
-    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav, Profil, NotifList],
+    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav, Profil, NotifList, SettingForm],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })
diff --git a/src/app/components/setting-form/setting-form.css b/src/app/components/setting-form/setting-form.css
new file mode 100644
index 0000000..4b77112
--- /dev/null
+++ b/src/app/components/setting-form/setting-form.css
@@ -0,0 +1,36 @@
+/* Container de chaque ligne */
+.row {
+    display: flex;
+    align-items: center; /* centre verticalement les images et champs */
+    gap: 24px; /* espace entre preview et champ */
+    margin-bottom: 20px;
+}
+
+/* Colonne gauche : preview */
+.row-left {
+    width: 180px; /* fixe la largeur pour aligner toutes les images */
+    display: flex;
+    justify-content: center;
+}
+
+/* Image de preview */
+.row-left img {
+    max-width: 100%;
+    max-height: 80px;
+    object-fit: contain;
+    border: 1px solid #e6e6e6;
+    border-radius: 6px;
+    background-color: #fafafa;
+    padding: 4px;
+}
+
+/* Colonne droite : input */
+.row-right {
+    flex: 1; /* prend le reste de l'espace */
+}
+
+/* Retire la largeur forcée du nz-form-label et nz-form-control */
+.row-right nz-form-item nz-form-label,
+.row-right nz-form-item nz-form-control {
+    width: auto !important;
+}
diff --git a/src/app/components/setting-form/setting-form.html b/src/app/components/setting-form/setting-form.html
new file mode 100644
index 0000000..5b9e2fa
--- /dev/null
+++ b/src/app/components/setting-form/setting-form.html
@@ -0,0 +1,35 @@
+<form nz-form nzLayout="horizontal" [formGroup]="settingForm" (ngSubmit)="submitForm()">
+
+    <!-- Logo -->
+    <div class="row">
+        <div class="row-left">
+            <img [src]="setting.logo" alt="logo">
+        </div>
+
+        <div class="row-right">
+            <nz-form-item>
+                <nz-form-label nzSpan="9">Logo</nz-form-label>
+                <nz-form-control nzSpan="25">
+                    <input nz-input type="file" formControlName="logo" />
+                </nz-form-control>
+            </nz-form-item>
+        </div>
+    </div>
+
+    <!-- Signature -->
+    <div class="row">
+        <div class="row-left">
+            <img [src]="setting.signature" alt="logo">
+        </div>
+
+        <div class="row-right">
+            <nz-form-item>
+                <nz-form-label nzSpan="9">Signature</nz-form-label>
+                <nz-form-control nzSpan="25">
+                    <input nz-input type="file" formControlName="signature" />
+                </nz-form-control>
+            </nz-form-item>
+        </div>
+    </div>
+
+</form>
diff --git a/src/app/components/setting-form/setting-form.ts b/src/app/components/setting-form/setting-form.ts
new file mode 100644
index 0000000..0553e72
--- /dev/null
+++ b/src/app/components/setting-form/setting-form.ts
@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {SettingInfo} from "../../interfaces/setting.interface";
+
+@Component({
+  selector: 'app-setting-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './setting-form.html',
+  styleUrl: './setting-form.css',
+})
+export class SettingForm {
+    settingForm: FormGroup = new FormGroup({
+        logo: new FormControl<string>(null),
+        signature: new FormControl<string>(null)
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.settingForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.settingForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.settingForm.reset()
+    }
+
+    setting: SettingInfo = {
+        logo: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png',
+        signature: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png'
+    }
+}
diff --git a/src/app/interfaces/setting.interface.ts b/src/app/interfaces/setting.interface.ts
new file mode 100644
index 0000000..4882359
--- /dev/null
+++ b/src/app/interfaces/setting.interface.ts
@@ -0,0 +1,4 @@
+export interface SettingInfo {
+    logo: string;
+    signature: string;
+}
\ No newline at end of file