diff --git a/openvidu-js-java/src/main/resources/static/images/favicon.ico b/openvidu-js-java/src/main/resources/static/images/favicon.ico
new file mode 100644
index 00000000..0e2249ad
Binary files /dev/null and b/openvidu-js-java/src/main/resources/static/images/favicon.ico differ
diff --git a/openvidu-js-java/src/main/resources/static/images/openvidu_globe_bg_transp_cropped.png b/openvidu-js-java/src/main/resources/static/images/openvidu_globe_bg_transp_cropped.png
new file mode 100644
index 00000000..e0309e62
Binary files /dev/null and b/openvidu-js-java/src/main/resources/static/images/openvidu_globe_bg_transp_cropped.png differ
diff --git a/openvidu-js-java/src/main/resources/static/images/openvidu_grey_bg_transp_cropped.png b/openvidu-js-java/src/main/resources/static/images/openvidu_grey_bg_transp_cropped.png
new file mode 100644
index 00000000..49f311a6
Binary files /dev/null and b/openvidu-js-java/src/main/resources/static/images/openvidu_grey_bg_transp_cropped.png differ
diff --git a/openvidu-js-java/src/main/resources/static/images/openvidu_vert_white_bg_trans_cropped.png b/openvidu-js-java/src/main/resources/static/images/openvidu_vert_white_bg_trans_cropped.png
new file mode 100644
index 00000000..a1c8b2d7
Binary files /dev/null and b/openvidu-js-java/src/main/resources/static/images/openvidu_vert_white_bg_trans_cropped.png differ
diff --git a/openvidu-js-java/src/main/resources/static/index.html b/openvidu-js-java/src/main/resources/static/index.html
index fe335107..9b28d212 100644
--- a/openvidu-js-java/src/main/resources/static/index.html
+++ b/openvidu-js-java/src/main/resources/static/index.html
@@ -4,6 +4,7 @@
 	<title>openvidu-js-java</title>
 
 	<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
+	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
 
 	<!-- Bootstrap -->
 	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
@@ -32,14 +33,17 @@
 	<nav class="navbar navbar-default">
 		<div class="container">
 			<div class="navbar-header">
-				<a class="navbar-brand" href="#">OpenVidu Tutorial</a>
-				<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-js-java" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
+				<a class="navbar-brand" href="/"><img class="demo-logo" src="images/openvidu_vert_white_bg_trans_cropped.png"/> JS Java</a>
+				<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-js-java" title="GitHub Repository"
+				    target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
+				<a class="navbar-brand nav-icon" href="http://www.openvidu.io/docs/tutorials/openvidu-js-java/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
 			</div>
 		</div>
 	</nav>
 
-	<div class="container vertical-center">
-		<div id="not-logged" class="horizontal-center">
+	<div id="main-container" class="container">
+		<div id="not-logged" class="vertical-center">
+			<div id="img-div"><img src="images/openvidu_grey_bg_transp_cropped.png" /></div>
 			<form class="form-group jumbotron" onsubmit="return false">
 				<p>
 					<label>User</label><input class="form-control" type="text" id="user" required>
@@ -76,13 +80,10 @@
 			</table>
 		</div>
 
-		<div id="logged" class="horizontal-center" hidden>
-			<div id="join">
-				<div id="login-info">
-					<div>Logged as <span id="name-user"></span></div>
-					<button id="logout-btn" class="btn btn-warning" onclick="logOut()">Log out</button>
-				</div>
-				<div class="jumbotron">
+		<div id="logged" hidden>
+			<div id="join" class="vertical-center">
+				<div id="img-div"><img src="images/openvidu_grey_bg_transp_cropped.png" /></div>
+				<div id="join-dialog" class="jumbotron">
 					<h1>Join a video session</h1>
 					<form class="form-group" onsubmit="return false">
 						<p>
@@ -94,9 +95,16 @@
 							<input class="form-control" type="text" id="sessionName" required>
 						</p>
 						<p class="text-center">
-							<button id="join-btn" class="btn btn-lg btn-success" onclick="joinSession()">Join!</button>
+							<button class="btn btn-lg btn-success" onclick="joinSession()">Join!</button>
 						</p>
 					</form>
+					<hr style="
+						background: #4d4d4d;
+					">
+					<div id="login-info">
+						<div>Logged as <span id="name-user">publisher1</span></div>
+						<button id="logout-btn" class="btn btn-warning" onclick="logOut()">Log out</button>
+					</div>
 				</div>
 			</div>
 
@@ -105,7 +113,11 @@
 					<h1 id="session-title"></h1>
 					<input class="btn btn-large btn-danger" type="button" id="buttonLeaveSession" onmouseup="removeUser(); leaveSession()" value="Leave session">
 				</div>
-				<div id="main-video" class="col-md-6"><p class="nickName"></p><p class="userName"></p><video autoplay src=""></video></div>
+				<div id="main-video" class="col-md-6">
+					<p class="nickName"></p>
+					<p class="userName"></p>
+					<video autoplay src=""></video>
+				</div>
 				<div id="video-container" class="col-md-6"></div>
 			</div>
 		</div>
@@ -114,7 +126,7 @@
 	<footer class="footer">
 		<div class="container">
 			<div class="text-muted">OpenVidu © 2017</div>
-			<a href="http://www.codeurjc.es/" target="_blank"><img src="https://codeurjc.files.wordpress.com/2016/01/logo_cetrado_negro.png?w=275&h=165"/></a>
+			<a href="http://www.openvidu.io/" target="_blank"><img class="openvidu-logo" src="images/openvidu_globe_bg_transp_cropped.png"/></a>
 		</div>
 	</footer>
 
diff --git a/openvidu-js-java/src/main/resources/static/style.css b/openvidu-js-java/src/main/resources/static/style.css
index 25b4fdd7..f1c123ae 100644
--- a/openvidu-js-java/src/main/resources/static/style.css
+++ b/openvidu-js-java/src/main/resources/static/style.css
@@ -5,8 +5,12 @@ html {
 
 nav {
 	height: 50px;
-	position: absolute !important;
 	width: 100%;
+	z-index: 1;
+	background-color: #4d4d4d !important;
+	border-color: #4d4d4d !important;
+	border-top-right-radius: 0 !important;
+	border-top-left-radius: 0 !important;
 }
 
 .navbar-header {
@@ -18,38 +22,121 @@ nav {
 	float: right;
 }
 
+nav a {
+	color: #ccc !important;
+}
+
 nav i.fa {
 	font-size: 40px;
+	color: #ccc;
+}
+
+nav a:hover {
+	color: #a9a9a9 !important;
+}
+
+nav i.fa:hover {
+	font-size: 40px;
+	color: #a9a9a9;
+}
+
+#main-container {
+	padding-bottom: 80px;
 }
 
 .vertical-center {
-	min-height: 100%;
-	min-height: 100vh;
-	display: flex;
-	align-items: center;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
 }
 
 .horizontal-center {
 	margin: 0 auto;
 }
 
+.form-control {
+	color: #0088aa;
+	font-weight: bold;
+}
+
+.form-control:focus {
+	border-color: #0088aa;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
+}
+
+input.btn {
+	font-weight: bold;
+}
+
+.btn-success {
+	background-color: #0088aa !important;
+	border-color: #0088aa;
+}
+
 .footer {
 	position: absolute;
 	bottom: 0;
 	width: 100%;
 	height: 60px;
-	background-color: #f8f8f8;
+	background-color: #4d4d4d;
 }
 
 .footer .text-muted {
 	margin: 20px 0;
 	float: left;
+	color: #ccc;
 }
 
-.footer img {
-	height: 50px;
+.openvidu-logo {
+	height: 35px;
 	float: right;
-	margin: 5px 0;
+	margin: 12px 0;
+	-webkit-transition: all 0.1s ease-in-out;
+	-moz-transition: all 0.1s ease-in-out;
+	-o-transition: all 0.1s ease-in-out;
+	transition: all 0.1s ease-in-out;
+}
+
+.openvidu-logo:hover {
+	-webkit-filter: grayscale(0.5);
+	filter: grayscale(0.5);
+}
+
+.demo-logo {
+	margin: 0;
+	height: 22px;
+	float: left;
+	padding-right: 8px;
+}
+
+a:hover .demo-logo {
+	-webkit-filter: brightness(0.7);
+	filter: brightness(0.7);
+}
+
+#join-dialog h1 {
+	color: #4d4d4d;
+	font-weight: bold;
+	text-align: center;
+}
+
+#join-dialog label {
+	color: #0088aa;
+}
+
+#join-dialog input.btn {
+	margin-top: 15px;
+}
+
+#img-div {
+	text-align: center;
+    padding-bottom: 3em;
+}
+
+#img-div img {
+	height: 15%;
 }
 
 #logged {
@@ -61,13 +148,6 @@ nav i.fa {
     margin: auto;
 }
 
-#session {
-	padding-top: 70px;
-	height: 100vh;
-	height: 100%;
-	width: 100%;
-}
-
 #session-header {
 	margin-bottom: 20px;
 }
@@ -178,7 +258,6 @@ table i {
 
 #login-info {
 	text-align: right;
-    margin-bottom: 1em;
 }
 
 #login-info div {
@@ -188,4 +267,30 @@ table i {
 
 #name-user {
 	font-weight: bold;
+}
+
+
+/* xs ans md screen resolutions*/
+
+@media screen and (max-width: 991px) {
+	.container .navbar-header {
+		margin-right: 0 !important;
+		margin-left: 0 !important;
+	}
+	.nav-icon {
+		padding: 9px 8px 9px 8px;
+	}
+	nav i.fa {
+		font-size: 32px;
+	}
+	.vertical-center {
+		width: 85%;
+		padding-top: 10px;
+	}
+	#img-div {
+		padding-bottom: 1em;
+	}
+	#img-div img {
+		height: 10%;
+	}
 }
\ No newline at end of file