diff --git a/src/demo/app/app.module.ts b/src/demo/app/app.module.ts
index b3164c320..0b4fe02cd 100644
--- a/src/demo/app/app.module.ts
+++ b/src/demo/app/app.module.ts
@@ -12,6 +12,9 @@ import { Plex } from '../../lib/core/service';
 // Services
 import { ServiceDemoSelect } from './select/select.service';
 import { PacienteService } from './templates/service/paciente.service';
+import { AgendaService } from './templates/service/agenda.service';
+import { MenuService } from './templates/service/menu.service';
+import { SolicitudService } from './templates/service/solicitud.service';
 
 // Routes
 import { HomeDemoComponent } from './home/home.component';
@@ -53,7 +56,11 @@ import { SliderDemoComponent } from './slider/slider.component';
 import { ListadoSidebarComponent } from './templates/listado-sidebar/listado-sidebar';
 import { SidebarDetalleComponent } from './templates/listado-sidebar/sidebar/detalle/sidebar-detalle.component';
 import { MainListadoComponent } from './templates/listado-sidebar/main/listado/main-listado.component';
+import { PuntoInicioComponent } from './templates/punto-inicio/punto-inicio.component';
 import { ModalTemplateComponent } from './templates/componentes/plex-modal-template/plex-modal-template';
+import { PuntoInicioMainComponent } from './templates/punto-inicio/punto-inicio-main/punto-inicio-main.component';
+import { PuntoInicioSidebarComponent } from './templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component';
+import { DetalleAgendaComponent } from './templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component';
 import { DemoIconComponent } from './icon/icon';
 import { NavbarDemoComponent } from './navbar/navbar';
 import { HelpDemoComponent } from './help/help.component';
@@ -77,6 +84,7 @@ import { InternacionComponent } from './templates/modulos/internacion/internacio
 import { RecursosListadoComponent } from './templates/modulos/internacion/listado/recursos-listado.component';
 import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar/detalle/recurso-detalle.component';
 
+import { TeleprestacionesComponent } from './templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones';
 
 @NgModule({
     declarations: [
@@ -121,6 +129,10 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         SliderDemoComponent,
         ListadoSidebarComponent,
         SidebarDetalleComponent,
+        PuntoInicioComponent,
+        DetalleAgendaComponent,
+        PuntoInicioMainComponent,
+        PuntoInicioSidebarComponent,
         MainListadoComponent,
         ModalTemplateComponent,
         // Templates genéricos
@@ -145,7 +157,8 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         AlignDemoComponent,
         InternacionComponent,
         RecursosListadoComponent,
-        RecursoDetalleComponent
+        RecursoDetalleComponent,
+        TeleprestacionesComponent
     ],
     entryComponents: [
         HeaderPacienteComponent
@@ -161,8 +174,10 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
         appRoutingProviders,
         ServiceDemoSelect,
         PacienteService,
-        CamaService
-
+        CamaService,
+        AgendaService,
+        MenuService,
+        SolicitudService
     ],
     bootstrap: [AppComponent]
 })
diff --git a/src/demo/app/app.routes.ts b/src/demo/app/app.routes.ts
index 2bf476946..8472420f7 100644
--- a/src/demo/app/app.routes.ts
+++ b/src/demo/app/app.routes.ts
@@ -36,6 +36,8 @@ import { SidebarDetalleComponent } from './templates/listado-sidebar/sidebar/det
 import { DemoIconComponent } from './icon/icon';
 import { NavbarDemoComponent } from './navbar/navbar';
 import { ModalTemplateComponent } from './templates/componentes/plex-modal-template/plex-modal-template';
+import { PuntoInicioComponent } from './templates/punto-inicio/punto-inicio.component';
+import { DetalleAgendaComponent } from './templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component';
 import { CardDemoComponent } from './card/card.component';
 import { MpiDetalleComponent } from './templates/modulos/mpi/sidebar/detalle/mpi-detalle.component';
 import { MpiAltaComponent } from './templates/modulos/mpi/main/alta/mpi-alta.component';
@@ -86,6 +88,12 @@ const appRoutes: Routes = [
     { path: 'templates/form', component: TemplateFormComponent },
     { path: 'templates/form-sidebar', component: TemplateBotoneraSidebarComponent },
     { path: 'templates/visualizacion', component: TemplateVisualizacionComponent },
+    {
+        path: 'templates/punto-inicio', component: PuntoInicioComponent,
+        children: [
+            { path: ':id', component: DetalleAgendaComponent }
+        ]
+    },
     { path: 'templates/busqueda', component: TemplateBusquedaComponent },
     { path: 'templates/mpi-maquetado/mpi-alta', component: MpiAltaComponent },
     {
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html
new file mode 100644
index 000000000..cd439960b
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.html
@@ -0,0 +1,59 @@
+<!-- Agendas -->
+<plex-tabs>
+    <plex-button type="info" class="ml-2" icon="filter" size="sm" (click)="mostrarFiltros()"></plex-button>
+    <plex-tab label="mis agendas" icon="">
+        <plex-wrapper *ngIf="filtros">
+            <plex-datetime label="Ingrese la fecha" [(ngModel)]="tModel.fechaHora" name="fechaHora" required>
+            </plex-datetime>
+            <plex-select grow="2" [(ngModel)]="modelo1.select" [data]="opciones"
+                         label-field="nombre + ' (' + continente + ')'" label="Seleccione una prestación">
+            </plex-select>
+            <plex-text label="Buscar paciente" [(ngModel)]="templateModel2.nombre" name="nombre">
+            </plex-text>
+        </plex-wrapper>
+        <plex-list height="300px">
+            <plex-item *ngFor="let agenda of agendas$ | async" (click)="selected(agenda)">
+                <plex-icon name="calendario-tilde" type="success"></plex-icon>
+                <plex-label titulo="{{ agenda.horaInicio }} a {{ agenda.horaFin }}"
+                            subtitulo="Duración: {{ duracion }}">
+                </plex-label>
+                <plex-label *ngFor="let profesional of agenda.profesionales" titulo="{{ agenda.tipoPrestaciones }}"
+                            subtitulo="Profesional: {{ profesional.apellido }}, {{ profesional.nombre }}">
+                </plex-label>
+                <plex-badge type="success">{{ agenda.estado }}</plex-badge>
+                <plex-badge *ngFor="let bloque of agenda.bloques" type="info">Pacientes
+                    {{ bloque.restantesDelDia }}/{{ bloque.accesoDirectoDelDia }}
+                </plex-badge>
+            </plex-item>
+        </plex-list>
+    </plex-tab>
+    <plex-tab label="todas las agendas" icon="">
+    </plex-tab>
+</plex-tabs>
+
+<hr>
+
+<!-- Pacientes -->
+<plex-tabs>
+    <plex-button type="success" type="sm" label="paciente sin turno"></plex-button>
+    <plex-tab label="consultas realizadas">
+        <div slider>
+            <plex-grid type="auto" cols="4">
+                <ng-container *ngFor="let paciente of pacientes$ | async">
+                    <plex-card aligned="center" size="md" type="default" [selected]="paciente.selected"
+                               (click)="selectedPaciente(paciente)">
+                        <plex-detail size="xs" direction="column">
+                            <img src="{{ paciente.foto }}">
+                            <plex-label direction="column" titulo="{{ paciente.nombre }}"
+                                        subtitulo="{{ paciente.documento }}" tooltip="{{ paciente.nombre }}">
+                            </plex-label>
+                        </plex-detail>
+                    </plex-card>
+                </ng-container>
+            </plex-grid>
+        </div>
+    </plex-tab>
+    <plex-tab label="consultas pendientes">
+    </plex-tab>
+    <plex-button type="info" class="ml-2" label="ver listado completo" size="sm"></plex-button>
+</plex-tabs>
\ No newline at end of file
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
new file mode 100644
index 000000000..a59b49af5
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/punto-inicio-main.component.ts
@@ -0,0 +1,143 @@
+import { Component, OnInit } from '@angular/core';
+import { AgendaService } from './../../service/agenda.service';
+import { Agenda } from './../../service/agenda';
+import { PacienteService } from './../../service/paciente.service';
+import { Paciente } from './../../service/paciente';
+import { Plex } from './../../../../../lib/core/service';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { EventEmitter, Output } from '@angular/core';
+
+@Component({
+    selector: 'plex-punto-inicio-main',
+    templateUrl: './punto-inicio-main.component.html',
+})
+export class PuntoInicioMainComponent implements OnInit {
+
+    sidebarValue = 9;
+    filtros = false;
+    @Output() eventoSidebar = new EventEmitter<number>();
+
+    agendas$: Observable<Agenda[]>;
+    pacientes$: Observable<Paciente[]>;
+    selectedId: string;
+
+    public duracion = '1 hs. 34 min.';
+    public plex: Plex;
+    public tModel: any;
+    public opciones: any[];
+    public options: any[];
+    public modelo1 = { select: null };
+    public modelo2 = {
+        select: null,
+        soloLectura: false,
+        selectMultiple: null
+    };
+    // public prueba = '';
+    public templateModel2: any;
+    public modelo: any;
+
+    public showModal = false;
+
+    foco = 'main';
+    public prueba = '';
+    public cambio = '';
+
+    updateMaxHora() {
+        this.tModel.minHora = moment().add(30, 'minutes').add(1, 'days');
+    }
+
+    horaPlus() {
+        return moment(this.tModel.hora).add(30, 'minutes');
+    }
+
+    onChange() {
+        this.plex.info('success', 'Este cartel se demoro un segundo en aparecer después de escribir.');
+    }
+
+    constructor(
+        private agendaService: AgendaService,
+        private pacienteService: PacienteService,
+        private router: Router,
+    ) { }
+
+    ngOnInit() {
+
+        // plex-datetime
+        this.tModel = {
+            fechaHora: null,
+            fecha: null,
+            hora: null,
+            horados: null,
+            disabled: false,
+            min: new Date(1970, 0, 1),
+            minHora: moment().add(30, 'minutes'),
+            maxHora: moment().add(180, 'minutes'),
+            fechaDecounce: new Date(1970, 0, 1),
+        };
+
+        // plex-float
+        this.tModel = { valor: null };
+
+        // Radio
+        this.options = [
+            {
+                label: 'todas',
+                key: 1,
+            },
+            {
+                label: 'mías',
+                key: 2,
+            },
+        ];
+
+        // plex-select
+        this.opciones = [{
+            id: 1,
+            nombre: 'Consulta de medicina general',
+            continente: 'Prestación',
+        },
+        {
+            id: 2,
+            nombre: 'Exámen médico del adulto',
+            continente: 'Prestación',
+        },
+        {
+            id: 3,
+            nombre: 'Consulta de niño sano',
+            continente: 'Prestación',
+        }];
+
+        this.modelo1.select = this.modelo2.select = this.opciones[1];
+
+        // plex-text
+        this.templateModel2 = { nombre: null, min: 10, max: 15 };
+
+        // plex-bool
+        this.modelo = { checkbox: false, slide: false };
+
+        this.agendas$ = this.agendaService.getAgendas();
+        this.pacientes$ = this.pacienteService.getPacientes();
+    }
+
+    enviarSidebar() {
+        this.eventoSidebar.emit(this.sidebarValue);
+        this.sidebarValue = 8;
+    }
+
+    selected(agenda) {
+        this.selectedId = agenda.id;
+        this.router.navigate(['templates', 'punto-inicio', this.selectedId]);
+        this.enviarSidebar();
+    }
+
+    selectedPaciente(paciente) {
+        this.selectedId = paciente.id;
+        this.router.navigate(['templates', 'punto-inicio', this.selectedId]);
+        this.enviarSidebar();
+    }
+
+    mostrarFiltros() {
+        this.filtros = !this.filtros;
+    }
+}
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.html b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.html
new file mode 100644
index 000000000..8321690d2
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.html
@@ -0,0 +1,20 @@
+<plex-title size="sm" titulo="Teleprestaciones"></plex-title>
+<plex-list>
+    <plex-item *ngFor="let solicitud of solicitudes$ | async">
+        <plex-label icon="{{ solicitud.organizacionId === 1 ? 'hospital' : 'hombre-caminando' }}" size="lg"
+                    type="default" titulo="{{ solicitud.unidadOrganizativa }}" subtitulo="{{ solicitud.servicio }}">
+        </plex-label>
+        <plex-label icon="paciente" size="sm" type="default"
+                    titulo="{{ solicitud.paciente.nombre }} {{ solicitud.paciente.apellido }}"
+                    subtitulo="{{ solicitud.paciente.documento }}">
+        </plex-label>
+        <plex-label size=" sm" icon="medico" direction="row" type="info" titulo="{{ solicitud.profesionalOrigen }}"
+                    subtitulo="{{ solicitud.prestacionOrigen }}">
+        </plex-label>
+        <plex-badge type="info">{{ solicitud.organizativaId != 1 ? 'solicitud' : 'interconsulta' }}
+        </plex-badge>
+        <plex-button size="sm" type="info" icon="eye"></plex-button>
+        <plex-button size="sm" type="info" icon="historial"></plex-button>
+        <plex-button size="sm" type="warning" icon="documento-lapiz"></plex-button>
+    </plex-item>
+</plex-list>
\ No newline at end of file
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
new file mode 100644
index 000000000..e2ade1da2
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-main/teleprestaciones/punto-inicio-teleprestaciones.ts
@@ -0,0 +1,109 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { EventEmitter, Output } from '@angular/core';
+
+// Servicios y modelo
+import { Plex } from './../../../../../../lib/core/service';
+import { Solicitud } from '../../../service/solicitud';
+import { SolicitudService } from '../../../service/solicitud.service';
+
+@Component({
+    selector: 'plex-teleprestaciones',
+    templateUrl: './punto-inicio-teleprestaciones.html',
+})
+
+export class TeleprestacionesComponent implements OnInit {
+
+    sidebarValue = 9;
+    @Output() eventoSidebar = new EventEmitter<number>();
+
+    public tModel: any;
+    public opciones: any[];
+    public modelo1 = { select: null };
+    public modelo2 = {
+        select: null,
+        soloLectura: false,
+        selectMultiple: null
+    };
+    // public prueba = '';
+    public templateModel2: any;
+    public modelo: any;
+
+    public showModal = false;
+
+    solicitudes$: Observable<Solicitud[]>;
+    foco = 'main';
+    public prueba = '';
+    public cambio = '';
+
+    constructor(
+        private solicitudService: SolicitudService,
+        private plex: Plex,
+    ) { }
+
+    ngOnInit() {
+        this.solicitudes$ = this.solicitudService.getSolicitudes();
+
+        // plex-datetime
+        this.tModel = {
+            fechaHora: null,
+            fecha: null,
+            hora: null,
+            horados: null,
+            disabled: false,
+            min: new Date(1970, 0, 1),
+            minHora: moment().add(30, 'minutes'),
+            maxHora: moment().add(180, 'minutes'),
+            fechaDecounce: new Date(1970, 0, 1),
+        };
+
+        // plex-float
+        this.tModel = { valor: null };
+
+        // plex-select
+        this.opciones = [{
+            id: 1,
+            nombre: 'Consulta de medicina general',
+            continente: 'Prestación',
+        },
+        {
+            id: 2,
+            nombre: 'Exámen médico del adulto',
+            continente: 'Prestación',
+        },
+        {
+            id: 3,
+            nombre: 'Consulta de niño sano',
+            continente: 'Prestación',
+        }];
+
+        this.modelo1.select = this.modelo2.select = this.opciones[1];
+
+        // plex-text
+        this.templateModel2 = { nombre: null, min: 10, max: 15 };
+
+        // plex-bool
+        this.modelo = { checkbox: false, slide: false };
+    }
+
+    updateMaxHora() {
+        this.tModel.minHora = moment().add(30, 'minutes').add(1, 'days');
+    }
+
+    horaPlus() {
+        return moment(this.tModel.hora).add(30, 'minutes');
+    }
+
+    onChange() {
+        this.plex.info('success', 'Este cartel se demoro un segundo en aparecer después de escribir.');
+    }
+
+    recibirSidebar($event) {
+        this.sidebarValue = $event;
+    }
+
+    contraerSidebar() {
+        this.eventoSidebar.emit(this.sidebarValue);
+        this.sidebarValue = 10;
+    }
+}
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.html b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.html
new file mode 100644
index 000000000..8bc3564bb
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.html
@@ -0,0 +1,36 @@
+<ng-container *ngIf="agenda$ | async as agenda">
+    <plex-options [items]="options">
+
+    </plex-options>
+    <section justify="betweeen" class="w-100 my-4">
+        <plex-button type="info" icon="chevron-left" size="sm"></plex-button>
+        <div class="mx-4 w-100 d-flex justify-content-center">
+
+            <plex-label titulo="{{ agenda.dia}} {{ agenda.fecha }} | {{ agenda.horaInicio }} - {{ agenda.horaFin }} hs."
+                        subtitulo="{{ agenda.tipoPrestaciones }}" icon="account" size="lg" type="info"></plex-label>
+        </div>
+        <plex-button type="info" icon="chevron-right" size="sm"></plex-button>
+    </section>
+    <hr>
+
+    <plex-list>
+        <plex-heading>
+            <b label></b>
+            <b label></b>
+            <b label></b>
+            <b label></b>
+        </plex-heading>
+        <plex-item *ngFor="let turno of agenda.turnos">
+            <plex-label titulo="{{ turno.horaInicio }}" subtitulo="{{ turno.prestacion}} {{ turno.profesional }}">
+            </plex-label>
+            <plex-label titulo="Paciente" subtitulo="{{ turno.paciente }} {{ turno.dni }}"></plex-label>
+            <plex-label titulo="Nro. Carpeta" subtitulo="{{ turno.carpeta }} {{ turno.efector }}"></plex-label>
+            <plex-badge type="success">{{ turno.estado }}</plex-badge>
+            <plex-badge type="info">{{ turno.procedencia }}</plex-badge>
+            <plex-badge *ngIf="turno.prioritario == true" type="danger">prioritario</plex-badge>
+            <plex-button size="sm" type="warning" icon="pencil"></plex-button>
+            <plex-button size="sm" type="info" icon="history"></plex-button>
+            <plex-button size="sm" type="success" icon="documento"></plex-button>
+        </plex-item>
+    </plex-list>
+</ng-container>
\ No newline at end of file
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.ts
new file mode 100644
index 000000000..428d50f84
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/detalle-agenda/detalle-agenda.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { AgendaService } from './../../../service/agenda.service';
+import { Agenda } from './../../../service/agenda';
+
+@Component({
+    selector: 'plex-detalle-agenda',
+    templateUrl: './detalle-agenda.component.html',
+})
+export class DetalleAgendaComponent implements OnInit {
+
+    public listadoAgenda: Agenda[];
+    agenda$: Observable<Agenda>;
+
+    public options = [
+        {
+            label: 'turnos vigentes',
+            key: '1'
+        },
+        {
+            label: 'historial de turnos',
+            key: '2'
+        },
+    ];
+
+
+    constructor(
+        private agendaService: AgendaService,
+        private route: ActivatedRoute,
+        private router: Router,
+    ) { }
+
+    ngOnInit() {
+
+        // mostrar detalle agenda
+        this.agenda$ = this.route.paramMap.pipe(
+            switchMap((params: ParamMap) =>
+                this.agendaService.getAgenda(params.get('id')))
+        );
+    }
+
+    gotoAgendas(agenda: Agenda) {
+        const agendaId = agenda ? agenda.id : null;
+        this.router.navigate(['/punto-inicio-sidebar', { id: agendaId }]);
+    }
+}
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.html b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.html
new file mode 100644
index 000000000..e49534290
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.html
@@ -0,0 +1,14 @@
+<plex-wrapper>
+    <plex-datetime label="Ingrese la fecha" [(ngModel)]="tModel.fechaHora" name="fechaHora" required>
+    </plex-datetime>
+    <plex-select grow="3" [(ngModel)]="modelo1.select" [data]="opciones" label-field="nombre + ' (' + continente + ')'"
+                 label="Seleccione una prestación">
+    </plex-select>
+    <plex-text label="Buscar paciente" [(ngModel)]="templateModel2.nombre" name="nombre">
+    </plex-text>
+</plex-wrapper>
+<section justify="center" class="align-items-center h-50">
+    <plex-label size="xl" type="info" titulo="Busca y selecciona un paciente"
+                subtitulo="prdras ver detalles del registro" icon="magnify" direction="column">
+    </plex-label>
+</section>
\ No newline at end of file
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.ts
new file mode 100644
index 000000000..91d0b221b
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio-sidebar/punto-inicio-sidebar.component.ts
@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { AgendaService } from './../../service/agenda.service';
+import { Agenda } from './../../service/agenda';
+import { DropdownItem } from '../../../../../lib/dropdown/dropdown-item.inteface';
+
+@Component({
+    selector: 'plex-punto-inicio-sidebar',
+    templateUrl: './punto-inicio-sidebar.component.html',
+})
+export class PuntoInicioSidebarComponent implements OnInit {
+
+    public listadoAgenda: Agenda[];
+    public items: DropdownItem[];
+    public modelo1;
+    public templateModel2;
+    public opciones: any[];
+    public tModel;
+    agenda$: Observable<Agenda>;
+
+    constructor(
+        private agendaService: AgendaService,
+        private route: ActivatedRoute,
+        private router: Router,
+    ) { }
+
+    ngOnInit() {
+        // plex-dropdown
+        this.items = [
+            {
+                label: 'opcion 1',
+                icon: 'star',
+                route: 'https://ui.andes.gob.ar',
+                handler: (() => {
+                    alert('Este es un handler');
+                })
+            }
+        ];
+
+        // plex-datetime
+        this.tModel = {
+            fechaHora: null,
+            fecha: null,
+            hora: null,
+            horados: null,
+            disabled: false,
+            min: new Date(1970, 0, 1),
+            minHora: moment().add(30, 'minutes'),
+            maxHora: moment().add(180, 'minutes'),
+            fechaDecounce: new Date(1970, 0, 1),
+        };
+
+
+        // plex-select
+        this.opciones = [{
+            id: 1,
+            nombre: 'Argentina',
+            continente: 'Latinoamerica',
+        },
+        {
+            id: 2,
+            nombre: 'Brasil',
+            continente: 'Latinoamerica',
+        },
+        {
+            id: 3,
+            nombre: 'Hospital Provincial Neuquen "Dr. Eduardo Castro Rendón"',
+            continente: 'Latinoamerica',
+        }];
+
+        // plex-text
+        this.templateModel2 = { nombre: null, min: 10, max: 15 };
+    }
+}
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.html b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
new file mode 100644
index 000000000..733aeb77b
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.html
@@ -0,0 +1,114 @@
+<plex-layout main="{{ sidebarValue }}" resizable="true" [min]="2" [max]="6" [steps]="2">
+    <plex-layout-main>
+        <plex-title titulo="punto de inicio rup" main></plex-title>
+        <!-- Mininav -->
+        <plex-mininav>
+            <ul sup>
+                <li plex-mininav-item *ngFor="let item of menu$ | async" target="{{ item.target }}"
+                    titulo="{{ item.nombre }}" icono="{{ item.icono }}">
+                </li>
+            </ul>
+            <ul inf>
+                <li plex-mininav-item titulo="Navegar por ruteo" link="templates" icono="logo-youtube">
+                </li>
+            </ul>
+        </plex-mininav>
+
+        <plex-grid cols="3" class="align-self-start mr-2">
+            <!-- Teleprestaciones -->
+            <section span="1" class="align-self-start mr-2">
+                <plex-teleprestaciones>
+
+                </plex-teleprestaciones>
+            </section>
+
+            <!-- Listado -->
+            <section span="2" id="ancla">
+                <plex-punto-inicio-main (eventoSidebar)="recibirSidebar($event)">
+                </plex-punto-inicio-main>
+            </section>
+        </plex-grid>
+
+    </plex-layout-main>
+    <plex-layout-sidebar type="invert">
+
+        <plex-title titulo="Buscar" main>
+            <plex-button type="danger" icon="close" size="sm" (click)="contraerSidebar()"></plex-button>
+        </plex-title>
+
+        <plex-mininav>
+            <ul sup>
+                <li plex-mininav-item *ngFor="let item of menu$ | async" target="{{ item.target }}"
+                    titulo="{{ item.nombre }}" tooltip="{{ item.target }}" icono="{{ item.icono }}">
+                </li>
+            </ul>
+            <ul inf>
+                <li plex-mininav-item titulo="" link="accordion" titulo="Navegar por ruteo" icono="logo-youtube">
+                </li>
+            </ul>
+        </plex-mininav>
+
+        <plex-title anchor="miHuds" size="sm" titulo="miHuds"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title size="sm" titulo="subtitulo 2"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title size="sm" titulo="subtitulo 1"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title size="sm" titulo="subtitulo 2"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title anchor="misConsultas" size="sm" titulo="id=misConsultas"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title size="sm" titulo="subtitulo 1"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+        <plex-title size="sm" titulo="subtitulo 2"></plex-title>
+        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,</p>
+
+        <ng-container *ngIf="sidebarValue === 10">
+            <plex-wrapper>
+                <plex-datetime label="Ingrese la fecha" [(ngModel)]="tModel.fechaHora" name="fechaHora" required>
+                </plex-datetime>
+                <plex-select grow="3" [(ngModel)]="modelo1.select" [data]="opciones"
+                             label-field="nombre + ' (' + continente + ')'" label="Seleccione una prestación">
+                </plex-select>
+                <plex-text label="Buscar paciente" [(ngModel)]="templateModel2.nombre" name="nombre">
+                </plex-text>
+            </plex-wrapper>
+            <section aligned="center" vHeight="30">
+                <plex-label size="xl" type="info" titulo="Busca y selecciona un paciente"
+                            subtitulo="prdras ver detalles del registro" icon="magnify" direction="column">
+                </plex-label>
+            </section>
+        </ng-container>
+        <ng-container *ngIf="sidebarValue === 8">
+            <router-outlet></router-outlet>
+        </ng-container>
+    </plex-layout-sidebar>
+</plex-layout>
\ No newline at end of file
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.scss b/src/demo/app/templates/punto-inicio/punto-inicio.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/demo/app/templates/punto-inicio/punto-inicio.component.ts b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
new file mode 100644
index 000000000..20e44372f
--- /dev/null
+++ b/src/demo/app/templates/punto-inicio/punto-inicio.component.ts
@@ -0,0 +1,131 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+
+// Servicios y modelo
+import { Agenda } from '../service/agenda';
+import { MenuService } from '../service/menu.service';
+import { Menu } from '../service/menu';
+import { Paciente } from '../service/paciente';
+import { Plex } from './../../../../lib/core/service';
+import { EventEmitter, Output } from '@angular/core';
+import { Solicitud } from '../service/solicitud';
+import { SolicitudService } from '../service/solicitud.service';
+
+@Component({
+    selector: 'plex-punto-inicio',
+    templateUrl: './punto-inicio.component.html',
+    styleUrls: ['./punto-inicio.component.scss']
+})
+
+export class PuntoInicioComponent implements OnInit {
+
+    sidebarValue = 9;
+    @Output() eventoSidebar = new EventEmitter<number>();
+
+    vHeight = 200;
+    color = '#92278e';
+
+    items = [
+        {
+            opcion: 'paciente fuera de agenda',
+        },
+        {
+            opcion: 'paciente autocitado',
+        },
+    ];
+
+    public tModel: any;
+    public opciones: any[];
+    public modelo1 = { select: null };
+    public modelo2 = {
+        select: null,
+        soloLectura: false,
+        selectMultiple: null
+    };
+    // public prueba = '';
+    public templateModel2: any;
+    public modelo: any;
+
+    public showModal = false;
+
+    // public listadoPaciente: Paciente[];
+    pacientes$: Observable<Paciente[]>;
+    agendas$: Observable<Agenda[]>;
+    solicitudes$: Observable<Solicitud[]>;
+    menu$: Observable<Menu[]>;
+    foco = 'main';
+    public prueba = '';
+    public cambio = '';
+
+    constructor(
+        private menuService: MenuService,
+        private solicitudService: SolicitudService,
+        private plex: Plex,
+    ) { }
+
+    ngOnInit() {
+        // plex-datetime
+        this.tModel = {
+            fechaHora: null,
+            fecha: null,
+            hora: null,
+            horados: null,
+            disabled: false,
+            min: new Date(1970, 0, 1),
+            minHora: moment().add(30, 'minutes'),
+            maxHora: moment().add(180, 'minutes'),
+            fechaDecounce: new Date(1970, 0, 1),
+        };
+        this.menu$ = this.menuService.getMenues();
+        this.solicitudes$ = this.solicitudService.getSolicitudes();
+
+        // plex-float
+        this.tModel = { valor: null };
+
+        // plex-select
+        this.opciones = [{
+            id: 1,
+            nombre: 'Consulta de medicina general',
+            continente: 'Prestación',
+        },
+        {
+            id: 2,
+            nombre: 'Exámen médico del adulto',
+            continente: 'Prestación',
+        },
+        {
+            id: 3,
+            nombre: 'Consulta de niño sano',
+            continente: 'Prestación',
+        }];
+
+        this.modelo1.select = this.modelo2.select = this.opciones[1];
+
+        // plex-text
+        this.templateModel2 = { nombre: null, min: 10, max: 15 };
+
+        // plex-bool
+        this.modelo = { checkbox: false, slide: false };
+    }
+
+    updateMaxHora() {
+        this.tModel.minHora = moment().add(30, 'minutes').add(1, 'days');
+    }
+
+    horaPlus() {
+        return moment(this.tModel.hora).add(30, 'minutes');
+    }
+
+    onChange() {
+        this.plex.info('success', 'Este cartel se demoro un segundo en aparecer después de escribir.');
+    }
+
+    recibirSidebar($event) {
+        this.sidebarValue = $event;
+    }
+
+    contraerSidebar() {
+        this.eventoSidebar.emit(this.sidebarValue);
+        this.sidebarValue = 10;
+    }
+}
diff --git a/src/demo/app/templates/service/agenda.service.ts b/src/demo/app/templates/service/agenda.service.ts
new file mode 100644
index 000000000..08a76e7b0
--- /dev/null
+++ b/src/demo/app/templates/service/agenda.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Agenda } from './agenda';
+import { AGENDAS } from './mock-agendas';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable()
+
+export class AgendaService {
+
+    constructor() {
+    }
+
+    getAgendas(): Observable<Agenda[]> {
+        return of(AGENDAS);
+    }
+
+    getAgenda(id: number | string) {
+        return this.getAgendas().pipe(
+            map((agendas: Agenda[]) => agendas.find(agenda => agenda.id === +id))
+        );
+    }
+}
diff --git a/src/demo/app/templates/service/agenda.ts b/src/demo/app/templates/service/agenda.ts
new file mode 100644
index 000000000..c6df6648e
--- /dev/null
+++ b/src/demo/app/templates/service/agenda.ts
@@ -0,0 +1,93 @@
+export class Agenda {
+    id: number;
+    tipoPrestaciones: string;
+    profesionales: [{
+        id: string,
+        nombre: string,
+        apellido: string
+    }];
+    paciente: [{
+        id: string,
+        nombre: string,
+        apellido: string
+    }];
+    turnos: [{
+        horaInicio: string;
+        estado: string;
+        asistencia: string;
+        prestacion: string;
+        profesional: string;
+        nota: string;
+        procedencia: string;
+        prioritario: boolean;
+        paciente: string;
+        dni: number,
+        carpeta: string;
+        efector: string
+    },
+    ];
+    organizacion: {
+        id: string,
+        nombre: string
+    };
+    espacioFisico: {
+        id: string,
+        nombre: string,
+        servicio: {
+            id: string,
+            nombre: string
+        };
+        sector: {
+            id: string,
+            nombre: string
+        };
+    };
+    otroEspacioFisico: string;
+    fecha: string;
+    dia: string;
+    horaInicio: string;
+    horaFin: string;
+    intercalar: boolean;
+    bloques: [
+        {
+            id: string;
+            horaInicio: number;
+            horaFin: number;
+            cantidadTurnos: number;
+            duracionTurno: number;
+            descripcion: string;
+            tipoPrestaciones: string;
+            accesoDirectoDelDia: number;
+            accesoDirectoProgramado: number;
+            reservadoGestion: number;
+            reservadoProfesional: number;
+            restantesDelDia: number;
+            restantesProgramados: number;
+            restantesGestion: number;
+            restantesProfesional: number;
+            pacienteSimultaneos: boolean;
+            cantidadSimultaneos: number;
+            citarPorBloque: boolean;
+            cantidadBloque: number;
+            turnos: number;
+        }
+    ];
+    estado: string;
+    prePausada: string;
+    sobreturnos: string;
+    turnosDisponibles: number;
+    turnosRestantesDelDia: number;
+    turnosRestantesProgramados: number;
+    turnosRestantesGestion: number;
+    turnosRestantesProfesional: number;
+    estadosAgendas: string;
+    nota: string;
+    nominalizada: boolean;
+    dinamica: boolean;
+    cupo: number;
+    avisos: [{
+        profenionalId: string,
+        estado: string,
+        fecha: string
+    }];
+}
diff --git a/src/demo/app/templates/service/menu.service.ts b/src/demo/app/templates/service/menu.service.ts
new file mode 100644
index 000000000..158eb992f
--- /dev/null
+++ b/src/demo/app/templates/service/menu.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Menu } from './menu';
+import { MENU } from './mock-menu';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable()
+
+export class MenuService {
+
+    constructor() {
+    }
+
+    getMenues(): Observable<Menu[]> {
+        return of(MENU);
+    }
+
+    getMenu(id: number | string) {
+        return this.getMenues().pipe(
+            map((menues: Menu[]) => menues.find(menu => menu.id === +id))
+        );
+    }
+}
diff --git a/src/demo/app/templates/service/menu.ts b/src/demo/app/templates/service/menu.ts
new file mode 100644
index 000000000..7e4c60cc3
--- /dev/null
+++ b/src/demo/app/templates/service/menu.ts
@@ -0,0 +1,11 @@
+export class Menu {
+    id: number;
+    nombre: string;
+    tipo: string;
+    semanticTag: String;
+    icono: string;
+    color: string;
+    target: string;
+    link: string;
+    outlet: string;
+}
diff --git a/src/demo/app/templates/service/mock-agendas.ts b/src/demo/app/templates/service/mock-agendas.ts
new file mode 100644
index 000000000..6dc0a4fe0
--- /dev/null
+++ b/src/demo/app/templates/service/mock-agendas.ts
@@ -0,0 +1,839 @@
+import { Agenda } from './agenda';
+
+export const AGENDAS: Agenda[] = [
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1513,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        // profesionales: IProfesional[],
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [
+            {
+                horaInicio: '10:30 hs.',
+                estado: 'en ejecución',
+                asistencia: 'asistió',
+                prestacion: 'Exámen médico del adulto',
+                profesional: 'Molinari, Juan Martin',
+                nota: 'Esta es una nota de prueba',
+                procedencia: 'Autocitado',
+                prioritario: true,
+                paciente: 'Regueiro, María Ines',
+                dni: 31350247,
+                carpeta: '4953242',
+                efector: 'Hospital Provincial Neuquén',
+            },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20,
+        turnosRestantesDelDia: 12,
+        turnosRestantesProgramados: 3,
+        turnosRestantesGestion: 2,
+        turnosRestantesProfesional: 3,
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    },
+    {
+        id: 1527,
+        tipoPrestaciones: 'Exámen médico del adulto',
+        profesionales: [{
+            id: '5u32402r',
+            nombre: 'Carlos Daniel',
+            apellido: 'Ventura'
+        }],
+        paciente: [{
+            id: '2ebqd',
+            nombre: 'Fernanda Gabriela',
+            apellido: 'Saralero Mercusi',
+        }],
+        turnos: [{
+            horaInicio: '10:30 hs.',
+            estado: 'validada',
+            asistencia: 'asistió',
+            prestacion: 'Exámen médico del adulto',
+            profesional: 'Molinari, Juan Martin',
+            nota: 'string',
+            procedencia: 'autocitado',
+            prioritario: true,
+            paciente: 'string',
+            dni: 31350247,
+            carpeta: '4953242',
+            efector: 'Hospital Heller',
+        },
+        ],
+        organizacion: {
+            id: '56u532o',
+            nombre: 'Hospital Provincial '
+        },
+        espacioFisico: {
+            id: 'String',
+            nombre: 'String',
+            servicio: {
+                id: 'String',
+                nombre: 'String'
+            },
+            sector: {
+                id: 'String',
+                nombre: 'String'
+            },
+        },
+        otroEspacioFisico: 'String',
+        fecha: '27/11/20',
+        dia: 'VIERNES',
+        horaInicio: '10:00',
+        horaFin: '13:00',
+        intercalar: true,
+        bloques: [{
+            id: 'sdad',
+            horaInicio: 10,
+            horaFin: 13,
+            cantidadTurnos: 15,
+            duracionTurno: 20,
+            descripcion: 'Esta es una descripcion del bloque de turnos',
+            tipoPrestaciones: 'Consulta de niño sano',
+            accesoDirectoDelDia: 12,
+            accesoDirectoProgramado: 8,
+            reservadoGestion: 4,
+            reservadoProfesional: 2,
+            restantesDelDia: 5,
+            restantesProgramados: 3,
+            restantesGestion: 1,
+            restantesProfesional: 2,
+            pacienteSimultaneos: true,
+            cantidadSimultaneos: 8,
+            citarPorBloque: false,
+            cantidadBloque: 3,
+            turnos: 25,
+        }],
+        estado: 'publicada',
+        prePausada: '',
+        sobreturnos: 'Sin sobreturnos',
+        turnosDisponibles: 20, // Virtual
+        turnosRestantesDelDia: 12, // Virtual
+        turnosRestantesProgramados: 3, // Virtual
+        turnosRestantesGestion: 2, // Virtual
+        turnosRestantesProfesional: 3, // Virtual
+        estadosAgendas: 'disponible',
+        nota: 'Esta es una nota de prueba de la agenda',
+        nominalizada: true,
+        dinamica: true,
+        cupo: 20,
+        avisos: [{
+            profenionalId: '5i324wef',
+            estado: 'String',
+            fecha: '27/11/20'
+        }],
+    }
+];
diff --git a/src/demo/app/templates/service/mock-menu.ts b/src/demo/app/templates/service/mock-menu.ts
new file mode 100644
index 000000000..8e1863a10
--- /dev/null
+++ b/src/demo/app/templates/service/mock-menu.ts
@@ -0,0 +1,81 @@
+import { Menu } from './menu';
+
+export const MENU: Menu[] = [
+    {
+        id: 1,
+        nombre: 'huds',
+        tipo: 'info',
+        semanticTag: 'solicitud',
+        icono: 'historial',
+        target: 'miHuds',
+        link: 'miHuds',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 2,
+        nombre: 'consultas',
+        tipo: 'custom',
+        semanticTag: 'solicitud',
+        icono: 'mano-corazon',
+        target: 'misConsultas',
+        link: 'misConsultas',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 11,
+        nombre: 'documentos',
+        tipo: 'info',
+        semanticTag: 'registro',
+        icono: 'documento-cursor',
+        target: 'misDocumentos',
+        link: 'misDocumentos',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 12,
+        nombre: 'turnos',
+        tipo: 'info',
+        semanticTag: 'solicitud',
+        icono: 'turno-bold',
+        target: 'misTurnos',
+        link: 'misTurnos',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 13,
+        nombre: 'mensajes',
+        tipo: 'info',
+        semanticTag: 'otro',
+        icono: 'mail',
+        target: 'misMensajes',
+        link: 'misMensajes',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 14,
+        nombre: 'organizaciones',
+        tipo: 'info',
+        semanticTag: 'solicitud',
+        icono: 'hospital',
+        target: 'misOrganizaciones',
+        link: 'misOrganizaciones',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+    {
+        id: 9,
+        nombre: 'equipo de salud',
+        tipo: 'info',
+        semanticTag: 'solicitud',
+        icono: 'medico',
+        target: 'miEquipo',
+        link: 'miEquipo',
+        color: '#0070cc',
+        outlet: 'listado',
+    },
+];
diff --git a/src/demo/app/templates/service/mock-solicitudes.ts b/src/demo/app/templates/service/mock-solicitudes.ts
new file mode 100644
index 000000000..dcd6f1d23
--- /dev/null
+++ b/src/demo/app/templates/service/mock-solicitudes.ts
@@ -0,0 +1,192 @@
+import { Solicitud } from './solicitud';
+
+export const SOLICITUDES: Solicitud[] = [
+    {
+        id: 432,
+        fecha: '15/03/2021',
+        servicio: 'Servicio de kinesiología',
+        unidadOrganizativa: 'Hueml',
+        organizacion: 'Hospital Provincial Neuquén Dr. Eduardo Castro Rendón',
+        organizacionId: 1,
+        paciente:
+        {
+            id: 6,
+            documento: '38906735',
+            cuil: '20-38906735-5',
+            activo: true,
+            estado: 'temporal',
+            nombre: 'Marco Savino',
+            apellido: 'Santarelli',
+            nombreCompleto: '',
+            alias: '',
+            contacto: 2993420134,
+            sexo: 'masculino',
+            genero: 'masculino',
+            fechaNacimiento: '20/09/1957',
+            tipoIdentificacion: '',
+            numeroIdentificacion: '',
+            edad: 63,
+            edadReal: 'null',
+            fechaFallecimiento: null,
+            domicilio: 'Las acacias 410',
+            estadoCivil: undefined,
+            foto: 'https://library.kissclipart.com/20180901/krw/kissclipart-user-thumbnail-clipart-user-lorem-ipsum-is-simply-bfcb758bf53bea22.jpg',
+            relaciones: 'abuelo',
+            financiador: 'ISSN',
+            identificadores: 'null',
+            claveBlocking: 'null',
+            entidadesValidadoras: 'ISSN',
+            scan: 'null',
+            reportarError: false,
+            notaError: '',
+        },
+        profesional: 'Giardino, Walter',
+        prestacion: 'Consulta de neurología',
+        organizacionOrigen: 'Centro de Salud Las Lajas',
+        profesionalOrigen: 'Barilari, Adrián',
+        prestacionOrigen: 'Consulta general de medicina',
+        estado: 'en curso',
+        registros: false,
+    },
+    {
+        id: 432,
+        fecha: '15/03/2021',
+        servicio: 'Servicio de kinesiología',
+        unidadOrganizativa: 'Huemul',
+        organizacion: 'Hospital Provincial Neuquén Dr. Eduardo Castro Rendón',
+        organizacionId: 1,
+        paciente:
+        {
+            id: 6,
+            documento: '38906735',
+            cuil: '20-38906735-5',
+            activo: true,
+            estado: 'temporal',
+            nombre: 'Marco Savino',
+            apellido: 'Santarelli',
+            nombreCompleto: '',
+            alias: '',
+            contacto: 2993420134,
+            sexo: 'masculino',
+            genero: 'masculino',
+            fechaNacimiento: '20/09/1957',
+            tipoIdentificacion: '',
+            numeroIdentificacion: '',
+            edad: 63,
+            edadReal: 'null',
+            fechaFallecimiento: null,
+            domicilio: 'Las acacias 410',
+            estadoCivil: undefined,
+            foto: 'https://library.kissclipart.com/20180901/krw/kissclipart-user-thumbnail-clipart-user-lorem-ipsum-is-simply-bfcb758bf53bea22.jpg',
+            relaciones: 'abuelo',
+            financiador: 'ISSN',
+            identificadores: 'null',
+            claveBlocking: 'null',
+            entidadesValidadoras: 'ISSN',
+            scan: 'null',
+            reportarError: false,
+            notaError: '',
+        },
+        profesional: 'Giardino, Walter',
+        prestacion: 'Consulta de neurología',
+        organizacionOrigen: 'Centro de Salud Las Lajas',
+        profesionalOrigen: 'Barilari, Adrián',
+        prestacionOrigen: 'Consulta general de medicina',
+        estado: 'en curso',
+        registros: false,
+    },
+    {
+        id: 432,
+        fecha: '15/03/2021',
+        servicio: 'Servicio de kinesiología',
+        unidadOrganizativa: 'Huemul',
+        organizacion: 'Hospital Provincial Neuquén Dr. Eduardo Castro Rendón',
+        organizacionId: 1,
+        paciente:
+        {
+            id: 6,
+            documento: '38906735',
+            cuil: '20-38906735-5',
+            activo: true,
+            estado: 'temporal',
+            nombre: 'Marco Savino',
+            apellido: 'Santarelli',
+            nombreCompleto: '',
+            alias: '',
+            contacto: 2993420134,
+            sexo: 'masculino',
+            genero: 'masculino',
+            fechaNacimiento: '20/09/1957',
+            tipoIdentificacion: '',
+            numeroIdentificacion: '',
+            edad: 63,
+            edadReal: 'null',
+            fechaFallecimiento: null,
+            domicilio: 'Las acacias 410',
+            estadoCivil: undefined,
+            foto: 'https://library.kissclipart.com/20180901/krw/kissclipart-user-thumbnail-clipart-user-lorem-ipsum-is-simply-bfcb758bf53bea22.jpg',
+            relaciones: 'abuelo',
+            financiador: 'ISSN',
+            identificadores: 'null',
+            claveBlocking: 'null',
+            entidadesValidadoras: 'ISSN',
+            scan: 'null',
+            reportarError: false,
+            notaError: '',
+        },
+        profesional: 'Giardino, Walter',
+        prestacion: 'Consulta de neurología',
+        organizacionOrigen: 'Centro de Salud Las Lajas',
+        profesionalOrigen: 'Barilari, Adrián',
+        prestacionOrigen: 'Consulta general de medicina',
+        estado: 'en curso',
+        registros: false,
+    },
+    {
+        id: 432,
+        fecha: '15/03/2021',
+        servicio: 'Servicio de kinesiología',
+        unidadOrganizativa: 'Huemul',
+        organizacion: 'Hospital Provincial Neuquén Dr. Eduardo Castro Rendón',
+        organizacionId: 1,
+        paciente:
+        {
+            id: 6,
+            documento: '38906735',
+            cuil: '20-38906735-5',
+            activo: true,
+            estado: 'temporal',
+            nombre: 'Marco Savino',
+            apellido: 'Santarelli',
+            nombreCompleto: '',
+            alias: '',
+            contacto: 2993420134,
+            sexo: 'masculino',
+            genero: 'masculino',
+            fechaNacimiento: '20/09/1957',
+            tipoIdentificacion: '',
+            numeroIdentificacion: '',
+            edad: 63,
+            edadReal: 'null',
+            fechaFallecimiento: null,
+            domicilio: 'Las acacias 410',
+            estadoCivil: undefined,
+            foto: 'https://library.kissclipart.com/20180901/krw/kissclipart-user-thumbnail-clipart-user-lorem-ipsum-is-simply-bfcb758bf53bea22.jpg',
+            relaciones: 'abuelo',
+            financiador: 'ISSN',
+            identificadores: 'null',
+            claveBlocking: 'null',
+            entidadesValidadoras: 'ISSN',
+            scan: 'null',
+            reportarError: false,
+            notaError: '',
+        },
+        profesional: 'Giardino, Walter',
+        prestacion: 'Consulta de neurología',
+        organizacionOrigen: 'Centro de Salud Las Lajas',
+        profesionalOrigen: 'Barilari, Adrián',
+        prestacionOrigen: 'Consulta general de medicina',
+        estado: 'en curso',
+        registros: false,
+    },
+];
diff --git a/src/demo/app/templates/service/solicitud.service.ts b/src/demo/app/templates/service/solicitud.service.ts
new file mode 100644
index 000000000..8d36b5ae7
--- /dev/null
+++ b/src/demo/app/templates/service/solicitud.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Solicitud } from './solicitud';
+import { SOLICITUDES } from './mock-solicitudes';
+import { Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable()
+
+export class SolicitudService {
+
+    constructor() {
+    }
+
+    getSolicitudes(): Observable<Solicitud[]> {
+        return of(SOLICITUDES);
+    }
+
+    getSolicitud(id: number | string) {
+        return this.getSolicitudes().pipe(
+            map((solicitudes: Solicitud[]) => solicitudes.find(solicitud => solicitud.id === +id))
+        );
+    }
+}
diff --git a/src/demo/app/templates/service/solicitud.ts b/src/demo/app/templates/service/solicitud.ts
new file mode 100644
index 000000000..de046b92a
--- /dev/null
+++ b/src/demo/app/templates/service/solicitud.ts
@@ -0,0 +1,18 @@
+import { Paciente } from './paciente';
+
+export class Solicitud {
+    id: Number;
+    fecha: string;
+    servicio: string;
+    unidadOrganizativa: string;
+    organizacion: string;
+    organizacionId: number;
+    paciente: Paciente;
+    profesional: string;
+    prestacion: String;
+    organizacionOrigen: string;
+    profesionalOrigen: string;
+    prestacionOrigen: String;
+    estado: String;
+    registros: Boolean;
+}
diff --git a/src/demo/app/templates/service/turno.ts b/src/demo/app/templates/service/turno.ts
new file mode 100644
index 000000000..bafbe9ee1
--- /dev/null
+++ b/src/demo/app/templates/service/turno.ts
@@ -0,0 +1,53 @@
+export interface Turno {
+    id: string;
+    horaInicio: Date;
+    estado: string;
+    asistencia: string;
+    paciente: {
+        id: string,
+        nombre: string,
+        apellido: string,
+        alias: string,
+        documento: string,
+        fechaNacimiento: Date,
+        telefono: string,
+        sexo: string,
+        carpetaEfectores: [{
+            organizacion: string,
+            nroCarpeta: string
+        }],
+        obraSocial: string,
+
+    };
+    tipoPrestacion: string;
+    idPrestacionPaciente: string;
+    tipoTurno: string;
+    reasignado: {
+        anterior: {
+            idAgenda: string,
+            idBloque: string,
+            idTurno: string
+        }
+        siguiente: {
+            idAgenda: string,
+            idBloque: string,
+            idTurno: string
+        }
+    };
+    carpetaEfectores?: [{
+        organizacion: {
+            id: string,
+            nombre: string
+        },
+        nroCarpeta: string
+    }];
+    nota: string;
+    motivoSuspension: {
+        type: string,
+        enum: ['edilicia', 'profesional', 'organizacion', 'agendaSuspendida']
+    };
+    avisoSuspension: {
+        type: string,
+        enum: ['pendiente', 'no enviado', 'enviado', 'fallido']
+    };
+}
diff --git a/src/demo/app/templates/template-inicio.html b/src/demo/app/templates/template-inicio.html
index 970470f44..b905ab745 100644
--- a/src/demo/app/templates/template-inicio.html
+++ b/src/demo/app/templates/template-inicio.html
@@ -5,17 +5,19 @@
         </section>
     </plex-layout-main>
     <plex-layout-sidebar type="invert">
-
-        <plex-grid class="h-100" justify="center" type="full" cols="2" size="lg">
-            <plex-card *ngFor="let temp of templates" mode="{{ temp.mode }}" selectable="true" type="{{ temp.type }}"
-                       (click)="irTemplate(temp.url)" aligned="center" size="md">
-                <plex-label direction="column" size="lg" titulo="{{ temp.titulo }}" subtitulo="{{ temp.subtitulo }}"
-                            icon="{{ temp.icon }}">
-                </plex-label>
-                <plex-button class="mt-4" type="info" size="md" label="Navegar template" routerLink="{{ temp.url }}">
-                </plex-button>
-            </plex-card>
-        </plex-grid>
+        <section class="h-75" align="center">
+            <plex-grid class="h-25" type="full" size="lg">
+                <plex-card *ngFor="let temp of templates" mode="{{ temp.mode }}" selectable="true"
+                           type="{{ temp.type }}" (click)="irTemplate(temp.url)" aligned="center" size="md">
+                    <plex-label direction="column" size="lg" titulo="{{ temp.titulo }}" subtitulo="{{ temp.subtitulo }}"
+                                icon="{{ temp.icon }}">
+                    </plex-label>
+                    <plex-button class="mt-4" type="info" size="md" label="Navegar template"
+                                 routerLink="{{ temp.url }}">
+                    </plex-button>
+                </plex-card>
+            </plex-grid>
+        </section>
 
     </plex-layout-sidebar>
 </plex-layout>
\ No newline at end of file
diff --git a/src/demo/app/templates/template-inicio.ts b/src/demo/app/templates/template-inicio.ts
index 41bd552a9..ce0fca917 100644
--- a/src/demo/app/templates/template-inicio.ts
+++ b/src/demo/app/templates/template-inicio.ts
@@ -37,6 +37,15 @@ export class TemplateInicioComponent implements OnInit {
             icon: 'view-day',
             selected: false,
         },
+        {
+            titulo: 'Template puntos de inicio',
+            subtitulo: 'Agrupamiento de información en acordiones',
+            mode: 'filled',
+            type: 'dark',
+            url: 'punto-inicio',
+            icon: 'adjust',
+            selected: false,
+        },
     ];
 
     constructor(private router: Router, private route: ActivatedRoute) {
diff --git a/src/demo/styles.scss b/src/demo/styles.scss
index a6f600982..d39b61c42 100644
--- a/src/demo/styles.scss
+++ b/src/demo/styles.scss
@@ -2,3 +2,10 @@ $typoPRO-font-path: '../lib/css/fonts/';
 @import '../lib/styles.scss';
 // Templates
 @import '../demo/app/templates/templates.scss';
+
+div[slider] {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    height: 300px;
+    width: 30vw;
+}
\ No newline at end of file
diff --git a/src/lib/css/layout.scss b/src/lib/css/layout.scss
index c9cc05e03..653927c23 100644
--- a/src/lib/css/layout.scss
+++ b/src/lib/css/layout.scss
@@ -66,6 +66,46 @@ plex-layout {
         }
     }
 
+    // mininav
+    plex-layout-main {
+        div.plex-box-content {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows: min-content 1fr;
+            grid-gap: .5rem;
+    
+            > plex-mininav {
+                grid-column: 1;
+                grid-row: 2 / -1;
+            }
+            
+            div.plex-content {
+                grid-column: 2;
+                grid-row: 1 / -1;
+            }
+        }
+    }
+
+
+    plex-layout-sidebar {        
+        div.plex-box-content {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows: min-content 1fr;
+            grid-gap: .5rem;
+
+            > plex-mininav {
+                grid-column: 1;
+                grid-row: 2 / -1;
+            }
+    
+            div.plex-content {
+                grid-column: 2;
+                grid-row: 1 / -1;
+            }
+        }
+    }
+
     &[resizable="true"] > section {
         > div.row {
             > div[class*="col-"] {
diff --git a/src/lib/css/plex-accordion.scss b/src/lib/css/plex-accordion.scss
index 33d7c51f7..c832679c0 100644
--- a/src/lib/css/plex-accordion.scss
+++ b/src/lib/css/plex-accordion.scss
@@ -32,7 +32,7 @@ plex-accordion {
   
   [plex-accordion-title] {
     width: 100%;
-    display: flex;
+    display: inline-flex;
     justify-content: space-between;
     align-items: center;
   }
diff --git a/src/lib/css/plex-mininav.scss b/src/lib/css/plex-mininav.scss
new file mode 100644
index 000000000..4bf210148
--- /dev/null
+++ b/src/lib/css/plex-mininav.scss
@@ -0,0 +1,168 @@
+@import './variables.scss';
+@import './mixins/_contrast.scss';
+    
+// Mixins estados
+@mixin mininavItemHover {
+    &:hover, &.selected {
+        cursor: pointer;
+        //box-shadow: inset 0 0 0 2px var(--color-base)!important;
+        background-color: var(--color-baseDark)!important;
+        filter: brightness(0.85);
+    }
+}
+
+plex-mininav {
+
+    > section {
+        --mininavWidth: 55px;
+        --mininavHeight: 100vh;
+        --border-color: gray;
+        
+        display: flex;
+        flex-direction: column;
+        width: var(--mininavWidth);
+        height: var(--mininavHeight);
+        background-color: var(--nav-color);
+        transition: width 900ms ease;
+        border-right: solid 1px var(--border-color);
+        color: inherit;
+        
+        nav, ul {
+            display: flex;
+            flex-direction: column;
+        }
+
+        & > nav {
+            --vHeight: 200px;
+            height: calc(100vh - var(--vHeight));
+            position: fixed;
+            overflow-x: hidden;
+
+            plex-label > div.plex-label > div > span {
+                opacity: 0;
+                white-space: pre;
+            }
+        }
+
+        ul {
+            --color-base: var(--nav-color);
+            justify-content: space-between;
+            align-items: flex-start;
+            margin: 0;
+            padding: 0;
+
+            background-color: var(--color-base);
+
+            &[sup] {
+                justify-content: flex-start;
+            }
+            
+            &[inf] {
+                justify-content: flex-end;
+            }
+
+            .plex-mininav-item {
+                 
+                    --color-base: var(--nav-color);
+                    --color-baseDark: var(--nav-color);
+
+                    width: var(--mininavWidth);
+                    padding: .5rem .5rem .5rem 0;
+                    margin: 0;
+                    list-style: none;
+                    background-color: var(--nav-color)!important;
+                    
+                    @include mininavItemHover;
+                }
+             
+        }
+
+        &.expanded {
+            --mininavWidth: 200px;
+
+            width: var(--mininavWidth);
+            > nav {
+                overflow-x: visible;
+                plex-label > div.plex-label > div > span {
+                    opacity: 1;
+                    transition: opacity 900ms ease-in;
+                } 
+                
+                > ul > plex-mininav-item > li {
+                    width: var(--mininavWidth);
+                    transition: width 900ms ease-in;
+                }
+            }
+
+            .nav-resizable-btn-wrapper {
+                left: calc(var(--mininavWidth) + 16px);
+            }
+        }
+
+        /* Botonera sidebar expandible */
+        > .nav-resizable-btn-wrapper {
+            display: none;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            z-index: 1;
+            left: 71px;
+            top: calc(50vh - 5rem);
+            background: $light-grey;
+            box-shadow: 1px 1px 12px 3px $dark-grey;
+            width: 2.5rem;
+            height: 2.5rem;
+            border-top-right-radius: 25%;
+            border-bottom-right-radius: 25%;
+            transform: scale(.6);
+            cursor: col-resize!important;
+            opacity: .4;
+
+            &.resizable {
+                display: flex!important;
+                transition: all 900ms ease;
+            }
+
+            &:hover {
+                opacity: 1;
+
+                hr.divisor {
+                    height: 100vh;
+                    transition: height 1s ease;
+                    border: solid 2px $blue;
+                    left: 0;
+                }
+            }
+            
+            hr.divisor {
+                height: 2.5rem;
+                position: absolute;
+            }
+        }
+    }
+}
+
+plex-layout-sidebar {
+    plex-mininav {
+        > section {
+            --border-color: white;
+            border-right: solid 1px var(--border-color);
+
+            &.expanded {
+                --expandedWidth: 200px;
+    
+                width: var(--expandedWidth);
+                overflow-x: visible;
+    
+                .nav-resizable-btn-wrapper {
+                    left: var(--expandedWidth);
+                }
+            }
+
+            > .nav-resizable-btn-wrapper {
+                left: 58px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/lib/layout/main.component.ts b/src/lib/layout/main.component.ts
index 9d8b3f244..d082aacc6 100644
--- a/src/lib/layout/main.component.ts
+++ b/src/lib/layout/main.component.ts
@@ -6,10 +6,13 @@ import { Component, Input, ElementRef, AfterViewInit, HostListener, Renderer2, V
         <div class="plex-box" [class.plex-box-invert]="type == 'invert'">
             <ng-content select="header"></ng-content>
             <ng-content select="plex-title[main]"></ng-content>
-            <div #content class="plex-box-content" >
-                <ng-content></ng-content>
-            </div>
+            <div #content class="plex-box-content">
+                <ng-content select="plex-mininav"></ng-content>
+                <div class="plex-content">
+                    <ng-content></ng-content>
+                </div>
             </div>
+        </div>
     `,
 })
 export class PlexLayoutMainComponent implements AfterViewInit {
diff --git a/src/lib/layout/sidebar.component.ts b/src/lib/layout/sidebar.component.ts
index 7055935f7..a8686bf74 100644
--- a/src/lib/layout/sidebar.component.ts
+++ b/src/lib/layout/sidebar.component.ts
@@ -1,5 +1,4 @@
-import { Component, Input, ElementRef, HostListener, OnInit, AfterViewInit, ViewChild, Renderer2, ContentChildren, QueryList, ChangeDetectorRef } from '@angular/core';
-import { PlexListComponent } from '../item-list/list.component';
+import { Component, Input, ElementRef, HostListener, OnInit, AfterViewInit, ViewChild, Renderer2, ChangeDetectorRef } from '@angular/core';
 
 @Component({
     selector: 'plex-layout-sidebar',
@@ -8,7 +7,10 @@ import { PlexListComponent } from '../item-list/list.component';
         <ng-content select="header"></ng-content>
         <ng-content select="plex-title[main]"></ng-content>
         <div #content class="plex-box-content">
-            <ng-content></ng-content>
+            <ng-content select="plex-mininav"></ng-content>
+            <div class="plex-content">
+                <ng-content></ng-content>
+            </div>
         </div>
     </div>
     `,
diff --git a/src/lib/mininav/mininav-item/mininav-item.component.ts b/src/lib/mininav/mininav-item/mininav-item.component.ts
new file mode 100644
index 000000000..b9e2f828d
--- /dev/null
+++ b/src/lib/mininav/mininav-item/mininav-item.component.ts
@@ -0,0 +1,44 @@
+import { Component, HostBinding, HostListener, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+    selector: '[plex-mininav-item]',
+    template: `
+        <plex-label titulo="{{ titulo }}" subtitulo="{{ subtitulo }}" icon="{{ icono }}" type="" size="{{ size }}"
+                tooltip="{{ tooltip }}" tooltipPosition="right" case="capitalize">
+        </plex-label>
+    `,
+})
+
+export class PlexMininavItemComponent {
+    @HostBinding('class.plex-mininav-item') estilos = true;
+
+    @Input() titulo;
+    @Input() subtitulo;
+    @Input() size;
+    @Input() color;
+    @Input() icono;
+    @Input() target;
+    @Input() link;
+    @Input() tooltip;
+    @Input() selected = false;
+
+    constructor(
+        private router: Router,
+        private route: ActivatedRoute,
+    ) {
+    }
+
+    @HostListener('click') jumpToId() {
+        if (this.target) {
+            const element = document.querySelector('[anchor="' + this.target + '"]');
+            if (element) {
+                element.scrollIntoView({ behavior: 'smooth' });
+            }
+        }
+
+        if (this.link) {
+            this.router.navigate([this.link]);
+        }
+    }
+}
diff --git a/src/lib/mininav/mininav.component.ts b/src/lib/mininav/mininav.component.ts
new file mode 100644
index 000000000..1fb870e3c
--- /dev/null
+++ b/src/lib/mininav/mininav.component.ts
@@ -0,0 +1,47 @@
+import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core';
+
+@Component({
+    selector: 'plex-mininav',
+    template: `
+        <section #miniNav [class.expanded]="expanded">
+            <div>
+                <ng-content></ng-content>
+            </div>
+            <nav class="plex-mininav-container">
+                <ng-content select="ul[sup]"></ng-content>
+                <ng-content select="ul[inf]"></ng-content>
+            </nav>
+
+            <!-- boton expandirNav -->
+            <span *ngIf="resizable === true" class="nav-resizable-btn-wrapper" [class.resizable]="resizable" draggable="true">
+                <hr class="divisor">
+                <plex-button size="sm" (click)="expandirMininav()" type="link"
+                            icon="{{ expanded ? 'pico-izquierda' : 'pico-derecha' }}">
+                </plex-button>
+            </span>
+        </section>
+    `,
+})
+export class PlexMininavComponent implements OnChanges {
+
+    @Input() color: string;
+    @Input() vHeight;
+    @Input() resizable = true;
+    @Input() expanded: boolean;
+    @Input() mode: 'filled' | 'outlined' = 'filled';
+
+    @ViewChild('miniNav', { static: true }) miniNav: ElementRef;
+
+    constructor() { }
+
+    ngOnChanges() {
+        if (this.color && this.color.length > 0) {
+            this.miniNav.nativeElement.style.setProperty('--nav-color', this.color);
+        }
+    }
+
+    // Resize
+    expandirMininav() {
+        this.expanded = !this.expanded;
+    }
+}
diff --git a/src/lib/module.ts b/src/lib/module.ts
index 8110a1233..8c2a42802 100644
--- a/src/lib/module.ts
+++ b/src/lib/module.ts
@@ -87,6 +87,8 @@ import { PlexTableSortPipe } from './table/table-sort.pipe';
 import { PlexColumnDirective } from './table/columns.directive';
 import { AccordionDirective } from './accordion/pl-accordion.directive';
 import { PlexVisualizadorService } from './core/plex-visualizador.service';
+import { PlexMininavComponent } from './mininav/mininav.component';
+import { PlexMininavItemComponent } from './mininav/mininav-item/mininav-item.component';
 
 @NgModule({
     imports: [
@@ -151,6 +153,8 @@ import { PlexVisualizadorService } from './core/plex-visualizador.service';
         PlexTableSortPipe,
         PlexColumnDirective,
         PlexSliderComponent,
+        PlexMininavComponent,
+        PlexMininavItemComponent,
 
         // Directivas
         AlignDirective,
@@ -229,6 +233,8 @@ import { PlexVisualizadorService } from './core/plex-visualizador.service';
         PlexTableColumnsComponent,
         PlexTableSortPipe,
         PlexSliderComponent,
+        PlexMininavComponent,
+        PlexMininavItemComponent,
 
         // Directivas
         AlignDirective,
diff --git a/src/lib/styles.scss b/src/lib/styles.scss
index f63a4340b..0a3ffe9cf 100644
--- a/src/lib/styles.scss
+++ b/src/lib/styles.scss
@@ -111,3 +111,4 @@ $mdi-font-path: "~@mdi/font/fonts/";
 @import "css/plex-grid";
 @import "css/plex-table";
 @import "css/plex-slider";
+@import "css/plex-mininav";