diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.html b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
index 298553d..160404b 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.html
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
@@ -1,3 +1,4 @@
+<!-- <div (click)="switchModal()" class="backdrop" [ngStyle]="{'display':display}"></div> -->
 <div
   class="modal fade"
   id="staticBackdrop"
@@ -7,10 +8,13 @@
   aria-labelledby="staticBackdropLabel"
   aria-hidden="true"
   role="dialog"
+
 >
   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
-      <div class="modal-header align-items-start d-flex flex-column has-bg-dark">
+      <div
+        class="modal-header align-items-start d-flex flex-column has-bg-dark"
+      >
         <h2 class="modal-title" id="staticBackdropLabel">Restaurante gouls</h2>
         <div class="d-flex">
           <div>
@@ -32,6 +36,7 @@
           class="btn-close"
           data-bs-dismiss="modal"
           aria-label="Close"
+          (click)="switchModal()"
         ></button>
       </div>
       <div class="modal-body">

diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.html b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
index 298553d..160404b 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.html
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
@@ -1,3 +1,4 @@
+<!-- <div (click)="switchModal()" class="backdrop" [ngStyle]="{'display':display}"></div> -->
 <div
   class="modal fade"
   id="staticBackdrop"
@@ -7,10 +8,13 @@
   aria-labelledby="staticBackdropLabel"
   aria-hidden="true"
   role="dialog"
+
 >
   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
-      <div class="modal-header align-items-start d-flex flex-column has-bg-dark">
+      <div
+        class="modal-header align-items-start d-flex flex-column has-bg-dark"
+      >
         <h2 class="modal-title" id="staticBackdropLabel">Restaurante gouls</h2>
         <div class="d-flex">
           <div>
@@ -32,6 +36,7 @@
           class="btn-close"
           data-bs-dismiss="modal"
           aria-label="Close"
+          (click)="switchModal()"
         ></button>
       </div>
       <div class="modal-body">
diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.scss b/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
index a0d83af..b1730db 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
@@ -39,3 +39,18 @@
     max-height: 14rem;
   }
 }
+
+/* .backdrop{
+  background-color:rgba(0,0,0,0.6);
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100vh;
+} */
+
+.modal-header .btn-close{
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}

diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.html b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
index 298553d..160404b 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.html
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
@@ -1,3 +1,4 @@
+<!-- <div (click)="switchModal()" class="backdrop" [ngStyle]="{'display':display}"></div> -->
 <div
   class="modal fade"
   id="staticBackdrop"
@@ -7,10 +8,13 @@
   aria-labelledby="staticBackdropLabel"
   aria-hidden="true"
   role="dialog"
+
 >
   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
-      <div class="modal-header align-items-start d-flex flex-column has-bg-dark">
+      <div
+        class="modal-header align-items-start d-flex flex-column has-bg-dark"
+      >
         <h2 class="modal-title" id="staticBackdropLabel">Restaurante gouls</h2>
         <div class="d-flex">
           <div>
@@ -32,6 +36,7 @@
           class="btn-close"
           data-bs-dismiss="modal"
           aria-label="Close"
+          (click)="switchModal()"
         ></button>
       </div>
       <div class="modal-body">
diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.scss b/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
index a0d83af..b1730db 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
@@ -39,3 +39,18 @@
     max-height: 14rem;
   }
 }
+
+/* .backdrop{
+  background-color:rgba(0,0,0,0.6);
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100vh;
+} */
+
+.modal-header .btn-close{
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.ts b/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
index 8137702..f4a20c9 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
@@ -12,20 +12,27 @@
 
   url = environment.BASE_URL_API;
   loading = true;
+  @Input() isOpenModal: boolean = false;
   @Input() allyId!: number;
+  display = 'none';
   ally!: Site;
 
-  constructor(private queryService: QueryService) { }
+  constructor() { }
 
   ngOnInit(): void {
-    this.queryService.query(`${this.url}/allys/${this.allyId}/`, 'GET')?.subscribe(
-      (data) => {
-        console.log(data);
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
+  }
+
+  switchModal(){
+    const modal = document.getElementById('staticBackdrop');
+    if(this.isOpenModal == false){
+      modal?.classList.add("show")
+      this.display = 'block';
+      this.isOpenModal = true
+    }else{
+      this.display = 'none';
+      modal?.classList.remove("show")
+      this.isOpenModal = false;
+    }
   }
 
 }

diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.html b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
index 298553d..160404b 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.html
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
@@ -1,3 +1,4 @@
+<!-- <div (click)="switchModal()" class="backdrop" [ngStyle]="{'display':display}"></div> -->
 <div
   class="modal fade"
   id="staticBackdrop"
@@ -7,10 +8,13 @@
   aria-labelledby="staticBackdropLabel"
   aria-hidden="true"
   role="dialog"
+
 >
   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
-      <div class="modal-header align-items-start d-flex flex-column has-bg-dark">
+      <div
+        class="modal-header align-items-start d-flex flex-column has-bg-dark"
+      >
         <h2 class="modal-title" id="staticBackdropLabel">Restaurante gouls</h2>
         <div class="d-flex">
           <div>
@@ -32,6 +36,7 @@
           class="btn-close"
           data-bs-dismiss="modal"
           aria-label="Close"
+          (click)="switchModal()"
         ></button>
       </div>
       <div class="modal-body">
diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.scss b/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
index a0d83af..b1730db 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
@@ -39,3 +39,18 @@
     max-height: 14rem;
   }
 }
+
+/* .backdrop{
+  background-color:rgba(0,0,0,0.6);
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100vh;
+} */
+
+.modal-header .btn-close{
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.ts b/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
index 8137702..f4a20c9 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
@@ -12,20 +12,27 @@
 
   url = environment.BASE_URL_API;
   loading = true;
+  @Input() isOpenModal: boolean = false;
   @Input() allyId!: number;
+  display = 'none';
   ally!: Site;
 
-  constructor(private queryService: QueryService) { }
+  constructor() { }
 
   ngOnInit(): void {
-    this.queryService.query(`${this.url}/allys/${this.allyId}/`, 'GET')?.subscribe(
-      (data) => {
-        console.log(data);
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
+  }
+
+  switchModal(){
+    const modal = document.getElementById('staticBackdrop');
+    if(this.isOpenModal == false){
+      modal?.classList.add("show")
+      this.display = 'block';
+      this.isOpenModal = true
+    }else{
+      this.display = 'none';
+      modal?.classList.remove("show")
+      this.isOpenModal = false;
+    }
   }
 
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 396cbd0..ffa3871 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -15,5 +15,5 @@
     <app-filters></app-filters>
   </div>
   <app-footer></app-footer>
-  <app-modal-site #modalSiteComponent [allyId]="allyId"></app-modal-site>
+  <!-- <app-modal-site #modalSiteComponent [allyId]="allyId"></app-modal-site> -->
 </div>

diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.html b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
index 298553d..160404b 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.html
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
@@ -1,3 +1,4 @@
+<!-- <div (click)="switchModal()" class="backdrop" [ngStyle]="{'display':display}"></div> -->
 <div
   class="modal fade"
   id="staticBackdrop"
@@ -7,10 +8,13 @@
   aria-labelledby="staticBackdropLabel"
   aria-hidden="true"
   role="dialog"
+
 >
   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
-      <div class="modal-header align-items-start d-flex flex-column has-bg-dark">
+      <div
+        class="modal-header align-items-start d-flex flex-column has-bg-dark"
+      >
         <h2 class="modal-title" id="staticBackdropLabel">Restaurante gouls</h2>
         <div class="d-flex">
           <div>
@@ -32,6 +36,7 @@
           class="btn-close"
           data-bs-dismiss="modal"
           aria-label="Close"
+          (click)="switchModal()"
         ></button>
       </div>
       <div class="modal-body">
diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.scss b/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
index a0d83af..b1730db 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
@@ -39,3 +39,18 @@
     max-height: 14rem;
   }
 }
+
+/* .backdrop{
+  background-color:rgba(0,0,0,0.6);
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100vh;
+} */
+
+.modal-header .btn-close{
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.ts b/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
index 8137702..f4a20c9 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
@@ -12,20 +12,27 @@
 
   url = environment.BASE_URL_API;
   loading = true;
+  @Input() isOpenModal: boolean = false;
   @Input() allyId!: number;
+  display = 'none';
   ally!: Site;
 
-  constructor(private queryService: QueryService) { }
+  constructor() { }
 
   ngOnInit(): void {
-    this.queryService.query(`${this.url}/allys/${this.allyId}/`, 'GET')?.subscribe(
-      (data) => {
-        console.log(data);
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
+  }
+
+  switchModal(){
+    const modal = document.getElementById('staticBackdrop');
+    if(this.isOpenModal == false){
+      modal?.classList.add("show")
+      this.display = 'block';
+      this.isOpenModal = true
+    }else{
+      this.display = 'none';
+      modal?.classList.remove("show")
+      this.isOpenModal = false;
+    }
   }
 
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 396cbd0..ffa3871 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -15,5 +15,5 @@
     <app-filters></app-filters>
   </div>
   <app-footer></app-footer>
-  <app-modal-site #modalSiteComponent [allyId]="allyId"></app-modal-site>
+  <!-- <app-modal-site #modalSiteComponent [allyId]="allyId"></app-modal-site> -->
 </div>
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index 45ba4d2..31cc7ca 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -3,7 +3,7 @@
   width: 100%;
   grid-template-areas:
     "navbar navbar navbar"
-    "content content filters"
+    "conten conten filters"
     "footer footer filters";
   grid-template-columns: 1fr 1fr max-content;
   grid-template-rows: max-content 1fr max-content;
@@ -14,7 +14,7 @@
     top: 0;
   }
   .discover__content {
-    grid-area: content;
+    grid-area: conten;
   }
   .discover__filters {
     display: none;

diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.html b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
index 298553d..160404b 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.html
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.html
@@ -1,3 +1,4 @@
+<!-- <div (click)="switchModal()" class="backdrop" [ngStyle]="{'display':display}"></div> -->
 <div
   class="modal fade"
   id="staticBackdrop"
@@ -7,10 +8,13 @@
   aria-labelledby="staticBackdropLabel"
   aria-hidden="true"
   role="dialog"
+
 >
   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
-      <div class="modal-header align-items-start d-flex flex-column has-bg-dark">
+      <div
+        class="modal-header align-items-start d-flex flex-column has-bg-dark"
+      >
         <h2 class="modal-title" id="staticBackdropLabel">Restaurante gouls</h2>
         <div class="d-flex">
           <div>
@@ -32,6 +36,7 @@
           class="btn-close"
           data-bs-dismiss="modal"
           aria-label="Close"
+          (click)="switchModal()"
         ></button>
       </div>
       <div class="modal-body">
diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.scss b/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
index a0d83af..b1730db 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.scss
@@ -39,3 +39,18 @@
     max-height: 14rem;
   }
 }
+
+/* .backdrop{
+  background-color:rgba(0,0,0,0.6);
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  height:100vh;
+} */
+
+.modal-header .btn-close{
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
diff --git a/src/app/modules/public/discover/components/modal-site/modal-site.component.ts b/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
index 8137702..f4a20c9 100644
--- a/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
+++ b/src/app/modules/public/discover/components/modal-site/modal-site.component.ts
@@ -12,20 +12,27 @@
 
   url = environment.BASE_URL_API;
   loading = true;
+  @Input() isOpenModal: boolean = false;
   @Input() allyId!: number;
+  display = 'none';
   ally!: Site;
 
-  constructor(private queryService: QueryService) { }
+  constructor() { }
 
   ngOnInit(): void {
-    this.queryService.query(`${this.url}/allys/${this.allyId}/`, 'GET')?.subscribe(
-      (data) => {
-        console.log(data);
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
+  }
+
+  switchModal(){
+    const modal = document.getElementById('staticBackdrop');
+    if(this.isOpenModal == false){
+      modal?.classList.add("show")
+      this.display = 'block';
+      this.isOpenModal = true
+    }else{
+      this.display = 'none';
+      modal?.classList.remove("show")
+      this.isOpenModal = false;
+    }
   }
 
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 396cbd0..ffa3871 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -15,5 +15,5 @@
     <app-filters></app-filters>
   </div>
   <app-footer></app-footer>
-  <app-modal-site #modalSiteComponent [allyId]="allyId"></app-modal-site>
+  <!-- <app-modal-site #modalSiteComponent [allyId]="allyId"></app-modal-site> -->
 </div>
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index 45ba4d2..31cc7ca 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -3,7 +3,7 @@
   width: 100%;
   grid-template-areas:
     "navbar navbar navbar"
-    "content content filters"
+    "conten conten filters"
     "footer footer filters";
   grid-template-columns: 1fr 1fr max-content;
   grid-template-rows: max-content 1fr max-content;
@@ -14,7 +14,7 @@
     top: 0;
   }
   .discover__content {
-    grid-area: content;
+    grid-area: conten;
   }
   .discover__filters {
     display: none;
diff --git a/src/app/modules/public/discover/discover.component.ts b/src/app/modules/public/discover/discover.component.ts
index 3801492..d580fcb 100644
--- a/src/app/modules/public/discover/discover.component.ts
+++ b/src/app/modules/public/discover/discover.component.ts
@@ -14,6 +14,7 @@
 export class DiscoverComponent implements OnInit, AfterViewInit {
 
   @ViewChild('modalSiteComponent') modal: any;
+  openModal = false;
 
   icon_border_all = faBorderAll;
   allyId: number = -1;
@@ -67,9 +68,8 @@
   }
 
   handlePatternAllyId($event: any) {
-    console.log(this.modal);
-    document.getElementById('staticBackdrop')?.classList.remove('fade')
-    this.allyId = $event;
+    console.log(this.modal as HTMLElement);
+    this.modal.switchModal();
   }
 
 }