diff --git a/src/app/components/search/search.css b/src/app/components/search/search.css
new file mode 100644
index 0000000..da8a92a
--- /dev/null
+++ b/src/app/components/search/search.css
@@ -0,0 +1,36 @@
+/* From Uiverse.io by LightAndy1 */
+.group {
+    box-shadow: 0 1px 2px 1px #001529;
+    border-radius: 15px;
+    padding: 0.1rem 0.5rem 0.1rem 1rem;
+    display: flex;
+    line-height: 28px;
+    align-items: center;
+    position: relative;
+    max-width: 400px;
+}
+
+.input {
+    width: 100%;
+    height: 32px;
+    line-height: 28px;
+    padding: 0 1rem;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    outline: none;
+    background-color: #f3f3f4;
+    color: #0d0c22;
+    transition: 0.3s ease;
+}
+
+.input::placeholder {
+    color: #9e9ea7;
+}
+
+.input:focus,
+input:hover {
+    outline: none;
+    border-color: #40A9FF;
+    background-color: #fff;
+    box-shadow: 0 0 0 4px rgba(199, 199, 197, 0.1);
+}
diff --git a/src/app/components/search/search.html b/src/app/components/search/search.html
new file mode 100644
index 0000000..592bbb8
--- /dev/null
+++ b/src/app/components/search/search.html
@@ -0,0 +1,10 @@
+<form nz-form nzLayout="horizontal" [formGroup]="searchForm" (ngSubmit)="submitForm()">
+    <nz-form-item nz-flex>
+        <nz-form-control nzSpan="12">
+            <div class="group">
+                <nz-icon nzType="search" nzTheme="outline" class="mr-2 text-xl"></nz-icon>
+                <input class="input" placeholder="Rechercher" formControlName="searchValue"/>
+            </div>
+        </nz-form-control>
+    </nz-form-item>
+</form>
diff --git a/src/app/components/search/search.ts b/src/app/components/search/search.ts
new file mode 100644
index 0000000..138e854
--- /dev/null
+++ b/src/app/components/search/search.ts
@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzColDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent} from "ng-zorro-antd/form";
+import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
+
+@Component({
+  selector: 'app-search',
+    imports: [
+        NzIconDirective,
+        NzColDirective,
+        NzFlexDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        ReactiveFormsModule
+    ],
+  templateUrl: './search.html',
+  styleUrl: './search.css',
+})
+export class Search {
+    searchForm: FormGroup = new FormGroup({
+        searchValue: new FormControl<string>(null)
+    })
+
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.searchForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.searchForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.searchForm.reset()
+    }
+}
diff --git a/src/app/pages/deliverer/deliverer.html b/src/app/pages/deliverer/deliverer.html
index 3707ef0..b06a07a 100644
--- a/src/app/pages/deliverer/deliverer.html
+++ b/src/app/pages/deliverer/deliverer.html
@@ -1,7 +1,13 @@
-<app-modal-button type="primary" name="Ajouter un transporteur">
-    <app-deliverer-form></app-deliverer-form>
-</app-modal-button>
+<div class="flex mt-2">
+    <app-modal-button type="primary" name="Ajouter un transporteur">
+        <app-deliverer-form></app-deliverer-form>
+    </app-modal-button>
 
-<div class="mt-4">
+    <div class="ml-95 w-150">
+        <app-search class="w-full"></app-search>
+    </div>
+</div>
+
+<div class="mt-1">
     <app-deliverer-table></app-deliverer-table>
 </div>
diff --git a/src/app/pages/deliverer/deliverer.ts b/src/app/pages/deliverer/deliverer.ts
index 766563c..3d5ca1b 100644
--- a/src/app/pages/deliverer/deliverer.ts
+++ b/src/app/pages/deliverer/deliverer.ts
@@ -2,13 +2,15 @@ import { Component } from '@angular/core';
 import {ModalButton} from "../../components/modal-button/modal-button";
 import {DelivererTable} from "../../components/deliverer-table/deliverer-table";
 import {DelivererForm} from "../../components/deliverer-form/deliverer-form";
+import {Search} from "../../components/search/search";
 
 @Component({
   selector: 'app-deliverer',
     imports: [
         ModalButton,
         DelivererTable,
-        DelivererForm
+        DelivererForm,
+        Search
     ],
   templateUrl: './deliverer.html',
   styleUrl: './deliverer.css',
diff --git a/src/app/pages/delivery-note/delivery-note.html b/src/app/pages/delivery-note/delivery-note.html
index 9d8e979..bf3ae8f 100644
--- a/src/app/pages/delivery-note/delivery-note.html
+++ b/src/app/pages/delivery-note/delivery-note.html
@@ -1,6 +1,13 @@
-<app-modal-button type="primary" name="Créer un bon de livraison">
-    <app-deliverery-note-form></app-deliverery-note-form>
-</app-modal-button>
-<div class="mt-4">
+<div class="flex mt-2">
+    <app-modal-button type="primary" name="Créer un bon de livraison">
+        <app-deliverery-note-form></app-deliverery-note-form>
+    </app-modal-button>
+
+    <div class="ml-95 w-150">
+        <app-search></app-search>
+    </div>
+</div>
+
+<div class="mt-1">
     <app-deliverery-note-table></app-deliverery-note-table>
 </div>
diff --git a/src/app/pages/delivery-note/delivery-note.ts b/src/app/pages/delivery-note/delivery-note.ts
index 642b0fb..2183f24 100644
--- a/src/app/pages/delivery-note/delivery-note.ts
+++ b/src/app/pages/delivery-note/delivery-note.ts
@@ -2,13 +2,15 @@ import { Component } from '@angular/core';
 import {DelivereryNoteTable} from "../../components/deliverery-note-table/deliverery-note-table";
 import {ModalButton} from "../../components/modal-button/modal-button";
 import {DelivereryNoteForm} from "../../components/deliverery-note-form/deliverery-note-form";
+import {Search} from "../../components/search/search";
 
 @Component({
   selector: 'app-delivery-note',
     imports: [
         DelivereryNoteTable,
         ModalButton,
-        DelivereryNoteForm
+        DelivereryNoteForm,
+        Search
     ],
   templateUrl: './delivery-note.html',
   styleUrl: './delivery-note.css',
diff --git a/src/app/pages/purchase-order/purchase-order.html b/src/app/pages/purchase-order/purchase-order.html
index f6376c5..90c59af 100644
--- a/src/app/pages/purchase-order/purchase-order.html
+++ b/src/app/pages/purchase-order/purchase-order.html
@@ -1 +1,8 @@
-<p>purchase-order works!</p>
+<div class="flex mt-2">
+    <div class="ml-95 w-150">
+        <app-search></app-search>
+    </div>
+</div>
+<div class="mt-1">
+    <p>purchase-order works!</p>
+</div>
diff --git a/src/app/pages/purchase-order/purchase-order.ts b/src/app/pages/purchase-order/purchase-order.ts
index 574ce64..a9dcc5c 100644
--- a/src/app/pages/purchase-order/purchase-order.ts
+++ b/src/app/pages/purchase-order/purchase-order.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import {Search} from "../../components/search/search";
+import {ModalButton} from "../../components/modal-button/modal-button";
 
 @Component({
   selector: 'app-purchase-order',
-  imports: [],
+    imports: [
+        Search,
+        ModalButton
+    ],
   templateUrl: './purchase-order.html',
   styleUrl: './purchase-order.css',
 })
diff --git a/src/app/pages/quotation/quotation.html b/src/app/pages/quotation/quotation.html
index e7b7112..a2444b7 100644
--- a/src/app/pages/quotation/quotation.html
+++ b/src/app/pages/quotation/quotation.html
@@ -1 +1,9 @@
-<p>quotation works!</p>
+<div class="flex mt-2">
+    <div class="ml-95 w-150">
+        <app-search class="w-full"></app-search>
+    </div>
+</div>
+
+<div class="mt-1">
+    <p>quotation works!</p>
+</div>
diff --git a/src/app/pages/quotation/quotation.ts b/src/app/pages/quotation/quotation.ts
index 2a2136d..586f94b 100644
--- a/src/app/pages/quotation/quotation.ts
+++ b/src/app/pages/quotation/quotation.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import {Search} from "../../components/search/search";
 
 @Component({
   selector: 'app-quotation',
-  imports: [],
+  imports: [
+      Search
+  ],
   templateUrl: './quotation.html',
   styleUrl: './quotation.css',
 })
diff --git a/src/app/pages/stock/stock.html b/src/app/pages/stock/stock.html
index 54ac09a..3bb6f5f 100644
--- a/src/app/pages/stock/stock.html
+++ b/src/app/pages/stock/stock.html
@@ -1 +1,7 @@
-<app-stock-table></app-stock-table>
\ No newline at end of file
+<div class="ml-130 w-170 mt-2">
+    <app-search></app-search>
+</div>
+
+<div class="mt-1">
+    <app-stock-table></app-stock-table>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/stock/stock.ts b/src/app/pages/stock/stock.ts
index 829cc3b..5b07d92 100644
--- a/src/app/pages/stock/stock.ts
+++ b/src/app/pages/stock/stock.ts
@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import {StockTable} from "../../components/stock-table/stock-table";
+import {Search} from "../../components/search/search";
 
 @Component({
   selector: 'app-stock',
     imports: [
         StockTable,
+        Search,
     ],
   templateUrl: './stock.html',
   styleUrl: './stock.css',
diff --git a/src/app/pages/supplier/supplier.html b/src/app/pages/supplier/supplier.html
index 572d871..58666c3 100644
--- a/src/app/pages/supplier/supplier.html
+++ b/src/app/pages/supplier/supplier.html
@@ -1 +1,9 @@
-<p>supplier works!</p>
+<div class="flex mt-2">
+    <div class="ml-95 w-150">
+        <app-search></app-search>
+    </div>
+</div>
+
+<div class="mt-1">
+    <p>supplier works!</p>
+</div>
diff --git a/src/app/pages/supplier/supplier.ts b/src/app/pages/supplier/supplier.ts
index 744f113..610e14d 100644
--- a/src/app/pages/supplier/supplier.ts
+++ b/src/app/pages/supplier/supplier.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import {Search} from "../../components/search/search";
 
 @Component({
   selector: 'app-supplier',
-  imports: [],
+    imports: [
+        Search
+    ],
   templateUrl: './supplier.html',
   styleUrl: './supplier.css',
 })
diff --git a/src/app/pages/user/user.html b/src/app/pages/user/user.html
index 02a9d55..81039bd 100644
--- a/src/app/pages/user/user.html
+++ b/src/app/pages/user/user.html
@@ -1,7 +1,13 @@
-<app-modal-button type="primary" name="Ajouter un utilisateur">
-    <app-profil-form></app-profil-form>
-</app-modal-button>
+<div class="flex mt-2">
+    <app-modal-button type="primary" name="Ajouter un utilisateur">
+        <app-profil-form></app-profil-form>
+    </app-modal-button>
 
-<div class="mt-4">
+    <div class="ml-95 w-150">
+        <app-search></app-search>
+    </div>
+</div>
+
+<div class="mt-1">
     <app-user-table></app-user-table>
 </div>
diff --git a/src/app/pages/user/user.ts b/src/app/pages/user/user.ts
index 73456ba..ef69d5f 100644
--- a/src/app/pages/user/user.ts
+++ b/src/app/pages/user/user.ts
@@ -2,13 +2,15 @@ import { Component } from '@angular/core';
 import {UserTable} from "../../components/user-table/user-table";
 import {ModalButton} from "../../components/modal-button/modal-button";
 import {ProfilForm} from "../../components/profil-form/profil-form";
+import {Search} from "../../components/search/search";
 
 @Component({
   selector: 'app-user',
     imports: [
         UserTable,
         ModalButton,
-        ProfilForm
+        ProfilForm,
+        Search
     ],
   templateUrl: './user.html',
   styleUrl: './user.css',