diff --git a/src/app/core/interfaces/site/site.ts b/src/app/core/interfaces/site/site.ts
index 9795920..bd1d9d8 100644
--- a/src/app/core/interfaces/site/site.ts
+++ b/src/app/core/interfaces/site/site.ts
@@ -20,5 +20,6 @@
     phone_number_3?: string;
     email?: string;
     url?: string;
+    show_information?:boolean,
 }
 

diff --git a/src/app/core/interfaces/site/site.ts b/src/app/core/interfaces/site/site.ts
index 9795920..bd1d9d8 100644
--- a/src/app/core/interfaces/site/site.ts
+++ b/src/app/core/interfaces/site/site.ts
@@ -20,5 +20,6 @@
     phone_number_3?: string;
     email?: string;
     url?: string;
+    show_information?:boolean,
 }
 
diff --git a/src/app/core/mocks/data.ts b/src/app/core/mocks/data.ts
index 02cf1c6..6e9afe4 100644
--- a/src/app/core/mocks/data.ts
+++ b/src/app/core/mocks/data.ts
@@ -11,7 +11,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 1,
@@ -23,7 +24,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 2,
@@ -35,7 +37,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 3,
@@ -47,7 +50,8 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
     {
         id: 5,
@@ -59,7 +63,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 6,
@@ -71,7 +76,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 7,
@@ -83,7 +89,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 8,
@@ -95,6 +102,7 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
 ]

diff --git a/src/app/core/interfaces/site/site.ts b/src/app/core/interfaces/site/site.ts
index 9795920..bd1d9d8 100644
--- a/src/app/core/interfaces/site/site.ts
+++ b/src/app/core/interfaces/site/site.ts
@@ -20,5 +20,6 @@
     phone_number_3?: string;
     email?: string;
     url?: string;
+    show_information?:boolean,
 }
 
diff --git a/src/app/core/mocks/data.ts b/src/app/core/mocks/data.ts
index 02cf1c6..6e9afe4 100644
--- a/src/app/core/mocks/data.ts
+++ b/src/app/core/mocks/data.ts
@@ -11,7 +11,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 1,
@@ -23,7 +24,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 2,
@@ -35,7 +37,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 3,
@@ -47,7 +50,8 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
     {
         id: 5,
@@ -59,7 +63,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 6,
@@ -71,7 +76,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 7,
@@ -83,7 +89,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 8,
@@ -95,6 +102,7 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
 ]
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 2e70b45..9cf56d6 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,11 +1,24 @@
-<ul class="p-3 d-flex flex-column list__gap align-items-center justify-content-center container">
+<ul
+  class="
+    p-3
+    d-flex
+    flex-column
+    list__gap
+    align-items-center
+    justify-content-center
+    container
+  "
+>
   <li class="p-3 d-flex align-items-center" *ngFor="let site of sites">
     <div class="img-container ps-1 me-5">
-      <div class="" [ngStyle]="{'background-image': 'url(' + site.url + ')'}"></div>
+      <div
+        class=""
+        [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+      ></div>
     </div>
     <div (click)="handlePatternAllyId(site!.id)"  data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="info-container">
       <div class="title d-flex justify-content-between align-items-center">
-        <h2 class="Ws-24">{{site!.name}}</h2>
+        <h2 class="Ws-24">{{ site!.name }}</h2>
         <div class="score-icon">
           <ion-icon name="star-outline"></ion-icon>
           <ion-icon name="star-outline"></ion-icon>
@@ -16,7 +29,7 @@
       </div>
       <div class="d-flex justify-content-between align-items-center">
         <div class="d-flex align-items-center Tx-15">
-          <ion-icon  name="time-outline" class="me-2 time-icon"></ion-icon>
+          <ion-icon name="time-outline" class="me-2 time-icon"></ion-icon>
           <span class="me-4 open">Abierto</span>
           <span>Cierra a las 21:00</span>
         </div>
@@ -32,11 +45,40 @@
         salazones). combinandolos con nuevos sabores y texturas.
       </p>
       <div class="d-flex align-items-center Tx-15 blue-color">
-        <ion-icon class="me-1 call-icon"  name="call-outline"></ion-icon>
-        <span class="me-3">{{site!.phone_number}}</span>
-        <ion-icon class="me-1 mail-icon"  name="mail-outline"></ion-icon>
-        <span>{{site!.email}}</span>
+        <ion-icon class="me-1 call-icon" name="call-outline"></ion-icon>
+        <span class="me-3">{{ site!.phone_number }}</span>
+        <ion-icon class="me-1 mail-icon" name="mail-outline"></ion-icon>
+        <span>{{ site!.email }}</span>
       </div>
     </div>
   </li>
 </ul>
+
+<div class="d-flex align-items-center justify-content-center">
+  <div
+    style="width: 50%"
+    class="d-flex align-items-center justify-content-center"
+  >
+    <button
+      (click)="retroceder()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-back-outline" class="arrow-icon"></ion-icon>
+    </button>
+    <ng-template ngFor let-page [ngForOf]="numberPages" let-i="index">
+      <div *ngIf="i == pageSelect; else elseBlock">
+        <div class="page-select slide d-flex align-items-center justify-content-center">{{ page }}</div>
+      </div>
+      <ng-template #elseBlock
+        ><div (click)="newPage(i)" class="slide slide d-flex align-items-center justify-content-center">{{ page }}</div></ng-template
+      >
+    </ng-template>
+    <div class="slide slide d-flex align-items-center justify-content-center">...</div>
+    <button
+      (click)="avanzar()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </button>
+  </div>
+</div>

diff --git a/src/app/core/interfaces/site/site.ts b/src/app/core/interfaces/site/site.ts
index 9795920..bd1d9d8 100644
--- a/src/app/core/interfaces/site/site.ts
+++ b/src/app/core/interfaces/site/site.ts
@@ -20,5 +20,6 @@
     phone_number_3?: string;
     email?: string;
     url?: string;
+    show_information?:boolean,
 }
 
diff --git a/src/app/core/mocks/data.ts b/src/app/core/mocks/data.ts
index 02cf1c6..6e9afe4 100644
--- a/src/app/core/mocks/data.ts
+++ b/src/app/core/mocks/data.ts
@@ -11,7 +11,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 1,
@@ -23,7 +24,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 2,
@@ -35,7 +37,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 3,
@@ -47,7 +50,8 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
     {
         id: 5,
@@ -59,7 +63,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 6,
@@ -71,7 +76,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 7,
@@ -83,7 +89,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 8,
@@ -95,6 +102,7 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
 ]
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 2e70b45..9cf56d6 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,11 +1,24 @@
-<ul class="p-3 d-flex flex-column list__gap align-items-center justify-content-center container">
+<ul
+  class="
+    p-3
+    d-flex
+    flex-column
+    list__gap
+    align-items-center
+    justify-content-center
+    container
+  "
+>
   <li class="p-3 d-flex align-items-center" *ngFor="let site of sites">
     <div class="img-container ps-1 me-5">
-      <div class="" [ngStyle]="{'background-image': 'url(' + site.url + ')'}"></div>
+      <div
+        class=""
+        [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+      ></div>
     </div>
     <div (click)="handlePatternAllyId(site!.id)"  data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="info-container">
       <div class="title d-flex justify-content-between align-items-center">
-        <h2 class="Ws-24">{{site!.name}}</h2>
+        <h2 class="Ws-24">{{ site!.name }}</h2>
         <div class="score-icon">
           <ion-icon name="star-outline"></ion-icon>
           <ion-icon name="star-outline"></ion-icon>
@@ -16,7 +29,7 @@
       </div>
       <div class="d-flex justify-content-between align-items-center">
         <div class="d-flex align-items-center Tx-15">
-          <ion-icon  name="time-outline" class="me-2 time-icon"></ion-icon>
+          <ion-icon name="time-outline" class="me-2 time-icon"></ion-icon>
           <span class="me-4 open">Abierto</span>
           <span>Cierra a las 21:00</span>
         </div>
@@ -32,11 +45,40 @@
         salazones). combinandolos con nuevos sabores y texturas.
       </p>
       <div class="d-flex align-items-center Tx-15 blue-color">
-        <ion-icon class="me-1 call-icon"  name="call-outline"></ion-icon>
-        <span class="me-3">{{site!.phone_number}}</span>
-        <ion-icon class="me-1 mail-icon"  name="mail-outline"></ion-icon>
-        <span>{{site!.email}}</span>
+        <ion-icon class="me-1 call-icon" name="call-outline"></ion-icon>
+        <span class="me-3">{{ site!.phone_number }}</span>
+        <ion-icon class="me-1 mail-icon" name="mail-outline"></ion-icon>
+        <span>{{ site!.email }}</span>
       </div>
     </div>
   </li>
 </ul>
+
+<div class="d-flex align-items-center justify-content-center">
+  <div
+    style="width: 50%"
+    class="d-flex align-items-center justify-content-center"
+  >
+    <button
+      (click)="retroceder()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-back-outline" class="arrow-icon"></ion-icon>
+    </button>
+    <ng-template ngFor let-page [ngForOf]="numberPages" let-i="index">
+      <div *ngIf="i == pageSelect; else elseBlock">
+        <div class="page-select slide d-flex align-items-center justify-content-center">{{ page }}</div>
+      </div>
+      <ng-template #elseBlock
+        ><div (click)="newPage(i)" class="slide slide d-flex align-items-center justify-content-center">{{ page }}</div></ng-template
+      >
+    </ng-template>
+    <div class="slide slide d-flex align-items-center justify-content-center">...</div>
+    <button
+      (click)="avanzar()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </button>
+  </div>
+</div>
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 c0014c9..ca15824 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,12 +1,10 @@
-
-
 ul {
   list-style-type: none;
   padding-left: 0;
 }
 
 li {
- /*  @media only screen and (min-width: 1500px) {
+  /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
     width: 100%;
   } */
@@ -17,7 +15,6 @@
 }
 
 .img-container {
-
 }
 
 .img-container div {
@@ -27,33 +24,69 @@
   background-size: cover;
 }
 
-.info-container{
+.info-container {
   width: 60%;
 }
 
-.list__gap{
+.list__gap {
   gap: 1rem;
 }
 
-.time-icon{
+.time-icon {
   font-size: 25px;
   color: var(--base-color-green);
 }
 
-.open{
+.open {
   color: var(--base-color-green);
 }
 
-.call-icon,.mail-icon{
+.call-icon,
+.mail-icon {
   font-size: 20px;
-  
 }
 
-.blue-color{
+.blue-color {
   color: var(--base-color-blue-secondary);
 }
 
-.user-icon,.score-icon{
-  color:var(--base-color-gray-dark);
+.user-icon,
+.score-icon {
+  color: var(--base-color-gray-dark);
   font-size: 25px;
 }
+
+.arrow-icon{
+  width:1.438rem;
+  height:1.313rem;
+  color: white;
+}
+
+/* carousel */
+
+.slide {
+  margin: 20px 5px;
+  color: black;
+  height: 1.875rem;
+  width: 1.875rem;
+  border-radius:var(--base-rounded-medium);
+  cursor: pointer;
+  /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
+}
+
+button {
+  background-color: var(--base-color-primary);
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+  width: 2.938rem;
+  height: 2.188rem;
+  border-radius:var(--base-rounded-medium);
+}
+
+.page-select{
+  background-color: var(--base-color-gray-dark);
+}

diff --git a/src/app/core/interfaces/site/site.ts b/src/app/core/interfaces/site/site.ts
index 9795920..bd1d9d8 100644
--- a/src/app/core/interfaces/site/site.ts
+++ b/src/app/core/interfaces/site/site.ts
@@ -20,5 +20,6 @@
     phone_number_3?: string;
     email?: string;
     url?: string;
+    show_information?:boolean,
 }
 
diff --git a/src/app/core/mocks/data.ts b/src/app/core/mocks/data.ts
index 02cf1c6..6e9afe4 100644
--- a/src/app/core/mocks/data.ts
+++ b/src/app/core/mocks/data.ts
@@ -11,7 +11,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 1,
@@ -23,7 +24,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 2,
@@ -35,7 +37,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 3,
@@ -47,7 +50,8 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
     {
         id: 5,
@@ -59,7 +63,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 6,
@@ -71,7 +76,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 7,
@@ -83,7 +89,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 8,
@@ -95,6 +102,7 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
 ]
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 2e70b45..9cf56d6 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,11 +1,24 @@
-<ul class="p-3 d-flex flex-column list__gap align-items-center justify-content-center container">
+<ul
+  class="
+    p-3
+    d-flex
+    flex-column
+    list__gap
+    align-items-center
+    justify-content-center
+    container
+  "
+>
   <li class="p-3 d-flex align-items-center" *ngFor="let site of sites">
     <div class="img-container ps-1 me-5">
-      <div class="" [ngStyle]="{'background-image': 'url(' + site.url + ')'}"></div>
+      <div
+        class=""
+        [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+      ></div>
     </div>
     <div (click)="handlePatternAllyId(site!.id)"  data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="info-container">
       <div class="title d-flex justify-content-between align-items-center">
-        <h2 class="Ws-24">{{site!.name}}</h2>
+        <h2 class="Ws-24">{{ site!.name }}</h2>
         <div class="score-icon">
           <ion-icon name="star-outline"></ion-icon>
           <ion-icon name="star-outline"></ion-icon>
@@ -16,7 +29,7 @@
       </div>
       <div class="d-flex justify-content-between align-items-center">
         <div class="d-flex align-items-center Tx-15">
-          <ion-icon  name="time-outline" class="me-2 time-icon"></ion-icon>
+          <ion-icon name="time-outline" class="me-2 time-icon"></ion-icon>
           <span class="me-4 open">Abierto</span>
           <span>Cierra a las 21:00</span>
         </div>
@@ -32,11 +45,40 @@
         salazones). combinandolos con nuevos sabores y texturas.
       </p>
       <div class="d-flex align-items-center Tx-15 blue-color">
-        <ion-icon class="me-1 call-icon"  name="call-outline"></ion-icon>
-        <span class="me-3">{{site!.phone_number}}</span>
-        <ion-icon class="me-1 mail-icon"  name="mail-outline"></ion-icon>
-        <span>{{site!.email}}</span>
+        <ion-icon class="me-1 call-icon" name="call-outline"></ion-icon>
+        <span class="me-3">{{ site!.phone_number }}</span>
+        <ion-icon class="me-1 mail-icon" name="mail-outline"></ion-icon>
+        <span>{{ site!.email }}</span>
       </div>
     </div>
   </li>
 </ul>
+
+<div class="d-flex align-items-center justify-content-center">
+  <div
+    style="width: 50%"
+    class="d-flex align-items-center justify-content-center"
+  >
+    <button
+      (click)="retroceder()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-back-outline" class="arrow-icon"></ion-icon>
+    </button>
+    <ng-template ngFor let-page [ngForOf]="numberPages" let-i="index">
+      <div *ngIf="i == pageSelect; else elseBlock">
+        <div class="page-select slide d-flex align-items-center justify-content-center">{{ page }}</div>
+      </div>
+      <ng-template #elseBlock
+        ><div (click)="newPage(i)" class="slide slide d-flex align-items-center justify-content-center">{{ page }}</div></ng-template
+      >
+    </ng-template>
+    <div class="slide slide d-flex align-items-center justify-content-center">...</div>
+    <button
+      (click)="avanzar()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </button>
+  </div>
+</div>
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 c0014c9..ca15824 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,12 +1,10 @@
-
-
 ul {
   list-style-type: none;
   padding-left: 0;
 }
 
 li {
- /*  @media only screen and (min-width: 1500px) {
+  /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
     width: 100%;
   } */
@@ -17,7 +15,6 @@
 }
 
 .img-container {
-
 }
 
 .img-container div {
@@ -27,33 +24,69 @@
   background-size: cover;
 }
 
-.info-container{
+.info-container {
   width: 60%;
 }
 
-.list__gap{
+.list__gap {
   gap: 1rem;
 }
 
-.time-icon{
+.time-icon {
   font-size: 25px;
   color: var(--base-color-green);
 }
 
-.open{
+.open {
   color: var(--base-color-green);
 }
 
-.call-icon,.mail-icon{
+.call-icon,
+.mail-icon {
   font-size: 20px;
-  
 }
 
-.blue-color{
+.blue-color {
   color: var(--base-color-blue-secondary);
 }
 
-.user-icon,.score-icon{
-  color:var(--base-color-gray-dark);
+.user-icon,
+.score-icon {
+  color: var(--base-color-gray-dark);
   font-size: 25px;
 }
+
+.arrow-icon{
+  width:1.438rem;
+  height:1.313rem;
+  color: white;
+}
+
+/* carousel */
+
+.slide {
+  margin: 20px 5px;
+  color: black;
+  height: 1.875rem;
+  width: 1.875rem;
+  border-radius:var(--base-rounded-medium);
+  cursor: pointer;
+  /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
+}
+
+button {
+  background-color: var(--base-color-primary);
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+  width: 2.938rem;
+  height: 2.188rem;
+  border-radius:var(--base-rounded-medium);
+}
+
+.page-select{
+  background-color: var(--base-color-gray-dark);
+}
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
index bca2daa..8b744ea 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
@@ -4,20 +4,54 @@
 @Component({
   selector: 'app-list-sites',
   templateUrl: './list-sites.component.html',
-  styleUrls: ['./list-sites.component.scss']
+  styleUrls: ['./list-sites.component.scss'],
 })
 export class ListSitesComponent implements OnInit {
-
   @Input() sites!: Site[];
   @Output() emitAllyId = new EventEmitter();
 
-  constructor() { }
+  numberPages = [1, 2, 3, 4, 5, 6];
+  numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+  pageSelect = 0;
+  pageFin = 20;
 
-  ngOnInit() {
-  }
+  constructor() {}
+
+  ngOnInit() {}
 
   handlePatternAllyId($event: number) {
     this.emitAllyId.emit($event);
   }
 
+  avanzar() {
+    if (this.pageSelect == 5 && this.numberPages[5] == 20) {
+      return;
+    } else {
+      if (this.pageSelect == 5) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return ++val;
+        });
+      } else {
+        this.pageSelect += 1;
+      }
+    }
+  }
+
+  retroceder() {
+    if (this.pageSelect == 0 && this.numberPages[0] == 1) {
+      return;
+    } else {
+      if (this.pageSelect == 0) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return --val;
+        });
+      } else {
+        this.pageSelect -= 1;
+      }
+    }
+  }
+
+  newPage(index: number) {
+    this.pageSelect = index;
+  }
 }

diff --git a/src/app/core/interfaces/site/site.ts b/src/app/core/interfaces/site/site.ts
index 9795920..bd1d9d8 100644
--- a/src/app/core/interfaces/site/site.ts
+++ b/src/app/core/interfaces/site/site.ts
@@ -20,5 +20,6 @@
     phone_number_3?: string;
     email?: string;
     url?: string;
+    show_information?:boolean,
 }
 
diff --git a/src/app/core/mocks/data.ts b/src/app/core/mocks/data.ts
index 02cf1c6..6e9afe4 100644
--- a/src/app/core/mocks/data.ts
+++ b/src/app/core/mocks/data.ts
@@ -11,7 +11,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 1,
@@ -23,7 +24,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 2,
@@ -35,7 +37,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 3,
@@ -47,7 +50,8 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
     {
         id: 5,
@@ -59,7 +63,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 6,
@@ -71,7 +76,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 7,
@@ -83,7 +89,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 8,
@@ -95,6 +102,7 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
 ]
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 2e70b45..9cf56d6 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,11 +1,24 @@
-<ul class="p-3 d-flex flex-column list__gap align-items-center justify-content-center container">
+<ul
+  class="
+    p-3
+    d-flex
+    flex-column
+    list__gap
+    align-items-center
+    justify-content-center
+    container
+  "
+>
   <li class="p-3 d-flex align-items-center" *ngFor="let site of sites">
     <div class="img-container ps-1 me-5">
-      <div class="" [ngStyle]="{'background-image': 'url(' + site.url + ')'}"></div>
+      <div
+        class=""
+        [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+      ></div>
     </div>
     <div (click)="handlePatternAllyId(site!.id)"  data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="info-container">
       <div class="title d-flex justify-content-between align-items-center">
-        <h2 class="Ws-24">{{site!.name}}</h2>
+        <h2 class="Ws-24">{{ site!.name }}</h2>
         <div class="score-icon">
           <ion-icon name="star-outline"></ion-icon>
           <ion-icon name="star-outline"></ion-icon>
@@ -16,7 +29,7 @@
       </div>
       <div class="d-flex justify-content-between align-items-center">
         <div class="d-flex align-items-center Tx-15">
-          <ion-icon  name="time-outline" class="me-2 time-icon"></ion-icon>
+          <ion-icon name="time-outline" class="me-2 time-icon"></ion-icon>
           <span class="me-4 open">Abierto</span>
           <span>Cierra a las 21:00</span>
         </div>
@@ -32,11 +45,40 @@
         salazones). combinandolos con nuevos sabores y texturas.
       </p>
       <div class="d-flex align-items-center Tx-15 blue-color">
-        <ion-icon class="me-1 call-icon"  name="call-outline"></ion-icon>
-        <span class="me-3">{{site!.phone_number}}</span>
-        <ion-icon class="me-1 mail-icon"  name="mail-outline"></ion-icon>
-        <span>{{site!.email}}</span>
+        <ion-icon class="me-1 call-icon" name="call-outline"></ion-icon>
+        <span class="me-3">{{ site!.phone_number }}</span>
+        <ion-icon class="me-1 mail-icon" name="mail-outline"></ion-icon>
+        <span>{{ site!.email }}</span>
       </div>
     </div>
   </li>
 </ul>
+
+<div class="d-flex align-items-center justify-content-center">
+  <div
+    style="width: 50%"
+    class="d-flex align-items-center justify-content-center"
+  >
+    <button
+      (click)="retroceder()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-back-outline" class="arrow-icon"></ion-icon>
+    </button>
+    <ng-template ngFor let-page [ngForOf]="numberPages" let-i="index">
+      <div *ngIf="i == pageSelect; else elseBlock">
+        <div class="page-select slide d-flex align-items-center justify-content-center">{{ page }}</div>
+      </div>
+      <ng-template #elseBlock
+        ><div (click)="newPage(i)" class="slide slide d-flex align-items-center justify-content-center">{{ page }}</div></ng-template
+      >
+    </ng-template>
+    <div class="slide slide d-flex align-items-center justify-content-center">...</div>
+    <button
+      (click)="avanzar()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </button>
+  </div>
+</div>
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 c0014c9..ca15824 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,12 +1,10 @@
-
-
 ul {
   list-style-type: none;
   padding-left: 0;
 }
 
 li {
- /*  @media only screen and (min-width: 1500px) {
+  /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
     width: 100%;
   } */
@@ -17,7 +15,6 @@
 }
 
 .img-container {
-
 }
 
 .img-container div {
@@ -27,33 +24,69 @@
   background-size: cover;
 }
 
-.info-container{
+.info-container {
   width: 60%;
 }
 
-.list__gap{
+.list__gap {
   gap: 1rem;
 }
 
-.time-icon{
+.time-icon {
   font-size: 25px;
   color: var(--base-color-green);
 }
 
-.open{
+.open {
   color: var(--base-color-green);
 }
 
-.call-icon,.mail-icon{
+.call-icon,
+.mail-icon {
   font-size: 20px;
-  
 }
 
-.blue-color{
+.blue-color {
   color: var(--base-color-blue-secondary);
 }
 
-.user-icon,.score-icon{
-  color:var(--base-color-gray-dark);
+.user-icon,
+.score-icon {
+  color: var(--base-color-gray-dark);
   font-size: 25px;
 }
+
+.arrow-icon{
+  width:1.438rem;
+  height:1.313rem;
+  color: white;
+}
+
+/* carousel */
+
+.slide {
+  margin: 20px 5px;
+  color: black;
+  height: 1.875rem;
+  width: 1.875rem;
+  border-radius:var(--base-rounded-medium);
+  cursor: pointer;
+  /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
+}
+
+button {
+  background-color: var(--base-color-primary);
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+  width: 2.938rem;
+  height: 2.188rem;
+  border-radius:var(--base-rounded-medium);
+}
+
+.page-select{
+  background-color: var(--base-color-gray-dark);
+}
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
index bca2daa..8b744ea 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
@@ -4,20 +4,54 @@
 @Component({
   selector: 'app-list-sites',
   templateUrl: './list-sites.component.html',
-  styleUrls: ['./list-sites.component.scss']
+  styleUrls: ['./list-sites.component.scss'],
 })
 export class ListSitesComponent implements OnInit {
-
   @Input() sites!: Site[];
   @Output() emitAllyId = new EventEmitter();
 
-  constructor() { }
+  numberPages = [1, 2, 3, 4, 5, 6];
+  numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+  pageSelect = 0;
+  pageFin = 20;
 
-  ngOnInit() {
-  }
+  constructor() {}
+
+  ngOnInit() {}
 
   handlePatternAllyId($event: number) {
     this.emitAllyId.emit($event);
   }
 
+  avanzar() {
+    if (this.pageSelect == 5 && this.numberPages[5] == 20) {
+      return;
+    } else {
+      if (this.pageSelect == 5) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return ++val;
+        });
+      } else {
+        this.pageSelect += 1;
+      }
+    }
+  }
+
+  retroceder() {
+    if (this.pageSelect == 0 && this.numberPages[0] == 1) {
+      return;
+    } else {
+      if (this.pageSelect == 0) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return --val;
+        });
+      } else {
+        this.pageSelect -= 1;
+      }
+    }
+  }
+
+  newPage(index: number) {
+    this.pageSelect = index;
+  }
 }
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 973dd4f..057d0b0 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,18 +1,49 @@
-<div class="carousel_size" >
+<div class="carousel_size">
   <owl-carousel-o [options]="customOptions" class="d-flex">
-    <ng-template carouselSlide *ngFor="let site of sites">
-      <div class="slide d-flex flex-column justify-content-between" [ngStyle]="{'background-image': 'url(' + site.url + ')'}">
-        <div class="d-flex justify-content-end align-items-center mt-4">
-          <span>5</span>
-          <ion-icon name="star-half-outline" class="me-3"></ion-icon>
-        </div>
-        <div (click)="handlePatternAllyId(site!.id)" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="mb-4 Ws-24">
-          <i>{{site!.name}}</i>
-        </div>
-      </div>
+    <ng-template carouselSlide *ngFor="let site of sites; index as i">
+      <div *ngIf="site.show_information; then thenBlock; else elseBlock"></div>
+      <ng-template #thenBlock
+        ><div
+          class="slide2 d-flex flex-column justify-content-between"
+        >
+          <div class="d-flex justify-content-end align-items-center mt-4">
+            <ion-icon
+              name="star-half-outline"
+              class="me-3 icon-star"
+            ></ion-icon>
+          </div>
+          <div
+            class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
+          >
+            <i>{{ site!.name }}</i>
+            <ion-icon name="chevron-down-outline"></ion-icon>
+          </div></div
+      ></ng-template>
+      <ng-template #elseBlock
+        ><div
+          class="slide d-flex flex-column justify-content-between"
+          [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+        >
+          <div class="d-flex justify-content-end align-items-center mt-4">
+            <span>5</span>
+            <ion-icon
+              name="star-half-outline"
+              class="me-3 icon-star"
+            ></ion-icon>
+          </div>
+          <div
+            class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
+          >
+            <i>{{ site!.name }}</i>
+            <ion-icon
+              (click)="showInformation(i)"
+              name="chevron-up-outline"
+              class="me-3 icon-up"
+            ></ion-icon>
+          </div></div
+      ></ng-template>
     </ng-template>
   </owl-carousel-o>
-
 </div>
 
 <!--

diff --git a/src/app/core/interfaces/site/site.ts b/src/app/core/interfaces/site/site.ts
index 9795920..bd1d9d8 100644
--- a/src/app/core/interfaces/site/site.ts
+++ b/src/app/core/interfaces/site/site.ts
@@ -20,5 +20,6 @@
     phone_number_3?: string;
     email?: string;
     url?: string;
+    show_information?:boolean,
 }
 
diff --git a/src/app/core/mocks/data.ts b/src/app/core/mocks/data.ts
index 02cf1c6..6e9afe4 100644
--- a/src/app/core/mocks/data.ts
+++ b/src/app/core/mocks/data.ts
@@ -11,7 +11,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 1,
@@ -23,7 +24,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 2,
@@ -35,7 +37,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 3,
@@ -47,7 +50,8 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
     {
         id: 5,
@@ -59,7 +63,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 6,
@@ -71,7 +76,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 7,
@@ -83,7 +89,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 8,
@@ -95,6 +102,7 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
 ]
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 2e70b45..9cf56d6 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,11 +1,24 @@
-<ul class="p-3 d-flex flex-column list__gap align-items-center justify-content-center container">
+<ul
+  class="
+    p-3
+    d-flex
+    flex-column
+    list__gap
+    align-items-center
+    justify-content-center
+    container
+  "
+>
   <li class="p-3 d-flex align-items-center" *ngFor="let site of sites">
     <div class="img-container ps-1 me-5">
-      <div class="" [ngStyle]="{'background-image': 'url(' + site.url + ')'}"></div>
+      <div
+        class=""
+        [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+      ></div>
     </div>
     <div (click)="handlePatternAllyId(site!.id)"  data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="info-container">
       <div class="title d-flex justify-content-between align-items-center">
-        <h2 class="Ws-24">{{site!.name}}</h2>
+        <h2 class="Ws-24">{{ site!.name }}</h2>
         <div class="score-icon">
           <ion-icon name="star-outline"></ion-icon>
           <ion-icon name="star-outline"></ion-icon>
@@ -16,7 +29,7 @@
       </div>
       <div class="d-flex justify-content-between align-items-center">
         <div class="d-flex align-items-center Tx-15">
-          <ion-icon  name="time-outline" class="me-2 time-icon"></ion-icon>
+          <ion-icon name="time-outline" class="me-2 time-icon"></ion-icon>
           <span class="me-4 open">Abierto</span>
           <span>Cierra a las 21:00</span>
         </div>
@@ -32,11 +45,40 @@
         salazones). combinandolos con nuevos sabores y texturas.
       </p>
       <div class="d-flex align-items-center Tx-15 blue-color">
-        <ion-icon class="me-1 call-icon"  name="call-outline"></ion-icon>
-        <span class="me-3">{{site!.phone_number}}</span>
-        <ion-icon class="me-1 mail-icon"  name="mail-outline"></ion-icon>
-        <span>{{site!.email}}</span>
+        <ion-icon class="me-1 call-icon" name="call-outline"></ion-icon>
+        <span class="me-3">{{ site!.phone_number }}</span>
+        <ion-icon class="me-1 mail-icon" name="mail-outline"></ion-icon>
+        <span>{{ site!.email }}</span>
       </div>
     </div>
   </li>
 </ul>
+
+<div class="d-flex align-items-center justify-content-center">
+  <div
+    style="width: 50%"
+    class="d-flex align-items-center justify-content-center"
+  >
+    <button
+      (click)="retroceder()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-back-outline" class="arrow-icon"></ion-icon>
+    </button>
+    <ng-template ngFor let-page [ngForOf]="numberPages" let-i="index">
+      <div *ngIf="i == pageSelect; else elseBlock">
+        <div class="page-select slide d-flex align-items-center justify-content-center">{{ page }}</div>
+      </div>
+      <ng-template #elseBlock
+        ><div (click)="newPage(i)" class="slide slide d-flex align-items-center justify-content-center">{{ page }}</div></ng-template
+      >
+    </ng-template>
+    <div class="slide slide d-flex align-items-center justify-content-center">...</div>
+    <button
+      (click)="avanzar()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </button>
+  </div>
+</div>
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 c0014c9..ca15824 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,12 +1,10 @@
-
-
 ul {
   list-style-type: none;
   padding-left: 0;
 }
 
 li {
- /*  @media only screen and (min-width: 1500px) {
+  /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
     width: 100%;
   } */
@@ -17,7 +15,6 @@
 }
 
 .img-container {
-
 }
 
 .img-container div {
@@ -27,33 +24,69 @@
   background-size: cover;
 }
 
-.info-container{
+.info-container {
   width: 60%;
 }
 
-.list__gap{
+.list__gap {
   gap: 1rem;
 }
 
-.time-icon{
+.time-icon {
   font-size: 25px;
   color: var(--base-color-green);
 }
 
-.open{
+.open {
   color: var(--base-color-green);
 }
 
-.call-icon,.mail-icon{
+.call-icon,
+.mail-icon {
   font-size: 20px;
-  
 }
 
-.blue-color{
+.blue-color {
   color: var(--base-color-blue-secondary);
 }
 
-.user-icon,.score-icon{
-  color:var(--base-color-gray-dark);
+.user-icon,
+.score-icon {
+  color: var(--base-color-gray-dark);
   font-size: 25px;
 }
+
+.arrow-icon{
+  width:1.438rem;
+  height:1.313rem;
+  color: white;
+}
+
+/* carousel */
+
+.slide {
+  margin: 20px 5px;
+  color: black;
+  height: 1.875rem;
+  width: 1.875rem;
+  border-radius:var(--base-rounded-medium);
+  cursor: pointer;
+  /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
+}
+
+button {
+  background-color: var(--base-color-primary);
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+  width: 2.938rem;
+  height: 2.188rem;
+  border-radius:var(--base-rounded-medium);
+}
+
+.page-select{
+  background-color: var(--base-color-gray-dark);
+}
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
index bca2daa..8b744ea 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
@@ -4,20 +4,54 @@
 @Component({
   selector: 'app-list-sites',
   templateUrl: './list-sites.component.html',
-  styleUrls: ['./list-sites.component.scss']
+  styleUrls: ['./list-sites.component.scss'],
 })
 export class ListSitesComponent implements OnInit {
-
   @Input() sites!: Site[];
   @Output() emitAllyId = new EventEmitter();
 
-  constructor() { }
+  numberPages = [1, 2, 3, 4, 5, 6];
+  numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+  pageSelect = 0;
+  pageFin = 20;
 
-  ngOnInit() {
-  }
+  constructor() {}
+
+  ngOnInit() {}
 
   handlePatternAllyId($event: number) {
     this.emitAllyId.emit($event);
   }
 
+  avanzar() {
+    if (this.pageSelect == 5 && this.numberPages[5] == 20) {
+      return;
+    } else {
+      if (this.pageSelect == 5) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return ++val;
+        });
+      } else {
+        this.pageSelect += 1;
+      }
+    }
+  }
+
+  retroceder() {
+    if (this.pageSelect == 0 && this.numberPages[0] == 1) {
+      return;
+    } else {
+      if (this.pageSelect == 0) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return --val;
+        });
+      } else {
+        this.pageSelect -= 1;
+      }
+    }
+  }
+
+  newPage(index: number) {
+    this.pageSelect = index;
+  }
 }
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 973dd4f..057d0b0 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,18 +1,49 @@
-<div class="carousel_size" >
+<div class="carousel_size">
   <owl-carousel-o [options]="customOptions" class="d-flex">
-    <ng-template carouselSlide *ngFor="let site of sites">
-      <div class="slide d-flex flex-column justify-content-between" [ngStyle]="{'background-image': 'url(' + site.url + ')'}">
-        <div class="d-flex justify-content-end align-items-center mt-4">
-          <span>5</span>
-          <ion-icon name="star-half-outline" class="me-3"></ion-icon>
-        </div>
-        <div (click)="handlePatternAllyId(site!.id)" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="mb-4 Ws-24">
-          <i>{{site!.name}}</i>
-        </div>
-      </div>
+    <ng-template carouselSlide *ngFor="let site of sites; index as i">
+      <div *ngIf="site.show_information; then thenBlock; else elseBlock"></div>
+      <ng-template #thenBlock
+        ><div
+          class="slide2 d-flex flex-column justify-content-between"
+        >
+          <div class="d-flex justify-content-end align-items-center mt-4">
+            <ion-icon
+              name="star-half-outline"
+              class="me-3 icon-star"
+            ></ion-icon>
+          </div>
+          <div
+            class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
+          >
+            <i>{{ site!.name }}</i>
+            <ion-icon name="chevron-down-outline"></ion-icon>
+          </div></div
+      ></ng-template>
+      <ng-template #elseBlock
+        ><div
+          class="slide d-flex flex-column justify-content-between"
+          [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+        >
+          <div class="d-flex justify-content-end align-items-center mt-4">
+            <span>5</span>
+            <ion-icon
+              name="star-half-outline"
+              class="me-3 icon-star"
+            ></ion-icon>
+          </div>
+          <div
+            class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
+          >
+            <i>{{ site!.name }}</i>
+            <ion-icon
+              (click)="showInformation(i)"
+              name="chevron-up-outline"
+              class="me-3 icon-up"
+            ></ion-icon>
+          </div></div
+      ></ng-template>
     </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 30ddf3c..7df2a86 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,6 +1,4 @@
-*{
-  color:white;
-}
+
 
 .carousel_size{
   /* width: 100vw; */
@@ -18,12 +16,32 @@
   margin: 20px 0;
   border-radius: 20px;
   box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
-  color: black;
   height:12.5rem;
   width:25rem;
   background-size: cover;
   /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
 }
 
+.slide2{
+  position: relative;
+  color: var(--base-color-dark);
+  font-size: 20px;
+  margin: 20px 0;
+  border-radius: 20px;
+  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
+  height:12.5rem;
+  width:25rem;
+  background: white;
+  /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
+}
+
+.icon-up{
+  font-size:30px;
+}
+
+.icon-star{
+  font-size:25px;
+}
+
 
 

diff --git a/src/app/core/interfaces/site/site.ts b/src/app/core/interfaces/site/site.ts
index 9795920..bd1d9d8 100644
--- a/src/app/core/interfaces/site/site.ts
+++ b/src/app/core/interfaces/site/site.ts
@@ -20,5 +20,6 @@
     phone_number_3?: string;
     email?: string;
     url?: string;
+    show_information?:boolean,
 }
 
diff --git a/src/app/core/mocks/data.ts b/src/app/core/mocks/data.ts
index 02cf1c6..6e9afe4 100644
--- a/src/app/core/mocks/data.ts
+++ b/src/app/core/mocks/data.ts
@@ -11,7 +11,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 1,
@@ -23,7 +24,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 2,
@@ -35,7 +37,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 3,
@@ -47,7 +50,8 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
     {
         id: 5,
@@ -59,7 +63,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 6,
@@ -71,7 +76,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 7,
@@ -83,7 +89,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 8,
@@ -95,6 +102,7 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
 ]
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 2e70b45..9cf56d6 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,11 +1,24 @@
-<ul class="p-3 d-flex flex-column list__gap align-items-center justify-content-center container">
+<ul
+  class="
+    p-3
+    d-flex
+    flex-column
+    list__gap
+    align-items-center
+    justify-content-center
+    container
+  "
+>
   <li class="p-3 d-flex align-items-center" *ngFor="let site of sites">
     <div class="img-container ps-1 me-5">
-      <div class="" [ngStyle]="{'background-image': 'url(' + site.url + ')'}"></div>
+      <div
+        class=""
+        [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+      ></div>
     </div>
     <div (click)="handlePatternAllyId(site!.id)"  data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="info-container">
       <div class="title d-flex justify-content-between align-items-center">
-        <h2 class="Ws-24">{{site!.name}}</h2>
+        <h2 class="Ws-24">{{ site!.name }}</h2>
         <div class="score-icon">
           <ion-icon name="star-outline"></ion-icon>
           <ion-icon name="star-outline"></ion-icon>
@@ -16,7 +29,7 @@
       </div>
       <div class="d-flex justify-content-between align-items-center">
         <div class="d-flex align-items-center Tx-15">
-          <ion-icon  name="time-outline" class="me-2 time-icon"></ion-icon>
+          <ion-icon name="time-outline" class="me-2 time-icon"></ion-icon>
           <span class="me-4 open">Abierto</span>
           <span>Cierra a las 21:00</span>
         </div>
@@ -32,11 +45,40 @@
         salazones). combinandolos con nuevos sabores y texturas.
       </p>
       <div class="d-flex align-items-center Tx-15 blue-color">
-        <ion-icon class="me-1 call-icon"  name="call-outline"></ion-icon>
-        <span class="me-3">{{site!.phone_number}}</span>
-        <ion-icon class="me-1 mail-icon"  name="mail-outline"></ion-icon>
-        <span>{{site!.email}}</span>
+        <ion-icon class="me-1 call-icon" name="call-outline"></ion-icon>
+        <span class="me-3">{{ site!.phone_number }}</span>
+        <ion-icon class="me-1 mail-icon" name="mail-outline"></ion-icon>
+        <span>{{ site!.email }}</span>
       </div>
     </div>
   </li>
 </ul>
+
+<div class="d-flex align-items-center justify-content-center">
+  <div
+    style="width: 50%"
+    class="d-flex align-items-center justify-content-center"
+  >
+    <button
+      (click)="retroceder()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-back-outline" class="arrow-icon"></ion-icon>
+    </button>
+    <ng-template ngFor let-page [ngForOf]="numberPages" let-i="index">
+      <div *ngIf="i == pageSelect; else elseBlock">
+        <div class="page-select slide d-flex align-items-center justify-content-center">{{ page }}</div>
+      </div>
+      <ng-template #elseBlock
+        ><div (click)="newPage(i)" class="slide slide d-flex align-items-center justify-content-center">{{ page }}</div></ng-template
+      >
+    </ng-template>
+    <div class="slide slide d-flex align-items-center justify-content-center">...</div>
+    <button
+      (click)="avanzar()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </button>
+  </div>
+</div>
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 c0014c9..ca15824 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,12 +1,10 @@
-
-
 ul {
   list-style-type: none;
   padding-left: 0;
 }
 
 li {
- /*  @media only screen and (min-width: 1500px) {
+  /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
     width: 100%;
   } */
@@ -17,7 +15,6 @@
 }
 
 .img-container {
-
 }
 
 .img-container div {
@@ -27,33 +24,69 @@
   background-size: cover;
 }
 
-.info-container{
+.info-container {
   width: 60%;
 }
 
-.list__gap{
+.list__gap {
   gap: 1rem;
 }
 
-.time-icon{
+.time-icon {
   font-size: 25px;
   color: var(--base-color-green);
 }
 
-.open{
+.open {
   color: var(--base-color-green);
 }
 
-.call-icon,.mail-icon{
+.call-icon,
+.mail-icon {
   font-size: 20px;
-  
 }
 
-.blue-color{
+.blue-color {
   color: var(--base-color-blue-secondary);
 }
 
-.user-icon,.score-icon{
-  color:var(--base-color-gray-dark);
+.user-icon,
+.score-icon {
+  color: var(--base-color-gray-dark);
   font-size: 25px;
 }
+
+.arrow-icon{
+  width:1.438rem;
+  height:1.313rem;
+  color: white;
+}
+
+/* carousel */
+
+.slide {
+  margin: 20px 5px;
+  color: black;
+  height: 1.875rem;
+  width: 1.875rem;
+  border-radius:var(--base-rounded-medium);
+  cursor: pointer;
+  /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
+}
+
+button {
+  background-color: var(--base-color-primary);
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+  width: 2.938rem;
+  height: 2.188rem;
+  border-radius:var(--base-rounded-medium);
+}
+
+.page-select{
+  background-color: var(--base-color-gray-dark);
+}
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
index bca2daa..8b744ea 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
@@ -4,20 +4,54 @@
 @Component({
   selector: 'app-list-sites',
   templateUrl: './list-sites.component.html',
-  styleUrls: ['./list-sites.component.scss']
+  styleUrls: ['./list-sites.component.scss'],
 })
 export class ListSitesComponent implements OnInit {
-
   @Input() sites!: Site[];
   @Output() emitAllyId = new EventEmitter();
 
-  constructor() { }
+  numberPages = [1, 2, 3, 4, 5, 6];
+  numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+  pageSelect = 0;
+  pageFin = 20;
 
-  ngOnInit() {
-  }
+  constructor() {}
+
+  ngOnInit() {}
 
   handlePatternAllyId($event: number) {
     this.emitAllyId.emit($event);
   }
 
+  avanzar() {
+    if (this.pageSelect == 5 && this.numberPages[5] == 20) {
+      return;
+    } else {
+      if (this.pageSelect == 5) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return ++val;
+        });
+      } else {
+        this.pageSelect += 1;
+      }
+    }
+  }
+
+  retroceder() {
+    if (this.pageSelect == 0 && this.numberPages[0] == 1) {
+      return;
+    } else {
+      if (this.pageSelect == 0) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return --val;
+        });
+      } else {
+        this.pageSelect -= 1;
+      }
+    }
+  }
+
+  newPage(index: number) {
+    this.pageSelect = index;
+  }
 }
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 973dd4f..057d0b0 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,18 +1,49 @@
-<div class="carousel_size" >
+<div class="carousel_size">
   <owl-carousel-o [options]="customOptions" class="d-flex">
-    <ng-template carouselSlide *ngFor="let site of sites">
-      <div class="slide d-flex flex-column justify-content-between" [ngStyle]="{'background-image': 'url(' + site.url + ')'}">
-        <div class="d-flex justify-content-end align-items-center mt-4">
-          <span>5</span>
-          <ion-icon name="star-half-outline" class="me-3"></ion-icon>
-        </div>
-        <div (click)="handlePatternAllyId(site!.id)" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="mb-4 Ws-24">
-          <i>{{site!.name}}</i>
-        </div>
-      </div>
+    <ng-template carouselSlide *ngFor="let site of sites; index as i">
+      <div *ngIf="site.show_information; then thenBlock; else elseBlock"></div>
+      <ng-template #thenBlock
+        ><div
+          class="slide2 d-flex flex-column justify-content-between"
+        >
+          <div class="d-flex justify-content-end align-items-center mt-4">
+            <ion-icon
+              name="star-half-outline"
+              class="me-3 icon-star"
+            ></ion-icon>
+          </div>
+          <div
+            class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
+          >
+            <i>{{ site!.name }}</i>
+            <ion-icon name="chevron-down-outline"></ion-icon>
+          </div></div
+      ></ng-template>
+      <ng-template #elseBlock
+        ><div
+          class="slide d-flex flex-column justify-content-between"
+          [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+        >
+          <div class="d-flex justify-content-end align-items-center mt-4">
+            <span>5</span>
+            <ion-icon
+              name="star-half-outline"
+              class="me-3 icon-star"
+            ></ion-icon>
+          </div>
+          <div
+            class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
+          >
+            <i>{{ site!.name }}</i>
+            <ion-icon
+              (click)="showInformation(i)"
+              name="chevron-up-outline"
+              class="me-3 icon-up"
+            ></ion-icon>
+          </div></div
+      ></ng-template>
     </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 30ddf3c..7df2a86 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,6 +1,4 @@
-*{
-  color:white;
-}
+
 
 .carousel_size{
   /* width: 100vw; */
@@ -18,12 +16,32 @@
   margin: 20px 0;
   border-radius: 20px;
   box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
-  color: black;
   height:12.5rem;
   width:25rem;
   background-size: cover;
   /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
 }
 
+.slide2{
+  position: relative;
+  color: var(--base-color-dark);
+  font-size: 20px;
+  margin: 20px 0;
+  border-radius: 20px;
+  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
+  height:12.5rem;
+  width:25rem;
+  background: white;
+  /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
+}
+
+.icon-up{
+  font-size:30px;
+}
+
+.icon-star{
+  font-size:25px;
+}
+
 
 
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 a7f9f9e..1fc42a0 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
@@ -22,7 +22,7 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:15,
+    margin:10,
     navSpeed: 700,
     navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
@@ -36,7 +36,7 @@
           nav: true
         },
         1000: {
-          items: 2,
+          items: 3,
           nav: true,
           loop: true
         },
@@ -56,4 +56,8 @@
     this.emitAllyId.emit(allyId);
   }
 
+  showInformation(index:number){
+    this.sites[index].show_information=true;
+  }
+
 }

diff --git a/src/app/core/interfaces/site/site.ts b/src/app/core/interfaces/site/site.ts
index 9795920..bd1d9d8 100644
--- a/src/app/core/interfaces/site/site.ts
+++ b/src/app/core/interfaces/site/site.ts
@@ -20,5 +20,6 @@
     phone_number_3?: string;
     email?: string;
     url?: string;
+    show_information?:boolean,
 }
 
diff --git a/src/app/core/mocks/data.ts b/src/app/core/mocks/data.ts
index 02cf1c6..6e9afe4 100644
--- a/src/app/core/mocks/data.ts
+++ b/src/app/core/mocks/data.ts
@@ -11,7 +11,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 1,
@@ -23,7 +24,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 2,
@@ -35,7 +37,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 3,
@@ -47,7 +50,8 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
     {
         id: 5,
@@ -59,7 +63,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 6,
@@ -71,7 +76,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 7,
@@ -83,7 +89,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 8,
@@ -95,6 +102,7 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
 ]
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 2e70b45..9cf56d6 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,11 +1,24 @@
-<ul class="p-3 d-flex flex-column list__gap align-items-center justify-content-center container">
+<ul
+  class="
+    p-3
+    d-flex
+    flex-column
+    list__gap
+    align-items-center
+    justify-content-center
+    container
+  "
+>
   <li class="p-3 d-flex align-items-center" *ngFor="let site of sites">
     <div class="img-container ps-1 me-5">
-      <div class="" [ngStyle]="{'background-image': 'url(' + site.url + ')'}"></div>
+      <div
+        class=""
+        [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+      ></div>
     </div>
     <div (click)="handlePatternAllyId(site!.id)"  data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="info-container">
       <div class="title d-flex justify-content-between align-items-center">
-        <h2 class="Ws-24">{{site!.name}}</h2>
+        <h2 class="Ws-24">{{ site!.name }}</h2>
         <div class="score-icon">
           <ion-icon name="star-outline"></ion-icon>
           <ion-icon name="star-outline"></ion-icon>
@@ -16,7 +29,7 @@
       </div>
       <div class="d-flex justify-content-between align-items-center">
         <div class="d-flex align-items-center Tx-15">
-          <ion-icon  name="time-outline" class="me-2 time-icon"></ion-icon>
+          <ion-icon name="time-outline" class="me-2 time-icon"></ion-icon>
           <span class="me-4 open">Abierto</span>
           <span>Cierra a las 21:00</span>
         </div>
@@ -32,11 +45,40 @@
         salazones). combinandolos con nuevos sabores y texturas.
       </p>
       <div class="d-flex align-items-center Tx-15 blue-color">
-        <ion-icon class="me-1 call-icon"  name="call-outline"></ion-icon>
-        <span class="me-3">{{site!.phone_number}}</span>
-        <ion-icon class="me-1 mail-icon"  name="mail-outline"></ion-icon>
-        <span>{{site!.email}}</span>
+        <ion-icon class="me-1 call-icon" name="call-outline"></ion-icon>
+        <span class="me-3">{{ site!.phone_number }}</span>
+        <ion-icon class="me-1 mail-icon" name="mail-outline"></ion-icon>
+        <span>{{ site!.email }}</span>
       </div>
     </div>
   </li>
 </ul>
+
+<div class="d-flex align-items-center justify-content-center">
+  <div
+    style="width: 50%"
+    class="d-flex align-items-center justify-content-center"
+  >
+    <button
+      (click)="retroceder()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-back-outline" class="arrow-icon"></ion-icon>
+    </button>
+    <ng-template ngFor let-page [ngForOf]="numberPages" let-i="index">
+      <div *ngIf="i == pageSelect; else elseBlock">
+        <div class="page-select slide d-flex align-items-center justify-content-center">{{ page }}</div>
+      </div>
+      <ng-template #elseBlock
+        ><div (click)="newPage(i)" class="slide slide d-flex align-items-center justify-content-center">{{ page }}</div></ng-template
+      >
+    </ng-template>
+    <div class="slide slide d-flex align-items-center justify-content-center">...</div>
+    <button
+      (click)="avanzar()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </button>
+  </div>
+</div>
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 c0014c9..ca15824 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,12 +1,10 @@
-
-
 ul {
   list-style-type: none;
   padding-left: 0;
 }
 
 li {
- /*  @media only screen and (min-width: 1500px) {
+  /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
     width: 100%;
   } */
@@ -17,7 +15,6 @@
 }
 
 .img-container {
-
 }
 
 .img-container div {
@@ -27,33 +24,69 @@
   background-size: cover;
 }
 
-.info-container{
+.info-container {
   width: 60%;
 }
 
-.list__gap{
+.list__gap {
   gap: 1rem;
 }
 
-.time-icon{
+.time-icon {
   font-size: 25px;
   color: var(--base-color-green);
 }
 
-.open{
+.open {
   color: var(--base-color-green);
 }
 
-.call-icon,.mail-icon{
+.call-icon,
+.mail-icon {
   font-size: 20px;
-  
 }
 
-.blue-color{
+.blue-color {
   color: var(--base-color-blue-secondary);
 }
 
-.user-icon,.score-icon{
-  color:var(--base-color-gray-dark);
+.user-icon,
+.score-icon {
+  color: var(--base-color-gray-dark);
   font-size: 25px;
 }
+
+.arrow-icon{
+  width:1.438rem;
+  height:1.313rem;
+  color: white;
+}
+
+/* carousel */
+
+.slide {
+  margin: 20px 5px;
+  color: black;
+  height: 1.875rem;
+  width: 1.875rem;
+  border-radius:var(--base-rounded-medium);
+  cursor: pointer;
+  /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
+}
+
+button {
+  background-color: var(--base-color-primary);
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+  width: 2.938rem;
+  height: 2.188rem;
+  border-radius:var(--base-rounded-medium);
+}
+
+.page-select{
+  background-color: var(--base-color-gray-dark);
+}
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
index bca2daa..8b744ea 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
@@ -4,20 +4,54 @@
 @Component({
   selector: 'app-list-sites',
   templateUrl: './list-sites.component.html',
-  styleUrls: ['./list-sites.component.scss']
+  styleUrls: ['./list-sites.component.scss'],
 })
 export class ListSitesComponent implements OnInit {
-
   @Input() sites!: Site[];
   @Output() emitAllyId = new EventEmitter();
 
-  constructor() { }
+  numberPages = [1, 2, 3, 4, 5, 6];
+  numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+  pageSelect = 0;
+  pageFin = 20;
 
-  ngOnInit() {
-  }
+  constructor() {}
+
+  ngOnInit() {}
 
   handlePatternAllyId($event: number) {
     this.emitAllyId.emit($event);
   }
 
+  avanzar() {
+    if (this.pageSelect == 5 && this.numberPages[5] == 20) {
+      return;
+    } else {
+      if (this.pageSelect == 5) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return ++val;
+        });
+      } else {
+        this.pageSelect += 1;
+      }
+    }
+  }
+
+  retroceder() {
+    if (this.pageSelect == 0 && this.numberPages[0] == 1) {
+      return;
+    } else {
+      if (this.pageSelect == 0) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return --val;
+        });
+      } else {
+        this.pageSelect -= 1;
+      }
+    }
+  }
+
+  newPage(index: number) {
+    this.pageSelect = index;
+  }
 }
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 973dd4f..057d0b0 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,18 +1,49 @@
-<div class="carousel_size" >
+<div class="carousel_size">
   <owl-carousel-o [options]="customOptions" class="d-flex">
-    <ng-template carouselSlide *ngFor="let site of sites">
-      <div class="slide d-flex flex-column justify-content-between" [ngStyle]="{'background-image': 'url(' + site.url + ')'}">
-        <div class="d-flex justify-content-end align-items-center mt-4">
-          <span>5</span>
-          <ion-icon name="star-half-outline" class="me-3"></ion-icon>
-        </div>
-        <div (click)="handlePatternAllyId(site!.id)" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="mb-4 Ws-24">
-          <i>{{site!.name}}</i>
-        </div>
-      </div>
+    <ng-template carouselSlide *ngFor="let site of sites; index as i">
+      <div *ngIf="site.show_information; then thenBlock; else elseBlock"></div>
+      <ng-template #thenBlock
+        ><div
+          class="slide2 d-flex flex-column justify-content-between"
+        >
+          <div class="d-flex justify-content-end align-items-center mt-4">
+            <ion-icon
+              name="star-half-outline"
+              class="me-3 icon-star"
+            ></ion-icon>
+          </div>
+          <div
+            class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
+          >
+            <i>{{ site!.name }}</i>
+            <ion-icon name="chevron-down-outline"></ion-icon>
+          </div></div
+      ></ng-template>
+      <ng-template #elseBlock
+        ><div
+          class="slide d-flex flex-column justify-content-between"
+          [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+        >
+          <div class="d-flex justify-content-end align-items-center mt-4">
+            <span>5</span>
+            <ion-icon
+              name="star-half-outline"
+              class="me-3 icon-star"
+            ></ion-icon>
+          </div>
+          <div
+            class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
+          >
+            <i>{{ site!.name }}</i>
+            <ion-icon
+              (click)="showInformation(i)"
+              name="chevron-up-outline"
+              class="me-3 icon-up"
+            ></ion-icon>
+          </div></div
+      ></ng-template>
     </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 30ddf3c..7df2a86 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,6 +1,4 @@
-*{
-  color:white;
-}
+
 
 .carousel_size{
   /* width: 100vw; */
@@ -18,12 +16,32 @@
   margin: 20px 0;
   border-radius: 20px;
   box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
-  color: black;
   height:12.5rem;
   width:25rem;
   background-size: cover;
   /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
 }
 
+.slide2{
+  position: relative;
+  color: var(--base-color-dark);
+  font-size: 20px;
+  margin: 20px 0;
+  border-radius: 20px;
+  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
+  height:12.5rem;
+  width:25rem;
+  background: white;
+  /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
+}
+
+.icon-up{
+  font-size:30px;
+}
+
+.icon-star{
+  font-size:25px;
+}
+
 
 
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 a7f9f9e..1fc42a0 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
@@ -22,7 +22,7 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:15,
+    margin:10,
     navSpeed: 700,
     navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
@@ -36,7 +36,7 @@
           nav: true
         },
         1000: {
-          items: 2,
+          items: 3,
           nav: true,
           loop: true
         },
@@ -56,4 +56,8 @@
     this.emitAllyId.emit(allyId);
   }
 
+  showInformation(index:number){
+    this.sites[index].show_information=true;
+  }
+
 }
diff --git a/src/styles.scss b/src/styles.scss
index bee8097..fd72fb7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -66,7 +66,11 @@
 }
 
 .owl-carousel .owl-item {
-  width: 25rem !important;
+  width: max-content!important;
+}
+
+.owl-carousel.list-slide{
+  background-color: aqua;
 }
 
 /* owl-carousel-o .owl-stage {

diff --git a/src/app/core/interfaces/site/site.ts b/src/app/core/interfaces/site/site.ts
index 9795920..bd1d9d8 100644
--- a/src/app/core/interfaces/site/site.ts
+++ b/src/app/core/interfaces/site/site.ts
@@ -20,5 +20,6 @@
     phone_number_3?: string;
     email?: string;
     url?: string;
+    show_information?:boolean,
 }
 
diff --git a/src/app/core/mocks/data.ts b/src/app/core/mocks/data.ts
index 02cf1c6..6e9afe4 100644
--- a/src/app/core/mocks/data.ts
+++ b/src/app/core/mocks/data.ts
@@ -11,7 +11,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 1,
@@ -23,7 +24,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 2,
@@ -35,7 +37,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 3,
@@ -47,7 +50,8 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
     {
         id: 5,
@@ -59,7 +63,8 @@
             length: -72.64797890311478
         },
         email: "Recuerdo-@gmail.com",
-        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg"
+        url: "https://i.ibb.co/WKS0QnJ/Tienda-Polanco-1-1-1024x1024.jpg",
+        show_information:false,
     },
     {
         id: 6,
@@ -71,7 +76,8 @@
             length: -72.6485850825132
         },
         email: "Deposito-@gmail.com",
-        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg"
+        url: "https://i.ibb.co/P9n1k0x/Restaurantes-Bucaramanga-1.jpg",
+        show_information:false,
     },
     {
         id: 7,
@@ -83,7 +89,8 @@
             length:  -72.64887476144403
         },
         email: "Leoporinos-@gmail.com",
-        url: "https://i.ibb.co/bgJtCyv/babette.jpg"
+        url: "https://i.ibb.co/bgJtCyv/babette.jpg",
+        show_information:false,
     },
     {
         id: 8,
@@ -95,6 +102,7 @@
             length:  -73.64887476144403
         },
         email: "Restaurantegpuls@gmail.com",
-        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg"
+        url: "https://media-cdn.tripadvisor.com/media/photo-s/11/e1/06/24/cornelia.jpg",
+        show_information:false,
     },
 ]
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 2e70b45..9cf56d6 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,11 +1,24 @@
-<ul class="p-3 d-flex flex-column list__gap align-items-center justify-content-center container">
+<ul
+  class="
+    p-3
+    d-flex
+    flex-column
+    list__gap
+    align-items-center
+    justify-content-center
+    container
+  "
+>
   <li class="p-3 d-flex align-items-center" *ngFor="let site of sites">
     <div class="img-container ps-1 me-5">
-      <div class="" [ngStyle]="{'background-image': 'url(' + site.url + ')'}"></div>
+      <div
+        class=""
+        [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+      ></div>
     </div>
     <div (click)="handlePatternAllyId(site!.id)"  data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="info-container">
       <div class="title d-flex justify-content-between align-items-center">
-        <h2 class="Ws-24">{{site!.name}}</h2>
+        <h2 class="Ws-24">{{ site!.name }}</h2>
         <div class="score-icon">
           <ion-icon name="star-outline"></ion-icon>
           <ion-icon name="star-outline"></ion-icon>
@@ -16,7 +29,7 @@
       </div>
       <div class="d-flex justify-content-between align-items-center">
         <div class="d-flex align-items-center Tx-15">
-          <ion-icon  name="time-outline" class="me-2 time-icon"></ion-icon>
+          <ion-icon name="time-outline" class="me-2 time-icon"></ion-icon>
           <span class="me-4 open">Abierto</span>
           <span>Cierra a las 21:00</span>
         </div>
@@ -32,11 +45,40 @@
         salazones). combinandolos con nuevos sabores y texturas.
       </p>
       <div class="d-flex align-items-center Tx-15 blue-color">
-        <ion-icon class="me-1 call-icon"  name="call-outline"></ion-icon>
-        <span class="me-3">{{site!.phone_number}}</span>
-        <ion-icon class="me-1 mail-icon"  name="mail-outline"></ion-icon>
-        <span>{{site!.email}}</span>
+        <ion-icon class="me-1 call-icon" name="call-outline"></ion-icon>
+        <span class="me-3">{{ site!.phone_number }}</span>
+        <ion-icon class="me-1 mail-icon" name="mail-outline"></ion-icon>
+        <span>{{ site!.email }}</span>
       </div>
     </div>
   </li>
 </ul>
+
+<div class="d-flex align-items-center justify-content-center">
+  <div
+    style="width: 50%"
+    class="d-flex align-items-center justify-content-center"
+  >
+    <button
+      (click)="retroceder()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-back-outline" class="arrow-icon"></ion-icon>
+    </button>
+    <ng-template ngFor let-page [ngForOf]="numberPages" let-i="index">
+      <div *ngIf="i == pageSelect; else elseBlock">
+        <div class="page-select slide d-flex align-items-center justify-content-center">{{ page }}</div>
+      </div>
+      <ng-template #elseBlock
+        ><div (click)="newPage(i)" class="slide slide d-flex align-items-center justify-content-center">{{ page }}</div></ng-template
+      >
+    </ng-template>
+    <div class="slide slide d-flex align-items-center justify-content-center">...</div>
+    <button
+      (click)="avanzar()"
+      class="d-flex align-items-center justify-content-center"
+    >
+      <ion-icon name="chevron-forward-outline" class="arrow-icon"></ion-icon>
+    </button>
+  </div>
+</div>
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 c0014c9..ca15824 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,12 +1,10 @@
-
-
 ul {
   list-style-type: none;
   padding-left: 0;
 }
 
 li {
- /*  @media only screen and (min-width: 1500px) {
+  /*  @media only screen and (min-width: 1500px) {
     min-height: 250px;
     width: 100%;
   } */
@@ -17,7 +15,6 @@
 }
 
 .img-container {
-
 }
 
 .img-container div {
@@ -27,33 +24,69 @@
   background-size: cover;
 }
 
-.info-container{
+.info-container {
   width: 60%;
 }
 
-.list__gap{
+.list__gap {
   gap: 1rem;
 }
 
-.time-icon{
+.time-icon {
   font-size: 25px;
   color: var(--base-color-green);
 }
 
-.open{
+.open {
   color: var(--base-color-green);
 }
 
-.call-icon,.mail-icon{
+.call-icon,
+.mail-icon {
   font-size: 20px;
-  
 }
 
-.blue-color{
+.blue-color {
   color: var(--base-color-blue-secondary);
 }
 
-.user-icon,.score-icon{
-  color:var(--base-color-gray-dark);
+.user-icon,
+.score-icon {
+  color: var(--base-color-gray-dark);
   font-size: 25px;
 }
+
+.arrow-icon{
+  width:1.438rem;
+  height:1.313rem;
+  color: white;
+}
+
+/* carousel */
+
+.slide {
+  margin: 20px 5px;
+  color: black;
+  height: 1.875rem;
+  width: 1.875rem;
+  border-radius:var(--base-rounded-medium);
+  cursor: pointer;
+  /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
+}
+
+button {
+  background-color: var(--base-color-primary);
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+  width: 2.938rem;
+  height: 2.188rem;
+  border-radius:var(--base-rounded-medium);
+}
+
+.page-select{
+  background-color: var(--base-color-gray-dark);
+}
diff --git a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
index bca2daa..8b744ea 100644
--- a/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
+++ b/src/app/modules/public/discover/components/list-sites/list-sites.component.ts
@@ -4,20 +4,54 @@
 @Component({
   selector: 'app-list-sites',
   templateUrl: './list-sites.component.html',
-  styleUrls: ['./list-sites.component.scss']
+  styleUrls: ['./list-sites.component.scss'],
 })
 export class ListSitesComponent implements OnInit {
-
   @Input() sites!: Site[];
   @Output() emitAllyId = new EventEmitter();
 
-  constructor() { }
+  numberPages = [1, 2, 3, 4, 5, 6];
+  numberPages2 = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+  pageSelect = 0;
+  pageFin = 20;
 
-  ngOnInit() {
-  }
+  constructor() {}
+
+  ngOnInit() {}
 
   handlePatternAllyId($event: number) {
     this.emitAllyId.emit($event);
   }
 
+  avanzar() {
+    if (this.pageSelect == 5 && this.numberPages[5] == 20) {
+      return;
+    } else {
+      if (this.pageSelect == 5) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return ++val;
+        });
+      } else {
+        this.pageSelect += 1;
+      }
+    }
+  }
+
+  retroceder() {
+    if (this.pageSelect == 0 && this.numberPages[0] == 1) {
+      return;
+    } else {
+      if (this.pageSelect == 0) {
+        this.numberPages = this.numberPages.map(function (val) {
+          return --val;
+        });
+      } else {
+        this.pageSelect -= 1;
+      }
+    }
+  }
+
+  newPage(index: number) {
+    this.pageSelect = index;
+  }
 }
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 973dd4f..057d0b0 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,18 +1,49 @@
-<div class="carousel_size" >
+<div class="carousel_size">
   <owl-carousel-o [options]="customOptions" class="d-flex">
-    <ng-template carouselSlide *ngFor="let site of sites">
-      <div class="slide d-flex flex-column justify-content-between" [ngStyle]="{'background-image': 'url(' + site.url + ')'}">
-        <div class="d-flex justify-content-end align-items-center mt-4">
-          <span>5</span>
-          <ion-icon name="star-half-outline" class="me-3"></ion-icon>
-        </div>
-        <div (click)="handlePatternAllyId(site!.id)" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="mb-4 Ws-24">
-          <i>{{site!.name}}</i>
-        </div>
-      </div>
+    <ng-template carouselSlide *ngFor="let site of sites; index as i">
+      <div *ngIf="site.show_information; then thenBlock; else elseBlock"></div>
+      <ng-template #thenBlock
+        ><div
+          class="slide2 d-flex flex-column justify-content-between"
+        >
+          <div class="d-flex justify-content-end align-items-center mt-4">
+            <ion-icon
+              name="star-half-outline"
+              class="me-3 icon-star"
+            ></ion-icon>
+          </div>
+          <div
+            class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
+          >
+            <i>{{ site!.name }}</i>
+            <ion-icon name="chevron-down-outline"></ion-icon>
+          </div></div
+      ></ng-template>
+      <ng-template #elseBlock
+        ><div
+          class="slide d-flex flex-column justify-content-between"
+          [ngStyle]="{ 'background-image': 'url(' + site.url + ')' }"
+        >
+          <div class="d-flex justify-content-end align-items-center mt-4">
+            <span>5</span>
+            <ion-icon
+              name="star-half-outline"
+              class="me-3 icon-star"
+            ></ion-icon>
+          </div>
+          <div
+            class="mb-4 Ws-24 d-flex align-items-center justify-content-between"
+          >
+            <i>{{ site!.name }}</i>
+            <ion-icon
+              (click)="showInformation(i)"
+              name="chevron-up-outline"
+              class="me-3 icon-up"
+            ></ion-icon>
+          </div></div
+      ></ng-template>
     </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 30ddf3c..7df2a86 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,6 +1,4 @@
-*{
-  color:white;
-}
+
 
 .carousel_size{
   /* width: 100vw; */
@@ -18,12 +16,32 @@
   margin: 20px 0;
   border-radius: 20px;
   box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
-  color: black;
   height:12.5rem;
   width:25rem;
   background-size: cover;
   /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
 }
 
+.slide2{
+  position: relative;
+  color: var(--base-color-dark);
+  font-size: 20px;
+  margin: 20px 0;
+  border-radius: 20px;
+  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
+  height:12.5rem;
+  width:25rem;
+  background: white;
+  /* background: url('../../../../../../assets/images/svg/restaurant.svg'); */
+}
+
+.icon-up{
+  font-size:30px;
+}
+
+.icon-star{
+  font-size:25px;
+}
+
 
 
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 a7f9f9e..1fc42a0 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
@@ -22,7 +22,7 @@
     touchDrag: false,
     pullDrag: false,
     dots: false,
-    margin:15,
+    margin:10,
     navSpeed: 700,
     navText : ['<img src="../../../../../../assets/images/svg/arrow-left.svg">','<img src="../../../../../../assets/images/svg/arow-right.svg">'],
     nav: true,
@@ -36,7 +36,7 @@
           nav: true
         },
         1000: {
-          items: 2,
+          items: 3,
           nav: true,
           loop: true
         },
@@ -56,4 +56,8 @@
     this.emitAllyId.emit(allyId);
   }
 
+  showInformation(index:number){
+    this.sites[index].show_information=true;
+  }
+
 }
diff --git a/src/styles.scss b/src/styles.scss
index bee8097..fd72fb7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -66,7 +66,11 @@
 }
 
 .owl-carousel .owl-item {
-  width: 25rem !important;
+  width: max-content!important;
+}
+
+.owl-carousel.list-slide{
+  background-color: aqua;
 }
 
 /* owl-carousel-o .owl-stage {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 796461b..296bf09 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -20,6 +20,4 @@
 
 * {
   margin: 0;
-}
-
-
+}
\ No newline at end of file