diff --git a/.jshintrc b/.jshintrc
index dd429f7..d8cbb07 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -32,7 +32,7 @@
     "indent": 4,
 
     // Prohibit use of a variable before it is defined.
-    "latedef": true,
+    "latedef": false,
 
     // Enforce line length to 100 characters
     "maxlen": 100,
diff --git a/gulpfile.js b/gulpfile.js
index 209ccfd..55dda1a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -17,13 +17,13 @@ var paths = {
 };
 
 gulp.task('templates', function() {
-    pump(
+    return pump(
         [
             gulp.src(paths.srcViews),
             replace('views/', ''),
             htmlmin(),
             templateCache('views.js', {
-                module: 'focaBusquedaProductos',
+                module: 'focaModalPetroleras',
                 root: ''
             }),
             gulp.dest(paths.tmp)
@@ -31,16 +31,16 @@ gulp.task('templates', function() {
     );
 });
 
-gulp.task('uglify', function() {
-    pump(
+gulp.task('uglify', ['templates'], function() {
+    return pump(
         [
             gulp.src([
                 paths.srcJS,
                 'tmp/views.js'
             ]),
-            concat('foca-busqueda-productos.js'),
+            concat('foca-modal-petroleras.js'),
             gulp.dest(paths.tmp),
-            rename('foca-busqueda-productos.min.js'),
+            rename('foca-modal-petroleras.min.js'),
             uglify(),
             gulp.dest(paths.dist)
         ]
@@ -48,7 +48,7 @@ gulp.task('uglify', function() {
 });
 
 gulp.task('pre-commit', function() {
-    pump(
+    return pump(
         [
             gulp.src(paths.srcJS),
             jshint('.jshintrc'),
@@ -58,7 +58,6 @@ gulp.task('pre-commit', function() {
     );
 
     gulp.start('uglify');
-    gulp.start('templates');
 });
  
 gulp.task('webserver', function() {
diff --git a/index.html b/index.html
index c67a861..fc235e3 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
     <script src="node_modules/angular/angular.min.js"></script>
     <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
+    <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
 
     <!-- BUILD -->
     <script src="src/js/app.js"></script>
@@ -22,17 +23,33 @@
     <!-- /BUILD -->
 
     <!-- CONFIG PARA DEVELOP -->
+    <script src="src/etc/develop.js"></script>
+
     <script type="text/javascript">
         angular.module('focaModalPetroleras')
-            .controller('controller', ['$uibModal', function ($uibModal) {
-                var modalInstance = $uibModal.open(
-                    {
-                        ariaLabelledBy: 'Busqueda de Petroleras',
-                        templateUrl: 'src/views/modal-petroleras.html',
-                        controller: 'modalPetrolerasCtrl',
-                        size: 'lg'
-                    }
-                );
+            .controller('controller', ['$uibModal', '$timeout', function ($uibModal, $timeout) {
+                openModal();
+
+                function openModal() {
+                    var modalInstance = $uibModal.open(
+                        {
+                            ariaLabelledBy: 'Busqueda de Petroleras',
+                            templateUrl: 'src/views/modal-petroleras.html',
+                            controller: 'modalPetrolerasCtrl',
+                            size: 'lg'
+                        }
+                    );
+                    
+                    modalInstance.result.then(
+                        function (selectedItem) {
+                            console.info(selectedItem);
+                            $timeout(openModal, 500);
+                        }, function () {
+                            console.info('modal-component dismissed at: ' + new Date());
+                            $timeout(openModal, 500);
+                        }
+                    );
+                }
             }]);
     </script>
 </head>
diff --git a/package.json b/package.json
index 4a25376..69cbe77 100644
--- a/package.json
+++ b/package.json
@@ -1,20 +1,20 @@
 {
-    "name": "foca-navegacion-doble",
-    "version": "0.0.1",
-    "description": "Menu de navegacion de doble entrada",
-    "main": "index.js",
+    "name": "foca-modal-petroleras",
+    "version": "0.0.2",
+    "description": "Modal para seleccionar petroleras",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "compile": "gulp templates && gulp uglify",
-        "pre-commit": [
-            "gulp-pre-commit"
-        ],
+        "gulp-pre-commit": "gulp pre-commit",
+        "compile": "gulp uglify",
         "postinstall": "npm run compile && rm -R src && rm index.html && rm .jshintrc && rm gulpfile.js",
-        "install-dev": "npm install angular bootstrap jquery font-awesome gulp gulp-concat gulp-jshint gulp-rename gulp-replace gulp-uglify-es jshint pump gulp-connect jasmine-core pre-commit"
+        "install-dev": "npm install angular bootstrap jquery font-awesome gulp gulp-concat gulp-jshint gulp-rename gulp-replace gulp-uglify-es jshint pump gulp-connect gulp-uglify jasmine-core pre-commit gulp-angular-templatecache ui-bootstrap4 git+https://192.168.0.11/modulos-npm/foca-directivas"
     },
+    "pre-commit": [
+        "gulp-pre-commit"
+    ],
     "repository": {
         "type": "git",
-        "url": "https://192.168.0.11/modulos-npm/foca-navegacion-doble"
+        "url": "https://192.168.0.11/nguarnieri/foca-modal-petroleras"
     },
     "author": "Nicolás Guarnieri",
     "license": "ISC",
@@ -32,11 +32,13 @@
         "gulp-replace": "^1.0.0",
         "gulp-uglify": "^3.0.1",
         "jquery": "^3.3.1",
-        "pump": "^3.0.0"
+        "pump": "^3.0.0",
+        "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas"
     },
     "devDependencies": {
-        "angular": "^1.7.4",
+        "angular": "^1.7.5",
         "bootstrap": "^4.1.3",
+        "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas",
         "font-awesome": "^4.7.0",
         "gulp": "^3.9.1",
         "gulp-angular-templatecache": "^2.2.1",
@@ -52,6 +54,6 @@
         "jshint": "^2.9.6",
         "pre-commit": "^1.2.2",
         "pump": "^3.0.0",
-        "ui-bootstrap4": "^3.0.4"
+        "ui-bootstrap4": "^3.0.5"
     }
 }
diff --git a/src/etc/develop.js.ejemplo b/src/etc/develop.js.ejemplo
index 506b1e5..79c08c1 100644
--- a/src/etc/develop.js.ejemplo
+++ b/src/etc/develop.js.ejemplo
@@ -1,4 +1,4 @@
-angular.module('focaBusquedaProductos')
+angular.module('focaModalPetroleras')
     .constant("API_ENDPOINT", {
         'URL': '//127.0.0.1:9000'
     });
diff --git a/src/js/app.js b/src/js/app.js
index 23f627e..e0cd0a2 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1 +1 @@
-angular.module('focaModalPetroleras', ['ui.bootstrap']);
+angular.module('focaModalPetroleras', ['ui.bootstrap', 'focaDirectivas']);
diff --git a/src/js/controller.js b/src/js/controller.js
index e87c32f..0366470 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -5,12 +5,17 @@ angular.module('focaModalPetroleras')
 		'$uibModalInstance',
 		'focaPetrolerasService',
 		function ($filter, $scope, $uibModalInstance, focaPetrolerasService) {
-			var json = {
-				razonCuitCod: ''
-			}
+			var json = {razonCuitCod: ''};
+
 			focaPetrolerasService.getPetroleras(json).then(
 				function (res) {
-					$scope.vendedores = res.data;
+					for (var i = res.data.length - 1; i >= 0; i--) {
+						if (res.data[i].COD === 0) {
+							delete res.data[i];
+						}
+					}
+
+					$scope.petroleras = res.data;
 					$scope.search();
 				});
 
@@ -19,36 +24,135 @@ angular.module('focaModalPetroleras')
 			$scope.currentPage = 1;
 			$scope.filteredPetroleras = [];
 			$scope.currentPagePetroleras = [];
-			$scope.selectPetroleras = 0;
+			$scope.selectedPetroleras = -1;
 
 			$scope.search = function () {
-				$scope.filteredPetroleras = $filter('filter')($scope.vendedores, { $: $scope.filters });
+				$scope.filteredPetroleras = $filter('filter')(
+					$scope.petroleras, {$: $scope.filters}
+				);
+
+				$scope.lastPage = Math.ceil(
+				    $scope.filteredPetroleras.length / $scope.numPerPage
+				);
+
 				$scope.resetPage();
-			}
+			};
 
 			$scope.resetPage = function () {
 				$scope.currentPage = 1;
 				$scope.selectPage(1);
-			}
+			};
 
 			$scope.selectPage = function (page) {
+				console.info(page);
 				var start = (page - 1) * $scope.numPerPage;
 				var end = start + $scope.numPerPage;
+				$scope.paginas = [];
+				$scope.paginas = calcularPages(page);
 				$scope.currentPagePetroleras = $scope.filteredPetroleras.slice(start, end);
-			}
+                $scope.currentPage = page;
+			};
 
-			$scope.select = function(vendedor) {
-				$uibModalInstance.close(vendedor);
-			}
+			$scope.select = function(petrolera) {
+				$uibModalInstance.close(petrolera);
+			};
 
 			$scope.cancel = function() {
 				$uibModalInstance.dismiss('cancel');
+			};
+
+			$scope.busquedaDown = function(key) {
+			    if (key === 40) {
+			        primera(key);
+			    }
+			};
+
+			$scope.busquedaPress = function(key) {
+			    if (key === 13) {
+			        primera(key);
+			    }
+			};
+
+			$scope.itemPetrolera = function(key) {
+			    if (key === 38) {
+			        anterior(key);
+			    }
+
+			    if (key === 40) {
+			        siguiente(key);
+			    }
+
+			    if (key === 37) {
+			        retrocederPagina();
+			    }
+
+			    if (key === 39) {
+			        avanzarPagina();
+			    }
+			};
+
+			function calcularPages(paginaActual) {
+			    var paginas = [];
+			    paginas.push(paginaActual);
+
+			    if (paginaActual - 1 > 1) {
+			        
+			        paginas.unshift(paginaActual - 1);
+			        if (paginaActual - 2 > 1) {
+			            paginas.unshift(paginaActual - 2);
+			        }
+			    }
+
+			    if (paginaActual + 1 < $scope.lastPage) {
+			        paginas.push(paginaActual + 1);
+			        if (paginaActual + 2 < $scope.lastPage) {
+			            paginas.push(paginaActual + 2);
+			        }
+			    }
+
+			    if (paginaActual !== 1) {
+			        paginas.unshift(1);
+			    }
+
+			    if (paginaActual !== $scope.lastPage) {
+			        paginas.push($scope.lastPage);
+			    }
+
+			    return paginas;
+			}
+
+			function primera() {
+			    $scope.selectedPetroleras = 0;
+			}
+
+			function anterior() {
+			    if ($scope.selectedPetroleras === 0 && $scope.currentPage > 1) {
+			        retrocederPagina();
+			    } else {
+			        $scope.selectedPetroleras--;
+			    }
+			}
+
+			function siguiente() {
+			    if ($scope.selectedPetroleras < $scope.currentPagePetroleras.length - 1 ) {
+			        $scope.selectedPetroleras++;
+			    } else {
+			            avanzarPagina();
+			    }
+			}
+
+			function retrocederPagina() {
+			    if ($scope.currentPage > 1) {
+			        $scope.selectPage($scope.currentPage - 1);
+			        $scope.selectedPetroleras = $scope.numPerPage - 1;
+			    }
 			}
 
-			$scope.enter = function(key) {
-				if (key === 13) {
-					console.table($scope.currentPagePetroleras);
-				}
+			function avanzarPagina() {
+			    if ($scope.currentPage < $scope.lastPage) {
+			        $scope.selectPage($scope.currentPage + 1);
+			        $scope.selectedPetroleras = 0;
+			    }
 			}
 		}]
-	)
+	);
diff --git a/src/js/service.js b/src/js/service.js
index e603374..5a15044 100644
--- a/src/js/service.js
+++ b/src/js/service.js
@@ -1,9 +1,8 @@
 angular.module('focaModalPetroleras')
-    .service('focaPetrolerasService', ['$http', function($http) {
-		var configRoute ='http://localhost:9900';
+    .service('focaPetrolerasService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
         return {
             getPetroleras: function(json) {
-                return $http.post(configRoute + '/petroleras', json);
+                return $http.post(API_ENDPOINT.URL + '/petroleras', json);
             }
-        }
-    }])
+        };
+    }]);
diff --git a/src/views/modal-petroleras.html b/src/views/modal-petroleras.html
index 42d1634..6923a0c 100644
--- a/src/views/modal-petroleras.html
+++ b/src/views/modal-petroleras.html
@@ -9,7 +9,10 @@
             placeholder="Busqueda" 
             ng-model="filters" 
             ng-change="search()" 
-            ng-keypress="enter($event.keyCode)"
+            ng-keydown="busquedaDown($event.keyCode)"
+            ng-keypress="busquedaPress($event.keyCode)"
+            foca-focus="selectedPetroleras == -1"
+            ng-focus="selectedPetroleras = -1"
         >
         <table class="table table-striped table-sm">
             <thead>
@@ -21,18 +24,56 @@
                 </tr>
             </thead>
             <tbody>
-                <tr ng-repeat="petrolera in filteredPetroleras">
+                <tr ng-repeat="(key, petrolera) in currentPagePetroleras">
                     <td ng-bind="petrolera.COD"></td>
                     <td ng-bind="petrolera.NOM"></td>
                     <td ng-bind="petrolera.CUIT"></td>
                     <td>
-                        <button type="button" class="btn btn-secondary p-5 float-right mr-1" ng-click="select(producto)">
-                            <i class="fa fa-check" aria-hidden="true"></i>
+                        <button 
+                            type="button" 
+                            class="btn p-2 float-right"
+                            ng-class="{ 
+                                'btn-secondary': selectedPetroleras != key, 
+                                'btn-primary': selectedPetroleras == key
+                            }" 
+                            ng-click="select(petrolera)"
+                            foca-focus="selectedPetroleras == {{key}}"
+                            ng-keydown="itemPetrolera($event.keyCode)"
+                        >
+                            <i class="fa fa-arrow-right" aria-hidden="true"></i>
                         </button>
                     </td>
                 </tr>
             </tbody>
         </table>
+        <nav>
+            <ul class="pagination justify-content-end">
+                <li class="page-item" ng-class="{'disabled': currentPage == 1}">
+                    <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
+                        <span aria-hidden="true">&laquo;</span>
+                        <span class="sr-only">Anterior</span>
+                    </a>
+                </li>
+                <li 
+                    class="page-item" 
+                    ng-repeat="pagina in paginas" 
+                    ng-class="{'active': pagina == currentPage}"
+                >
+                    <a 
+                        class="page-link" 
+                        href="#" 
+                        ng-click="selectPage(pagina)"
+                        ng-bind="pagina"
+                    ></a>
+                </li>
+                <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
+                    <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
+                        <span aria-hidden="true">&raquo;</span>
+                        <span class="sr-only">Siguiente</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
     </div>
 </div>
 <div class="modal-footer">