diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>
diff --git a/src/app/modules/public/home/home.component.scss b/src/app/modules/public/home/home.component.scss
index 745fc61..a6fe1d8 100644
--- a/src/app/modules/public/home/home.component.scss
+++ b/src/app/modules/public/home/home.component.scss
@@ -1,7 +1,4 @@
-*{
-    margin: 0;
-    width: 100%;
-}
+
 .home__background{
     width: 100%;
     height: 85vh;

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>
diff --git a/src/app/modules/public/home/home.component.scss b/src/app/modules/public/home/home.component.scss
index 745fc61..a6fe1d8 100644
--- a/src/app/modules/public/home/home.component.scss
+++ b/src/app/modules/public/home/home.component.scss
@@ -1,7 +1,4 @@
-*{
-    margin: 0;
-    width: 100%;
-}
+
 .home__background{
     width: 100%;
     height: 85vh;
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..0b0c204 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,27 +1,51 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container">
+  <div class="dropdown shadow-none d-flex justify-content-center">
+    <button
+      class="
+        btn btn-secondary
+        dropdown-toggle
+        shadow-none
+        Sr-16
+        d-flex
+        align-items-center
+        
+      "
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Consumibles'"
+        name="restaurant-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Tiendas'"
+        name="storefront-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Más'"
+        name="apps-outline"
+        size="large"
+      ></ion-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
+</div>
 
 <!-- <div class="dropdown" dropdown>
     <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>
diff --git a/src/app/modules/public/home/home.component.scss b/src/app/modules/public/home/home.component.scss
index 745fc61..a6fe1d8 100644
--- a/src/app/modules/public/home/home.component.scss
+++ b/src/app/modules/public/home/home.component.scss
@@ -1,7 +1,4 @@
-*{
-    margin: 0;
-    width: 100%;
-}
+
 .home__background{
     width: 100%;
     height: 85vh;
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..0b0c204 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,27 +1,51 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container">
+  <div class="dropdown shadow-none d-flex justify-content-center">
+    <button
+      class="
+        btn btn-secondary
+        dropdown-toggle
+        shadow-none
+        Sr-16
+        d-flex
+        align-items-center
+        
+      "
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Consumibles'"
+        name="restaurant-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Tiendas'"
+        name="storefront-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Más'"
+        name="apps-outline"
+        size="large"
+      ></ion-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
+</div>
 
 <!-- <div class="dropdown" dropdown>
     <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..d3a029a 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -1,30 +1,16 @@
 .dropdown{
-    button{
-        background: none;
-        border: none;
-        outline: none;
-        color: var(--base-color-dark) !important;
-    }
-    button:focus{
-        outline: none !important;
-    }
-    .dropdown-menu{
-        width: 12rem;
-        position: absolute !important;
-        left: 5px !important;
-        li{
-            background-color: var(--base-color-gray);
-            &:hover{
-                background: var(--base-color-gray-dark);
-            }
-        }
-    }
- 
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+  button{
+      background: none;
+      border: none;
+      color: var(--base-color-dark) !important;
+  }
+  .dropdown-menu{
+      width: 12rem;
+      left: 5px !important;
+      li{
+          &:hover{
+              background: var(--base-color-gray-dark);
+          }
+      }
+  }
+}
\ No newline at end of file

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>
diff --git a/src/app/modules/public/home/home.component.scss b/src/app/modules/public/home/home.component.scss
index 745fc61..a6fe1d8 100644
--- a/src/app/modules/public/home/home.component.scss
+++ b/src/app/modules/public/home/home.component.scss
@@ -1,7 +1,4 @@
-*{
-    margin: 0;
-    width: 100%;
-}
+
 .home__background{
     width: 100%;
     height: 85vh;
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..0b0c204 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,27 +1,51 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container">
+  <div class="dropdown shadow-none d-flex justify-content-center">
+    <button
+      class="
+        btn btn-secondary
+        dropdown-toggle
+        shadow-none
+        Sr-16
+        d-flex
+        align-items-center
+        
+      "
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Consumibles'"
+        name="restaurant-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Tiendas'"
+        name="storefront-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Más'"
+        name="apps-outline"
+        size="large"
+      ></ion-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
+</div>
 
 <!-- <div class="dropdown" dropdown>
     <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..d3a029a 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -1,30 +1,16 @@
 .dropdown{
-    button{
-        background: none;
-        border: none;
-        outline: none;
-        color: var(--base-color-dark) !important;
-    }
-    button:focus{
-        outline: none !important;
-    }
-    .dropdown-menu{
-        width: 12rem;
-        position: absolute !important;
-        left: 5px !important;
-        li{
-            background-color: var(--base-color-gray);
-            &:hover{
-                background: var(--base-color-gray-dark);
-            }
-        }
-    }
- 
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+  button{
+      background: none;
+      border: none;
+      color: var(--base-color-dark) !important;
+  }
+  .dropdown-menu{
+      width: 12rem;
+      left: 5px !important;
+      li{
+          &:hover{
+              background: var(--base-color-gray-dark);
+          }
+      }
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index d41bec2..44e74f0 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -1,29 +1,29 @@
 
-.footer__background{
-    height: 252px;
-    background: var(--base-color-dark);
-    color: var(--base-color-white);
+.footer__background {
+  height: 252px;
+  background: var(--base-color-dark);
+  color: var(--base-color-white);
 }
 
-.content{
-    display: flex;
-    justify-content: space-around;
-    section{
-        width: 16rem;
-    }
+.content {
+  display: flex;
+  justify-content: space-around;
+  section {
+    width: 16rem;
+  }
 }
 
-p{
-    margin-bottom: 0;
+p {
+  margin-bottom: 0;
 }
 
-span{
-    margin-bottom:20px ;
+span {
+  margin-bottom: 20px;
 }
 
-.image-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top:26px;
-}
\ No newline at end of file
+.image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 26px;
+}

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>
diff --git a/src/app/modules/public/home/home.component.scss b/src/app/modules/public/home/home.component.scss
index 745fc61..a6fe1d8 100644
--- a/src/app/modules/public/home/home.component.scss
+++ b/src/app/modules/public/home/home.component.scss
@@ -1,7 +1,4 @@
-*{
-    margin: 0;
-    width: 100%;
-}
+
 .home__background{
     width: 100%;
     height: 85vh;
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..0b0c204 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,27 +1,51 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container">
+  <div class="dropdown shadow-none d-flex justify-content-center">
+    <button
+      class="
+        btn btn-secondary
+        dropdown-toggle
+        shadow-none
+        Sr-16
+        d-flex
+        align-items-center
+        
+      "
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Consumibles'"
+        name="restaurant-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Tiendas'"
+        name="storefront-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Más'"
+        name="apps-outline"
+        size="large"
+      ></ion-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
+</div>
 
 <!-- <div class="dropdown" dropdown>
     <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..d3a029a 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -1,30 +1,16 @@
 .dropdown{
-    button{
-        background: none;
-        border: none;
-        outline: none;
-        color: var(--base-color-dark) !important;
-    }
-    button:focus{
-        outline: none !important;
-    }
-    .dropdown-menu{
-        width: 12rem;
-        position: absolute !important;
-        left: 5px !important;
-        li{
-            background-color: var(--base-color-gray);
-            &:hover{
-                background: var(--base-color-gray-dark);
-            }
-        }
-    }
- 
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+  button{
+      background: none;
+      border: none;
+      color: var(--base-color-dark) !important;
+  }
+  .dropdown-menu{
+      width: 12rem;
+      left: 5px !important;
+      li{
+          &:hover{
+              background: var(--base-color-gray-dark);
+          }
+      }
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index d41bec2..44e74f0 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -1,29 +1,29 @@
 
-.footer__background{
-    height: 252px;
-    background: var(--base-color-dark);
-    color: var(--base-color-white);
+.footer__background {
+  height: 252px;
+  background: var(--base-color-dark);
+  color: var(--base-color-white);
 }
 
-.content{
-    display: flex;
-    justify-content: space-around;
-    section{
-        width: 16rem;
-    }
+.content {
+  display: flex;
+  justify-content: space-around;
+  section {
+    width: 16rem;
+  }
 }
 
-p{
-    margin-bottom: 0;
+p {
+  margin-bottom: 0;
 }
 
-span{
-    margin-bottom:20px ;
+span {
+  margin-bottom: 20px;
 }
 
-.image-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top:26px;
-}
\ No newline at end of file
+.image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 26px;
+}
diff --git a/src/app/shared/components/navbar/navbar.component.scss b/src/app/shared/components/navbar/navbar.component.scss
index 8fdcd41..331db4c 100644
--- a/src/app/shared/components/navbar/navbar.component.scss
+++ b/src/app/shared/components/navbar/navbar.component.scss
@@ -1,3 +1,8 @@
+* {
+  margin: 0;
+  width: 100%;
+}
+
 .navbar__discover {
     background: #ffffff;
     border-bottom: 4px solid  var(--base-color-primary);

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>
diff --git a/src/app/modules/public/home/home.component.scss b/src/app/modules/public/home/home.component.scss
index 745fc61..a6fe1d8 100644
--- a/src/app/modules/public/home/home.component.scss
+++ b/src/app/modules/public/home/home.component.scss
@@ -1,7 +1,4 @@
-*{
-    margin: 0;
-    width: 100%;
-}
+
 .home__background{
     width: 100%;
     height: 85vh;
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..0b0c204 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,27 +1,51 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container">
+  <div class="dropdown shadow-none d-flex justify-content-center">
+    <button
+      class="
+        btn btn-secondary
+        dropdown-toggle
+        shadow-none
+        Sr-16
+        d-flex
+        align-items-center
+        
+      "
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Consumibles'"
+        name="restaurant-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Tiendas'"
+        name="storefront-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Más'"
+        name="apps-outline"
+        size="large"
+      ></ion-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
+</div>
 
 <!-- <div class="dropdown" dropdown>
     <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..d3a029a 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -1,30 +1,16 @@
 .dropdown{
-    button{
-        background: none;
-        border: none;
-        outline: none;
-        color: var(--base-color-dark) !important;
-    }
-    button:focus{
-        outline: none !important;
-    }
-    .dropdown-menu{
-        width: 12rem;
-        position: absolute !important;
-        left: 5px !important;
-        li{
-            background-color: var(--base-color-gray);
-            &:hover{
-                background: var(--base-color-gray-dark);
-            }
-        }
-    }
- 
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+  button{
+      background: none;
+      border: none;
+      color: var(--base-color-dark) !important;
+  }
+  .dropdown-menu{
+      width: 12rem;
+      left: 5px !important;
+      li{
+          &:hover{
+              background: var(--base-color-gray-dark);
+          }
+      }
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index d41bec2..44e74f0 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -1,29 +1,29 @@
 
-.footer__background{
-    height: 252px;
-    background: var(--base-color-dark);
-    color: var(--base-color-white);
+.footer__background {
+  height: 252px;
+  background: var(--base-color-dark);
+  color: var(--base-color-white);
 }
 
-.content{
-    display: flex;
-    justify-content: space-around;
-    section{
-        width: 16rem;
-    }
+.content {
+  display: flex;
+  justify-content: space-around;
+  section {
+    width: 16rem;
+  }
 }
 
-p{
-    margin-bottom: 0;
+p {
+  margin-bottom: 0;
 }
 
-span{
-    margin-bottom:20px ;
+span {
+  margin-bottom: 20px;
 }
 
-.image-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top:26px;
-}
\ No newline at end of file
+.image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 26px;
+}
diff --git a/src/app/shared/components/navbar/navbar.component.scss b/src/app/shared/components/navbar/navbar.component.scss
index 8fdcd41..331db4c 100644
--- a/src/app/shared/components/navbar/navbar.component.scss
+++ b/src/app/shared/components/navbar/navbar.component.scss
@@ -1,3 +1,8 @@
+* {
+  margin: 0;
+  width: 100%;
+}
+
 .navbar__discover {
     background: #ffffff;
     border-bottom: 4px solid  var(--base-color-primary);
diff --git a/src/app/shared/components/navbar/navbar.component.ts b/src/app/shared/components/navbar/navbar.component.ts
index ddf056e..61c38ba 100644
--- a/src/app/shared/components/navbar/navbar.component.ts
+++ b/src/app/shared/components/navbar/navbar.component.ts
@@ -4,29 +4,30 @@
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss']
+  styleUrls: ['./navbar.component.scss'],
 })
 export class NavbarComponent implements OnInit {
-
   icon_settings = faSlidersH;
   filters_is_visible: boolean = false;
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
-  showFilters(){
-    const filters: any = document.querySelector(".discover__filters");
-    if(!this.filters_is_visible){
-      console.log("Run show filters")
-      filters.classList.add("discover__filters-show")
+  showFilters() {
+    const filters: any = document.querySelector('.discover__filters');
+    const carousel: any = document.querySelector('.carousel_size');
+    if (!this.filters_is_visible) {
+      console.log('Run show filters');
+      filters.classList.add('discover__filters-show');
       this.filters_is_visible = true;
-    }else{
-      console.log("Run hide filters")
-      filters.classList.remove("discover__filters-show")
+      carousel.classList.add('carousel_size_show');
+      console.log('listo');
+    } else {
+      console.log('Run hide filters');
+      filters.classList.remove('discover__filters-show');
       this.filters_is_visible = false;
+      carousel.classList.remove('carousel_size_show');
     }
   }
-
 }

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>
diff --git a/src/app/modules/public/home/home.component.scss b/src/app/modules/public/home/home.component.scss
index 745fc61..a6fe1d8 100644
--- a/src/app/modules/public/home/home.component.scss
+++ b/src/app/modules/public/home/home.component.scss
@@ -1,7 +1,4 @@
-*{
-    margin: 0;
-    width: 100%;
-}
+
 .home__background{
     width: 100%;
     height: 85vh;
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..0b0c204 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,27 +1,51 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container">
+  <div class="dropdown shadow-none d-flex justify-content-center">
+    <button
+      class="
+        btn btn-secondary
+        dropdown-toggle
+        shadow-none
+        Sr-16
+        d-flex
+        align-items-center
+        
+      "
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Consumibles'"
+        name="restaurant-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Tiendas'"
+        name="storefront-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Más'"
+        name="apps-outline"
+        size="large"
+      ></ion-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
+</div>
 
 <!-- <div class="dropdown" dropdown>
     <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..d3a029a 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -1,30 +1,16 @@
 .dropdown{
-    button{
-        background: none;
-        border: none;
-        outline: none;
-        color: var(--base-color-dark) !important;
-    }
-    button:focus{
-        outline: none !important;
-    }
-    .dropdown-menu{
-        width: 12rem;
-        position: absolute !important;
-        left: 5px !important;
-        li{
-            background-color: var(--base-color-gray);
-            &:hover{
-                background: var(--base-color-gray-dark);
-            }
-        }
-    }
- 
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+  button{
+      background: none;
+      border: none;
+      color: var(--base-color-dark) !important;
+  }
+  .dropdown-menu{
+      width: 12rem;
+      left: 5px !important;
+      li{
+          &:hover{
+              background: var(--base-color-gray-dark);
+          }
+      }
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index d41bec2..44e74f0 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -1,29 +1,29 @@
 
-.footer__background{
-    height: 252px;
-    background: var(--base-color-dark);
-    color: var(--base-color-white);
+.footer__background {
+  height: 252px;
+  background: var(--base-color-dark);
+  color: var(--base-color-white);
 }
 
-.content{
-    display: flex;
-    justify-content: space-around;
-    section{
-        width: 16rem;
-    }
+.content {
+  display: flex;
+  justify-content: space-around;
+  section {
+    width: 16rem;
+  }
 }
 
-p{
-    margin-bottom: 0;
+p {
+  margin-bottom: 0;
 }
 
-span{
-    margin-bottom:20px ;
+span {
+  margin-bottom: 20px;
 }
 
-.image-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top:26px;
-}
\ No newline at end of file
+.image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 26px;
+}
diff --git a/src/app/shared/components/navbar/navbar.component.scss b/src/app/shared/components/navbar/navbar.component.scss
index 8fdcd41..331db4c 100644
--- a/src/app/shared/components/navbar/navbar.component.scss
+++ b/src/app/shared/components/navbar/navbar.component.scss
@@ -1,3 +1,8 @@
+* {
+  margin: 0;
+  width: 100%;
+}
+
 .navbar__discover {
     background: #ffffff;
     border-bottom: 4px solid  var(--base-color-primary);
diff --git a/src/app/shared/components/navbar/navbar.component.ts b/src/app/shared/components/navbar/navbar.component.ts
index ddf056e..61c38ba 100644
--- a/src/app/shared/components/navbar/navbar.component.ts
+++ b/src/app/shared/components/navbar/navbar.component.ts
@@ -4,29 +4,30 @@
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss']
+  styleUrls: ['./navbar.component.scss'],
 })
 export class NavbarComponent implements OnInit {
-
   icon_settings = faSlidersH;
   filters_is_visible: boolean = false;
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
-  showFilters(){
-    const filters: any = document.querySelector(".discover__filters");
-    if(!this.filters_is_visible){
-      console.log("Run show filters")
-      filters.classList.add("discover__filters-show")
+  showFilters() {
+    const filters: any = document.querySelector('.discover__filters');
+    const carousel: any = document.querySelector('.carousel_size');
+    if (!this.filters_is_visible) {
+      console.log('Run show filters');
+      filters.classList.add('discover__filters-show');
       this.filters_is_visible = true;
-    }else{
-      console.log("Run hide filters")
-      filters.classList.remove("discover__filters-show")
+      carousel.classList.add('carousel_size_show');
+      console.log('listo');
+    } else {
+      console.log('Run hide filters');
+      filters.classList.remove('discover__filters-show');
       this.filters_is_visible = false;
+      carousel.classList.remove('carousel_size_show');
     }
   }
-
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index ce65d98..7620a55 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SearchComponent } from './components/search/search.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -27,6 +27,7 @@
     BrandComponent,
     FooterComponent,
     DropdownCategoriesComponent
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class SharedModule { }
\ No newline at end of file

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>
diff --git a/src/app/modules/public/home/home.component.scss b/src/app/modules/public/home/home.component.scss
index 745fc61..a6fe1d8 100644
--- a/src/app/modules/public/home/home.component.scss
+++ b/src/app/modules/public/home/home.component.scss
@@ -1,7 +1,4 @@
-*{
-    margin: 0;
-    width: 100%;
-}
+
 .home__background{
     width: 100%;
     height: 85vh;
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..0b0c204 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,27 +1,51 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container">
+  <div class="dropdown shadow-none d-flex justify-content-center">
+    <button
+      class="
+        btn btn-secondary
+        dropdown-toggle
+        shadow-none
+        Sr-16
+        d-flex
+        align-items-center
+        
+      "
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Consumibles'"
+        name="restaurant-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Tiendas'"
+        name="storefront-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Más'"
+        name="apps-outline"
+        size="large"
+      ></ion-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
+</div>
 
 <!-- <div class="dropdown" dropdown>
     <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..d3a029a 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -1,30 +1,16 @@
 .dropdown{
-    button{
-        background: none;
-        border: none;
-        outline: none;
-        color: var(--base-color-dark) !important;
-    }
-    button:focus{
-        outline: none !important;
-    }
-    .dropdown-menu{
-        width: 12rem;
-        position: absolute !important;
-        left: 5px !important;
-        li{
-            background-color: var(--base-color-gray);
-            &:hover{
-                background: var(--base-color-gray-dark);
-            }
-        }
-    }
- 
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+  button{
+      background: none;
+      border: none;
+      color: var(--base-color-dark) !important;
+  }
+  .dropdown-menu{
+      width: 12rem;
+      left: 5px !important;
+      li{
+          &:hover{
+              background: var(--base-color-gray-dark);
+          }
+      }
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index d41bec2..44e74f0 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -1,29 +1,29 @@
 
-.footer__background{
-    height: 252px;
-    background: var(--base-color-dark);
-    color: var(--base-color-white);
+.footer__background {
+  height: 252px;
+  background: var(--base-color-dark);
+  color: var(--base-color-white);
 }
 
-.content{
-    display: flex;
-    justify-content: space-around;
-    section{
-        width: 16rem;
-    }
+.content {
+  display: flex;
+  justify-content: space-around;
+  section {
+    width: 16rem;
+  }
 }
 
-p{
-    margin-bottom: 0;
+p {
+  margin-bottom: 0;
 }
 
-span{
-    margin-bottom:20px ;
+span {
+  margin-bottom: 20px;
 }
 
-.image-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top:26px;
-}
\ No newline at end of file
+.image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 26px;
+}
diff --git a/src/app/shared/components/navbar/navbar.component.scss b/src/app/shared/components/navbar/navbar.component.scss
index 8fdcd41..331db4c 100644
--- a/src/app/shared/components/navbar/navbar.component.scss
+++ b/src/app/shared/components/navbar/navbar.component.scss
@@ -1,3 +1,8 @@
+* {
+  margin: 0;
+  width: 100%;
+}
+
 .navbar__discover {
     background: #ffffff;
     border-bottom: 4px solid  var(--base-color-primary);
diff --git a/src/app/shared/components/navbar/navbar.component.ts b/src/app/shared/components/navbar/navbar.component.ts
index ddf056e..61c38ba 100644
--- a/src/app/shared/components/navbar/navbar.component.ts
+++ b/src/app/shared/components/navbar/navbar.component.ts
@@ -4,29 +4,30 @@
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss']
+  styleUrls: ['./navbar.component.scss'],
 })
 export class NavbarComponent implements OnInit {
-
   icon_settings = faSlidersH;
   filters_is_visible: boolean = false;
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
-  showFilters(){
-    const filters: any = document.querySelector(".discover__filters");
-    if(!this.filters_is_visible){
-      console.log("Run show filters")
-      filters.classList.add("discover__filters-show")
+  showFilters() {
+    const filters: any = document.querySelector('.discover__filters');
+    const carousel: any = document.querySelector('.carousel_size');
+    if (!this.filters_is_visible) {
+      console.log('Run show filters');
+      filters.classList.add('discover__filters-show');
       this.filters_is_visible = true;
-    }else{
-      console.log("Run hide filters")
-      filters.classList.remove("discover__filters-show")
+      carousel.classList.add('carousel_size_show');
+      console.log('listo');
+    } else {
+      console.log('Run hide filters');
+      filters.classList.remove('discover__filters-show');
       this.filters_is_visible = false;
+      carousel.classList.remove('carousel_size_show');
     }
   }
-
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index ce65d98..7620a55 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SearchComponent } from './components/search/search.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -27,6 +27,7 @@
     BrandComponent,
     FooterComponent,
     DropdownCategoriesComponent
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class SharedModule { }
\ No newline at end of file
diff --git a/src/assets/images/svg/arow-right.svg b/src/assets/images/svg/arow-right.svg
index 519f663..6581569 100644
--- a/src/assets/images/svg/arow-right.svg
+++ b/src/assets/images/svg/arow-right.svg
@@ -1,3 +1,4 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.5604 40.4297L34.4901 26.7793C34.7468 26.5593 34.9528 26.2863 35.094 25.9792C35.2352 25.6721 35.3083 25.338 35.3083 25C35.3083 24.662 35.2352 24.3279 35.094 24.0208C34.9528 23.7137 34.7468 23.4407 34.4901 23.2207L18.5604 9.57032C17.0399 8.26759 14.6913 9.34766 14.6913 11.3496L14.6913 38.6543C14.6913 40.6562 17.0399 41.7363 18.5604 40.4297Z" fill="#FFD600"/>
+<svg width="22" height="32" viewBox="0 0 22 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.56044 31.4297L20.4901 17.7793C20.7468 17.5593 20.9528 17.2863 21.094 16.9792C21.2352 16.6721 21.3083 16.338 21.3083 16C21.3083 15.662 21.2352 15.3279 21.094 15.0208C20.9528 14.7137 20.7468 14.4407 20.4901 14.2207L4.56044 0.57032C3.03993 -0.732414 0.691296 0.347664 0.691296 2.34962L0.691296 29.6543C0.691296 31.6562 3.03993 32.7363 4.56044 31.4297Z" fill="#FFD600"/>
 </svg>
+

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>
diff --git a/src/app/modules/public/home/home.component.scss b/src/app/modules/public/home/home.component.scss
index 745fc61..a6fe1d8 100644
--- a/src/app/modules/public/home/home.component.scss
+++ b/src/app/modules/public/home/home.component.scss
@@ -1,7 +1,4 @@
-*{
-    margin: 0;
-    width: 100%;
-}
+
 .home__background{
     width: 100%;
     height: 85vh;
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..0b0c204 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,27 +1,51 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container">
+  <div class="dropdown shadow-none d-flex justify-content-center">
+    <button
+      class="
+        btn btn-secondary
+        dropdown-toggle
+        shadow-none
+        Sr-16
+        d-flex
+        align-items-center
+        
+      "
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Consumibles'"
+        name="restaurant-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Tiendas'"
+        name="storefront-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Más'"
+        name="apps-outline"
+        size="large"
+      ></ion-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
+</div>
 
 <!-- <div class="dropdown" dropdown>
     <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..d3a029a 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -1,30 +1,16 @@
 .dropdown{
-    button{
-        background: none;
-        border: none;
-        outline: none;
-        color: var(--base-color-dark) !important;
-    }
-    button:focus{
-        outline: none !important;
-    }
-    .dropdown-menu{
-        width: 12rem;
-        position: absolute !important;
-        left: 5px !important;
-        li{
-            background-color: var(--base-color-gray);
-            &:hover{
-                background: var(--base-color-gray-dark);
-            }
-        }
-    }
- 
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+  button{
+      background: none;
+      border: none;
+      color: var(--base-color-dark) !important;
+  }
+  .dropdown-menu{
+      width: 12rem;
+      left: 5px !important;
+      li{
+          &:hover{
+              background: var(--base-color-gray-dark);
+          }
+      }
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index d41bec2..44e74f0 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -1,29 +1,29 @@
 
-.footer__background{
-    height: 252px;
-    background: var(--base-color-dark);
-    color: var(--base-color-white);
+.footer__background {
+  height: 252px;
+  background: var(--base-color-dark);
+  color: var(--base-color-white);
 }
 
-.content{
-    display: flex;
-    justify-content: space-around;
-    section{
-        width: 16rem;
-    }
+.content {
+  display: flex;
+  justify-content: space-around;
+  section {
+    width: 16rem;
+  }
 }
 
-p{
-    margin-bottom: 0;
+p {
+  margin-bottom: 0;
 }
 
-span{
-    margin-bottom:20px ;
+span {
+  margin-bottom: 20px;
 }
 
-.image-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top:26px;
-}
\ No newline at end of file
+.image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 26px;
+}
diff --git a/src/app/shared/components/navbar/navbar.component.scss b/src/app/shared/components/navbar/navbar.component.scss
index 8fdcd41..331db4c 100644
--- a/src/app/shared/components/navbar/navbar.component.scss
+++ b/src/app/shared/components/navbar/navbar.component.scss
@@ -1,3 +1,8 @@
+* {
+  margin: 0;
+  width: 100%;
+}
+
 .navbar__discover {
     background: #ffffff;
     border-bottom: 4px solid  var(--base-color-primary);
diff --git a/src/app/shared/components/navbar/navbar.component.ts b/src/app/shared/components/navbar/navbar.component.ts
index ddf056e..61c38ba 100644
--- a/src/app/shared/components/navbar/navbar.component.ts
+++ b/src/app/shared/components/navbar/navbar.component.ts
@@ -4,29 +4,30 @@
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss']
+  styleUrls: ['./navbar.component.scss'],
 })
 export class NavbarComponent implements OnInit {
-
   icon_settings = faSlidersH;
   filters_is_visible: boolean = false;
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
-  showFilters(){
-    const filters: any = document.querySelector(".discover__filters");
-    if(!this.filters_is_visible){
-      console.log("Run show filters")
-      filters.classList.add("discover__filters-show")
+  showFilters() {
+    const filters: any = document.querySelector('.discover__filters');
+    const carousel: any = document.querySelector('.carousel_size');
+    if (!this.filters_is_visible) {
+      console.log('Run show filters');
+      filters.classList.add('discover__filters-show');
       this.filters_is_visible = true;
-    }else{
-      console.log("Run hide filters")
-      filters.classList.remove("discover__filters-show")
+      carousel.classList.add('carousel_size_show');
+      console.log('listo');
+    } else {
+      console.log('Run hide filters');
+      filters.classList.remove('discover__filters-show');
       this.filters_is_visible = false;
+      carousel.classList.remove('carousel_size_show');
     }
   }
-
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index ce65d98..7620a55 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SearchComponent } from './components/search/search.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -27,6 +27,7 @@
     BrandComponent,
     FooterComponent,
     DropdownCategoriesComponent
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class SharedModule { }
\ No newline at end of file
diff --git a/src/assets/images/svg/arow-right.svg b/src/assets/images/svg/arow-right.svg
index 519f663..6581569 100644
--- a/src/assets/images/svg/arow-right.svg
+++ b/src/assets/images/svg/arow-right.svg
@@ -1,3 +1,4 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.5604 40.4297L34.4901 26.7793C34.7468 26.5593 34.9528 26.2863 35.094 25.9792C35.2352 25.6721 35.3083 25.338 35.3083 25C35.3083 24.662 35.2352 24.3279 35.094 24.0208C34.9528 23.7137 34.7468 23.4407 34.4901 23.2207L18.5604 9.57032C17.0399 8.26759 14.6913 9.34766 14.6913 11.3496L14.6913 38.6543C14.6913 40.6562 17.0399 41.7363 18.5604 40.4297Z" fill="#FFD600"/>
+<svg width="22" height="32" viewBox="0 0 22 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.56044 31.4297L20.4901 17.7793C20.7468 17.5593 20.9528 17.2863 21.094 16.9792C21.2352 16.6721 21.3083 16.338 21.3083 16C21.3083 15.662 21.2352 15.3279 21.094 15.0208C20.9528 14.7137 20.7468 14.4407 20.4901 14.2207L4.56044 0.57032C3.03993 -0.732414 0.691296 0.347664 0.691296 2.34962L0.691296 29.6543C0.691296 31.6562 3.03993 32.7363 4.56044 31.4297Z" fill="#FFD600"/>
 </svg>
+
diff --git a/src/assets/images/svg/arrow-left.svg b/src/assets/images/svg/arrow-left.svg
index 9e57567..6702a8a 100644
--- a/src/assets/images/svg/arrow-left.svg
+++ b/src/assets/images/svg/arrow-left.svg
@@ -1,3 +1,3 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M31.4394 9.57031L15.5097 23.2207C15.2531 23.4407 15.0471 23.7137 14.9059 24.0208C14.7647 24.3279 14.6915 24.662 14.6915 25C14.6915 25.338 14.7647 25.6721 14.9059 25.9792C15.0471 26.2863 15.2531 26.5593 15.5097 26.7793L31.4394 40.4297C32.9599 41.7324 35.3086 40.6523 35.3086 38.6504V11.3457C35.3086 9.34375 32.9599 8.26367 31.4394 9.57031Z" fill="#FFD600"/>
-</svg>
\ No newline at end of file
+<svg width="22" height="32" viewBox="0 0 22 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4396 0.570313L1.50986 14.2207C1.25323 14.4407 1.04724 14.7137 0.906005 15.0208C0.764774 15.3279 0.69165 15.662 0.69165 16C0.69165 16.338 0.764774 16.6721 0.906005 16.9792C1.04724 17.2863 1.25323 17.5593 1.50986 17.7793L17.4396 31.4297C18.9601 32.7324 21.3087 31.6523 21.3087 29.6504V2.3457C21.3087 0.34375 18.9601 -0.736328 17.4396 0.570313Z" fill="#FFD600"/>
+</svg>

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>
diff --git a/src/app/modules/public/home/home.component.scss b/src/app/modules/public/home/home.component.scss
index 745fc61..a6fe1d8 100644
--- a/src/app/modules/public/home/home.component.scss
+++ b/src/app/modules/public/home/home.component.scss
@@ -1,7 +1,4 @@
-*{
-    margin: 0;
-    width: 100%;
-}
+
 .home__background{
     width: 100%;
     height: 85vh;
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..0b0c204 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,27 +1,51 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container">
+  <div class="dropdown shadow-none d-flex justify-content-center">
+    <button
+      class="
+        btn btn-secondary
+        dropdown-toggle
+        shadow-none
+        Sr-16
+        d-flex
+        align-items-center
+        
+      "
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Consumibles'"
+        name="restaurant-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Tiendas'"
+        name="storefront-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Más'"
+        name="apps-outline"
+        size="large"
+      ></ion-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
+</div>
 
 <!-- <div class="dropdown" dropdown>
     <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..d3a029a 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -1,30 +1,16 @@
 .dropdown{
-    button{
-        background: none;
-        border: none;
-        outline: none;
-        color: var(--base-color-dark) !important;
-    }
-    button:focus{
-        outline: none !important;
-    }
-    .dropdown-menu{
-        width: 12rem;
-        position: absolute !important;
-        left: 5px !important;
-        li{
-            background-color: var(--base-color-gray);
-            &:hover{
-                background: var(--base-color-gray-dark);
-            }
-        }
-    }
- 
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+  button{
+      background: none;
+      border: none;
+      color: var(--base-color-dark) !important;
+  }
+  .dropdown-menu{
+      width: 12rem;
+      left: 5px !important;
+      li{
+          &:hover{
+              background: var(--base-color-gray-dark);
+          }
+      }
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index d41bec2..44e74f0 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -1,29 +1,29 @@
 
-.footer__background{
-    height: 252px;
-    background: var(--base-color-dark);
-    color: var(--base-color-white);
+.footer__background {
+  height: 252px;
+  background: var(--base-color-dark);
+  color: var(--base-color-white);
 }
 
-.content{
-    display: flex;
-    justify-content: space-around;
-    section{
-        width: 16rem;
-    }
+.content {
+  display: flex;
+  justify-content: space-around;
+  section {
+    width: 16rem;
+  }
 }
 
-p{
-    margin-bottom: 0;
+p {
+  margin-bottom: 0;
 }
 
-span{
-    margin-bottom:20px ;
+span {
+  margin-bottom: 20px;
 }
 
-.image-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top:26px;
-}
\ No newline at end of file
+.image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 26px;
+}
diff --git a/src/app/shared/components/navbar/navbar.component.scss b/src/app/shared/components/navbar/navbar.component.scss
index 8fdcd41..331db4c 100644
--- a/src/app/shared/components/navbar/navbar.component.scss
+++ b/src/app/shared/components/navbar/navbar.component.scss
@@ -1,3 +1,8 @@
+* {
+  margin: 0;
+  width: 100%;
+}
+
 .navbar__discover {
     background: #ffffff;
     border-bottom: 4px solid  var(--base-color-primary);
diff --git a/src/app/shared/components/navbar/navbar.component.ts b/src/app/shared/components/navbar/navbar.component.ts
index ddf056e..61c38ba 100644
--- a/src/app/shared/components/navbar/navbar.component.ts
+++ b/src/app/shared/components/navbar/navbar.component.ts
@@ -4,29 +4,30 @@
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss']
+  styleUrls: ['./navbar.component.scss'],
 })
 export class NavbarComponent implements OnInit {
-
   icon_settings = faSlidersH;
   filters_is_visible: boolean = false;
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
-  showFilters(){
-    const filters: any = document.querySelector(".discover__filters");
-    if(!this.filters_is_visible){
-      console.log("Run show filters")
-      filters.classList.add("discover__filters-show")
+  showFilters() {
+    const filters: any = document.querySelector('.discover__filters');
+    const carousel: any = document.querySelector('.carousel_size');
+    if (!this.filters_is_visible) {
+      console.log('Run show filters');
+      filters.classList.add('discover__filters-show');
       this.filters_is_visible = true;
-    }else{
-      console.log("Run hide filters")
-      filters.classList.remove("discover__filters-show")
+      carousel.classList.add('carousel_size_show');
+      console.log('listo');
+    } else {
+      console.log('Run hide filters');
+      filters.classList.remove('discover__filters-show');
       this.filters_is_visible = false;
+      carousel.classList.remove('carousel_size_show');
     }
   }
-
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index ce65d98..7620a55 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SearchComponent } from './components/search/search.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -27,6 +27,7 @@
     BrandComponent,
     FooterComponent,
     DropdownCategoriesComponent
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class SharedModule { }
\ No newline at end of file
diff --git a/src/assets/images/svg/arow-right.svg b/src/assets/images/svg/arow-right.svg
index 519f663..6581569 100644
--- a/src/assets/images/svg/arow-right.svg
+++ b/src/assets/images/svg/arow-right.svg
@@ -1,3 +1,4 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.5604 40.4297L34.4901 26.7793C34.7468 26.5593 34.9528 26.2863 35.094 25.9792C35.2352 25.6721 35.3083 25.338 35.3083 25C35.3083 24.662 35.2352 24.3279 35.094 24.0208C34.9528 23.7137 34.7468 23.4407 34.4901 23.2207L18.5604 9.57032C17.0399 8.26759 14.6913 9.34766 14.6913 11.3496L14.6913 38.6543C14.6913 40.6562 17.0399 41.7363 18.5604 40.4297Z" fill="#FFD600"/>
+<svg width="22" height="32" viewBox="0 0 22 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.56044 31.4297L20.4901 17.7793C20.7468 17.5593 20.9528 17.2863 21.094 16.9792C21.2352 16.6721 21.3083 16.338 21.3083 16C21.3083 15.662 21.2352 15.3279 21.094 15.0208C20.9528 14.7137 20.7468 14.4407 20.4901 14.2207L4.56044 0.57032C3.03993 -0.732414 0.691296 0.347664 0.691296 2.34962L0.691296 29.6543C0.691296 31.6562 3.03993 32.7363 4.56044 31.4297Z" fill="#FFD600"/>
 </svg>
+
diff --git a/src/assets/images/svg/arrow-left.svg b/src/assets/images/svg/arrow-left.svg
index 9e57567..6702a8a 100644
--- a/src/assets/images/svg/arrow-left.svg
+++ b/src/assets/images/svg/arrow-left.svg
@@ -1,3 +1,3 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M31.4394 9.57031L15.5097 23.2207C15.2531 23.4407 15.0471 23.7137 14.9059 24.0208C14.7647 24.3279 14.6915 24.662 14.6915 25C14.6915 25.338 14.7647 25.6721 14.9059 25.9792C15.0471 26.2863 15.2531 26.5593 15.5097 26.7793L31.4394 40.4297C32.9599 41.7324 35.3086 40.6523 35.3086 38.6504V11.3457C35.3086 9.34375 32.9599 8.26367 31.4394 9.57031Z" fill="#FFD600"/>
-</svg>
\ No newline at end of file
+<svg width="22" height="32" viewBox="0 0 22 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4396 0.570313L1.50986 14.2207C1.25323 14.4407 1.04724 14.7137 0.906005 15.0208C0.764774 15.3279 0.69165 15.662 0.69165 16C0.69165 16.338 0.764774 16.6721 0.906005 16.9792C1.04724 17.2863 1.25323 17.5593 1.50986 17.7793L17.4396 31.4297C18.9601 32.7324 21.3087 31.6523 21.3087 29.6504V2.3457C21.3087 0.34375 18.9601 -0.736328 17.4396 0.570313Z" fill="#FFD600"/>
+</svg>
diff --git a/src/index.html b/src/index.html
index 7d2f360..880807e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,9 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
 </head>
 <body>
-  <app-root></app-root>
+  <app-root>
+  </app-root>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 </body>
 </html>

diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.html b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
index 14ccdd3..15c0366 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.html
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.html
@@ -1,27 +1,36 @@
-<div class="container">
-  <ul class="p-3 d-flex align-items-center justify-content-center container">
-    <li class="p-3 d-flex justify-content-between align-items-center">
-      <div class="img-container ps-1">
-        <div class=""></div>
-      </div>
-      <div class="info-container">
-        <div class="title d-flex justify-content-between align-items-center">
-          <h2>Restaurante ǵpuls</h2>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/star.svg" alt=""></i>
-          </div>
-        </div>
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex">
-            <i><img src="../../../../../../assets/images/svg/clock.svg" alt=""></i>
-            <span>Abierto</span>
-            <span>Cierra a las 21:00</span>
-          </div>
-          <div>
-            <i><img src="../../../../../../assets/images/svg/user.svg" alt=""></i>
-          </div>
+<ul class="p-3 d-flex align-items-center justify-content-center container">
+  <li class="p-3 d-flex align-items-center">
+    <div class="img-container ps-1 me-5">
+      <div class=""></div>
+    </div>
+    <div class="info-container">
+      <div class="title d-flex justify-content-between align-items-center">
+        <h2>Restaurante ǵpuls</h2>
+        <div>
+          <i
+            ><img src="../../../../../../assets/images/svg/star.svg" alt=""
+          /></i>
         </div>
       </div>
-    </li>
-  </ul>
-</div>
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+          <ion-icon size="large" name="time-outline" class="me-2"></ion-icon>
+          <span class="me-4">Abierto</span>
+          <span>Cierra a las 21:00</span>
+        </div>
+        <ion-icon size="large" name="people-outline"></ion-icon>
+      </div>
+      <p>
+        El restaurante gouls ofrece platos tradicionales con toques de
+        modernidad, aprovechando los productos de la zona (excelentes carnes,
+        salazones). combinandolos con nuevos sabores y texturas.
+      </p>
+      <div class="d-flex align-items-center">
+        <ion-icon class="me-1" size="large" name="call-outline"></ion-icon>
+        <span class="me-3">380-121-303</span>
+        <ion-icon class="me-1" size="large" name="mail-outline"></ion-icon>
+        <span>Panaderia-@gmail.com</span>
+      </div>
+    </div>
+  </li>
+</ul>
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
index 1529dd6..6837eb3 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.scss
@@ -1,7 +1,4 @@
-* {
-  width: auto;
-  height: auto;
-}
+
 
 ul {
   list-style-type: none;
@@ -9,14 +6,12 @@
 }
 
 li {
-  @media only screen and (min-width: 1500px) {
+ /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
-    width: 1500px;
-    min-width: 1500px;
-  }
+    width: 100%;
+  } */
   min-height: 250px;
-  width: 1026px;
-  min-width: 1026px;
+  width: 100%;
   border: 1.5px solid #8c8c8c;
   border-radius: 20px;
 }
@@ -26,8 +21,8 @@
 }
 
 .img-container div {
-  width: 400px;
-  height: 200px;
+  width: 25rem;
+  height: 12.5rem;
   border-radius: 20px;
   background-image: url(../../../../../../assets/images/restaurant_135621509.jpg);
   background-size: cover;
diff --git a/src/app/modules/public/discover/components/sites/sites.component.html b/src/app/modules/public/discover/components/sites/sites.component.html
index 276a120..532b50b 100644
--- a/src/app/modules/public/discover/components/sites/sites.component.html
+++ b/src/app/modules/public/discover/components/sites/sites.component.html
@@ -4,22 +4,22 @@
   >
     <div class="d-flex flex-row align-items-center ps-2">
       <button class="button-only-icon mr-0" (click)="changeModeList()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="grid-outline"></ion-icon>
       </button>
       <button class="button-only-icon ml-0" (click)="changeModeSlide()">
-        <fa-icon [icon]="icon_border_all"></fa-icon>
+        <ion-icon name="menu-outline"></ion-icon>
       </button>
     </div>
     <p class="text-center m-0">Todos los sitios</p>
     <div class="pe-2">
-      <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+      <app-dropdown-categories [name]="'Recomendados'"></app-dropdown-categories>
     </div>
   </section>
   <div *ngIf="is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-slide-sites></app-slide-sites>
+    <app-slide-sites style="width:100%;" ></app-slide-sites>
   </div>
-  <div *ngIf="!is_slide_mode" class="d-flex align-items-center has-bg-gray-light">
-    <app-list-sites></app-list-sites>
+  <div *ngIf="!is_slide_mode" class="has-bg-gray-light">
+    <app-list-sites ></app-list-sites>
   </div>
 
 </div>
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
index ded4a64..b806223 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.html
@@ -1,31 +1,53 @@
-<owl-carousel-o [options]="customOptions">
-  <ng-template carouselSlide>
-    <div class="slide d-flex flex-column justify-content-between ">
-      <div class="d-flex justify-content-end align-items-center mt-4 ">
-        <span>5</span>
-        <img
-          src="../../../../../../assets/images/svg/medium-star.svg"
-          alt=""
-          width="25px"
-          height="25px"
-          class="mr-5"
-        />
+<div class="carousel_size" >
+  <owl-carousel-o [options]="customOptions" class="d-flex">
+    <ng-template carouselSlide>
+      <div class="slide d-flex flex-column justify-content-between">
+        <div class="d-flex justify-content-end align-items-center mt-4">
+          <span>5</span>
+          <img
+            src="../../../../../../assets/images/svg/medium-star.svg"
+            alt=""
+            width="25px"
+            height="25px"
+            class="mr-5"
+          />
+        </div>
+        <div class="mb-4">
+          <i>Panaderia Blink</i>
+        </div>
       </div>
-      <div class="mb-4">
-        <i>Panaderia Blink</i>
-      </div>
-    </div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-  <ng-template carouselSlide>
-    <div class="slide">hola</div>
-  </ng-template>
-</owl-carousel-o>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+    <ng-template carouselSlide>
+      <div class="slide">hola</div>
+    </ng-template>
+  </owl-carousel-o>
+  
+</div>
+
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
index 8e35d81..481bea1 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.scss
@@ -1,3 +1,12 @@
+.carousel_size{
+  /* width: 100vw; */
+}
+
+.carousel_size_show{
+  width: 82.4vw;
+}
+
+
 .slide{
   color: white;
   font-size: 20px;
diff --git a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
index 47f7426..3442c96 100644
--- a/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
+++ b/src/app/modules/public/discover/components/slide-sites/slide-sites.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { faChevronCircleUp } from '@fortawesome/free-solid-svg-icons';
-import * as $ from 'jquery';
 import { OwlOptions } from 'ngx-owl-carousel-o';
+
 @Component({
   selector: 'app-slide-sites',
   templateUrl: './slide-sites.component.html',
@@ -20,11 +20,11 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:10,
+    margin:1,
     navSpeed: 700,
-    navText : ['<i class="nav-btn prev-slide"></i>','<i class="nav-btn next-slide"></i>'],
+    navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
-    responsive: {
+    /* responsive: {
         0: {
           items: 1,
           nav: true
@@ -43,12 +43,11 @@
           nav: true,
           loop: true
         }
-      }
+      } */
   }
 
   constructor() {}
-  
-  
 
-  ngOnInit() {}
+  ngOnInit() {
+  }
 }
diff --git a/src/app/modules/public/discover/discover.component.html b/src/app/modules/public/discover/discover.component.html
index 1289af0..e20b37a 100644
--- a/src/app/modules/public/discover/discover.component.html
+++ b/src/app/modules/public/discover/discover.component.html
@@ -4,7 +4,7 @@
     <div>
       <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9410.965166765627!2d-72.65151211510486!3d7.373677183637325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e68811722aa0c15%3A0x83b790e98f7db7d4!2sPamplona%2C%20Norte%20de%20Santander!5e0!3m2!1ses-419!2sco!4v1632020528709!5m2!1ses-419!2sco"
-        width="600"
+        width="100%"
         height="450"
         style="border: 0"
         loading="lazy"
diff --git a/src/app/modules/public/discover/discover.component.scss b/src/app/modules/public/discover/discover.component.scss
index d30ea00..f905470 100644
--- a/src/app/modules/public/discover/discover.component.scss
+++ b/src/app/modules/public/discover/discover.component.scss
@@ -1,16 +1,18 @@
-
-.discover__filters{
-    display: none;
-    transition: 2s;
+* {
+  margin: 0;
+  width: 100%;
 }
-.discover__filters-show{
-    display: flex;
-    height: 100%;
-    max-width: 20rem;
-    min-width: 20rem;
-    transition: 2s;
-    right: 0;
-    background-color:white;
-    z-index: 70;
-
-}
\ No newline at end of file
+.discover__filters {
+  display: none;
+  transition: 2s;
+}
+.discover__filters-show {
+  display: flex;
+  height: 100%;
+  max-width: 20rem;
+  min-width: 20rem;
+  transition: 2s;
+  right: 0;
+  background-color: white;
+  z-index: 70;
+}
diff --git a/src/app/modules/public/discover/discover.module.ts b/src/app/modules/public/discover/discover.module.ts
index 3deaeb8..5e12cf9 100644
--- a/src/app/modules/public/discover/discover.module.ts
+++ b/src/app/modules/public/discover/discover.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DiscoverRoutingModule } from './discover-routing.module';
 import { DiscoverComponent } from './discover.component';
@@ -12,6 +12,7 @@
 import { HttpClientModule } from '@angular/common/http';
 
 /* carousel */
+
 import { CarouselModule } from 'ngx-owl-carousel-o';
 @NgModule({
   declarations: [
@@ -29,7 +30,8 @@
     FontAwesomeModule,
     FormsModule,
     CarouselModule    
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 
 export class DiscoverModule { }
\ No newline at end of file
diff --git a/src/app/modules/public/home/home.component.html b/src/app/modules/public/home/home.component.html
index 36350cd..9afe80f 100644
--- a/src/app/modules/public/home/home.component.html
+++ b/src/app/modules/public/home/home.component.html
@@ -1,23 +1,24 @@
 <div class="home__background">
-  <span class="d-flex justify-content-center pt-3 Tx-15">Los mejores servicios a tu alcance</span>
+  <span class="d-flex justify-content-center pt-3 Tx-15"
+    >Los mejores servicios a tu alcance</span
+  >
   <div class="home__content d-flex align-items-center justify-content-center">
     <div class="home__search">
       <div class="home__brand">
-          <app-brand></app-brand>
+        <app-brand></app-brand>
       </div>
       <p class="text-center">
         <a [routerLink]="['/discover']">discover</a>
       </p>
       <app-search></app-search>
-      <div class="dropdown-container">
+      <div class="dropdown-container pt-3">
         <label for="">
           <app-dropdown-categories
-          [name]="'Consumibles'"
-        ></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
-        <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
+            [name]="'Consumibles'"
+          ></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Tiendas'"></app-dropdown-categories>
+          <app-dropdown-categories [name]="'Más'"></app-dropdown-categories>
         </label>
-        
       </div>
     </div>
   </div>
diff --git a/src/app/modules/public/home/home.component.scss b/src/app/modules/public/home/home.component.scss
index 745fc61..a6fe1d8 100644
--- a/src/app/modules/public/home/home.component.scss
+++ b/src/app/modules/public/home/home.component.scss
@@ -1,7 +1,4 @@
-*{
-    margin: 0;
-    width: 100%;
-}
+
 .home__background{
     width: 100%;
     height: 85vh;
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..0b0c204 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,27 +1,51 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container">
+  <div class="dropdown shadow-none d-flex justify-content-center">
+    <button
+      class="
+        btn btn-secondary
+        dropdown-toggle
+        shadow-none
+        Sr-16
+        d-flex
+        align-items-center
+        
+      "
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Consumibles'"
+        name="restaurant-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Tiendas'"
+        name="storefront-outline"
+        size="large"
+      ></ion-icon>
+      <ion-icon
+        class="me-3"
+        *ngIf="name == 'Más'"
+        name="apps-outline"
+        size="large"
+      ></ion-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
+</div>
 
 <!-- <div class="dropdown" dropdown>
     <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..d3a029a 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -1,30 +1,16 @@
 .dropdown{
-    button{
-        background: none;
-        border: none;
-        outline: none;
-        color: var(--base-color-dark) !important;
-    }
-    button:focus{
-        outline: none !important;
-    }
-    .dropdown-menu{
-        width: 12rem;
-        position: absolute !important;
-        left: 5px !important;
-        li{
-            background-color: var(--base-color-gray);
-            &:hover{
-                background: var(--base-color-gray-dark);
-            }
-        }
-    }
- 
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+  button{
+      background: none;
+      border: none;
+      color: var(--base-color-dark) !important;
+  }
+  .dropdown-menu{
+      width: 12rem;
+      left: 5px !important;
+      li{
+          &:hover{
+              background: var(--base-color-gray-dark);
+          }
+      }
+  }
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index d41bec2..44e74f0 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -1,29 +1,29 @@
 
-.footer__background{
-    height: 252px;
-    background: var(--base-color-dark);
-    color: var(--base-color-white);
+.footer__background {
+  height: 252px;
+  background: var(--base-color-dark);
+  color: var(--base-color-white);
 }
 
-.content{
-    display: flex;
-    justify-content: space-around;
-    section{
-        width: 16rem;
-    }
+.content {
+  display: flex;
+  justify-content: space-around;
+  section {
+    width: 16rem;
+  }
 }
 
-p{
-    margin-bottom: 0;
+p {
+  margin-bottom: 0;
 }
 
-span{
-    margin-bottom:20px ;
+span {
+  margin-bottom: 20px;
 }
 
-.image-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top:26px;
-}
\ No newline at end of file
+.image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 26px;
+}
diff --git a/src/app/shared/components/navbar/navbar.component.scss b/src/app/shared/components/navbar/navbar.component.scss
index 8fdcd41..331db4c 100644
--- a/src/app/shared/components/navbar/navbar.component.scss
+++ b/src/app/shared/components/navbar/navbar.component.scss
@@ -1,3 +1,8 @@
+* {
+  margin: 0;
+  width: 100%;
+}
+
 .navbar__discover {
     background: #ffffff;
     border-bottom: 4px solid  var(--base-color-primary);
diff --git a/src/app/shared/components/navbar/navbar.component.ts b/src/app/shared/components/navbar/navbar.component.ts
index ddf056e..61c38ba 100644
--- a/src/app/shared/components/navbar/navbar.component.ts
+++ b/src/app/shared/components/navbar/navbar.component.ts
@@ -4,29 +4,30 @@
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
-  styleUrls: ['./navbar.component.scss']
+  styleUrls: ['./navbar.component.scss'],
 })
 export class NavbarComponent implements OnInit {
-
   icon_settings = faSlidersH;
   filters_is_visible: boolean = false;
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
-  showFilters(){
-    const filters: any = document.querySelector(".discover__filters");
-    if(!this.filters_is_visible){
-      console.log("Run show filters")
-      filters.classList.add("discover__filters-show")
+  showFilters() {
+    const filters: any = document.querySelector('.discover__filters');
+    const carousel: any = document.querySelector('.carousel_size');
+    if (!this.filters_is_visible) {
+      console.log('Run show filters');
+      filters.classList.add('discover__filters-show');
       this.filters_is_visible = true;
-    }else{
-      console.log("Run hide filters")
-      filters.classList.remove("discover__filters-show")
+      carousel.classList.add('carousel_size_show');
+      console.log('listo');
+    } else {
+      console.log('Run hide filters');
+      filters.classList.remove('discover__filters-show');
       this.filters_is_visible = false;
+      carousel.classList.remove('carousel_size_show');
     }
   }
-
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index ce65d98..7620a55 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SearchComponent } from './components/search/search.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -27,6 +27,7 @@
     BrandComponent,
     FooterComponent,
     DropdownCategoriesComponent
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class SharedModule { }
\ No newline at end of file
diff --git a/src/assets/images/svg/arow-right.svg b/src/assets/images/svg/arow-right.svg
index 519f663..6581569 100644
--- a/src/assets/images/svg/arow-right.svg
+++ b/src/assets/images/svg/arow-right.svg
@@ -1,3 +1,4 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.5604 40.4297L34.4901 26.7793C34.7468 26.5593 34.9528 26.2863 35.094 25.9792C35.2352 25.6721 35.3083 25.338 35.3083 25C35.3083 24.662 35.2352 24.3279 35.094 24.0208C34.9528 23.7137 34.7468 23.4407 34.4901 23.2207L18.5604 9.57032C17.0399 8.26759 14.6913 9.34766 14.6913 11.3496L14.6913 38.6543C14.6913 40.6562 17.0399 41.7363 18.5604 40.4297Z" fill="#FFD600"/>
+<svg width="22" height="32" viewBox="0 0 22 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.56044 31.4297L20.4901 17.7793C20.7468 17.5593 20.9528 17.2863 21.094 16.9792C21.2352 16.6721 21.3083 16.338 21.3083 16C21.3083 15.662 21.2352 15.3279 21.094 15.0208C20.9528 14.7137 20.7468 14.4407 20.4901 14.2207L4.56044 0.57032C3.03993 -0.732414 0.691296 0.347664 0.691296 2.34962L0.691296 29.6543C0.691296 31.6562 3.03993 32.7363 4.56044 31.4297Z" fill="#FFD600"/>
 </svg>
+
diff --git a/src/assets/images/svg/arrow-left.svg b/src/assets/images/svg/arrow-left.svg
index 9e57567..6702a8a 100644
--- a/src/assets/images/svg/arrow-left.svg
+++ b/src/assets/images/svg/arrow-left.svg
@@ -1,3 +1,3 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M31.4394 9.57031L15.5097 23.2207C15.2531 23.4407 15.0471 23.7137 14.9059 24.0208C14.7647 24.3279 14.6915 24.662 14.6915 25C14.6915 25.338 14.7647 25.6721 14.9059 25.9792C15.0471 26.2863 15.2531 26.5593 15.5097 26.7793L31.4394 40.4297C32.9599 41.7324 35.3086 40.6523 35.3086 38.6504V11.3457C35.3086 9.34375 32.9599 8.26367 31.4394 9.57031Z" fill="#FFD600"/>
-</svg>
\ No newline at end of file
+<svg width="22" height="32" viewBox="0 0 22 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4396 0.570313L1.50986 14.2207C1.25323 14.4407 1.04724 14.7137 0.906005 15.0208C0.764774 15.3279 0.69165 15.662 0.69165 16C0.69165 16.338 0.764774 16.6721 0.906005 16.9792C1.04724 17.2863 1.25323 17.5593 1.50986 17.7793L17.4396 31.4297C18.9601 32.7324 21.3087 31.6523 21.3087 29.6504V2.3457C21.3087 0.34375 18.9601 -0.736328 17.4396 0.570313Z" fill="#FFD600"/>
+</svg>
diff --git a/src/index.html b/src/index.html
index 7d2f360..880807e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,9 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
 </head>
 <body>
-  <app-root></app-root>
+  <app-root>
+  </app-root>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 </body>
 </html>
diff --git a/src/styles.scss b/src/styles.scss
index 0cbebbd..4885ea3 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -4,9 +4,9 @@
 @import url("./styles/variables.scss");
 @import url("./styles/shared.scss");
 
-* {
+html,
+body {
   margin: 0;
-  width: 100%;
 }
 
 .button-only-icon {
@@ -27,8 +27,9 @@
   position: absolute;
   width: 26px;
   cursor: pointer;
-  top: 100px !important;
-  left: 50px;
+  top: 90px !important;
+  left: 10px;
+  background:transparent;
 }
 
 .owl-carousel .owl-nav .owl-next {
@@ -36,8 +37,9 @@
   position: absolute;
   width: 26px;
   cursor: pointer;
-  top: 100px !important;
-  right: 50px !important;
+  top: 90px !important;
+  right: 10px !important;
+  background:transparent;
 }
 
 .owl-carousel .owl-item img {
@@ -51,6 +53,14 @@
 }
 
 .owl-carousel .owl-item i {
-    width: auto;
-    margin-left: 20px;
-  }
+  width: auto;
+  margin-left: 20px;
+}
+
+.owl-carousel .owl-item {
+  width: 30rem !important;
+}
+
+/* owl-carousel-o .owl-stage {
+  width: 100% !important;
+} */