diff --git a/src/main/webapp/js/view/people.js b/src/main/webapp/js/view/people.js
index 802d6b228a27a98d921ff39604f82e616f79a735..2c43843272398bd8a82308f0e486d118fcb23968 100644
--- a/src/main/webapp/js/view/people.js
+++ b/src/main/webapp/js/view/people.js
@@ -106,6 +106,18 @@ var PeopleView = (function() {
 			}
 		};
 
+		this.listPets = function (id) {
+			$('#genericContainer').empty();
+			$('#genericContainer').append("<div id='pets-container'>" +
+				"<h1 class=\"display-5 mt-3 mb-3\">Mascotas</h1>" +
+				"</div>");
+
+			let view = new PetsView(new PetsDAO(),
+				'pets-container','pets-container'
+			);
+			view.initList(id);
+		}
+
 		this.isEditing = function() {
 			return $(formQuery + ' input[name="id"]').val() != "";
 		};
@@ -124,6 +136,7 @@ var PeopleView = (function() {
 			$('#btnSubmit').val('Crear');
 		};
 	};
+
 	
 	var insertPeopleList = function(parent) {
 		parent.append(
@@ -168,6 +181,7 @@ var PeopleView = (function() {
 			<td class="col-sm-3">\
 				<a class="edit btn btn-primary" href="#">Editar</a>\
 				<a class="delete btn btn-warning" href="#">Eliminar</a>\
+				<a class="pets btn btn-secondary" href="#">Mascotas</a>\
 			</td>\
 		</tr>';
 	};
@@ -184,6 +198,10 @@ var PeopleView = (function() {
 		$('#person-' + person.id + ' a.delete').click(function() {
 			self.deletePerson(person.id);
 		});
+
+		$('#person-' + person.id + ' a.pets').click(function () {
+			self.listPets(person.id);
+		})
 	};
 
 	var appendToTable = function(person) {