diff --git a/airwatch/src/app/chatbot/feedback-button/feedback-button.html b/airwatch/src/app/chatbot/feedback-button/feedback-button.html
index e7684dd..3ff7e78 100644
--- a/airwatch/src/app/chatbot/feedback-button/feedback-button.html
+++ b/airwatch/src/app/chatbot/feedback-button/feedback-button.html
@@ -1,67 +1,98 @@
-<div class="feedback-button" (click)="toggleModal()">
-  <span class="text">
-  Feedback
-  </span>
-  <i class="ri-message-2-line"></i>
-</div>
-
-<!-- Feedback Modal -->
-@if (isModalOpen) {
-<div class="feedback-modal-overlay">
-  <div class="feedback-modal">
-    <div class="modal-header">
-      <h3>Send Feedback</h3>
-      <button class="close-button" (click)="toggleModal()">
-        <i class="ri-close-line"></i>
-      </button>
-    </div>
-
-    <div class="modal-body">
-      <p class="modal-description">
-        Help us improve by sharing your feedback, suggestions, or reporting issues.
-      </p>
-
-      <textarea
-        [(ngModel)]="feedbackText"
-        placeholder="Enter your feedback here..."
-        [disabled]="isSubmitting"
-        rows="5"
-      ></textarea>
-
-      @if (submitSuccess) {
-        <div class="success-message">
-          <i class="ri-check-line"></i> Thank you for your feedback!
+<button (click)="toggleModal()" [ngClass]="{
+  'is-active': isModalOpen
+  }" class="feedback-button">
+    <span class="text">
+    Feedback
+    </span>
+    <i class="ri-message-2-line"></i>
+  </button>
+  
+  <!-- Feedback Modal -->
+  @if (isModalOpen) {
+    <div class="feedback-modal-overlay">
+  
+      <div class="feedback-modal">
+        <button (click)="toggleModal()" [ngClass]="{
+  'is-active': isModalOpen
+  }" class="feedback-button">
+    <span class="text">
+    Feedback
+    </span>
+          <i class="ri-message-2-line"></i>
+        </button>
+  
+        <div class="modal-header">
+          <div class="side">
+            <h3>Share us your feedback !</h3>
+  
+            <div class="star-row">
+              <i class="ri-star-line"></i>
+              <i class="ri-star-line"></i>
+              <i class="ri-star-line"></i>
+              <i class="ri-star-line"></i>
+              <i class="ri-star-line"></i>
+            </div>
+          </div>
+          <div class="side">
+            <sae-m-button (click)="toggleModal()" [kind]="'secondary'" [label]="'retour'"
+                          [size]="'medium'"></sae-m-button>
+            <sae-m-button (click)="submitFeedback()" [kind]="'primary'" [label]="'Soumettre'"
+                          [size]="'medium'"></sae-m-button>
+  
+          </div>
+          <!--        <button class="close-button" (click)="toggleModal()">-->
+          <!--          <i class="ri-close-line"></i>-->
+          <!--        </button>-->
+  
         </div>
-      }
-
-      @if (submitError) {
-        <div class="error-message">
-          <i class="ri-error-warning-line"></i> Failed to submit feedback. Please try again.
+  
+        <div class="modal-body">
+  
+  
+          <textarea
+            [(ngModel)]="feedbackText"
+            [disabled]="isSubmitting"
+            placeholder="Enter your feedback here..."
+            rows="5"
+          ></textarea>
+  
+          @if (submitSuccess) {
+            <div class="success-message">
+              <i class="ri-check-line"></i> Thank you for your feedback!
+            </div>
+          }
+  
+          @if (submitError) {
+            <div class="error-message">
+              <i class="ri-error-warning-line"></i> Failed to submit feedback. Please try again.
+            </div>
+          }
+        </div>ged
+  
+        <div class="modal-footer">
+          <!--        <button-->
+          <!--          class="cancel-button"-->
+          <!--          (click)="toggleModal()"-->
+          <!--          [disabled]="isSubmitting"-->
+          <!--        >-->
+          <!--          Cancel-->
+          <!--        </button>-->
+  
+          <!--        <button-->
+          <!--          class="submit-button"-->
+          <!--          (click)="submitFeedback()"-->
+          <!--          [disabled]="isSubmitting || !feedbackText.trim()"-->
+          <!--        >-->
+          <!--          -->
+          <!--        </button>-->
+  
+          @if (isSubmitting) {
+            <i class="ri-loader-4-line spinning"></i> Sending...
+          } @else {
+            <!--        Send Feedback-->
+          }
         </div>
-      }
+      </div>
     </div>
-
-    <div class="modal-footer">
-      <button
-        class="cancel-button"
-        (click)="toggleModal()"
-        [disabled]="isSubmitting"
-      >
-        Cancel
-      </button>
-
-      <button
-        class="submit-button"
-        (click)="submitFeedback()"
-        [disabled]="isSubmitting || !feedbackText.trim()"
-      >
-        @if (isSubmitting) {
-          <i class="ri-loader-4-line spinning"></i> Sending...
-        } @else {
-          Send Feedback
-        }
-      </button>
-    </div>
-  </div>
-</div>
-}
+  }
+  
\ No newline at end of file
diff --git a/airwatch/src/app/chatbot/feedback-button/feedback-button.scss b/airwatch/src/app/chatbot/feedback-button/feedback-button.scss
index b3d64b8..9c30f35 100644
--- a/airwatch/src/app/chatbot/feedback-button/feedback-button.scss
+++ b/airwatch/src/app/chatbot/feedback-button/feedback-button.scss
@@ -1,14 +1,24 @@
-@use 'sae-lib/src/styles/variables' as variables;
+@use 'sae-lib/src/styles/variables' as  variables;
+@use "sass:color";
 
 :host {
 
+  $feedback_left: 47px;
+
+  .side {
+    padding-top: 16px;
+    padding-right: 16px;
+
+    + .side {
+      text-align: right
+    }
+  }
+
   .feedback-button {
-    background: #ecf3fa;
-    color: #083b7d;
-    padding: 12px;
-    border-radius: 8px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    font-family: variables.$font-family;
+    background: #E3EAF1;
+    color: variables.$main-color-400;
+    border-radius: 8px 8px 0 0;
     transform: rotate(270deg);
     cursor: pointer;
     display: flex;
@@ -18,8 +28,22 @@
     margin-right: -35px;
     position: fixed;
     right: 0;
-    top: 197px;
+    top: 240px;
     z-index: 100;
+    border: 0;
+    padding: 20px;
+    text-align: center;
+
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 8px; /* 57.143% */
+
+
+    &.is-active {
+
+      right: 646px;
+    }
 
     &:hover {
       background: #d9e8f6;
@@ -32,6 +56,7 @@
 
   // Modal styles
   .feedback-modal-overlay {
+
     position: fixed;
     top: 0;
     left: 0;
@@ -39,37 +64,63 @@
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: end;
+    align-items: start;
     z-index: 1000;
+    overflow: hidden;
+    width: 100vw;
+    height: 100vh;
+    padding-top: 200px;
+
   }
 
   .feedback-modal {
-    background: white;
+    background: #E3EAF1;
     border-radius: 8px;
-    width: 90%;
-    max-width: 500px;
+    width: 90vw;
+    max-width: 700px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     display: flex;
     flex-direction: column;
     max-height: 90vh;
     overflow: hidden;
+
+
+    .feedback-button {
+      background: transparent;
+    }
   }
 
   .modal-header {
+    background: transparent;
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    padding: 16px 20px;
+    align-items: top;
+    padding: 13px 0;
     border-bottom: 1px solid #eee;
+    padding-left: $feedback_left;
 
     h3 {
       margin: 0;
       font-size: 18px;
       font-weight: 600;
-      color: #083b7d;
+      color: var(--Black-text, #1B1D27);
+      leading-trim: both;
+      text-edge: cap;
+      font-family: Barlow;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 0; /* 0% */
+      margin-bottom: 8px;
+      margin-top: 12px;
     }
 
+    sae-m-button {
+      margin-left: 6px;
+    }
+
+
     .close-button {
       background: none;
       border: none;
@@ -85,22 +136,39 @@
   }
 
   .modal-body {
-    padding: 20px;
+    padding: 0 20px;
     overflow-y: auto;
+    background: transparent;
+    padding-left: $feedback_left;
 
     .modal-description {
       margin-bottom: 16px;
-      color: #555;
+      leading-trim: both;
+      text-edge: cap;
+      font-family: Barlow;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 0; /* 0% */
+      color: variables.$neutral-blue;
+
     }
 
     textarea {
+      margin-top: 16px;
       width: 100%;
       padding: 12px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
       resize: vertical;
       font-family: inherit;
       font-size: 14px;
+      height: 140px;
+      border: solid 1px #a8acc2;
+      color: #000;
+      line-height: 140%; /* 19.6px */
+      border-radius: 8px;
+
+      background: #FFF;
+
 
       &:focus {
         outline: none;
@@ -180,5 +248,28 @@
     }
   }
 
+  // Spinner animation
+  .spinning {
+    animation: spin 1s linear infinite;
+  }
 
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+
+  .star-row {
+    padding-top: 9px;
+
+    i {
+      font-size: 20px;
+    }
+  }
 }
+
+
diff --git a/airwatch/src/app/chatbot/feedback-button/feedback-button.ts b/airwatch/src/app/chatbot/feedback-button/feedback-button.ts
index 79f9467..b554349 100644
--- a/airwatch/src/app/chatbot/feedback-button/feedback-button.ts
+++ b/airwatch/src/app/chatbot/feedback-button/feedback-button.ts
@@ -4,10 +4,11 @@ import {FormsModule} from '@angular/forms';
 import {Store} from '@ngrx/store';
 import {ApiService} from '../../services/api-service';
 import {ActionTypes, StateInterface} from '../../reducers';
+import { FeedbackButton as SaeFeedbackButton } from 'sae-lib/buttons/feedback-button/feedback-button';
 
 @Component({
   selector: 'app-feedback-button',
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, SaeFeedbackButton],
   templateUrl: './feedback-button.html',
   styleUrl: './feedback-button.scss'
 })
diff --git a/airwatch/src/app/chatbot/message-box/message-box.html b/airwatch/src/app/chatbot/message-box/message-box.html
index e026dad..c80b688 100644
--- a/airwatch/src/app/chatbot/message-box/message-box.html
+++ b/airwatch/src/app/chatbot/message-box/message-box.html
@@ -15,6 +15,13 @@
     <div class="avatar">
       <!--  avatar-->
 
+      @if (kind === 'user') {
+        <img src="/user.png" alt="user">
+      } @else {
+        <img src="/chatbot.png" alt="chatbot">
+      }
+
+      
     </div>
     <div class="user-more-infos">
     <span class="user-name ">
@@ -48,6 +55,7 @@
     @if (kind === 'llm') {
 
       <div class="action-feedback">
+        <sae-feedback-button></sae-feedback-button>
         <app-feedback-button></app-feedback-button>
       </div>
 
diff --git a/airwatch/src/app/chatbot/message-box/message-box.scss b/airwatch/src/app/chatbot/message-box/message-box.scss
index 466eb48..df0ea57 100644
--- a/airwatch/src/app/chatbot/message-box/message-box.scss
+++ b/airwatch/src/app/chatbot/message-box/message-box.scss
@@ -13,12 +13,12 @@
 
     .user & {
       background-size: contain;
-      background: yellow url('../../../../public/user.png');
+      background: yellow url("/user.png") no-repeat center center;
     }
 
 
     .llm & {
-      background: yellow url('../../../../public/chatbot.png');
+      background: white url("/chatbot.png") no-repeat center center;
     }