diff --git a/src/app/structure/components/recherche/recherche.component.html b/src/app/structure/components/recherche/recherche.component.html
index bca3c4b6f9eb6fdb0fb620e8e812e7081318c755..a1e2b199dc1e56dc511548756a860242036dd660 100644
--- a/src/app/structure/components/recherche/recherche.component.html
+++ b/src/app/structure/components/recherche/recherche.component.html
@@ -11,19 +11,20 @@
   </div>
 
   <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
-    <button type="button">
+    <button type="button" [className]="btnServicesChecked ? 'selected' : ''" (click)="openModal(this.modalType[0])">
       <span class="btnText">Services</span>
       <div class="arrow"></div>
     </button>
-    <button type="button">
+    <button type="button" [className]="btnHomeChecked ? 'selected' : ''" (click)="openModal(this.modalType[1])">
       <span class="btnText">Accueil</span>
       <div class="arrow"></div>
     </button>
-    <button type="button">
+    <button type="button" [className]="btnMoreFilterchecked ? 'selected' : ''" (click)="openModal(this.modalType[2])">
       <span class="btnText">Plus de filtres</span>
       <div class="arrow"></div>
     </button>
   </div>
+  <div *ngIf="modalOpened" class="modal"></div>
 </div>
 <div class="footer" fxLayout="row" fxLayoutAlign="space-between center">
   <div class="checkbox">
diff --git a/src/app/structure/components/recherche/recherche.component.scss b/src/app/structure/components/recherche/recherche.component.scss
index 41a606c7013f0f994b295dbdad8a8ed04218f504..b1e1cac0435af1ef1789b781da8b68f12f2f8a36 100644
--- a/src/app/structure/components/recherche/recherche.component.scss
+++ b/src/app/structure/components/recherche/recherche.component.scss
@@ -58,6 +58,8 @@
   .btnSection {
     padding: 16px 0 16px 0;
     button {
+      outline: none;
+
       border: 1px solid $grey;
       border-radius: 33px;
       background-color: $white;
@@ -65,7 +67,6 @@
       align-items: center;
       display: flex;
       cursor: pointer;
-
       .btnText {
         justify-content: center;
         font-family: Trebuchet MS;
@@ -76,19 +77,18 @@
         display: flex;
         align-items: center;
       }
-      &:focus {
-        border: 1px solid $orange-light;
-        color: $orange-light;
-        outline: none;
-        .arrow {
-          background-color: transparent;
-          border-bottom: 1px solid $orange-light;
-          border-right: 1px solid $orange-light;
-          transform: translateY(25%) rotate(-135deg);
-          margin: 0 5px 0 10px;
-          height: 7px;
-          width: 7px;
-        }
+    }
+    .selected {
+      border: 1px solid $orange-light;
+      color: $orange-light;
+      .arrow {
+        background-color: transparent;
+        border-bottom: 1px solid $orange-light;
+        border-right: 1px solid $orange-light;
+        transform: translateY(25%) rotate(-135deg);
+        margin: 0 5px 0 10px;
+        height: 7px;
+        width: 7px;
       }
     }
     .arrow {
@@ -170,3 +170,14 @@
     }
   }
 }
+.modal {
+  height: 500px;
+  width: 1100px;
+  background: $white;
+  border: 1px solid $purple;
+  box-sizing: border-box;
+  border-radius: 8px;
+  z-index: 1;
+  position: fixed;
+  margin-top: 80px;
+}
diff --git a/src/app/structure/components/recherche/recherche.component.ts b/src/app/structure/components/recherche/recherche.component.ts
index b37a52c87e59af0699edd95fec9dbf61a2422bb1..f4708495921cc2dbb98469d911045e5bed6f5ce6 100644
--- a/src/app/structure/components/recherche/recherche.component.ts
+++ b/src/app/structure/components/recherche/recherche.component.ts
@@ -3,13 +3,42 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-recherche',
   templateUrl: './recherche.component.html',
-  styleUrls: ['./recherche.component.scss']
+  styleUrls: ['./recherche.component.scss'],
 })
 export class RechercheComponent implements OnInit {
-
-  constructor() { }
-
+  constructor() {}
+  modalOpened: string;
+  modalType: string[] = ['services', 'accueil', 'plusFiltres'];
+  btnServicesChecked: boolean;
+  btnHomeChecked: boolean;
+  btnMoreFilterchecked: boolean;
   ngOnInit(): void {
+    this.modalOpened = null;
+    this.btnServicesChecked = false;
   }
 
+  openModal(option: string) {
+    this.modalOpened = null;
+    switch (option) {
+      case this.modalType[0]:
+        this.btnServicesChecked = !this.btnServicesChecked;
+        this.btnHomeChecked = false;
+        this.btnMoreFilterchecked = false;
+        if (this.btnServicesChecked) this.modalOpened = this.modalType[0];
+
+        break;
+      case this.modalType[1]:
+        this.btnHomeChecked = !this.btnHomeChecked;
+        this.btnMoreFilterchecked = false;
+        this.btnServicesChecked = false;
+        if (this.btnHomeChecked) this.modalOpened = this.modalType[1];
+        break;
+      case this.modalType[2]:
+        this.btnMoreFilterchecked = !this.btnMoreFilterchecked;
+        this.btnServicesChecked = false;
+        this.btnHomeChecked = false;
+        if (this.btnMoreFilterchecked) this.modalOpened = this.modalType[2];
+        break;
+    }
+  }
 }