diff --git a/my-workspace/projects/sae-lib/buttons/copy/copy.scss b/my-workspace/projects/sae-lib/buttons/copy/copy.scss
index b1b22ce..31c6286 100644
--- a/my-workspace/projects/sae-lib/buttons/copy/copy.scss
+++ b/my-workspace/projects/sae-lib/buttons/copy/copy.scss
@@ -8,6 +8,12 @@
     border-width: 0;
     padding: 4px;
     color: #333;
-    background: variables.$csc-copy-color
+    cursor: pointer;
+    background: variables.$csc-copy-color;
+
+    &:hover {
+      color: white;
+      background: variables.$csc-magic-color;
+    }
   }
 }
diff --git a/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss b/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss
index b89857e..51596a9 100644
--- a/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss
+++ b/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss
@@ -51,6 +51,10 @@
 
     app-copy {
       margin-left: 12px;
+
+      .button {
+        cursor: pointer;
+      }
     }
 
     a {
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
index 91e65cc..0e30339 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
@@ -1,72 +1,78 @@
 <div [ngClass]="{highlighted, 'is-disabled': disabled}" class="filter-group">
-  <!--  disabled: {{ disabled }}-->
 
-  @if(appState.filters){
+
+  @if (appState.filters) {
     <div class="selectors">
       <sae-multi-selector
-        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'engineType')"
+        (clickedOnInput)="onClickedOnInput($event)"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'engineType')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters?.engineType?.availableList"
         [disabled]="disabled"
-        [label]="'Engine type'"
         [displayDropdown]="activeLabel==='Engine type'"
+        [label]="'Engine type'"
         [selectedChoices]="appState.filters?.engineType?.selectedList"
         [store]="store"
       ></sae-multi-selector>
       <sae-multi-selector
-        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'findings')"
+        (clickedOnInput)="onClickedOnInput($event)"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'findings')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters.findings.availableList"
-        [label]="'Findings'"
+        [disabled]="disabled"
         [displayDropdown]="activeLabel==='Findings'"
+        [label]="'Findings'"
         [selectedChoices]="appState.filters.findings.selectedList"
         [store]="store"
       ></sae-multi-selector>
       <sae-multi-selector
-        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'ata')"
+        (clickedOnInput)="onClickedOnInput($event)"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'ata')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters?.ata?.availableList"
-        [label]="'ATA'"
+        [disabled]="disabled"
         [displayDropdown]="activeLabel==='ATA'"
+        [label]="'ATA'"
         [selectedChoices]="appState.filters?.ata?.selectedList"
         [store]="store"
       ></sae-multi-selector>
       <sae-multi-selector
-        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'partNumber')"
+        (clickedOnInput)="onClickedOnInput($event)"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'partNumber')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters?.partNumber?.availableList"
-        [label]="'Part number'"
+        [disabled]="disabled"
         [displayDropdown]="activeLabel==='Part number'"
+        [label]="'Part number'"
         [selectedChoices]="appState.filters?.partNumber?.selectedList"
         [store]="store"
       ></sae-multi-selector>
       <sae-multi-selector
-        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'technicalManual')"
+        (clickedOnInput)="onClickedOnInput($event)"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'technicalManual')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters?.technicalManual?.availableList"
-        [label]="'Technical Manual'"
+        [disabled]="disabled"
+
         [displayDropdown]="activeLabel==='Technical Manual'"
+        [label]="'Technical Manual'"
         [selectedChoices]="appState.filters?.technicalManual?.selectedList"
         [store]="store"
       ></sae-multi-selector>
       <sae-multi-selector
-        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'onOffWing')"
+        (clickedOnInput)="onClickedOnInput($event)"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'onOffWing')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters?.onOffWing?.availableList"
-        [label]="'On-wing/off-wing'"
+        [disabled]="disabled"
         [displayDropdown]="activeLabel==='On-wing/off-wing'"
+        [label]="'On-wing/off-wing'"
         [selectedChoices]="appState.filters?.onOffWing?.selectedList"
         [store]="store"
       ></sae-multi-selector>
@@ -75,12 +81,12 @@
   }
 
   @if (!hideChipsList) {
-    <div   class="chips-listing">
+    <div class="chips-listing">
       <!--    liste de chips-->
 
       <div class="chips-column">
         @for (elem of appState.filters.engineType.selectedList; track elem.label) {
-          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'engineType')">
+          <button (click)="onSelectedChoicesChange(elem, 'engineType')" class="button chips is-rounded is-small">
             {{ elem.label }}
             <span class="post-button">
                    x
@@ -90,7 +96,7 @@
       </div>
       <div class="chips-column">
         @for (elem of appState.filters.findings.selectedList; track elem.label) {
-          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'findings')">
+          <button (click)="onSelectedChoicesChange(elem, 'findings')" class="button chips is-rounded is-small">
             {{ elem.label }}
             <span class="post-button">
                    x
@@ -100,7 +106,7 @@
       </div>
       <div class="chips-column">
         @for (elem of appState.filters.ata.selectedList; track elem.label) {
-          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'ata')">
+          <button (click)="onSelectedChoicesChange(elem, 'ata')" class="button chips is-rounded is-small">
             {{ elem.label }}
             <span class="post-button">
                    x
@@ -110,7 +116,7 @@
       </div>
       <div class="chips-column">
         @for (elem of appState.filters.partNumber.selectedList; track elem.label) {
-          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'partNumber')">
+          <button (click)="onSelectedChoicesChange(elem, 'partNumber')" class="button chips is-rounded is-small">
             {{ elem.label }}
             <span class="post-button">
                    x
@@ -120,7 +126,7 @@
       </div>
       <div class="chips-column">
         @for (elem of appState.filters.technicalManual.selectedList; track elem.label) {
-          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'technicalManual')">
+          <button (click)="onSelectedChoicesChange(elem, 'technicalManual')" class="button chips is-rounded is-small">
             {{ elem.label }}
             <span class="post-button">
                    x
@@ -130,7 +136,7 @@
       </div>
       <div class="chips-column">
         @for (elem of appState.filters.onOffWing.selectedList; track elem.label) {
-          <button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'onOffWing')">
+          <button (click)="onSelectedChoicesChange(elem, 'onOffWing')" class="button chips is-rounded is-small">
             {{ elem.label }}
             <span class="post-button">
                    x
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
index 04b95f0..8c67de4 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
@@ -49,6 +49,8 @@
     &.is-disabled {
       input {
         background: grey;
+        border-color: grey;
+        color: white;
       }
     }
 
@@ -121,4 +123,5 @@
     margin-left: 5px;
   }
 
+
 }
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
index 0d54745..9b1b6c7 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
+++ b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
@@ -1,4 +1,4 @@
-import {Component, HostListener, Input, ElementRef} from '@angular/core';
+import {Component, ElementRef, HostListener, Input} from '@angular/core';
 import {MultiSelector} from '../../inputs/multi-selector/multi-selector';
 import {CommonModule} from '@angular/common';
 
@@ -17,7 +17,7 @@ export class FiltersGroup {
   @Input() store: any = {};
   @Input() appState: any = {};
   @Input() actionTypes: any;
-  @Input() disabled!: boolean;
+  @Input() disabled: boolean = false;
   @Input() hideChipsList: boolean = false;
 
   // Gère quel sélecteur a son dropdown ouvert
@@ -57,8 +57,10 @@ export class FiltersGroup {
   }
 
   onClickedOnInput(event: any) {
-    const label = event?.label;
-    this.activeLabel = label || null;
+    if (!this.disabled) {
+      const label = event?.label;
+      this.activeLabel = label || null;
+    }
   }
 
   @HostListener('document:click', ['$event'])
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
index 023bbce..bce0aa1 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
@@ -12,6 +12,7 @@
         </span>
   </div>
   <!-- (blur)="displayDropdown = false" (click)="onClickInput()" -->
+  <!--  disabled: {{ disabled }}-->
   <input
     (focus)="onInputClickedOrFocused($event)"
     (input)="onSearchInput($event)"
@@ -19,8 +20,8 @@
     placeholder="{{label}}"
     type="text">
 
-  <span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
-  (click)="resetChoicesLists()"
+  <span (click)="resetChoicesLists()"
+        [ngClass]="{ 'is-visible' : selectedChoices?.length}"
         class="selected-items-counter">
     {{ selectedChoices?.length || 0 }}
   </span>
@@ -29,7 +30,7 @@
     <i class="ri-arrow-down-s-line"></i>
   </div>
 
-  @if (displayDropdown ) {
+  @if (displayDropdown) {
 
 
     <div class="dropdown">
@@ -39,36 +40,36 @@
         @if (selectedChoices?.length && availableChoices?.length) {
           <div class="selected-items">
 
-            @for(sc of getFilteredSelectedChoices(); track sc.value){
-            <div (click)="selectedChoicesChangeToggleItem(sc)"
+            @for (sc of getFilteredSelectedChoices(); track sc.value) {
+              <div (click)="selectedChoicesChangeToggleItem(sc)"
 
-                 class="dropdown-item"
-            >
-            <img alt="checkbox" src="checkbox-active.svg" /> 
-            <span class="label">
+                   class="dropdown-item"
+              >
+                <img alt="checkbox" src="checkbox-active.svg"/>
+                <span class="label">
             <!--  {{ sc.label }} -->
             </span>
-            </div>
+              </div>
             }
           </div>
 
-          
+
           <div class="separator">
-            
-          <div class="label">Add new part number</div>
-          <i class="ri-add-line"></i>
+
+            <div class="label">Add new part number</div>
+            <i class="ri-add-line"></i>
           </div>
         }
         <div class="available-items">
 
-<!--          disponibles:-->
+          <!--          disponibles:-->
           <!--      available:-->
-          @for(ac of getFilteredAvailableChoices(); track ac.value){
+          @for (ac of getFilteredAvailableChoices(); track ac.value) {
             <div (click)="availableChoicesChangeToggleItem(ac)"
 
                  class="dropdown-item"
             >
-              <img alt="checkbox" src="checkbox-inactive.svg" /> 
+              <img alt="checkbox" src="checkbox-inactive.svg"/>
               <span class="label">
                 {{ ac.label }}
               </span>
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
index f519afc..8247c50 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
@@ -2,6 +2,16 @@
 
 :host {
 
+  &.is-disabled {
+    input {
+      border: grey;
+    }
+
+    .selected-items-counter {
+      color: grey;
+    }
+  }
+
   .input-box {
     width: 218px;
     color: #1b1d27;
@@ -109,19 +119,18 @@
       border: 1px solid #8D91A4;
       box-shadow: 0 0 13px 0 rgba(37, 91, 142, 0.10);
 
-color: var(--color-text-base, #1B1D27);
- 
-text-overflow: ellipsis;
+      color: var(--color-text-base, #1B1D27);
 
-/* Text/text-base */
-font-family: var(--Fonts-Font-text, Barlow);
-font-size: var(--Font-Base, 14px);
-font-style: normal;
-font-weight: 400;
-line-height: 100%; /* 14px */
+      text-overflow: ellipsis;
+
+      /* Text/text-base */
+      font-family: var(--Fonts-Font-text, Barlow);
+      font-size: var(--Font-Base, 14px);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 100%; /* 14px */
 
 
-      
       .dropdown-list {
         max-height: 200px;
         overflow-y: auto;
@@ -139,7 +148,7 @@ line-height: 100%; /* 14px */
     }
   }
 
-  .separator{
+  .separator {
     display: flex;
     width: 186px;
     height: 34px;
@@ -153,7 +162,7 @@ line-height: 100%; /* 14px */
     margin-top: 6px;
     margin-bottom: 16px;
 
-    .label{
+    .label {
       overflow: hidden;
       color: var(--color-text-secondary, #525668);
       leading-trim: both;
@@ -167,11 +176,12 @@ line-height: 100%; /* 14px */
     }
   }
 
-  .available-items{
-    img{
+  .available-items {
+    img {
       margin-right: 6px;
     }
-    .dropdown-item{
+
+    .dropdown-item {
       padding: 6px;
       margin-bottom: 6px;
       display: flex;
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
index e649130..9347ad0 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
+++ b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
@@ -77,13 +77,16 @@ export class MultiSelector implements OnInit {
   }
 
   onInputClickedOrFocused(event?: any) {
-    // Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns
-    this.clickedOnInput.emit({ label: this.label });
-    if (this.disabled) {
+    console.log('onInputClickedOrFocused', this.disabled, event)
+    if (!this.disabled) {
+
+      // Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns
+      this.clickedOnInput.emit({label: this.label});
+      this.displayDropdown = true;
+    } else {
       console.info('disabled input');
       return;
     }
-    this.displayDropdown = true;
   }
 
   onClickInput() {
@@ -93,7 +96,7 @@ export class MultiSelector implements OnInit {
       return;
     }
     // Informe le parent pour fermer les autres puis ouvre celui-ci
-    this.clickedOnInput.emit({ label: this.label });
+    this.clickedOnInput.emit({label: this.label});
     this.displayDropdown = true;
     console.log('Opened dropdown:', this.displayDropdown);
   }
diff --git a/sae-csc/src/app/app.routes.ts b/sae-csc/src/app/app.routes.ts
index 701b417..698e2a6 100644
--- a/sae-csc/src/app/app.routes.ts
+++ b/sae-csc/src/app/app.routes.ts
@@ -5,10 +5,11 @@ import {SimilarCases} from './pages/similar-cases/similar-cases';
 import {Login} from './pages/login/login';
 import {TestingApi} from './pages/testing-api/testing-api';
 
-export const routes: Routes = [{
-  path: '',
-  component: Login
-},
+export const routes: Routes = [
+  {
+    path: '',
+    component: Login
+  },
   {
     path: 'login',
     component: Login
diff --git a/sae-csc/src/app/pages/similar-cases/similar-cases.html b/sae-csc/src/app/pages/similar-cases/similar-cases.html
index 71614a7..9aaa20b 100644
--- a/sae-csc/src/app/pages/similar-cases/similar-cases.html
+++ b/sae-csc/src/app/pages/similar-cases/similar-cases.html
@@ -47,95 +47,102 @@
       </div>
     }
 
-    <div class="row filters-row">
-      <sae-filters-group [disabled]="disabledFilters" [hideChipsList]="true"></sae-filters-group>
-    </div>
   </header>
   <main>
 
-    <div class="row-bot-talks">
-      <sae-bot-talks
-        [appState]="appState"
-        [message]="'I found useful document(s) which can help to answer to this question ! Check if these documents are applied to similar cases'"
-      ></sae-bot-talks>
-
+    <div class="row filters-row">
+      <sae-filters-group [actionTypes]="actionTypes" [appState]="appState"
+                         [disabled]="true"
+                         [hideChipsList]="true"
+                         [store]="store"
+      ></sae-filters-group>
     </div>
-    <div class="tabs-container">
-      <div class="tabs-selector">
+    <section class="padded-section">
+      <div class="row-bot-talks">
+        <sae-bot-talks
+          [appState]="appState"
+          [message]="'I found useful document(s) which can help to answer to this question ! Check if these documents are applied to similar cases'"
+        ></sae-bot-talks>
 
-        <div class="columns">
-          <div class="column">
-            <div
-              (click)="displayedTab = 'similar-cases'"
-              [ngClass]="{ 'is-active' : displayedTab == 'similar-cases' }"
-              class="tab-button similar "
-            >
-              Similar cases
+      </div>
+      <div class="tabs-container">
+        <div class="tabs-selector">
+
+          <div class="columns">
+            <div class="column">
+              <div
+                (click)="displayedTab = 'similar-cases'"
+                [ngClass]="{ 'is-active' : displayedTab == 'similar-cases' }"
+                class="tab-button similar "
+              >
+                Similar cases
+              </div>
             </div>
-          </div>
-          <div class="column">
-            <div
-              (click)="displayedTab = 'technical-manual'"
-              [ngClass]="{ 'is-active' : displayedTab == 'technical-manual' }"
-              class="tab-button tech-manual">
-              Associated documents
+            <div class="column">
+              <div
+                (click)="displayedTab = 'technical-manual'"
+                [ngClass]="{ 'is-active' : displayedTab == 'technical-manual' }"
+                class="tab-button tech-manual">
+                Associated documents
 
-              @if (appState.technicalManuals.length > 0) {
+                @if (appState.technicalManuals.length > 0) {
 
-                <span class="indicator"></span>
-              }
+                  <span class="indicator"></span>
+                }
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="tabs-body">
+        <div class="tabs-body">
 
-        @if (displayedTab == 'similar-cases') {
+          @if (displayedTab == 'similar-cases') {
 
-          <div class="tabs-search">
-            <input id="search_similar_input"
-                   class="search"
-                   placeholder="Use keywords for a precise research"
-                   [(ngModel)]="searchSimilarInput"
-                   (input)="filterResults()"
-                   (keyup.enter)="filterResults()"
-                   type="text">
-            <button (click)="filterResults()" class="search-submit">
-              <i class="ri-send-plane-fill"></i>
-            </button>
-          </div>
-          <div class="tabs-results">
-            {{ appState.similarCases.length }} cases found, 3 cases suggested
-          </div>
-        }
+            <div class="tabs-search">
+              <input (input)="filterResults()"
+                     (keyup.enter)="filterResults()"
+                     [(ngModel)]="searchSimilarInput"
+                     class="search"
+                     id="search_similar_input"
+                     placeholder="Use keywords for a precise research"
+                     type="text">
+              <button (click)="filterResults()" class="search-submit">
+                <i class="ri-send-plane-fill"></i>
+              </button>
+            </div>
+            <div class="tabs-results">
+              {{ appState.similarCases.length }} cases found, 3 cases suggested
+            </div>
+          }
 
-        @if (displayedTab == 'similar-cases') {
-          <div id="similar_cases_tab">
+          @if (displayedTab == 'similar-cases') {
+            <div id="similar_cases_tab">
 
-            <div class="row cases-results">
+              <div class="row cases-results">
 
-              <!--           boucle des résultats de appState.similarCases filtrés par #search_similar_input -->
-              @for (case of filteredSimilarCases; track case.id) {
+                <!--           boucle des résultats de appState.similarCases filtrés par #search_similar_input -->
+                @for (case of filteredSimilarCases; track case.id) {
 
-                <app-case-result [case]="case"></app-case-result>
-              }
+                  <app-case-result [case]="case"></app-case-result>
+                }
+
+              </div>
+            </div>
+
+
+          } @else {
+
+            <div id="technical_manuals_tab">
+              <sae-bot-talks [documents]="appState.technicalManuals"
+                             [message]="'Here’s technical documents related to the client’s question ! '"></sae-bot-talks>
+
+              <!--            (les manuels ici)-->
 
             </div>
-          </div>
-
-
-        } @else {
-
-          <div id="technical_manuals_tab">
-            <sae-bot-talks [message]="'Here’s technical documents related to the client’s question ! '"
-                           [documents]="appState.technicalManuals"></sae-bot-talks>
-
-            <!--            (les manuels ici)-->
-
-          </div>
-        }
+          }
+        </div>
       </div>
-    </div>
+    </section>
+
   </main>
   <footer>
     <app-bottom-navigation [hideNextStepButton]="true"></app-bottom-navigation>
diff --git a/sae-csc/src/app/pages/similar-cases/similar-cases.scss b/sae-csc/src/app/pages/similar-cases/similar-cases.scss
index 2d74321..8820b49 100644
--- a/sae-csc/src/app/pages/similar-cases/similar-cases.scss
+++ b/sae-csc/src/app/pages/similar-cases/similar-cases.scss
@@ -1,257 +1,262 @@
 
-:host {
+app-bottom-navigation {
+  top: 438px;
+  position: absolute;
+  width: 100%;
+}
 
-  padding: 64px;
-
-  app-bottom-navigation{
-    top: 438px;
-    position: absolute;
-    width: 100%;
-  }
-
-  .actions {
-    button {
-      cursor: pointer;
-    }
-  }
-
-  .indicator {
-    background: green;
-    width: 8px;
-    height: 8px;
-    border-radius: 100%;
-    margin-left: 16px;
-    display: inline-block;
-  }
-
-  .title-box {
-    color: #1B1D27;
-    font-family: Barlow;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 140%;
-
-    margin-bottom: 24px;
-
-  }
-
-  header {
-    .simimlar-cases-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    button {
-      color: #255B8E;
-      color: var(--Colors-Principal-Normal, #255B8E);
-
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 24px;
-
-      display: inline-flex;
-      height: 44px;
-      padding: 14px 16px;
-      align-items: center;
-      gap: 8px;
-      flex-shrink: 0;
-      border-radius: 10px;
-      border: 1px solid var(--Colors-Principal-Normal, #255B8E);
-      background: #FFF;
-
-      + button {
-        margin-left: 4px;
-      }
-
-      &.search-solutions {
-        border-radius: 10px;
-        color: white;
-        background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
-      }
-    }
-  }
-
-  .post-tabs {
-    border-radius: 10px;
-    background: #E3EAF1;
-    padding: 16px;
-    margin-top: 16px;
-
-    .tabs {
-      display: flex;
-      flex-direction: row;
-      justify-content: stretch;
-      align-items: center;
-      gap: 4px;
-
-      div {
-        flex-grow: 1;
-      }
-    }
-
-    .tab-item {
-      color: #49454F;
-      text-align: center;
-      font-size: 14px;
-      font-style: normal;
-      line-height: 24px;
-      font-weight: 600;
-      border-bottom: solid 1px #333;
-      cursor: pointer;
-
-      &.is-active {
-        color: #000;
-
-        border-bottom: solid 2px #000;
-
-
-      }
-    }
-
-    .body {
-      color: #1B1D27;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 140%; /* 22.4px */
-      min-height: 100px;
-      padding-top: 10px;
-    }
-  }
-
-  .row-bot-talks {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .toggle-ai-suggestion {
-    color: #A86CFD;
-  }
-
-  .tabs-container {
-    margin-top: 32px;
-  }
-
-  .tabs-body {
-    padding: 24px 20px;
-    gap: 32px;
-    border-radius: 8px;
-    background: #E3EAF1;
-    margin-top: 10px;
-  }
-
-  .tabs-search {
-    color: #525668;
-    font-family: Barlow;
-    font-size: 14px;
-    font-style: italic;
-    font-weight: 400;
-    line-height: 16px;
-    width: 100%;
-    min-width: 976px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-
-
-    padding: 16px;
-    padding-left: 40px;
-    margin: 5px auto;
-
-    .search {
-    }
-
-    input {
-      width: 976px;
-      padding: 16px;
-      border: 0;
-      border-radius: 8px 0 0 8px;
-      background: #FFF;
-    }
-
-    .search-submit {
-      display: inline-flex;
-      padding: 9px 14px;
-      align-items: center;
-      gap: 10px;
-      border: 0;
-      display: inline-flex;
-      padding: 9px 14px;
-      align-items: center;
-      gap: 10px;
-      color: white;
-      height: 51px;
-
-      border-radius: 0 8px 8px 0;
-      background: linear-gradient(145deg, #55BCEC -21.82%, #005AA2 82.35%);
-
-      i {
-        font-size: 1.5rem;
-      }
-    }
-  }
-
-  .tabs-results {
-    color: #083B7D;
-    font-family: "Source Sans Pro";
-    font-size: 16px;
-    font-style: italic;
-    font-weight: 600;
-    line-height: 140%;
-    margin-top: 40px;
-  }
-
-  .tab-button {
+.actions {
+  button {
     cursor: pointer;
-    padding: 16px;
-    text-align: center;
-    border-radius: 8px;
-    color: var(--Black-text, #1B1D27);
-    font-family: Barlow;
-    font-size: 20px;
-    font-weight: 400;
-
-    &.is-active {
-      background: #E3EAF1;
-      color: #000;
-      font-size: 20px;
-      font-weight: 600;
-
-    }
-
-    &:hover {
-      background: #D8E7F1;
-    }
-  }
-
-  .indicator {
-    ::before {
-      width: 12px;
-      height: 12px;
-      background: blue;
-
-    }
-  }
-
-  #similar_cases_tab {
-    .cases-results {
-      margin-top: 16px;
-
-      app-case-result {
-        margin-bottom: 8px;
-      }
-    }
-  }
-
-  #technical_manuals_tab {
-    padding-top: 16px;
-  }
-
-  footer {
-    margin-top: 65px;
   }
 }
+
+.indicator {
+  background: green;
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  margin-left: 16px;
+  display: inline-block;
+}
+
+.title-box {
+  color: #1B1D27;
+  font-family: Barlow;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 140%;
+
+  margin-bottom: 24px;
+
+}
+
+header {
+  background: white;
+
+
+  .simimlar-cases-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 74px 64px 0;
+  }
+
+
+  button {
+    color: #255B8E;
+    color: var(--Colors-Principal-Normal, #255B8E);
+
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+
+    display: inline-flex;
+    height: 44px;
+    padding: 14px 16px;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+    border-radius: 10px;
+    border: 1px solid var(--Colors-Principal-Normal, #255B8E);
+    background: #FFF;
+
+    + button {
+      margin-left: 4px;
+    }
+
+    &.search-solutions {
+      border-radius: 10px;
+      color: white;
+      background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
+    }
+  }
+}
+
+.post-tabs {
+  border-radius: 10px;
+  background: #E3EAF1;
+  padding: 16px;
+  margin: 16px 64px 0;
+
+  .tabs {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    align-items: center;
+    gap: 4px;
+
+    div {
+      flex-grow: 1;
+    }
+  }
+
+  .tab-item {
+    color: #49454F;
+    text-align: center;
+    font-size: 14px;
+    font-style: normal;
+    line-height: 24px;
+    font-weight: 600;
+    border-bottom: solid 1px #333;
+    cursor: pointer;
+
+    &.is-active {
+      color: #000;
+
+      border-bottom: solid 2px #000;
+
+
+    }
+  }
+
+  .body {
+    color: #1B1D27;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%; /* 22.4px */
+    min-height: 100px;
+    padding-top: 10px;
+  }
+}
+
+.row-bot-talks {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+
+  sae-bot-talks {
+    justify-content: flex-start
+  }
+}
+
+.toggle-ai-suggestion {
+  color: #A86CFD;
+}
+
+.tabs-container {
+  margin-top: 32px;
+}
+
+.tabs-body {
+  padding: 24px 20px;
+  gap: 32px;
+  border-radius: 8px;
+  background: #E3EAF1;
+  margin-top: 10px;
+}
+
+.tabs-search {
+  color: #525668;
+  font-family: Barlow;
+  font-size: 14px;
+  font-style: italic;
+  font-weight: 400;
+  line-height: 16px;
+  width: 100%;
+  min-width: 976px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+
+  padding: 16px;
+  padding-left: 40px;
+  margin: 5px auto;
+
+  .search {
+  }
+
+  input {
+    width: 976px;
+    padding: 16px;
+    border: 0;
+    border-radius: 8px 0 0 8px;
+    background: #FFF;
+  }
+
+  .search-submit {
+    display: inline-flex;
+    padding: 9px 14px;
+    align-items: center;
+    gap: 10px;
+    border: 0;
+    display: inline-flex;
+    padding: 9px 14px;
+    align-items: center;
+    gap: 10px;
+    color: white;
+    height: 51px;
+
+    border-radius: 0 8px 8px 0;
+    background: linear-gradient(145deg, #55BCEC -21.82%, #005AA2 82.35%);
+
+    i {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+.tabs-results {
+  color: #083B7D;
+  font-family: "Source Sans Pro";
+  font-size: 16px;
+  font-style: italic;
+  font-weight: 600;
+  line-height: 140%;
+  margin-top: 40px;
+}
+
+.tab-button {
+  cursor: pointer;
+  padding: 16px;
+  text-align: center;
+  border-radius: 8px;
+  color: var(--Black-text, #1B1D27);
+  font-family: Barlow;
+  font-size: 20px;
+  font-weight: 400;
+
+  &.is-active {
+    background: #E3EAF1;
+    color: #000;
+    font-size: 20px;
+    font-weight: 600;
+
+  }
+
+  &:hover {
+    background: #D8E7F1;
+  }
+}
+
+.indicator {
+  ::before {
+    width: 12px;
+    height: 12px;
+    background: blue;
+
+  }
+}
+
+#similar_cases_tab {
+  .cases-results {
+    margin-top: 16px;
+
+    app-case-result {
+      margin-bottom: 8px;
+    }
+  }
+}
+
+#technical_manuals_tab {
+  padding-top: 16px;
+}
+
+footer {
+  margin-top: 65px;
+}
+
diff --git a/sae-csc/src/app/pages/similar-cases/similar-cases.ts b/sae-csc/src/app/pages/similar-cases/similar-cases.ts
index 95a06ab..2f564f1 100644
--- a/sae-csc/src/app/pages/similar-cases/similar-cases.ts
+++ b/sae-csc/src/app/pages/similar-cases/similar-cases.ts
@@ -36,9 +36,10 @@ export class SimilarCases {
   searchSimilarInput: string = '';
   displayConfirmModal: boolean = false;
   protected readonly confirm = confirm;
+  protected readonly actionTypes = ActionTypes;
   private router = inject(Router);
 
-  constructor(private store: Store<StateInterface>) {
+  constructor(protected store: Store<StateInterface>) {
     this.store.select(state => state.app).subscribe(app => {
       this.appState = app;
       // Initialize filteredSimilarCases with all cases by default
diff --git a/sae-csc/src/styles/app/styles/pages/_similar-cases.scss b/sae-csc/src/styles/app/styles/pages/_similar-cases.scss
index c773949..2dc7f93 100644
--- a/sae-csc/src/styles/app/styles/pages/_similar-cases.scss
+++ b/sae-csc/src/styles/app/styles/pages/_similar-cases.scss
@@ -1,5 +1,23 @@
-  @use '../../../../styles/variables-barrel' as variables;
+@use '../../../../styles/variables-barrel' as variables;
 
-.similar-cases{
-  @extend .all-pages;
+
+.similar-cases {
+  //background: green;
+  .padded-section {
+    padding: 0 64px;
+  }
+
+  .filters-row {
+    padding: 0 64px 0;
+    background: white;
+
+    .selectors {
+      gap: 12px;
+    }
+  }
+
+  app-bottom-navigation {
+    padding: 64px;
+    margin-top: 100px;
+  }
 }