diff --git a/src/main/webapp/js/view/people-container.js b/src/main/webapp/js/view/people-container.js
new file mode 100644
index 0000000000000000000000000000000000000000..45c50135ab6544f0f57733f7740445b8241fdafe
--- /dev/null
+++ b/src/main/webapp/js/view/people-container.js
@@ -0,0 +1,372 @@
+class NewPerson extends React.Component {
+	addPerson() {
+		var name = this.refs.name.value;
+		var surname = this.refs.surname.value;
+		this.refs.name.value = "";
+		this.refs.surname.value = "";
+		var person = {'name': name, 'surname': surname};
+		$.ajax({
+			url: 'rest/people/',
+			type: 'POST',
+			data: person,
+			success: (response) => {
+					console.log('Person added!', response);
+			}
+		});
+	}
+    render() {
+        return (
+        	<div>
+    			<input type="text" ref="name" placeholder="Enter a person name" />
+    			<input type="text" ref="surname" placeholder="Enter a person surname" />
+    			<button type="button" className="btn btn-primary" onClick={this.addPerson.bind(this)}>Submit</button>
+            </div>
+        )
+    }
+}
+
+class PeopleList extends React.Component{
+    render() {
+    	var people = this.props.people.map(person =>
+            <Person key={person.id} person={person}/>
+        );
+        return (
+        	<div>
+        	<NewPerson />
+            <table className="table table-striped">
+                <tbody>
+                    <tr>
+                    	<th>#</th>
+                        <th>Name</th>
+                        <th>Surname</th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                    </tr>
+                    {people}
+                </tbody>
+            </table>
+            </div>
+        )
+    }
+}
+
+class Person extends React.Component{
+	constructor(props) {
+        super(props);
+        this.state = {editable: false, isModalOpen: false};
+    }
+	handleDelete(id) {
+		if (confirm('Está a punto de eliminar a una persona. ¿Está seguro de que desea continuar?')) {
+			$.ajax({
+				url: 'rest/people/' + id,
+				type: 'DELETE',
+				success(response) {
+					console.log('Person successfully removed');
+				 }
+			});
+		}
+    }
+	handleEdit(){
+		if (this.state.editable) {
+			var id = this.refs.id.value;
+			var name = this.refs.name.value;
+			var surname = this.refs.surname.value;
+			var person = {'id': id, 'name': name, 'surname': surname};
+		}
+		$.ajax({
+			url: 'rest/people/' + id,
+			type: 'PUT',
+			data: person,
+			success: (response) => {
+					console.log('Person updated!', response);
+			}
+		});
+		this.setState({editable: !this.state.editable});
+	}
+	openModal() {
+		this.setState({isModalOpen: true});
+	}
+	closeModal() {
+		this.setState({isModalOpen: false });
+	}
+	render() {
+		var id = this.state.editable ? <input type='hidden' ref="id" defaultValue={this.props.person.id} /> : <span>{this.props.person.id}</span>;
+		var name = this.state.editable ? <input type='text' ref="name" defaultValue={this.props.person.name} /> : <span>{this.props.person.name}</span>;
+		var surname = this.state.editable ? <input type='text' ref="surname" defaultValue={this.props.person.surname} /> : <span>{this.props.person.surname}</span>;
+		return (
+        	<tr>
+        		<td>{id}</td>
+                <td>{name}</td>
+                <td>{surname}</td>
+                <td>
+                    <a href="#" onClick={() => this.openModal()}>
+                        <i className="fa fa-paw" aria-hidden="true"></i>
+                    </a>
+                    <Modal isOpen={this.state.isModalOpen} onClose={() => this.closeModal()}>
+                    	<PetsApp id={this.props.person.id} owner_name={this.props.person.name}/>
+                    </Modal>
+                </td>
+                <td>
+                    <a href="#" onClick={this.handleEdit.bind(this, this.props.person.id)}>
+                    	{this.state.editable ? 'Submit' : 'Edit' } 
+                        <i className="fa fa-edit" aria-hidden="true"></i>
+                    </a>
+                </td>
+                <td>
+                    <a href="#" onClick={this.handleDelete.bind(this, this.props.person.id)}>
+                        <i className="fa fa-trash-o" aria-hidden="true"></i>
+                    </a>
+                </td>
+            </tr>
+        )
+    }
+}
+
+class App extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {people: []};
+    }
+
+    componentDidMount() {
+        $.ajax({
+            url: 'rest/people',
+            type: 'GET',
+            success: (response) => {
+                this.setState({people: response})
+            }
+        });
+    }
+    
+    componentWillUpdate() {
+    	$.ajax({
+            url: 'rest/people',
+            type: 'GET',
+            success: (response) => {
+                this.setState({people: response})
+            }
+        });
+    }
+
+    render() {
+        return (
+            <PeopleList people={this.state.people}/>
+        )
+    }
+}
+
+class NewPet extends React.Component {
+	constructor(props) {
+        super(props);
+    }
+	addPet() {
+		var name = this.refs.name.value;
+		var kind = this.refs.kind.value;
+		var breed = this.refs.breed.value;
+		var owner = this.props.owner;
+		
+		this.refs.name.value = "";
+		this.refs.kind.value = "";
+		this.refs.breed.value = "";
+
+		var pet = {'name': name, 'kind': kind, 'breed': breed, 'owner': owner};
+		$.ajax({
+			url: 'rest/pets/',
+			type: 'POST',
+			data: pet,
+			success: (response) => {
+					console.log('Pet added!', response);
+			}
+		});
+	}
+    render() {
+        return (
+        	<div>
+    			<input type="text" ref="name" placeholder="Enter a pet name" />
+    			<input type="text" ref="kind" placeholder="Enter a pet kind" />
+    			<input type="text" ref="breed" placeholder="Enter a pet breed" />
+    			<button type="button" className="btn btn-primary" onClick={this.addPet.bind(this)}>Submit</button>
+            </div>
+        )
+    }
+}
+
+class PetsList extends React.Component{
+	constructor(props) {
+        super(props);
+    }
+	render() {
+    	var pets = this.props.pets.map(pet =>
+            <Pet key={pet.id} pet={pet}/>
+        );
+        return (
+        	<div>
+        	<center><h1>Pets de {this.props.owner_name}</h1></center>
+        	<NewPet owner={this.props.owner}/>
+            <table className="table table-striped">
+                <tbody>
+                    <tr>
+                    	<th>#</th>
+                        <th>Name</th>
+                        <th>Kind</th>
+                        <th>breed</th>
+                        <th>owner</th>
+                        <th></th>
+                        <th></th>
+                    </tr>
+                    {pets}
+                </tbody>
+            </table>
+            </div>
+        )
+    }
+}
+
+class Pet extends React.Component{
+	constructor(props) {
+        super(props);
+        this.state = {editable: false};
+    }
+	handleDelete(id) {
+		if (confirm('Está a punto de eliminar a una mascota. ¿Está seguro de que desea continuar?')) {
+			$.ajax({
+				url: 'rest/pets/' + id,
+				type: 'DELETE',
+				success(response) {
+					console.log('Pet successfully removed');
+				 }
+			});
+		}
+    }
+	handleEdit(id){
+		if (this.state.editable) {
+			var id = id;
+			var name = this.refs.name.value;
+			var kind = this.refs.kind.value;
+			var breed = this.refs.breed.value;
+			var owner = this.refs.owner.value;
+			var pet = {'id': id, 'name': name, 'kind': kind, 'breed': breed, 'owner': owner};
+		}
+		$.ajax({
+			url: 'rest/pets/' + id,
+			type: 'PUT',
+			data: pet,
+			success: (response) => {
+					console.log('Pet updated!', response);
+			}
+		});
+		this.setState({editable: !this.state.editable});
+	}
+	render() {
+		var id = this.state.editable ? <input type='hidden' ref="id" defaultValue={this.props.pet.id} /> : <span>{this.props.pet.id}</span>;
+		var name = this.state.editable ? <input type='text' ref="name" defaultValue={this.props.pet.name} /> : <span>{this.props.pet.name}</span>;
+		var kind = this.state.editable ? <input type='text' ref="kind" defaultValue={this.props.pet.kind} /> : <span>{this.props.pet.kind}</span>;
+		var breed = this.state.editable ? <input type='text' ref="breed" defaultValue={this.props.pet.breed} /> : <span>{this.props.pet.breed}</span>;
+		var owner = this.state.editable ? <input type='hidden' ref="owner" defaultValue={this.props.pet.owner} /> : <span>{this.props.pet.owner}</span>;
+		return (
+        	<tr>
+        		<td>{id}</td>
+                <td>{name}</td>
+                <td>{kind}</td>
+                <td>{breed}</td>
+                <td>{owner}</td>
+                <td>
+                    <a href="#" onClick={this.handleEdit.bind(this, this.props.pet.id)}>
+                    	{this.state.editable ? 'Submit' : 'Edit' } 
+                        <i className="fa fa-edit" aria-hidden="true"></i>
+                    </a>
+                </td>
+                <td>
+                    <a href="#" onClick={this.handleDelete.bind(this, this.props.pet.id)}>
+                        <i className="fa fa-trash-o" aria-hidden="true"></i>
+                    </a>
+                </td>
+            </tr>
+        )
+    }
+}
+
+class PetsApp extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {pets: []};
+    }
+
+    componentDidMount() {
+        $.ajax({
+            url: 'rest/people/' + this.props.id + '/pets' ,
+            type: 'GET',
+            success: (response) => {
+                this.setState({pets: response})
+            }
+        });
+    }
+    
+    componentWillUnmount() {
+    	
+    }
+    
+    componentWillUpdate() {
+    	$.ajax({
+            url: 'rest/people/' + this.props.id + '/pets' ,
+            type: 'GET',
+            success: (response) => {
+                this.setState({pets: response})
+            }
+        });
+    }
+    
+    render() {
+        return (
+        	<PetsList pets={this.state.pets} owner={this.props.id} owner_name={this.props.owner_name} /> 
+        )
+    }
+}
+
+ReactDOM.render(
+    <App />,
+    document.getElementById('people-container')
+)
+
+class Modal extends React.Component {
+	render() {
+		if (this.props.isOpen === false)
+			return null
+	
+		let modalStyle = {
+			position: 'absolute',
+			top: '40%',
+			left: '50%',
+			transform: 'translate(-50%, -50%)',
+			zIndex: '9999',
+			background: '#fff'
+		}
+
+		let backdropStyle = {
+			position: 'absolute',
+			width: '100%',
+			height: '100%',
+			top: '0px',
+			left: '0px',
+			zIndex: '9998',
+			background: 'rgba(0, 0, 0, 0.3)'
+		}
+
+		return (
+			<div>
+				<div style={modalStyle}>{this.props.children}</div>
+				<div style={backdropStyle} onClick={e => this.close(e)}/>}
+			</div>
+		)
+	}
+
+	close(e) {
+		e.preventDefault()
+		if (this.props.onClose) {
+			this.props.onClose()
+		}
+	}
+}
diff --git a/src/main/webapp/js/view/people.js b/src/main/webapp/js/view/people.js
deleted file mode 100644
index 9ba4ebb88535d062b43e6ed12491865a59c3b68e..0000000000000000000000000000000000000000
--- a/src/main/webapp/js/view/people.js
+++ /dev/null
@@ -1,455 +0,0 @@
-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;
-	var selfpets;
-	
-	var formId = 'people-form';
-	var listId = 'people-list';
-	var formQuery = '#' + formId;
-	var listQuery = '#' + listId;
-	
-	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));
-		insertPeopleList($('#' + listContainerId));
-		
-		this.init = function() {
-			dao.listPeople(function(people) {
-				$.each(people, function(key, person) {
-					appendToTable(person);
-				});
-			});
-			
-			// La acción por defecto de enviar formulario (submit) se sobreescribe
-			// para que el envío sea a través de AJAX
-			$(formQuery).submit(function(event) {
-				var person = self.getPersonInForm();
-				
-				if (self.isEditing()) {
-					dao.modifyPerson(person,
-						function(person) {
-							$('#person-' + person.id + ' td.name').text(person.name);
-							$('#person-' + person.id + ' td.surname').text(person.surname);
-							self.resetForm();
-						},
-						showErrorMessage,
-						self.enableForm
-					);
-				} else {
-					dao.addPerson(person,
-						function(person) {
-							appendToTable(person);
-							self.resetForm();
-						},
-						showErrorMessage,
-						self.enableForm
-					);
-				}
-				
-				return false;
-			});
-			
-			petsView = new PetsView();
-			petsView.init();
-			
-			$('#btnClear').click(this.resetForm);
-		};
-
-		this.getPersonInForm = function() {
-			var form = $(formQuery);
-			return {
-				'id': form.find('input[name="id"]').val(),
-				'name': form.find('input[name="name"]').val(),
-				'surname': form.find('input[name="surname"]').val()
-			};
-		};
-
-		this.getPersonInRow = function(id) {
-			var row = $('#person-' + id);
-
-			if (row !== undefined) {
-				return {
-					'id': id,
-					'name': row.find('td.name').text(),
-					'surname': row.find('td.surname').text()
-				};
-			} else {
-				return undefined;
-			}
-		};
-		
-		this.editPerson = function(id) {
-			var row = $('#person-' + id);
-
-			console.log(row);
-			if (row !== undefined) {
-				var form = $(formQuery);
-				console.log(form);
-				console.log(row.find('td.name').text());
-				console.log(row.find('td.surname').text());
-				
-				form.find('input[name="id"]').val(id);
-				form.find('input[name="name"]').val(row.find('td.name').text());
-				form.find('input[name="surname"]').val(row.find('td.surname').text());
-			}
-		}
-
-		this.isEditing = function() {
-			return $(formQuery + ' input[name="id"]').val() != "";
-		};
-
-		this.disableForm = function() {
-			$(formQuery + ' input').prop('disabled', true);
-		};
-
-		this.enableForm = function() {
-			$(formQuery + ' input').prop('disabled', false);
-		};
-
-		this.resetForm = function() {
-			$(formQuery)[0].reset();
-			$(formQuery + ' input[name="id"]').val('');
-			$('#btnSubmit').val('Crear');
-		};
-	}
-	
-	var insertPeopleList = function(parent) {
-		parent.append(
-			'<table id="' + listId + '">\
-				<tr>\
-					<th>Nombre</th>\
-					<th>Apellido</th>\
-					<th></th>\
-					<th></th>\
-				</tr>\
-			</table>'
-		);
-	}
-
-	var insertPeopleForm = function(parent) {
-		parent.append(
-			'<form id="' + formId + '">\
-				<input name="id" type="hidden" value=""/>\
-				<input name="name" type="text" value="" />\
-				<input name="surname" type="text" value=""/>\
-				<input id="btnSubmit" type="submit" value="Create"/>\
-				<input id="btnClear" type="reset" value="Limpiar"/>\
-			</form>'
-		);
-	}
-
-	var createPersonRow = function(person) {
-		return '<tr id="person-'+ person.id +'">\
-			<td class="name">' + person.name + '</td>\
-			<td class="surname">' + person.surname + '</td>\
-			<td>\
-				<a class="edit" href="#">Edit</a>\
-			</td>\
-			<td>\
-				<a class="delete" href="#">Delete</a>\
-			</td>\
-			<td>\
-				<a class="pets" href="#">View Pets</a>\
-			</td>\
-		</tr>';
-	}
-
-	var showErrorMessage = function(jqxhr, textStatus, error) {
-		alert(textStatus + ": " + error);
-	}
-
-	var addRowListeners = function(person) {
-		$('#person-' + person.id + ' a.edit').click(function() {
-			self.editPerson(person.id);
-			$('input#btnSubmit').val('Modificar');
-		});
-		
-		$('#person-' + person.id + ' a.delete').click(function() {
-			if (confirm('Está a punto de eliminar a una persona. ¿Está seguro de que desea continuar?')) {
-				dao.deletePerson(person.id,
-					function() {
-						$('tr#person-' + person.id).remove();
-					},
-					showErrorMessage
-				);
-			}
-		});
-		
-		$('#person-' + person.id + ' a.pets').click(function() {
-			showPeoplePets(person);
-		});
-	}
-
-	var appendToTable = function(person) {
-		$(listQuery + ' > tbody:last')
-			.append(createPersonRow(person));
-		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="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#petsBtnSubmit').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="petsBtnSubmit" 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) {
-		console.log(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);
-		console.log(pet.id);
-		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="petsBtnSubmit" 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() {
-		
-		selfpets = this;
-		
-		this.init = function() {
-			
-			petsForm();
-			
-			$(petsFormQuery).submit(function(event) {
-				
-				var pet = selfpets.getPetInForm();
-				
-				if (selfpets.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);
-							selfpets.resetForm();
-						},
-						showErrorMessage,
-						selfpets.enableForm
-					);
-				} else {
-					console.log("ola");
-					pets.addPet(pet,
-						function(pet) {
-							selfpets.resetForm();
-						},
-						showErrorMessage,
-						selfpets.enableForm
-					);
-				}
-				
-				return false;
-			});
-			
-			$('#btnClear').click(this.resetForm);
-		};
-
-		selfpets.getPetInForm = 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()
-			};
-		};
-
-		selfpets.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;
-			}
-		};
-		
-		selfpets.editPet = function(id) {
-			var row = $('#pet-' + id);
-
-			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);
-			}
-		}
-
-		selfpets.isEditing = function() {
-			return $(petsFormQuery + ' input[name="petId"]').val() != "";
-		};
-
-		selfpets.disableForm = function() {
-			$(petsFormQuery + ' input').prop('disabled', true);
-		};
-
-		selfpets.enableForm = function() {
-			$(petsFormQuery + ' input').prop('disabled', false);
-		};
-
-		selfpets.resetForm = function() {
-			$(petsFormQuery)[0].reset();
-			$(petsFormQuery + ' input[name="petId"]').val('');
-			$('#petsBtnSubmit').val('Crear');
-		};
-	}
-	
-	return PeopleView;
-})();
diff --git a/src/main/webapp/main.html b/src/main/webapp/main.html
index 28ed90fe3a450ec40be185d74f7dc3822fc2bf1e..300101eaafbc3b3751f0b1b44db99823881b2eb4 100644
--- a/src/main/webapp/main.html
+++ b/src/main/webapp/main.html
@@ -1,25 +1,34 @@
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset="UTF-8">
-<title>DAA Example</title>
-</head>
-<body>
-	<div id="people-container">
-		<h1>People</h1>
-		<a id="#logout" href="logout">Logout</a>
-	</div>
+    <head>
+        <meta charset="UTF-8">
+        <title>DAA Example</title>
 
-   <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(), new PetsDAO(), 'people-container', 'people-container');
-		view.init();
-	});
-	</script>
-</body>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+       
+    </head>
+	<body>
+	        
+		<div class="page-header">
+            <h1>People and Pets Manager <small>simple webapp to manage people and their pets</small></h1>
+		</div>
+		
+	    <div id="people-container">			
+		</div>
+		
+		<a id="#logout" href="logout"><button type="button" class="btn btn-danger">Logout</button></a>
+	
+	    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
+	    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+	    <script src="https://unpkg.com/react@15/dist/react.js"></script>
+        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/0.9.1/react-select.js"></script>
+	    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.js"></script>
+	   
+	    <script type="text/javascript" src="js/dao/people.js"></script>
+	    <script type="text/javascript" src="js/dao/pets.js"></script>
+	    <script type="text/babel" src="js/view/people-container.js"></script>
+		
+	</body>
 </html>
\ No newline at end of file