diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 2387f2c..77dec73 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes, RouterModule, Router, NavigationEnd} from '@angular/router';
 import { ComprobantesComponent } from './comprobantes/comprobantes.component';
 import { AppBotonera } from './botonera/botonera.component';
 import { LoginComponent } from './login/login.component';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 const routes: Routes = [
   { path: 'comprobantes', component: ComprobantesComponent, pathMatch: 'full' },
@@ -15,4 +16,13 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+
+  constructor(private router: Router, private modalService: NgbModal) {
+
+    router.events.subscribe(() => {
+      modalService.dismissAll();
+    })
+  }
+
+}
diff --git a/src/app/comprobantes/comprobantes.component.html b/src/app/comprobantes/comprobantes.component.html
index a038a4f..4cf28e1 100644
--- a/src/app/comprobantes/comprobantes.component.html
+++ b/src/app/comprobantes/comprobantes.component.html
@@ -1,35 +1,28 @@
 <div class="row panel-informativo">
   <div class="col-12">
     <div class="row titulares">
-      <div class="col-12 col-sm numero-pedido text-center text-md-left border border-white align-middle ng-binding ng-scope">
+      <div
+        class="col-12 col-sm numero-pedido text-center text-md-left border border-white align-middle ng-binding ng-scope">
         Recepción
-        <button
-          class="btn btn-xs btn-outline-light float-right"
-          type="button"
-          (click)="busquedaComprobantes()"
-          title="Buscar"
-        >
-        <i class="fa fa-search"></i>
+        <button class="btn btn-xs btn-outline-light float-right" type="button" (click)="busquedaComprobantes()"
+          title="Buscar">
+          <i class="fa fa-search"></i>
         </button>
       </div>
       <div class="col-7 col-sm border border-white align-middle">
         Fecha:
-        <span
-        ng-click="datepickerAbierto = true"
-        >&nbsp;{{ fecha | date: 'dd/MM/yyyy' }}</span>
+        <span ng-click="datepickerAbierto = true">&nbsp;{{ fecha | date: 'dd/MM/yyyy' }}</span>
       </div>
       <div class="col-5 col-sm border border-white border-right-0 align-middle">
         Hora:
-        <span
-        ng-click="datepickerAbierto = true"
-        >&nbsp;{{ fecha | date: 'shortTime'}}</span>
+        <span ng-click="datepickerAbierto = true">&nbsp;{{ fecha | date: 'shortTime'}}</span>
       </div>
     </div>
   </div>
 </div>
 <div class="row">
   <form class="col-12 col-sm-10">
-    <div class="row border">
+    <div class="row border" *ngIf="showCabecera">
       <div class="col-6 col-sm-3 d-flex">
         <strong>Letra Factura:&nbsp;</strong>
         <label>{{cabecera['TIP']}}</label>
@@ -55,82 +48,77 @@
         <label>{{cabecera['NOM']}}</label>
       </div>
     </div>
-    <div class="row border pr-2">
-      <div class="col-4">
-        <button
-        type="button"
-        class="btn btn-outline-secondary btn-sm"
-        [ngClass]="{'active': estadoArticulos == 'pendiente'}"
-        (click)="estadoArticulos = 'pendiente'; paginaActiva = 1; filter = '';">
-        Pendientes&nbsp;({{getCantidadArticulosByEstado('pendiente')}})
+    <div>
+      <button type="button" class="btn btn-dark form-control" (click)="showCabecera = !showCabecera">
+        <i class="fa" [ngClass]="{'fa-chevron-down': !showCabecera, 'fa-chevron-up': showCabecera }"></i>
       </button>
     </div>
-    <div class="col-4">
-      <button
-      type="button"
-      class="btn btn-outline-success btn-sm"
-      [ngClass]="{'active': estadoArticulos == 'aprobado'}"
-      (click)="estadoArticulos = 'aprobado'; paginaActiva = 1; filter = '';">
-      Aprobados&nbsp;({{getCantidadArticulosByEstado('aprobado')}})
-      </button>
+    <div class="row border pr-2">
+      <div class="col-6">
+        <button type="button" class="btn btn-outline-success btn-sm"
+          [ngClass]="{'active': estadoArticulos == 'modificado'}"
+          (click)="estadoArticulos == 'modificado' ?  estadoArticulos = undefined : estadoArticulos = 'modificado'; filter = '';">
+          Modificados&nbsp;({{getCantidadArticulosByEstado('modificado')}})
+        </button>
+      </div>
+      <div class="col-6">
+        <button type="button" class="btn btn-outline-danger btn-sm"
+          [ngClass]="{'active': estadoArticulos == 'rechazado'}"
+          (click)="estadoArticulos == 'rechazado' ?  estadoArticulos = undefined : estadoArticulos = 'rechazado'; filter = '';">
+          Rechazados&nbsp;({{getCantidadArticulosByEstado('rechazado')}})
+        </button>
+      </div>
     </div>
-    <div class="col-4">
-      <button
-      type="button"
-      class="btn btn-outline-danger btn-sm"
-      [ngClass]="{'active': estadoArticulos == 'rechazado'}"
-      (click)="estadoArticulos = 'rechazado'; paginaActiva = 1; filter = '';">
-      Rechazados&nbsp;({{getCantidadArticulosByEstado('rechazado')}})
-    </button>
-  </div>
-</div>
-<div class="row">
-  <input
-      type="text"
-      class="form-control-sm col-12"
-      placeholder="Busque producto por nombre, codigo"
-      [(ngModel)]="filter"
-      [ngModelOptions]="{standalone: true}"/>
+    <div class="row">
+      <input type="text" class="form-control-sm col-12" placeholder="Busque producto por nombre, codigo"
+        [(ngModel)]="filter" [ngModelOptions]="{standalone: true}" />
     </div>
     <div class="row">
       <table class="table table-dark">
         <thead>
           <tr>
-            <th *ngIf="estadoArticulos != 'rechazado'">Rechazar</th>
             <th>Producto</th>
             <th>Cantidad</th>
-            <th *ngIf="estadoArticulos != 'aprobado'">Aceptar</th>
+            <th></th>
           </tr>
         </thead>
-        <tbody>
-          <tr *ngFor="let articulo of getPaginaFiltro()" [ngClass]="{'bg-success': articulo.estado == 'aprobado'}">
-            <th *ngIf="estadoArticulos != 'rechazado'"><button type="button" class="" (click)="articulo.estado = 'rechazado'">
-              <i class="fa fa-window-close"></i>
-            </button></th>
-            <th>{{articulo.TIO}}</th>
-            <th *ngIf="!articulo.input" (click)="articulo.input = true">
-              {{articulo.recibido ? articulo.recibido + '/' : ''}}{{articulo.CAN}}</th>
-              <th *ngIf="articulo.input">
-                <input
-                class="form-control-sm col-12"
+        <tbody class="scroll-tabla w-100 mb-5">
+          <tr *ngFor="let articulo of getPaginaFiltro();" class="row mx-0" [ngClass]="{'bg-danger': articulo.estado == 'rechazado'}">
+            <td class="col-5">{{articulo.TIO.trim() || articulo.LI0}}</td>
+            <td
+              class="col-5"
+              *ngIf="!articulo.input"
+              (click)="articulo.estado != 'rechazado' ? articulo.input = true : false"
+            >
+              {{articulo.recibido ? articulo.recibido + '/' : ''}}{{articulo.CAN}}
+            </td>
+            <td *ngIf="articulo.input" class="col-5">
+              <input
+                class="form-control-sm col-10"
                 type="number"
-                (keyup.enter)="articulo.input = false"
-                [(ngModel)]="articulo.recibido"
-                [ngModelOptions]="{standalone: true}"
-                autofocus/>
-                /{{articulo.CAN}}
-              </th>
-              <th *ngIf="estadoArticulos != 'aprobado'">
-                <button type="button" class="" (click)="articulo.estado = 'aprobado'">
-                  <i class="fa fa-check"></i>
-                </button>
-              </th>
-            </tr>
-            <tr>
-              <th colspan="3" *ngIf="articulosFiltro.length == 0">Por el momento no hay elementos aquí</th>
-            </tr>
-          </tbody>
-          <tfoot>
+                (focus)="$event.target.select();"
+                (keyup.enter)="articulo.input = false; articulo.recibido = articulo.tempRecibido"
+                [(ngModel)]="articulo.tempRecibido"
+                [ngModelOptions]="{standalone: true}" autofocus/>
+              /{{articulo.CAN}}
+            </td>
+            <td class="col-2" *ngIf="articulo.estado != 'rechazado'">
+              <button type="button"
+                (click)="articulo.estado = 'rechazado'">
+                <i class="fa fa-window-close"></i>
+              </button>
+            </td>
+            <td class="col-2" *ngIf="articulo.estado == 'rechazado'">
+              <button type="button" (click)="articulo.estado = undefined">
+                <i class="fa fa-check"></i>
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <th colspan="3" *ngIf="articulosFiltro.length == 0">Por el momento no hay elementos aquí</th>
+          </tr>
+        </tbody>
+        <!-- <tfoot>
             <nav *ngIf="articulosFiltro.length > 0" class="mr-auto position-absolute mb-5">
               <ul class="pagination pagination-sm justify-content mb-0">
                 <li class="page-item" [ngClass]="{'disabled': paginaActiva == 1}">
@@ -158,9 +146,9 @@
               </li>
             </ul>
           </nav>
-        </tfoot>
+        </tfoot> -->
       </table>
     </div>
   </form>
   <app-acciones (guardar)="guardarComprobante()" [(saveLoading)]="saveLoading"></app-acciones>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/comprobantes/comprobantes.component.scss b/src/app/comprobantes/comprobantes.component.scss
index 18fdfee..06c60d3 100644
--- a/src/app/comprobantes/comprobantes.component.scss
+++ b/src/app/comprobantes/comprobantes.component.scss
@@ -53,4 +53,11 @@
             border-top: 2px solid #FFF !important;
         }
     }
-}
\ No newline at end of file
+}
+
+.scroll-tabla {
+    position: absolute;
+    max-height: 200%;
+    overflow: auto;
+    background-color: #343a40;
+}
diff --git a/src/app/comprobantes/comprobantes.component.ts b/src/app/comprobantes/comprobantes.component.ts
index 84baed0..63799a0 100644
--- a/src/app/comprobantes/comprobantes.component.ts
+++ b/src/app/comprobantes/comprobantes.component.ts
@@ -19,37 +19,32 @@ export class ComprobantesComponent implements OnInit {
   ngOnInit() { }
 
   filter = '';
-  estadoArticulos = 'pendiente';
-  comprobantes = [1, 2, 3];
+  estadoArticulos : string;
+  tempRecibido = [];
   cabecera = {};
   cuerpo = [];
   articulosFiltro = [];
-  paginaActiva = 1;
-  paginas = [];
   saveLoading = false;
+  showCabecera = true;
 
   fecha = new Date();
 
-  paginar() {
-
-    var cantPaginas = Math.ceil(this.articulosFiltro.length / 5);
-    this.paginas = [];
-    for (let i = 0; i < cantPaginas; i++) {
-      this.paginas.push(i + 1);
-    }
-  }
-
   getPaginaFiltro() {
 
     this.articulosFiltro = this.cuerpo.filter((articulo) => {
-      return articulo.estado == this.estadoArticulos &&
-        (articulo.TIO.toLocaleUpperCase().includes(this.filter.toLocaleUpperCase()) ||
-        articulo.codigoBarras == this.filter);
-    });
 
-    this.paginar();
+      var tio = articulo.TIO.trim().toLocaleUpperCase().includes(this.filter.toLocaleUpperCase());
+      var lio = articulo.LI0.trim().toLocaleUpperCase().includes(this.filter.toLocaleUpperCase());
+      var codigoBarras = articulo.codigoBarras == this.filter;
+
+      articulo.recibido && !articulo.estado ? articulo.estado = 'modificado' : false;
+
+      var estado = articulo.estado == this.estadoArticulos;
+
+      return (tio || lio || codigoBarras) && estado;
+    });
 
-    return this.articulosFiltro.slice((this.paginaActiva - 1) * 5 , this.paginaActiva * 5);
+    return this.articulosFiltro;
   }
 
   getCantidadArticulosByEstado(estado: String) {
@@ -62,15 +57,28 @@ export class ComprobantesComponent implements OnInit {
 
     if (this.getCantidadArticulosByEstado('pendiente')) {
       alert('No deben quedar articulos pendientes');
+      return;
     }
 
+    if (!this.cuerpo.length) {
+      alert('Debe seleccionar un comprobante');
+      return;
+    }
+
+    this.saveLoading = true;
+
     this.comprobanteService
       .saveComprobantes({cabecera: this.cabecera, cuerpo: this.cuerpo})
       .subscribe(data => {
+
         alert('Comprobante guardado con éxito');
+        this.saveLoading = false;
         this.router.navigateByUrl('/home');
+
       }, err => {
+
         alert('Algo salió mal');
+        this.saveLoading = false;
         console.log(err);
       });
   }
@@ -81,10 +89,6 @@ export class ComprobantesComponent implements OnInit {
       this.cabecera = comprobante.cabecera;
       this.cuerpo = comprobante.cuerpo;
 
-      this.cuerpo.forEach(articulo => {
-        articulo['estado'] = 'pendiente';
-      });
-
       this.getPaginaFiltro();
     }, (reason) => { });
   }
diff --git a/src/etc/AppSetings.ts b/src/etc/AppSetings.ts
index 5366258..4be5f56 100644
--- a/src/etc/AppSetings.ts
+++ b/src/etc/AppSetings.ts
@@ -1,3 +1,3 @@
 export class AppSetings {
-  public static END_POINT='http://10.231.45.234:6060/gateway-debo';
+  public static END_POINT='http://localhost:6060/gateway-debo';
 }