diff --git a/src/js/controllerCombustibles.js b/src/js/controllerCombustibles.js
index 8aa4d6d..91a8c06 100644
--- a/src/js/controllerCombustibles.js
+++ b/src/js/controllerCombustibles.js
@@ -4,12 +4,38 @@ angular.module('focaCrearFactura')
         '$scope',
         '$uibModalInstance',
         'parametros',
-        function($filter, $scope, $uibModalInstance, parametros) {
+        function ($filter, $scope, $uibModalInstance, parametros) {
 
             $scope.mangueras = [];
-
+            $scope.nombreProducto = parametros.nombreProducto;
+            $scope.colorTexto = { color: 'black' };
             var productosByMangera = [];
 
+            setColorNombreProducto();
+
+            //TODO: Cambiar switch case con los casos de nombres de productos axion
+            function setColorNombreProducto() {
+
+                // Diesel #FF852E | Euro+Diesel #6C389A | Premium #00A857 | Super #175AA5
+                switch ($scope.nombreProducto) {
+                    case 'NAFTA SUPER XXI':
+                        $scope.colorTexto = { color: '#FF852E' };
+                        break;
+                    case 'GO-INFINIA DIESEL':
+                        $scope.colorTexto = { color: '#6C389A' };
+                        break;
+                    case 'ULTRADIESEL XXI - RED':
+                        $scope.colorTexto = { color: '#00A857' };
+                        break;
+                    case 'NAFTA INFINIA':
+                        $scope.colorTexto = { color: '#175AA5' };
+                        break;
+                    default:
+                        $scope.colorTexto = { color: 'black' };
+                        break;
+                }
+            }
+
             parametros.despachos.forEach(function (despacho) {
 
                 var findCsu = productosByMangera.filter(function (csu) {
diff --git a/src/views/modal-combustibles.html b/src/views/modal-combustibles.html
index e80e991..ef87266 100644
--- a/src/views/modal-combustibles.html
+++ b/src/views/modal-combustibles.html
@@ -1,41 +1,59 @@
 <div class="modal-header py-1">
     <div class="row w-100">
         <div class="col-lg-6">
-            <h5 class="modal-title my-1">Despachos Disponibles</h5>
+            <h5 class="modal-title my-1"><b>Despachos Disponibles</b></h5>
         </div>
     </div>
 </div>
 <div class="modal-body" id="modal-body">
+
+    <div class="row pb-2 border-bottom">
+        <div class="col">
+            <p ng-style="colorTexto" class="m-1 h6">
+                <b>
+                    <i class="fa fa-circle" aria-hidden="true"></i>&nbsp;&nbsp;{{nombreProducto}}
+                </b>
+            </p>
+        </div>
+    </div>
     <div ng-repeat="(key, manguera) in mangueras">
-        <strong>
-            Manguera&nbsp;{{manguera.csu}}
-        </strong>
-        <button type="button" class="btn" ng-click="manguera.show = !manguera.show">
-            <i ng-show="manguera.show" class="fa fa-minus"></i>
-            <i ng-show="!manguera.show" class="fa fa-plus"></i>
-        </button>
-        <table class="table table-sm" ng-show="manguera.show">
-            <tbody>
-                <tr ng-repeat="(key, despacho) in manguera.despachos">
-                    <td ng-bind="despacho.FEC | date:'dd/MM/yyyy hh:MM:ss'"></td>
-                    <td ng-bind="despacho.LTS"></td>
-                    <td ng-bind="despacho.IMP | currency: '$'"></td>
-                    <td>
-                        <button
-                            type="button"
-                            class="btn btn-xs p-1 float-right"
-                            title="Seleccionar"
-                            ng-click="aceptar(despacho)"
-                        ><i class="fa fa-circle-thin" aria-hidden="true"></i>
-                    </button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+        <div class="row my-2">
+            <div class="col">
+                <label>
+                    <img class="w-50" ng-src="./img/surtidor.png" alt="">
+                    {{manguera.csu}}
+                </label>
+                <button
+                    type="button"
+                    class="btn p-1 text-secondary float-right border"
+                    ng-click="manguera.show = !manguera.show">
+                    <i ng-show="manguera.show" class="fa fa-minus px-1"></i>
+                    <i ng-show="!manguera.show" class="fa fa-plus px-1"></i>
+                </button>
+                <table class="table table-sm table-striped" ng-show="manguera.show">
+                    <tbody>
+                        <tr ng-repeat="(key, despacho) in manguera.despachos">
+                            <td class="py-2 py-sm-1" ng-bind="despacho.FEC | date:'dd/MM/yyyy hh:MM:ss'"></td>
+                            <td class="py-2 py-sm-1" ng-bind="despacho.LTS"></td>
+                            <td class="py-2 py-sm-1" ng-bind="despacho.IMP | currency: '$'"></td>
+                            <td class="py-2 py-sm-1">
+                                <button
+                                    type="button"
+                                    class="btn btn-default btn-xs p-1 float-right"
+                                    title="Seleccionar"
+                                    ng-click="aceptar(despacho)"
+                                    ><i class="fa fa-circle-thin" aria-hidden="true"></i>
+                                </button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
     
 </div>
-<div class="modal-footer py-1">
+<div class="modal-footer py-2">
     <nav ng-show="currentPageProveedores.length > 0 && primerBusqueda" class="mr-auto">
         <ul class="pagination pagination-sm mb-0">
             <li class="page-item" ng-class="{'disabled': currentPage == 1}">