diff --git a/src/main/webapp/js/view/people.js b/src/main/webapp/js/view/people.js
index 1f7bc5ec03d301065334b27dd3cbee15c881a8ad..90e525f9089f9c9fe43a966718e2156da53f96c5 100644
--- a/src/main/webapp/js/view/people.js
+++ b/src/main/webapp/js/view/people.js
@@ -1,5 +1,6 @@
 var PeopleView = (function() {
 	var dao;
+	var pets;
 	
 	// Referencia a this que permite acceder a las funciones públicas desde las funciones de jQuery.
 	var self;
@@ -9,8 +10,14 @@ var PeopleView = (function() {
 	var formQuery = '#' + formId;
 	var listQuery = '#' + listId;
 	
-	function PeopleView(peopleDao, formContainerId, listContainerId) {
+	var petsFormId = 'pets-form';
+	var petsListId = 'pets-list';
+	var petsFormQuery = '#' + petsFormId;
+	var petsListQuery = '#' + petsListId;
+	
+	function PeopleView(peopleDao, petsDAO, formContainerId, listContainerId) {
 		dao = peopleDao;
+		pets = petsDAO;
 		self = this;
 		
 		insertPeopleForm($('#' + formContainerId));
@@ -52,6 +59,9 @@ var PeopleView = (function() {
 				return false;
 			});
 			
+			petsView = new PetsView();
+			petsView.init();
+			
 			$('#btnClear').click(this.resetForm);
 		};
 
@@ -148,6 +158,9 @@ var PeopleView = (function() {
 			<td>\
 				<a class="delete" href="#">Delete</a>\
 			</td>\
+			<td>\
+				<a class="pets" href="#">View Pets</a>\
+			</td>\
 		</tr>';
 	}
 
@@ -171,6 +184,10 @@ var PeopleView = (function() {
 				);
 			}
 		});
+		
+		$('#person-' + person.id + ' a.pets').click(function() {
+			showPeoplePets(person);
+		});
 	}
 
 	var appendToTable = function(person) {
@@ -179,5 +196,256 @@ var PeopleView = (function() {
 		addRowListeners(person);
 	}
 	
+	var showPeoplePets = function(person) {
+		pets.listPeoplePets(person, function(pets) {
+			deletePetsTable();
+			createPetsTable(person.name);
+			$.each(pets, function (key, pet) {
+				addPetToTable(pet);
+			});
+		});
+	}
+	
+	var deletePetsTable = function(){
+		$(petsListQuery).remove();
+	}
+	
+	var createPetsTable = function (owner){
+		$('div').append(
+			'<table class="rwd-table" id="' + petsListId + '">\
+			<tr class="owner">\
+				<th>Mascotas de: ' + owner + '</th>\
+				<th></th>\
+				<th></th>\
+				<th></th>\
+				<th></th>\
+			</tr>\
+			<tr>\
+				<th>Nombre</th>\
+				<th>Especie</th>\
+				<th>Raza</th>\
+				<th></th>\
+				<th></th>\
+			</tr>\
+			</table>'
+		);
+	}
+
+	var addPetToTable = function (pet){
+		$(petsListQuery  + ' > tbody:last').append(petToRow(pet));
+		addPetListeners(pet);
+	}
+	
+	var addPetListeners = function(pet) {
+		$('#pet-' + pet.id + ' a.editPet').click(function() {
+			petToForm(pet);
+			$('input#btnSubmit').val('Modificar');
+		});
+		
+		$('#pet-' + pet.id + ' a.deletePet').click(function() {
+			if(confirm("Está a punto de eliminar a una mascota. ¿Está seguro de que desea continuar?")) {
+				pets.deletePet(pet.id,
+					function () {
+						$('tr#pet-' + pet.id).remove();
+					},
+					showErrorMessage
+				);
+			}
+		});
+	}
+	
+	var insertPetList = function(parent) {
+		parent.append(
+			'<table id="' + petsListId + '">\
+				<tr>\
+					<th>Nombre</th>\
+					<th>Especie</th>\
+					<th>Raza</th>\
+					<th></th>\
+					<th></th>\
+				</tr>\
+			</table>'
+		);
+	}
+
+	var insertPetForm = function(parent) {
+		parent.append(
+			'<form id="' + petsFormId + '">\
+				<input name="id" type="hidden" value=""/>\
+				<input name="name" type="text" value="" />\
+				<input name="kind" type="text" value=""/>\
+			    <input name="breed" type="text" value=""/>\
+				<input name="owner" type="hidden" value=""/>\
+				<input id="btnSubmit" type="submit" value="Create"/>\
+				<input id="btnClear" type="reset" value="Limpiar"/>\
+			</form>'
+		);
+	}
+
+	var createPetRow = function(pet) {
+		return '<tr id="pet-'+ pet.id +'">\
+			<td class="name">' + pet.name + '</td>\
+			<td class="kind">' + pet.kind + '</td>\
+			<td class="breed">' + pet.breed + '</td>\
+			<td class="owner">' + pet.owner + '</td>\
+			<td>\
+				<a class="edit" href="#">Edit</a>\
+			</td>\
+			<td>\
+				<a class="delete" href="#">Delete</a>\
+			</td>\
+		</tr>';
+	}
+	
+	var petToRow = function(pet) {
+		return '<tr id="pet-' + pet.id + '">\
+			<td class="name">' + pet.name + '</td>\
+			<td class="kind">' + pet.kind + '</td>\
+			<td class="breed">' + pet.breed + '</td>\
+			<td id="owner" type="hidden" value="' + pet.owner + '">\
+			<td>\
+				<a class="editPet" href="#">Edit</a>\
+			</td>\
+			<td>\
+				<a class="deletePet" href="#">Delete</a>\
+			</td>\
+		</tr>';
+	}
+	
+	function petToForm(pet) {
+		var form = $(petsFormQuery);
+		form.find('input[name="petId"]').val(pet.id);
+		form.find('input[name="petName"]').val(pet.name);
+		form.find('input[name="kind"]').val(pet.kind);
+		form.find('input[name="breed"]').val(pet.breed);
+		form.find('input[name="owner"]').val(pet.owner);
+	}
+	
+	var petsForm = function() {
+		$("body").append(
+			'<form id="' + petsFormId + '">\
+				<input name="petId" type="hidden" value=""/>\
+				Nombre: <input name="petName" type="text" value="" />\
+				Especie: <input name="kind" type="text" value="" />\
+				Raza: <input name="breed" type="text" value="" />\
+				Propietario: <input name="owner" type="text" value="" />\
+				<input id="btnSubmit" type="submit" value="Crear"/>\
+				<input id="btnClear" type="reset" value="Limpiar"/>\
+			</form>'
+		);
+	}
+	
+	var formToPet = function() {
+		var form = $(petsFormQuery);
+		return {
+			'id': form.find('input[name="petId"]').val(),
+			'name': form.find('input[name="petName"]').val(),
+			'kind': form.find('input[name="kind"]').val(),
+			'breed': form.find('input[name="breed"]').val(),
+			'owner': form.find('input[name="owner"]').val()
+		};
+	};
+
+	function PetsView() {
+		self = this;
+		
+		this.init = function() {
+			
+			petsForm();
+			
+			$(petsFormQuery).submit(function(event) {
+				var pet = self.getPetInForm();
+				console.log(pet);
+				if (self.isEditing()) {
+					pets.modifyPet(pet,
+						function(pet) {
+							$('#pet-' + pet.id + ' td.name').text(pet.name);
+							$('#pet-' + pet.id + ' td.kind').text(pet.kind);
+							$('#pet-' + pet.id + ' td.breed').text(pet.breed);
+							$('#pet-' + pet.id + ' td.owner').text(pet.owner);
+							self.resetForm();
+						},
+						showErrorMessage,
+						self.enableForm
+					);
+				} else {
+					pets.addPet(pet,
+						function(pet) {
+							self.resetForm();
+						},
+						showErrorMessage,
+						self.enableForm
+					);
+				}
+				
+				return false;
+			});
+			
+			$('#btnClear').click(this.resetForm);
+		};
+
+		this.getPetInForm = function() {
+			var form = $(petsFormQuery);
+			console.log(form);
+			return {
+				'id': form.find('input[name="petId"]').val(),
+				'name': form.find('input[name="petName"]').val(),
+				'kind': form.find('input[name="kind"]').val(),
+				'breed': form.find('input[name="breed"]').val(),
+				'owner': form.find('input[name="owner"]').val()
+			};
+		};
+
+		this.getPetInRow = function(id) {
+			var row = $('#pet-' + id);
+
+			if (row !== undefined) {
+				return {
+					'id': id,
+					'name': row.find('td.name').text(),
+					'kind': row.find('td.kind').text(),
+					'breed': row.find('td.breed').text(),
+					'owner': row.find('td.owner')
+				};
+			} else {
+				return undefined;
+			}
+		};
+		
+		this.editPet = function(id) {
+			var row = $('#pet-' + id);
+
+			console.log("imprimindo fila:");
+			console.log(row);
+			if (row !== undefined) {
+				var form = $(petsFormQuery);
+				
+				form.find('input[name="petId"]').val(id);
+				form.find('input[name="petName"]').val(row.find('td.petName').text());
+				form.find('input[name="kind"]').val(row.find('td.kind').text());
+				form.find('input[name="breed"]').val(row.find('td.breed').text());
+				form.find('input[name="owner"]').val(owner);
+			}
+		}
+
+		this.isEditing = function() {
+			return $(petsFormQuery + ' input[name="id"]').val() != "";
+		};
+
+		this.disableForm = function() {
+			$(petsFormQuery + ' input').prop('disabled', true);
+		};
+
+		this.enableForm = function() {
+			$(petsFormQuery + ' input').prop('disabled', false);
+		};
+
+		this.resetForm = function() {
+			$(petsFormQuery)[0].reset();
+			$(petsFormQuery + ' input[name="id"]').val('');
+			$('#btnSubmit').val('Crear');
+		};
+	}
+	
 	return PeopleView;
 })();
diff --git a/src/main/webapp/main.html b/src/main/webapp/main.html
index 461f6e52e8f92bfc313bca30ac8b347d9122387f..28ed90fe3a450ec40be185d74f7dc3822fc2bf1e 100644
--- a/src/main/webapp/main.html
+++ b/src/main/webapp/main.html
@@ -10,15 +10,16 @@
 		<a id="#logout" href="logout">Logout</a>
 	</div>
 
-	<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
-	<script type="text/javascript" src="js/dao/people.js"></script>
-	<script type="text/javascript" src="js/view/people.js"></script>
+   <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
+   <script type="text/javascript" src="js/dao/people.js"></script>
+   <script type="text/javascript" src="js/view/people.js"></script>
+   <script type="text/javascript" src="js/dao/pets.js"></script>
+   <script type="text/javascript" src="js/view/pets.js"></script>
 	<script type="text/javascript">
-		$(document).ready(function() {
-			var view = new PeopleView(new PeopleDAO(), 'people-container', 'people-container');
-			
-			view.init();
-		});
+	$(document).ready(function() {
+		var view = new PeopleView(new PeopleDAO(), new PetsDAO(), 'people-container', 'people-container');
+		view.init();
+	});
 	</script>
 </body>
 </html>
\ No newline at end of file