diff --git a/src/main/webapp/app/pagina-principal/pagina-principal.component.html b/src/main/webapp/app/pagina-principal/pagina-principal.component.html
index 389d914..ad379ca 100644
--- a/src/main/webapp/app/pagina-principal/pagina-principal.component.html
+++ b/src/main/webapp/app/pagina-principal/pagina-principal.component.html
@@ -30,22 +30,23 @@
       <div class="container px-0">
         <!--filtrado-->
 
-        <!--<div class="input-group">
+        <div class="input-group">
           <div class="ds-filter">
             <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
-            <input type="text" name="searchString" placeholder="Buscar por nombre..." [(ngModel)]="searchString" />
+            <input class="form-control" type="text" name="searchString" placeholder="Buscar por nombre..." [(ngModel)]="searchString" />
           </div>
-          <div class="ds-filter">
-            <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
-            <select name="accesoEncuestas" id="accesoEncuesta" [(ngModel)]="searchCategoria" style="width: 200px">
-              <option selected="selected" *ngFor="let categoria of categorias" [value]="categoria.nombre">{{categoria.nombre}}</option>
+          <!-- <div class="ds-filter">
+            <select name="searchCategoria" class="form-control" [(ngModel)]="searchCategoria" style="width: 200px">
+              <option value="" selected="selected" disabled="disabled">Filtrar por categoría</option>
+              <option value="">Todas las categorías</option>
+              <option  *ngFor="let categoria of categorias" [value]="categoria.nombre">{{categoria.nombre}}</option>
             </select>
-          </div>
+          </div>-->
+        </div>
 
+        <hr />
 
-        </div>-->
-
-        <div class="container">
+        <div class="container" *ngIf="encuestas && encuestas.length == 0">
           <h1 class="ds-title">Encuestas</h1>
 
           <hr />
@@ -58,60 +59,61 @@
 
         <!--Inicio de los cards-->
 
-        <!-- <div class="row gx-5" *ngIf="encuestas && encuestas.length > 0">
-          <div class="col-xl-4 col-lg-4 col-md-6 mb-5" *ngFor="let encuesta of encuestas; trackBy: trackId">
-            <div
-              class="card-encuesta lift h-100"
+        <div class="row gx-5" *ngIf="encuestas && encuestas.length > 0">
+          <div
+            class="col-xl-4 col-lg-4 col-md-6 mb-5"
+            *ngFor="
+              let encuesta of encuestas | filter: 'nombre':searchString | filter: 'categoria.nombre':searchCategoria;
+              trackBy: trackId
+            "
+          >
+            <div class="card-encuesta lift h-100" [attr.data-id]="encuesta.id">
+              <!--(dblclick)="openSurvey($event)"
+             (click)="selectSurvey($event)"
 
-              [attr.data-id]="encuesta.id"
-            >
+-->
 
-              &lt;!&ndash;(dblclick)="openSurvey($event)"
-             (click)="selectSurvey($event)"&ndash;&gt;
-
-
-
-             &lt;!&ndash; <div class="card-body p-3">
+              <div class="card-body p-3">
                 <div class="card-title mb-0">{{ encuesta.nombre }}</div>
-                <div class="entity-body&#45;&#45;row m-2">
+                <div class="entity-body--row m-2">
                   <span class="tag mt-2">{{ encuesta.categoria?.nombre | lowercase }}</span>
                 </div>
-                <div class="entity-body&#45;&#45;row m-2">
+                <div class="entity-body--row m-2">
                   <span class="subtitle mt-2">{{ encuesta.descripcion | titlecase }}</span>
                 </div>
                 <div class="text-xs text-gray-500">
                   <div class="entity-body">
-                    <div class="entity-body&#45;&#45;row m-2">
+                    <div class="entity-body--row m-2">
                       <span class="mt-2"
-                      >Fecha de inicio&nbsp;&nbsp;<fa-icon class="entity-icon&#45;&#45;access" [icon]="faCalendarAlt"></fa-icon>&nbsp;&nbsp;{{
-                        encuesta.fechaPublicacion | formatShortDatetime | titlecase
+                        >Fecha de inicio&nbsp;&nbsp;<fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon>&nbsp;&nbsp;{{
+                          encuesta.fechaPublicacion | formatShortDatetime | titlecase
                         }}</span
                       >
                     </div>
-                    <div class="entity-body&#45;&#45;row m-2">
+                    <div class="entity-body--row m-2">
                       <span class="mt-2"
-                      >Fecha de finalización &nbsp;&nbsp;<fa-icon class="entity-icon&#45;&#45;access" [icon]="faCalendarAlt"></fa-icon
-                      >&nbsp;&nbsp;{{ encuesta.fechaFinalizar | formatShortDatetime | titlecase }}</span
+                        >Fecha de finalización &nbsp;&nbsp;<fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon
+                        >&nbsp;&nbsp;{{ encuesta.fechaFinalizar | formatShortDatetime | titlecase }}</span
                       >
                     </div>
-                    <div class="entity-body&#45;&#45;row m-2">
+                    <div class="entity-body--row m-2">
                       <p>Calificacion</p>
-                      <fa-icon *ngFor="let i of [].constructor(encuesta.calificacion)" class="entity-icon&#45;&#45;star" [icon]="faStar"></fa-icon>
+                      <fa-icon *ngFor="let i of [].constructor(encuesta.calificacion)" class="entity-icon--star" [icon]="faStar"></fa-icon>
                       <fa-icon
                         *ngFor="let i of [].constructor(5 - encuesta.calificacion!)"
-                        class="entity-icon&#45;&#45;star&#45;&#45;off"
+                        class="entity-icon--star--off"
                         [icon]="faStar"
                       ></fa-icon>
                     </div>
-                    <div class="entity-body&#45;&#45;row m-2">
+                    <div class="entity-body--row m-2">
                       <button class="ds-btn btn-card"><fa-icon [icon]="faPollH"></fa-icon>&nbsp;&nbsp;Completar encuesta</button>
                     </div>
                   </div>
                 </div>
-              </div>&ndash;&gt;
+              </div>
             </div>
           </div>
-        </div>-->
+        </div>
       </div>
     </div>
   </div>