diff --git a/src/main/java/es/uvigo/esei/daa/LoginFilter.java b/src/main/java/es/uvigo/esei/daa/LoginFilter.java
index 6dd8ad265521e5322bce8bfcdda4f00118fad349..0e5c102da1f4f331ca42ffa84430544c1afd0e17 100644
--- a/src/main/java/es/uvigo/esei/daa/LoginFilter.java
+++ b/src/main/java/es/uvigo/esei/daa/LoginFilter.java
@@ -35,7 +35,7 @@ public class LoginFilter implements Filter {
 	private static final String LOGOUT_PATH = "/logout";
 	private static final String REST_PATH = "/rest";
 	private static final String[] PUBLIC_PATHS = new String[] {
-		"/index.html" // Add the paths that can be publicly accessed (e.g. /js, /css...)
+		"/index.html", "/js", "/css" // Add the paths that can be publicly accessed (e.g. /images...)
 	};
 
 	@Override
diff --git a/src/main/webapp/css/login.css b/src/main/webapp/css/login.css
new file mode 100644
index 0000000000000000000000000000000000000000..e336712d474ccc9d6afdac46453e8fa7dbafaa7e
--- /dev/null
+++ b/src/main/webapp/css/login.css
@@ -0,0 +1,49 @@
+html, body {
+	height: 100%;
+}
+
+body {
+	display: -ms-flexbox;
+	display: -webkit-box;
+	display: flex;
+	-ms-flex-align: center;
+	-ms-flex-pack: center;
+	-webkit-box-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	justify-content: center;
+	padding-top: 40px;
+	padding-bottom: 40px;
+	background-color: red;
+}
+
+.form-signin {
+	width: 100%;
+	max-width: 330px;
+	padding: 15px;
+	margin: 0 auto;
+}
+
+.form-signin .form-control {
+	position: relative;
+	box-sizing: border-box;
+	height: auto;
+	padding: 10px;
+	font-size: 16px;
+}
+
+.form-signin .form-control:focus {
+	z-index: 2;
+}
+
+#login {
+	margin-bottom: -1px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+#password {
+	margin-bottom: 10px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+}
\ No newline at end of file
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index a688425bd7cdd100847d70fdf17e0ec12d227263..d372c33bef0343a86ff325a16f1f83a8a47a84b5 100644
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -1,20 +1,25 @@
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset="UTF-8">
-<title>DAA Example - Login</title>
-</head>
-<body>
-	<form action="main.html" method="POST">
-		<div>
-			Login: <input name="login" type="text" />
-		</div>
-		<div>
-			Password: <input name="password" type="password" />
-		</div>
-		<div>
-			<input type="submit" value="Login" />
-		</div>
-	</form>
-</body>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		
+		<title>DAA Example - Login</title>
+		
+		<link rel="stylesheet" href="css/login.css">
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+	</head>
+	<body class="text-center">
+		<form class="form-singin" action="main.html" method="POST">
+		  <h1 class="h1 mb-3 font-weight-normal">DAA Example</h1>
+		  
+			<label for="login" class="sr-only">Login</label>
+			<input id="login" name="login" type="text" class="form-control" placeholder="Login" required autofocus />
+			
+			<label for="password" class="sr-only">Password</label>
+			<input id="password" name="password" type="password" class="form-control" placeholder="Password" required />
+			
+			<button type="submit" class="btn btn-lg btn-primary btn-block mt-3">Login</button>
+		</form>
+	</body>
 </html>
\ No newline at end of file
diff --git a/src/main/webapp/js/view/people.js b/src/main/webapp/js/view/people.js
index 2c0b0e5034d04f5756eb40dc74aa71801567e763..87e7433773b3445eeb95816a13521de566d92247 100644
--- a/src/main/webapp/js/view/people.js
+++ b/src/main/webapp/js/view/people.js
@@ -124,12 +124,11 @@ var PeopleView = (function() {
 	
 	var insertPeopleList = function(parent) {
 		parent.append(
-			'<table id="' + listId + '">\
-				<tr>\
-					<th>Nombre</th>\
-					<th>Apellido</th>\
-					<th></th>\
-					<th></th>\
+			'<table id="' + listId + '" class="table">\
+				<tr class="row">\
+					<th class="col-sm-4">Nombre</th>\
+					<th class="col-sm-5">Apellido</th>\
+					<th class="col-sm-3">&nbsp;</th>\
 				</tr>\
 			</table>'
 		);
@@ -137,25 +136,31 @@ var PeopleView = (function() {
 
 	var insertPeopleForm = function(parent) {
 		parent.append(
-			'<form id="' + formId + '">\
+			'<form id="' + formId + '" class="mb-5 mb-10">\
 				<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"/>\
+				<div class="row">\
+					<div class="col-sm-4">\
+						<input name="name" type="text" value="" placeholder="Nombre" class="form-control" required/>\
+					</div>\
+					<div class="col-sm-5">\
+						<input name="surname" type="text" value="" placeholder="Apellido" class="form-control" required/>\
+					</div>\
+					<div class="col-sm-3">\
+						<input id="btnSubmit" type="submit" value="Crear" class="btn btn-primary" />\
+						<input id="btnClear" type="reset" value="Limpiar" class="btn" />\
+					</div>\
+				</div>\
 			</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>\
+		return '<tr id="person-'+ person.id +'" class="row">\
+			<td class="name col-sm-4">' + person.name + '</td>\
+			<td class="surname col-sm-5">' + person.surname + '</td>\
+			<td class="col-sm-3">\
+				<a class="edit btn btn-primary" href="#">Editar</a>\
+				<a class="delete btn btn-warning" href="#">Eliminar</a>\
 			</td>\
 		</tr>';
 	};
diff --git a/src/main/webapp/main.html b/src/main/webapp/main.html
index 461f6e52e8f92bfc313bca30ac8b347d9122387f..d3d786f03dacd58700e5ecea82ebb399529c37ca 100644
--- a/src/main/webapp/main.html
+++ b/src/main/webapp/main.html
@@ -1,24 +1,40 @@
 <!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>
+		
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+	</head>
+	<body>
+		<header>
+			<div class="navbar navbar-dark bg-dark box-shadow">
+				<div class="container d-flex justify-content-between">
+					<a href="#" class="navbar-brand d-flex align-items-center">
+					   <strong>DAA Example</strong>
+					</a>
+					
+          <a id="#logout" href="logout" class="btn btn-dark" role="button">Logout</a>
+				</div>
+			</div>
+		</header>
 
-	<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">
-		$(document).ready(function() {
-			var view = new PeopleView(new PeopleDAO(), 'people-container', 'people-container');
-			
-			view.init();
-		});
-	</script>
-</body>
+		<div class="container">
+			<div id="people-container">
+				<h1 class="display-5 mt-3 mb-3">People</h1>
+			</div>
+		</div>
+
+	<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.4.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">
+			$(document).ready(function() {
+				var view = new PeopleView(new PeopleDAO(), 'people-container', 'people-container');
+				
+				view.init();
+			});
+		</script>
+	</body>
 </html>
\ No newline at end of file
