diff --git a/src/main/java/org/datasurvey/web/rest/EPreguntaCerradaOpcionResource.java b/src/main/java/org/datasurvey/web/rest/EPreguntaCerradaOpcionResource.java
index 61604a7..08dd3c7 100644
--- a/src/main/java/org/datasurvey/web/rest/EPreguntaCerradaOpcionResource.java
+++ b/src/main/java/org/datasurvey/web/rest/EPreguntaCerradaOpcionResource.java
@@ -2,6 +2,7 @@ package org.datasurvey.web.rest;
 
 import java.net.URI;
 import java.net.URISyntaxException;
+import java.util.Arrays;
 import java.util.List;
 import java.util.Objects;
 import java.util.Optional;
@@ -76,7 +77,7 @@ public class EPreguntaCerradaOpcionResource {
     /**
      * {@code PUT  /e-pregunta-cerrada-opcions/:id} : Updates an existing ePreguntaCerradaOpcion.
      *
-     * @param id the id of the ePreguntaCerradaOpcion to save.
+     * @param id                     the id of the ePreguntaCerradaOpcion to save.
      * @param ePreguntaCerradaOpcion the ePreguntaCerradaOpcion to update.
      * @return the {@link ResponseEntity} with status {@code 200 (OK)} and with body the updated ePreguntaCerradaOpcion,
      * or with status {@code 400 (Bad Request)} if the ePreguntaCerradaOpcion is not valid,
@@ -110,7 +111,7 @@ public class EPreguntaCerradaOpcionResource {
     /**
      * {@code PATCH  /e-pregunta-cerrada-opcions/:id} : Partial updates given fields of an existing ePreguntaCerradaOpcion, field will ignore if it is null
      *
-     * @param id the id of the ePreguntaCerradaOpcion to save.
+     * @param id                     the id of the ePreguntaCerradaOpcion to save.
      * @param ePreguntaCerradaOpcion the ePreguntaCerradaOpcion to update.
      * @return the {@link ResponseEntity} with status {@code 200 (OK)} and with body the updated ePreguntaCerradaOpcion,
      * or with status {@code 400 (Bad Request)} if the ePreguntaCerradaOpcion is not valid,
@@ -196,4 +197,16 @@ public class EPreguntaCerradaOpcionResource {
             .headers(HeaderUtil.createEntityDeletionAlert(applicationName, true, ENTITY_NAME, id.toString()))
             .build();
     }
+
+    @PostMapping("/e-pregunta-cerrada-opcions/deleteMany")
+    public ResponseEntity<Void> deleteManyEPreguntaCerradaOpcion(@Valid @RequestBody int[] ids) {
+        for (int id : ids) {
+            ePreguntaCerradaOpcionService.delete((long) id);
+            System.out.println(id);
+        }
+        return ResponseEntity
+            .noContent()
+            .headers(HeaderUtil.createEntityDeletionAlert(applicationName, true, ENTITY_NAME, Arrays.toString(ids)))
+            .build();
+    }
 }
diff --git a/src/main/webapp/app/entities/e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service.ts b/src/main/webapp/app/entities/e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service.ts
index a3daca3..019d0b6 100644
--- a/src/main/webapp/app/entities/e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service.ts
+++ b/src/main/webapp/app/entities/e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service.ts
@@ -49,6 +49,10 @@ export class EPreguntaCerradaOpcionService {
     return this.http.delete(`${this.resourceUrl}/${id}`, { observe: 'response' });
   }
 
+  deleteMany(ids: number[]): Observable<EntityResponseType> {
+    return this.http.post<IEPreguntaCerradaOpcion>(`${this.resourceUrl}/deleteMany`, ids, { observe: 'response' });
+  }
+
   addEPreguntaCerradaOpcionToCollectionIfMissing(
     ePreguntaCerradaOpcionCollection: IEPreguntaCerradaOpcion[],
     ...ePreguntaCerradaOpcionsToCheck: (IEPreguntaCerradaOpcion | null | undefined)[]
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 30ec5b8..e43f976 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,22 +1,21 @@
 <div>
   <h2 id="page-heading" data-cy="EPreguntaCerradaHeading">
-    <span>{{ encuesta!.nombre }}</span>
+    <p class="ds-title">{{ encuesta!.nombre }}</p>
+    <p class="ds-subtitle">Creada el día {{ encuesta!.fechaCreacion | formatShortDatetime | lowercase }}</p>
 
     <div class="d-flex justify-content-end">
-      <button class="btn btn-info mr-2" (click)="loadAll()" [disabled]="isLoading">
-        <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
-        <span jhiTranslate="dataSurveyApp.ePreguntaCerrada.home.refreshListLabel">Refresh List</span>
+      <button type="button" class="ds-btn ds-btn--secondary" (click)="previousState()">
+        <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
       </button>
-
-      <button
-        id="jh-create-entity"
-        data-cy="entityCreateButton"
-        class="btn btn-primary jh-create-entity create-e-pregunta-cerrada"
-        [routerLink]="['/e-pregunta-cerrada/new']"
-      >
-        <fa-icon icon="plus"></fa-icon>
-        <span jhiTranslate="dataSurveyApp.ePreguntaCerrada.home.createLabel"> Create a new E Pregunta Cerrada </span>
+      <button type="button" class="ds-btn ds-btn--secondary" (click)="loadAll()" [disabled]="isLoading">
+        <fa-icon icon="sync" [spin]="isLoading"></fa-icon>&nbsp;&nbsp;<span>Refrescar preguntas</span>
       </button>
+      <ng-container *ngIf="encuesta!.estado === 'DRAFT'">
+        <button type="button" class="ds-btn ds-btn--primary" (click)="publishSurvey()">Publicar encuesta</button>
+      </ng-container>
+      <ng-container *ngIf="encuesta!.estado === 'ACTIVE'">
+        <button type="button" class="ds-btn ds-btn--danger--full" (click)="finishSurvey()">Finalizar encuesta</button>
+      </ng-container>
     </div>
   </h2>
 
@@ -28,25 +27,46 @@
     <span>No se encontraron preguntas</span>
   </div>
 
-  <div class="table-responsive" id="entities" *ngIf="ePreguntas && ePreguntas.length > 0">
-    <div>
-      <div *ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId" [attr.data-index]="ePregunta.id">
-        <span>{{ ePregunta.nombre }} | </span>
-        <span>{{ ePregunta.tipo }} | </span>
-        <span>{{ ePregunta.opcional }}</span>
-
-        <ng-container *ngIf="ePregunta.tipo">
-          <ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
-            <ng-container *ngIf="ePregunta.id == ePreguntaOpcion[j].epreguntaCerrada.id">
-              <div *ngFor="let ePreguntaOpcion2 of ePreguntaOpcion; let k = index; trackBy: trackId">
-                <span>--------- {{ ePreguntaOpcion2.nombre }}</span>
-              </div>
+  <div class="ds-survey" id="entities" *ngIf="ePreguntas && ePreguntas.length > 0">
+    <div class="ds-survey--all-question-wrapper">
+      <div class="ds-survey--question-wrapper" *ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId">
+        <div
+          [attr.data-index]="ePregunta.id"
+          [attr.data-tipo]="ePregunta.tipo"
+          [attr.data-opcional]="ePregunta.opcional"
+          class="ds-survey--question"
+        >
+          <div class="ds-survey--titulo">
+            <span class="ds-survey--titulo--name">{{ i + 1 }}. {{ ePregunta.nombre }}</span>
+            <fa-icon
+              class="ds-survey--titulo--icon"
+              [icon]="faTimes"
+              (click)="deleteQuestion($event)"
+              [attr.data-id]="ePregunta.id"
+              [attr.data-type]="ePregunta.tipo"
+            ></fa-icon>
+          </div>
+          <ng-container *ngIf="ePregunta.tipo">
+            <ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
+              <ng-container *ngIf="ePregunta.id == ePreguntaOpcion[j].epreguntaCerrada.id">
+                <div
+                  class="ds-survey--option ds-survey--closed-option"
+                  *ngFor="let ePreguntaOpcion2 of ePreguntaOpcion; let k = index; trackBy: trackId"
+                  [attr.data-id]="ePreguntaOpcion2.id"
+                >
+                  <input class="ds-survey--checkbox" id="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}" type="checkbox" disabled />
+                  <label for="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}">{{ ePreguntaOpcion2.nombre }}</label>
+                </div>
+              </ng-container>
             </ng-container>
           </ng-container>
-        </ng-container>
-        <textarea *ngIf="!ePregunta.tipo" name="" id="" cols="30" rows="10"></textarea>
+          <div class="ds-survey--option ds-survey--open-option" *ngIf="!ePregunta.tipo">
+            <textarea name="" id="" cols="30" rows="10" disabled></textarea>
+          </div>
+        </div>
       </div>
     </div>
+
     <!-- <table class="table table-striped" aria-describedby="page-heading">
       <thead>
         <tr>
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 115c995..7a6c92d 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,5 @@
-import { Component, OnInit } from '@angular/core';
+import { EPreguntaCerradaOpcionService } from './../../e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service';
+import { AfterViewChecked, Component, OnInit } from '@angular/core';
 import { HttpResponse } from '@angular/common/http';
 import { FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
@@ -20,11 +21,15 @@ import { IEPreguntaCerrada } from 'app/entities/e-pregunta-cerrada/e-pregunta-ce
 import { EPreguntaCerradaService } from 'app/entities/e-pregunta-cerrada/service/e-pregunta-cerrada.service';
 import { EPreguntaCerradaDeleteDialogComponent } from 'app/entities/e-pregunta-cerrada/delete/e-pregunta-cerrada-delete-dialog.component';
 
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+
 @Component({
   selector: 'jhi-encuesta-update',
   templateUrl: './encuesta-update.component.html',
 })
-export class EncuestaUpdateComponent implements OnInit {
+export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
+  faTimes = faTimes;
+
   isSaving = false;
 
   categoriasSharedCollection: ICategoria[] = [];
@@ -58,7 +63,9 @@ export class EncuestaUpdateComponent implements OnInit {
     protected usuarioExtraService: UsuarioExtraService,
     protected activatedRoute: ActivatedRoute,
     protected fb: FormBuilder,
-    protected modalService: NgbModal
+    protected modalService: NgbModal,
+    protected ePreguntaCerradaService: EPreguntaCerradaService,
+    protected ePreguntaCerradaOpcionService: EPreguntaCerradaOpcionService
   ) {}
 
   loadAll(): void {
@@ -104,6 +111,10 @@ export class EncuestaUpdateComponent implements OnInit {
     });
   }
 
+  ngAfterViewChecked(): void {
+    this.initListeners();
+  }
+
   trackId(index: number, item: IEPreguntaCerrada): number {
     return item.id!;
   }
@@ -119,6 +130,59 @@ export class EncuestaUpdateComponent implements OnInit {
     });
   }
 
+  initListeners(): void {
+    const checkboxes = document.getElementsByClassName('ds-survey--checkbox');
+    for (let i = 0; i < checkboxes.length; i++) {
+      checkboxes[i].addEventListener('click', e => {
+        console.log(e);
+        if ((e.target as HTMLInputElement).checked) {
+          (e.target as HTMLElement).offsetParent!.classList.add('ds-survey--closed-option--active');
+        } else {
+          (e.target as HTMLElement).offsetParent!.classList.remove('ds-survey--closed-option--active');
+        }
+      });
+    }
+  }
+
+  previousState(): void {
+    window.history.back();
+  }
+
+  publishSurvey(): void {}
+
+  finishSurvey(): void {}
+
+  deleteQuestion(event: any) {
+    const id = event.target.dataset.id;
+    if (event.target.dataset.type) {
+      // Delete closed question
+      console.log('closed', id);
+      const questionElement = (event.target as HTMLElement).parentElement?.parentElement;
+      const optionIdsToDelete: number[] = [];
+
+      // Get options IDs
+      questionElement?.childNodes.forEach((e, i) => {
+        if (e.nodeName !== 'DIV') return;
+        if (i === 0) return;
+        if ((e as HTMLElement).dataset.id === undefined) return;
+        let optionId = (e as HTMLElement).dataset.id;
+        optionIdsToDelete.push(+optionId!);
+      });
+
+      // Delete question options
+      this.ePreguntaCerradaOpcionService.deleteMany(optionIdsToDelete).subscribe(e => {
+        // Delete question
+        this.ePreguntaCerradaService.delete(id).subscribe(e => {
+          console.log('DELETED QUESTION: ' + id);
+          this.loadAll();
+        });
+      });
+    } else {
+      // Delete open question
+      console.log('open', id);
+    }
+  }
+
   // previousState(): void {
   //   window.history.back();
   // }
diff --git a/src/main/webapp/content/scss/paper-dashboard.scss b/src/main/webapp/content/scss/paper-dashboard.scss
index 3eab78d..28c06f8 100644
--- a/src/main/webapp/content/scss/paper-dashboard.scss
+++ b/src/main/webapp/content/scss/paper-dashboard.scss
@@ -98,3 +98,4 @@
 @import 'paper-dashboard/datasurvey-list';
 @import 'paper-dashboard/datasurvey-table';
 @import 'paper-dashboard/datasurvey-contextmenu';
+@import 'paper-dashboard/datasurvey-survey-update';
diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-buttons.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-buttons.scss
index ccb1547..9be5521 100644
--- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-buttons.scss
+++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-buttons.scss
@@ -68,6 +68,15 @@
     background-color: #f7f9ff;
     color: #d33232;
   }
+
+  &--full {
+    background-color: #e73636;
+    color: #fff;
+
+    &:hover {
+      background-color: #d33232;
+    }
+  }
 }
 
 .ds-btn--google {
diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey-update.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey-update.scss
new file mode 100644
index 0000000..7ce988d
--- /dev/null
+++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey-update.scss
@@ -0,0 +1,107 @@
+.ds-survey {
+  display: flex;
+
+  &--titulo {
+    display: flex;
+    justify-content: space-between;
+
+    &--name {
+    }
+
+    &--icon {
+      border-radius: 50%;
+      background-color: #f1f5f9;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: background-color 0.2s ease-in-out;
+      font-size: 1rem;
+      padding: 0.8rem;
+      width: 25px;
+      height: 25px;
+      color: #313747;
+      pointer-events: visible !important;
+      transition: all 0.1s ease-in-out;
+
+      * {
+        pointer-events: none;
+      }
+
+      &:hover {
+        background-color: #e73636;
+        color: #fff;
+      }
+    }
+  }
+
+  &--all-question-wrapper {
+    display: flex;
+    flex-direction: column;
+    border: 2px dashed #f1f1f1;
+    border-radius: $border-radius-x-large;
+    padding: 2rem 5rem;
+    margin: 0 auto;
+  }
+
+  &--question-wrapper {
+    margin: 0 auto;
+  }
+
+  &--question {
+    display: flex;
+    flex-direction: column;
+    font-size: 1.2rem;
+    color: #15131d;
+    padding: 2rem;
+    border-bottom: 1px solid #e9e9e9;
+  }
+
+  &--option {
+    margin: 0.5rem 0;
+    border-radius: 5px;
+    font-weight: 500;
+    letter-spacing: 0.025rem;
+    color: #787878;
+    border: 1px solid #e6e6e6;
+    background-color: transparent;
+    position: relative;
+    top: 0;
+    transition: all 0.1s ease-in-out;
+  }
+
+  &--closed-option {
+    display: flex;
+    width: 25rem;
+    align-items: center;
+    font-size: 0.9rem;
+    color: #15131d;
+    padding: 1rem 3rem;
+    transition: all 0.1s ease-in-out;
+    cursor: pointer;
+    position: relative;
+
+    label {
+      width: 100%;
+      margin: 0 1rem;
+    }
+  }
+
+  &--open-option {
+    display: flex;
+    align-items: center;
+    font-size: 0.9rem;
+    color: #15131d;
+    transition: all 0.1s ease-in-out;
+    position: relative;
+
+    & textarea {
+      width: 25rem;
+      height: 20rem;
+      padding: 1rem 3rem;
+      color: #787878;
+      border: none;
+      resize: none;
+    }
+  }
+}