diff --git a/src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.html b/src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.html
new file mode 100644
index 0000000..fdebcc2
--- /dev/null
+++ b/src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.html
@@ -0,0 +1 @@
+<p>encuesta-compartir-dialog works!</p>
diff --git a/src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.scss b/src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.spec.ts b/src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.spec.ts
new file mode 100644
index 0000000..7dd0e6b
--- /dev/null
+++ b/src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EncuestaCompartirDialogComponent } from './encuesta-compartir-dialog.component';
+
+describe('EncuestaCompartirDialogComponent', () => {
+  let component: EncuestaCompartirDialogComponent;
+  let fixture: ComponentFixture<EncuestaCompartirDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [EncuestaCompartirDialogComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EncuestaCompartirDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.ts b/src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.ts
new file mode 100644
index 0000000..bc1ad54
--- /dev/null
+++ b/src/main/webapp/app/entities/encuesta/encuesta-compartir-dialog/encuesta-compartir-dialog.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'jhi-encuesta-compartir-dialog',
+  templateUrl: './encuesta-compartir-dialog.component.html',
+  styleUrls: ['./encuesta-compartir-dialog.component.scss'],
+})
+export class EncuestaCompartirDialogComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/src/main/webapp/app/entities/encuesta/encuesta.module.ts b/src/main/webapp/app/entities/encuesta/encuesta.module.ts
index 86a1c11..c6740f1 100644
--- a/src/main/webapp/app/entities/encuesta/encuesta.module.ts
+++ b/src/main/webapp/app/entities/encuesta/encuesta.module.ts
@@ -9,6 +9,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { EncuestaPublishDialogComponent } from './encuesta-publish-dialog/encuesta-publish-dialog.component';
 import { EncuestaDeleteQuestionDialogComponent } from './encuesta-delete-question-dialog/encuesta-delete-question-dialog.component';
 import { EncuestaDeleteOptionDialogComponent } from './encuesta-delete-option-dialog/encuesta-delete-option-dialog.component';
+import { EncuestaCompartirDialogComponent } from './encuesta-compartir-dialog/encuesta-compartir-dialog.component';
 
 @NgModule({
   imports: [SharedModule, EncuestaRoutingModule, FontAwesomeModule],
@@ -20,6 +21,7 @@ import { EncuestaDeleteOptionDialogComponent } from './encuesta-delete-option-di
     EncuestaPublishDialogComponent,
     EncuestaDeleteQuestionDialogComponent,
     EncuestaDeleteOptionDialogComponent,
+    EncuestaCompartirDialogComponent,
   ],
   entryComponents: [EncuestaDeleteDialogComponent],
 })
diff --git a/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts b/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
index 1c39287..f22fa92 100644
--- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
+++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
@@ -533,7 +533,6 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
     survey.categoria = this.surveyEditForm.get(['categoria'])!.value;
     // Prevent user update by setting to null
     survey.usuarioExtra!.user = null;
-    console.log(survey);
 
     this.encuestaService.updateSurvey(survey).subscribe(res => {
       this.loadAll();
diff --git a/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html b/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html
index d4b2f11..2858a9a 100644
--- a/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html
+++ b/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html
@@ -1,7 +1,7 @@
 <div>
   <h2 id="page-heading" data-cy="EPreguntaCerradaHeading">
     <div class="d-flex align-items-center">
-      <p class="ds-title ds-title--interactive" contenteditable="true" spellcheck="false" (blur)="updateSurveyName($event)">
+      <p class="ds-title ds-contenteditable" contenteditable="true" spellcheck="false" (blur)="updateSurveyName($event)">
         {{ encuesta!.nombre }}
       </p>
       &nbsp;&nbsp;<fa-icon
@@ -93,7 +93,18 @@
             class="ds-survey--question"
           >
             <div class="ds-survey--titulo">
-              <span class="ds-survey--titulo--name">{{ i + 1 }}. {{ ePregunta.nombre }}</span>
+              <span class="ds-survey--titulo--name">
+                <span>{{ i + 1 }}.</span>&nbsp;
+                <span
+                  class="ds-contenteditable"
+                  [attr.data-id]="ePregunta.id"
+                  [attr.data-tipo]="ePregunta.tipo"
+                  contenteditable="true"
+                  spellcheck="false"
+                  (blur)="updateQuestionName($event)"
+                  >{{ ePregunta.nombre }}</span
+                >
+              </span>
               <fa-icon
                 *ngIf="encuesta!.estado === 'DRAFT'"
                 class="ds-survey--titulo--icon"
diff --git a/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts b/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts
index c6fe803..bd76505 100644
--- a/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts
+++ b/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts
@@ -1,4 +1,4 @@
-import { IEPreguntaAbierta } from './../../e-pregunta-abierta/e-pregunta-abierta.model';
+import { EPreguntaAbierta, IEPreguntaAbierta } from './../../e-pregunta-abierta/e-pregunta-abierta.model';
 import { EPreguntaCerrada } from './../../e-pregunta-cerrada/e-pregunta-cerrada.model';
 import { EPreguntaCerradaOpcion, IEPreguntaCerradaOpcion } from './../../e-pregunta-cerrada-opcion/e-pregunta-cerrada-opcion.model';
 import { EPreguntaAbiertaService } from './../../e-pregunta-abierta/service/e-pregunta-abierta.service';
@@ -133,7 +133,6 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
       (res: any) => {
         this.isLoading = false;
         this.ePreguntas = res.body ?? [];
-        console.log(this.ePreguntas);
       },
       () => {
         this.isLoading = false;
@@ -154,7 +153,6 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
       (res: any) => {
         this.isLoading = false;
         this.usuariosColaboradores = res.body ?? [];
-        console.log(this.usuariosColaboradores);
       },
       () => {
         this.isLoading = false;
@@ -165,7 +163,6 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
   async loadAplicationParameters(): Promise<void> {
     const params = await this.parametroAplicacionService.find(1).toPromise();
     this.parametrosAplicacion = params.body;
-    //console.log(this.parametrosAplicacion);
   }
 
   ngOnInit(): void {
@@ -370,7 +367,6 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
 
   createQuestion(): void {
     const surveyId = this.encuesta?.id;
-    console.log(surveyId);
   }
 
   protected createFromFormClosedQuestion(): IEPreguntaCerrada {
@@ -466,6 +462,45 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
     }
   }
 
+  updateQuestionName(event: any): void {
+    const questionType = event.target.dataset.tipo;
+    const questionId = event.target.dataset.id;
+    const questionName = event.target.innerText;
+    if (questionType) {
+      // Closed question
+      this.ePreguntaCerradaService.find(questionId).subscribe(res => {
+        const ePreguntaCerrada: EPreguntaCerrada | null = res.body ?? null;
+        const updatedEPreguntaCerrada = { ...ePreguntaCerrada };
+        if (questionName !== ePreguntaCerrada?.nombre && ePreguntaCerrada !== null) {
+          updatedEPreguntaCerrada.nombre = questionName;
+          this.ePreguntaCerradaService.update(updatedEPreguntaCerrada).subscribe(updatedQuestion => {
+            console.log(updatedQuestion);
+          });
+        }
+      });
+    } else {
+      // Open question
+      // Closed question
+      this.ePreguntaAbiertaService.find(questionId).subscribe(res => {
+        const ePreguntaAbierta: EPreguntaAbierta | null = res.body ?? null;
+        const updatedEPreguntaAbierta = { ...ePreguntaAbierta };
+        if (questionName !== ePreguntaAbierta?.nombre && ePreguntaAbierta !== null) {
+          updatedEPreguntaAbierta.nombre = questionName;
+          this.ePreguntaAbiertaService.update(updatedEPreguntaAbierta).subscribe(updatedQuestion => {
+            console.log(updatedQuestion);
+          });
+        }
+      });
+    }
+    // const questionId = event.target.dataset.id;
+    // const survey = { ...this.encuesta };
+    // survey.nombre = updatedQuestionName;
+    // // Prevent user update by setting to null
+    // survey.usuarioExtra!.user = null;
+
+    // this.encuestaService.updateSurvey(survey).subscribe(res => {});
+  }
+
   // previousState(): void {
   //   window.history.back();
   // }
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..96bc9c3 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>
diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss
index 34ea87d..39e27b8 100644
--- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss
+++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss
@@ -9,20 +9,20 @@
   letter-spacing: 0.025rem;
   text-transform: uppercase;
   font-size: 1.2rem;
+}
 
-  &--interactive {
-    border: 2.25px solid transparent;
-    border-radius: 3px;
-    outline: 0;
-    text-transform: none;
+.ds-contenteditable {
+  border: 2.25px solid transparent;
+  border-radius: 3px;
+  outline: 0;
+  text-transform: none;
 
-    &:hover {
-      border: 2.25px solid #e5e5e5;
-    }
+  &:hover {
+    border: 2.25px solid #e5e5e5;
+  }
 
-    &:focus {
-      border: 2.25px solid #2962ff;
-    }
+  &:focus {
+    border: 2.25px solid #2962ff;
   }
 }