diff --git a/src/js/controller.js b/src/js/controller.js
index cb8b001..f6635a0 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -5,8 +5,19 @@ angular.module('focaModalDetalleHojaRuta')
             '$scope',
             '$uibModalInstance',
             'remito',
-            function($filter, $scope, $uibModalInstance, remito) {
+            'focaModalDetalleHojaRutaService',
+            function($filter, $scope, $uibModalInstance, remito, focaModalDetalleHojaRutaService) {
                 $scope.remito = remito;
+                $scope.cisternas = [];
+                $scope.articuloSeleccionado = {};
+                $scope.cambio = function(articulo) {
+                    $scope.articuloSeleccionado = articulo;
+                };
+                focaModalDetalleHojaRutaService.getCisternasByIdRemito($scope.remito.id)
+                    .then(function(res) {
+                        $scope.cisternas = res.data; 
+                    });
+
                 $scope.aceptar = function() {
                     var articulos = articulosDescargados();
                     var cisternaMovimientos = [];
@@ -16,19 +27,20 @@ angular.module('focaModalDetalleHojaRuta')
                             idRemito: $scope.remito.id,
                             cantidad: articulos[i].aCargar,
                             metodo: 'descarga'
-                        }
+                        };
                         var hojaRutaMovimiento = {
                             idRemito: $scope.remito.id,
                             reciboDescarga: articulos[i].numeroRecibo
-                        }
+                        };
                         cisternaMovimientos.push(cisternaMovimiento);
                         hojaRutaMovimientos.push(hojaRutaMovimiento);
                     }
                     var result = {
                         cisternaMovimientos: cisternaMovimientos,
                         hojaRutaMovimientos: hojaRutaMovimientos,
-                        idHojaRuta: $scope.remito.idHojaRuta
-                    }
+                        idRemito: $scope.remito.id,
+                        observaciones: $scope.remito.observaciones
+                    };
                     $uibModalInstance.close(result);
                 };
 
diff --git a/src/js/service.js b/src/js/service.js
index f373ef0..ee08e88 100644
--- a/src/js/service.js
+++ b/src/js/service.js
@@ -6,6 +6,9 @@ angular.module('focaModalDetalleHojaRuta')
             return {
                 getDetallesHojaRuta: function() {
                     return $http.get(API_ENDPOINT.URL + '/transportista');
+                },
+                getCisternasByIdRemito: function(idRemito) {
+                    return $http.get(API_ENDPOINT.URL + '/cisternas/obtener/remito/' + idRemito);
                 }
             };
         }
diff --git a/src/views/modal-detalle-hoja-ruta.html b/src/views/modal-detalle-hoja-ruta.html
index d8425ad..67fb5c9 100644
--- a/src/views/modal-detalle-hoja-ruta.html
+++ b/src/views/modal-detalle-hoja-ruta.html
@@ -23,53 +23,103 @@
                 </label>
             </div>
             <div class="col-12 px-0">
+                <strong>Articulo a descargar</strong>
                 <table class="table table-sm">
                     <thead>
                         <tr>
+                            <th></th>
                             <th>Articulo</th>
                             <th>Total</th>
-                            <th>A descargar</th>
-                            <th>Nº Recibo</th>
+                            <th>Descargado</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr ng-repeat="(key, articulo) in remito.articulosRemito">
+                            <td class="pt-2"><input
+                                type="radio"
+                                name="articuloRadio"
+                                id="{{'articulo' + articulo.id}}"
+                                ng-click="cambio(articulo)"
+                                ng-disabled="articulo.cargado"
+                            ></td>
                             <td ng-bind="articulo.descripcion"></td>
                             <td ng-bind="articulo.cantidad"></td>
+                            <td ng-bind="articulo.descargado || articulo.cantidad"></td>
+                    </tbody>
+                </table>
+                <strong>Cisterna</strong>
+                <table class="table table-sm">
+                    <thead>
+                        <tr>
+                            <th>Código</th>
+                            <th>Articulo</th>
+                            <th>Total</th>
+                            <th>A descargar</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr ng-repeat="(key, cisterna) in cisternas">
+                            <td ng-bind="cisterna.codigo"></td>
+                            <td ng-bind="cisterna.cisternaCarga.articulo.DetArt"></td>
+                            <td ng-bind="cisterna.cisternaCarga.cantidad"></td>
                             <td><input
                                 class="form-control form-control-sm"
                                 type="number"
-                                ng-model="articulo.aCargar"
-                                foca-focus="key === 0"/></td>
-                            <td><input
-                                class="form-control form-control-sm"
-                                type="number"
-                                ng-model="articulo.numeroRecibo"/></td>
-                            </tr>
+                                ng-model="cisterna.aDescargar"
+                                foca-focus=""
+                                ng-disabled="articuloSeleccionado.idArticulo != cisterna.cisternaCarga.idProducto"/></td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
-            <div class="col-12 px-0 py-0">
-                <label class="form-control-sm">
+            <div class="col-12 px-0">
+                <label class="form-control-sm px-0">
                     <b>Observaciones</b>
                 </label>
             </div>
-            <div class="col-12 pl-0">
+            <div class="col-12">
                 <textarea
                     ng-model="remito.observaciones"
-                    class="form-control mx-2"
-                    rows="5"
+                    class="form-control form-control-sm"
+                    rows="1"
                 ></textarea>
             </div>
+            <div class="col-12 row mt-2">
+                <label class="form-control-sm px-0 col-3"><b>Nº Recibo</b></label>
+                <input
+                    class="form-control form-control-sm col-4"
+                    type="number"
+                    ng-model="numeroRecibo">
+                <button
+                    class="ml-4 form-control-sm btn btn-success col-4"
+                    ladda="cargando"
+                    data-spinner-color="#FF0000"
+                    type="button"
+                    ng-disabled="!distribucionDisponible()"
+                    ng-click="cargarACisternas(vehiculo)"
+                    foca-focus="distribucionDisponible()">
+                    Descargar
+                </button>
+            </div>
         </div>
     </form>
 </div>
 <div class="modal-footer py-2">
     <button
+        class="btn btn-danger btn-sm"
+        type="button"
+        ng-click=""
+        ng-disabled=""
+    >Anular</button>
+    <button
         class="btn btn-secondary btn-sm"
         type="button"
+        ng-click="cancel()"
+    >Cancelar</button>
+    <button
+        class="btn btn-primary btn-sm"
+        type="button"
         ng-click="aceptar()"
         ng-disabled="validar()"
     >Aceptar</button>
-    <button class="btn btn-secondary btn-sm" type="button" ng-click="cancel()">Cancelar</button>
 </div>