diff --git a/src/js/controller.js b/src/js/controller.js
index 6a20ace..ece05dc 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -1,9 +1,9 @@
 angular.module('focaActivarHojaRuta')
     .controller('focaActivarHojaRutaController', [
         '$scope', 'focaActivarHojaRutaService', 'focaModalService', 'focaBotoneraLateralService',
-        '$filter',
+        '$filter','$uibModal',
         function($scope, focaActivarHojaRutaService, focaModalService, focaBotoneraLateralService,
-            $filter) {
+            $filter, $uibModal) {
             config();
 
             //METODOS
@@ -70,9 +70,40 @@ angular.module('focaActivarHojaRuta')
                 );
             };
 
+            $scope.mostrarRemitos = function (hojasRutas) {
+                $uibModal.open(
+                    {
+                        ariaLabelledBy: '',
+                        templateUrl: 'modal-remitos.html',
+                        controller: 'focaModalDetalleController',
+                        resolve: {
+                            hojasRutas: function () { return hojasRutas; },
+                        },
+                        size: 'lg',
+                    }
+                );
+            };
+
+            $scope.setearEstado = function (estado) {
+                var texto = '';
+                switch (estado) {
+                    case 0:
+                        texto = 'Disponible';
+                        break;
+                    case 1:
+                        texto = 'Asignada';
+                        break;
+                    case 2:
+                        texto = 'Terminada';
+                        break;
+                    default:
+                        break;
+                }
+                return texto;
+            };
+            
             $scope.activarHojaRuta = function(hojaRuta) {
                 validarChoferDisponible().then(function(hojaRutaAsignada) {
-
                     if (hojaRutaAsignada) {
                         var texto = 'El chofer tiene asignada la Hoja de Ruta Nº ' +
                             $filter('comprobante')([hojaRutaAsignada.sucursal,
@@ -92,11 +123,11 @@ angular.module('focaActivarHojaRuta')
                         focaActivarHojaRutaService
                             .activarHojaRuta(hojaRuta.id, $scope.chofer)
                             .then(function() {
+                                hojaRuta.estado = 1;
                                 init();
                                 focaModalService.alert('Hoja de ruta activada');
                             });
                     }
-
                 });
             };
 
diff --git a/src/js/controllerDetalle.js b/src/js/controllerDetalle.js
new file mode 100644
index 0000000..8f97762
--- /dev/null
+++ b/src/js/controllerDetalle.js
@@ -0,0 +1,15 @@
+angular.module('focaActivarHojaRuta')
+    .controller('focaModalDetalleController', [
+        '$scope', '$timeout', '$uibModalInstance', 'focaModalService',
+        'focaActivarHojaRutaService','hojasRutas',
+        function ($scope, $timeout, $uibModalInstance, focaModalService,
+            focaActivarHojaRutaService, hojasRutas) {
+        
+                $scope.mostrar = false;
+                $scope.hojasRutas = hojasRutas;
+
+                $scope.cancel = function () {
+                    $uibModalInstance.close(hojasRutas);
+                };
+    }
+]);
diff --git a/src/views/activar-hoja-ruta.html b/src/views/activar-hoja-ruta.html
index 8a5ebde..44aa74d 100644
--- a/src/views/activar-hoja-ruta.html
+++ b/src/views/activar-hoja-ruta.html
@@ -27,6 +27,8 @@
                     <th>Número</th>
                     <th>Fecha</th>
                     <th>Remitos</th>
+                    <th>Estados</th>
+                    <th></th>
                     <th class="text-center">
                     </th>
                 </tr>
@@ -35,7 +37,20 @@
                 <tr ng-repeat="hojaRuta in hojasRuta | filter:filtros">
                     <td ng-bind="[hojaRuta.sucursal, hojaRuta.numeroHojaRuta] | comprobante"></td>
                     <td ng-bind="hojaRuta.fechaReparto | date:'yyyy-MM-dd':'-0300'"></td>
-                    <td ng-bind="hojaRuta.remitos.length"></td>
+                    <td>
+                        <div ng-bind="hojaRuta.remitos.length" class="d-inline-block"></div>
+                        <button class="btn btn-outline-dark boton-accion" ng-click="mostrarRemitos(hojaRuta)">
+                            <i class="fa fa-eye"></i>
+                        </button>
+                    </td>
+                    <td 
+                        ng-bind="setearEstado(hojaRuta.estado)"
+                        ng-class="{'text-white':hojaRuta.estado == 0,
+                                   'text-danger':hojaRuta.estado == 1,
+                                   'text-dark': hojaRuta.estado == 2
+                                  }"    
+                    ></td>
+                    <td></td>
                     <td class="text-center">
                         <button
                             class="btn btn-outline-dark boton-accion"
diff --git a/src/views/modal-remitos.html b/src/views/modal-remitos.html
new file mode 100644
index 0000000..95587e3
--- /dev/null
+++ b/src/views/modal-remitos.html
@@ -0,0 +1,45 @@
+<div class="modal-header py-1">
+        <div class="row w-100">
+            <div class="col-lg-6">
+                <h5 class="modal-title my-1">Hoja de Ruta</h5>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col ml-3 mt-2">
+            <span class=" text-left">
+                Transportista <b>{{hojasRutas.idTransportista}} {{hojasRutas.transportista.NOM}}</b>
+                Unidad <b>{{hojasRutas.vehiculo.codigo}}</b> Tractor <b>{{hojasRutas.vehiculo.tractor}}</b>
+            </span>
+
+        </div>
+    </div>
+    <div class="row">
+        <div class="col ml-3">
+            <span class=" text-left">Fecha <b>{{hojasRutas.fechaCreacion | date:'yyyy-MM-dd':'-0300'}}</b></span>
+        </div>
+    </div>
+    <div class="modal-body" id="modal-body">
+        <table class="table table-hover table-sm table-striped">
+            <thead>
+                <tr>
+                    <th>Remito</th>
+                    <th>Cliente</th>
+                    <th>Domicilio</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr
+                    ng-repeat="remito in hojasRutas.remitos"
+                    >
+                    <td ng-bind="[remito.sucursal, remito.numeroRemito] | comprobante"></td>
+                    <td ng-bind="remito.nombreCliente"></td>
+                    <td ng-bind="remito.domicilioStamp"></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="modal-footer py-1">
+        <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
+    </div>
+</div>