diff --git a/app.js b/app.js
index 0e3c0e9..f48ec01 100644
--- a/app.js
+++ b/app.js
@@ -5,14 +5,10 @@ var express = require('express'),
 
 var port = process.env.PORT || 8080;
 
-// Initialize a new socket.io object. It is bound to 
-// the express app, which allows them to coexist.
+// Initialize a new socket.io object
 
 var io = require('socket.io').listen(app.listen(port));
 
-// Require the configuration and the routes files, and pass
-// the app and io as arguments to the returned functions.
-
 require('./config')(app, io);
 require('./routes')(app, io);
 
diff --git a/package.json b/package.json
index 0bac441..a1478f4 100644
--- a/package.json
+++ b/package.json
@@ -3,19 +3,15 @@
   "version": "0.0.2",
   "description": "Real-time chat",
   "main": "app.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "keywords": [
     "waffle",
     "chat"
   ],
   "author": "Catlin Buckley",
-  "license": "MIT",
   "dependencies": {
     "ejs": "^1.0.0",
-    "express": "^4.8.2",
-    "gravatar": "~1.0.6",
-    "socket.io": "^1.0.6"
+    "express": "^4.10.4",
+    "gravatar": "^1.1.0",
+    "socket.io": "^1.2.1"
   }
 }
diff --git a/public/css/stylesheet.css b/public/css/stylesheet.css
index 96e8341..70d86cc 100644
--- a/public/css/stylesheet.css
+++ b/public/css/stylesheet.css
@@ -1,4 +1,3 @@
-/*------------- Browser reset ------------- */
 * {
 	padding: 0;
 	margin: 0;
@@ -7,7 +6,6 @@
 
 :focus {outline-color:#f6cb7c;}
 
-/* ------------ Body styles ------------ */
 html {
 	background-image: url("/img/waffle-bg.gif")
 }
@@ -18,12 +16,10 @@ body {
 	font: 16px/1.3 'Arial',sans-serif;
 }
 
-/* ------ Section ------ */
 .section {
 	margin: 20px;
 }
 
-/* ------ Home ------ */
 .homebanner {
 	height: 120px;
 	background-color: #3c4446;
@@ -48,11 +44,6 @@ body {
 	color: white;
 }
 
-
-
-/* ------ Invite ------ */
-
-
 .banner {
 	height: 70px;
 	background-color: #3c4446;
@@ -71,18 +62,11 @@ body {
 	color: #d6441b;
 }
 
-
-
-
-/* ------------ Section styles ------------ */
 html {
 	background-image: url("/img/waffle-bg.gif")
 }
 
 
-/* ------ Home ------ */
-
-
 .homesection {
 	text-align:center;
 	margin-top:140px;
@@ -141,44 +125,25 @@ html {
 	color: #88bfd4;
 }
 
-
-
-/* ------ Connected ------*/
-
-.connected {
+.connected, .personinside {
 	text-align:center;
 	display: block;
 	margin:0px auto;
-	width: 700px;
-	height: 400px;
+	max-width: 400px;
 	background-color: #ffffff;
 	border-radius: 3px;
 	box-shadow:0px 3px 3px #e3e4e6;
 	color: #637277;
+	padding: 40px 20px;
 }
-.connected h2 {
-	padding-top: 20px;
-}
-.infoConnected {
+.userInfo {
 	text-align: left;
 	float: right;
 	margin: 65px 165px 0 0;
 }
-#creatorImage {
-	float: left;
-	margin: 90px 0 0 140px;
-	width: 100px;
-	height: 100px;
-	border-radius: 4px;
-}
 
-#yourName {
-	float:left;
+.loginForm > input {
 	padding-left:10px;
-	width: 150px;
-	height: 30px;
-	border-radius: 3px;
-	box-shadow:0px 3px 3px #e3e4e6;
 	background-color: #f0f1f3;
 	border: 1px solid #d1d1d1;
 	border-radius: 3px;
@@ -187,22 +152,21 @@ html {
 	overflow: hidden;
 }
 
+#yourName {
+	width: 150px;
+	height: 30px;
+
+}
+
 #yourEmail {
-	float:left;
-	padding-left: 10px;
 	width: 200px;
 	height: 30px;
-	border-radius: 3px;
-	box-shadow:0px 3px 3px #e3e4e6;
-	background-color: #f0f1f3;
-	border: 1px solid #d1d1d1;
-	border-radius: 3px;
-	box-shadow:0px 3px 3px #e3e4e6;
 	margin-bottom:40px;
 }
 
 #yourEnter {
-	float:left;
+	padding-left:0;
+	margin-bottom: 0;
 	width: 110px;
 	height: 40px;
 	text-align:center;
@@ -215,71 +179,17 @@ html {
 	font-size: 15px;
 }
 
-
-
-/* ------ Person Inside ------*/
-
-.personinside {
-	text-align:center;
-	display: block;
-	margin:0px auto;
-	width: 700px;
-	height: 400px;
-	background-color: #ffffff;
-	border-radius: 3px;
-	box-shadow:0px 3px 3px #e3e4e6;
-	color: #637277;
-}
-.personinside h2 {
-	padding-top: 20px;
-	width: 210px;
-	overflow: hidden;
-}
-
-.infoInside {
-	text-align: left;
-	float: right;
-	margin: 65px 165px 0 0;
-}
-
-#ownerImage {
-	float: left;
-	margin: 90px 0 0 140px;
-	width: 100px;
-	height: 100px;
-	border-radius: 4px;
-}
-
 #hisName {
-	float:left;
-	padding-left:10px;
 	width: 150px;
 	height: 30px;
-	border-radius: 3px;
-	box-shadow:0px 3px 3px #e3e4e6;
-	background-color: #f0f1f3;
-	border: 1px solid #d1d1d1;
-	border-radius: 3px;
-	box-shadow:0px 3px 3px #e3e4e6;
-	margin-bottom:20px;
 }
 
 #hisEmail {
-	float:left;
-	padding-left: 10px;
 	width: 200px;
 	height: 30px;
-	border-radius: 3px;
-	box-shadow:0px 3px 3px #e3e4e6;
-	background-color: #f0f1f3;
-	border: 1px solid #d1d1d1;
-	border-radius: 3px;
-	box-shadow:0px 3px 3px #e3e4e6;
-	margin-bottom:40px;
 }
 
 #hisEnter {
-	float:left;
 	width: 110px;
 	height: 40px;
 	text-align:center;
@@ -290,12 +200,10 @@ html {
 	color:white;
 	font-weight: bold;
 	font-size: 15px;
+	margin-bottom:0;
+	padding-left: 0;
 }
 
-
-/* ------ Invite ------ */
-
-
 .invite-textfield {
 	text-align:center;
 	display: block;
@@ -325,28 +233,20 @@ html {
 	color: #637277;
 }
 
-
-/* ------ Left ------*/
-
 .left {
 	text-align:center;
 	display: block;
 	margin:0px auto;
-	width: 750px;
-	height: 300px;
+	max-width: 700px;
 	background-color: #ffffff;
 	border-radius: 3px;
 	box-shadow:0px 3px 3px #e3e4e6;
 	color: #637277;
 	margin-bottom: 400px;
-}
-.left h2 {
-	padding-top: 50px;
-	padding-bottom: 6px;
+	padding: 40px 20px;
 }
 .left h5 {
 	font-weight: normal;
-	margin-bottom: 100px;
 }
 
 #leftImage {
@@ -361,9 +261,6 @@ html {
 	overflow: hidden;
 }
 
-/* ------ Too many People ------*/
-
-
 .toomanypeople {
 	text-align:center;
 	display: block;
@@ -388,31 +285,20 @@ html {
 	color: #88bfd4;
 }
 
-
-
-/* ------ No Messages ------ */
-
-
 .nomessages {
 	text-align:center;
 	display: block;
 	margin:0px auto;
-	width: 750px;
-	height: 300px;
+	max-width: 700px;
 	background-color: #ffffff;
 	border-radius: 3px;
 	box-shadow:0px 3px 3px #e3e4e6;
 	color: #637277;
 	margin-bottom: 400px;
-}
-.nomessages h2 {
-	padding-top: 50px;
-	overflow: hidden;
-	padding-bottom: 6px;
+	padding: 40px 20px;
 }
 .nomessages h5 {
 	font-weight: normal;
-	margin-bottom: 100px;
 }
 
 #noMessagesImage {
@@ -420,7 +306,7 @@ html {
 	margin: 90px 0 0 140px;
 	width: 100px;
 	height: 100px;
-	border-radius: 4px;
+	border-radius: 50%;
 }
 
 #img {
@@ -428,24 +314,12 @@ html {
 	margin: 90px 0 0 140px;
 	width: 100px;
 	height: 100px;
-	border-radius: 4px;
-}
-.info {
-	text-align: left;
-	float: right;
-	margin: 65px 60px 0 0;
-	width: 405px;
-	overflow: hidden;
+	border-radius: 50%;
 }
 .nickname-chat {
 	overflow: hidden;
 }
 
-
-/* ------ Chat Screen ------ */
-
-
-
 .image {
 	clear:both;
 	float:left;
@@ -459,7 +333,7 @@ html {
 	float: left;
 	width: 80px;
 	height: 80px;
-	border-radius: 4px;
+	border-radius: 50%;
 }
 
 .body {
@@ -543,9 +417,6 @@ html {
 	padding-top: 4px;
 }
 
-
-/* ------------ Footer styles ------------ */
-
 footer {
 	position:fixed;
 	bottom:0;
@@ -595,12 +466,6 @@ footer {
 	cursor:pointer;
 }
 
-
-
-
-/* ---------------------- HIDE -------------------------- */
-
-
 .connected {
 	display: none;
 }
@@ -631,7 +496,7 @@ footer {
 
 .chatscreen{
 	display:none;
-	width:700px;
+	max-width:700px;
 	margin: 0 auto 200px;
 	overflow:hidden;
-}
+}
\ No newline at end of file
diff --git a/public/img/waffle.gif b/public/img/waffle.gif
new file mode 100644
index 0000000..148f48a
Binary files /dev/null and b/public/img/waffle.gif differ
diff --git a/public/img/waffle.jpg b/public/img/waffle.jpg
new file mode 100644
index 0000000..f80da51
Binary files /dev/null and b/public/img/waffle.jpg differ
diff --git a/public/js/chat.js b/public/js/chat.js
index f8478c1..31ae58c 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -265,7 +265,7 @@ $(function(){
 		if(status === "connected"){
 
 			section.children().css('display', 'none');
-			onConnect.fadeIn(1200);
+			onConnect.fadeIn(1000);
 		}
 
 		else if(status === "inviteSomebody"){
@@ -273,15 +273,15 @@ $(function(){
 			// Set the invite link content
 			$("#link").text(window.location.href);
 
-			onConnect.fadeOut(1200, function(){
-				inviteSomebody.fadeIn(1200);
+			onConnect.fadeOut(1000, function(){
+				inviteSomebody.fadeIn(1000);
 			});
 		}
 
 		else if(status === "personinchat"){
 
 			onConnect.css("display", "none");
-			personInside.fadeIn(1200);
+			personInside.fadeIn(1000);
 
 			chatNickname.text(data.user);
 			ownerImage.attr("src",data.avatar);
@@ -289,10 +289,10 @@ $(function(){
 
 		else if(status === "youStartedChatWithNoMessages") {
 
-			left.fadeOut(1200, function() {
-				inviteSomebody.fadeOut(1200,function(){
-					noMessages.fadeIn(1200);
-					footer.fadeIn(1200);
+			left.fadeOut(1000, function() {
+				inviteSomebody.fadeOut(1000,function(){
+					noMessages.fadeIn(1000);
+					footer.fadeIn(1000);
 				});
 			});
 
@@ -302,9 +302,9 @@ $(function(){
 
 		else if(status === "heStartedChatWithNoMessages") {
 
-			personInside.fadeOut(1200,function(){
-				noMessages.fadeIn(1200);
-				footer.fadeIn(1200);
+			personInside.fadeOut(1000,function(){
+				noMessages.fadeIn(1000);
+				footer.fadeIn(1000);
 			});
 
 			friend = data.users[0];
@@ -324,13 +324,13 @@ $(function(){
 
 			section.children().css('display','none');
 			footer.css('display', 'none');
-			left.fadeIn(1200);
+			left.fadeIn(1000);
 		}
 
 		else if(status === "tooManyPeople") {
 
 			section.children().css('display', 'none');
-			tooManyPeople.fadeIn(1200);
+			tooManyPeople.fadeIn(1000);
 		}
 	}
 
diff --git a/views/chat.html b/views/chat.html
index f57ce7a..d1d8c63 100644
--- a/views/chat.html
+++ b/views/chat.html
@@ -1,9 +1,5 @@
 <!DOCTYPE html>
 
-<!--
-	This file is rendered by express.js when the url /chat/123456 is visited in a browser.
--->
-
 <html>
 
 <head>
@@ -12,6 +8,7 @@
 
 	<link type="text/css" rel="stylesheet" href="../css/stylesheet.css" />
 	<link href="http://fonts.googleapis.com/css?family=Open+Sans Condensed:300italic,300,700" rel="stylesheet" type="text/css">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
 </head>
@@ -24,8 +21,6 @@
 
 		<div class="connected">
 
-			<img src="../img/unnamed.jpg" id="creatorImage" />
-
 			<div class="infoConnected">
 				<h2>Who are you?</h2>
 				<br/>
@@ -42,8 +37,6 @@ <h2>Who are you?</h2>
 
 		<div class="personinside">
 
-			<img src="../img/unnamed.jpg" id="ownerImage" />
-
 			<div class="infoInside">
 				<h2>Chat with <span class="nickname-chat"></span></h2>
 				<br/>
@@ -60,26 +53,24 @@ <h2>Chat with <span class="nickname-chat"></span></h2>
 
 		<div class="invite-textfield">
 
-			<h2>Oops, there are no other people in this chat!</h2>
+			<h2>There are no other people in this chat.</h2>
 			<h5>Invite a friend by sending them this URL</h5>
 
 			<div class="link">
-				<a title="Invite a friend" href="" id="link"></a>
+				<span title="Invite a friend" href="" id="link"></span>
 			</div>
 
 		</div>
 
 		<div class="left">
 
-			<img src="../img/unnamed.jpg" id="leftImage" />
-
-			<div class="info">
 				<h2><span class="nickname-left"></span> has left the chat.</h2>
 				<h5>Invite somebody else by sending them this page.</h5>
+				<div class="link">
+					<span title="Invite a friend" href="" id="link"></span>
+				</div>
 			</div>
 
-		</div>
-
 		<div class="toomanypeople">
 
 			<h2>Sorry. This chat is unavailable.</h2>
@@ -89,12 +80,8 @@ <h5>There are already two people in this room. Would you like to start a <a titl
 
 		<div class="nomessages">
 
-			<img src="../img/unnamed.jpg" id="noMessagesImage" />
-
-			<div class="info">
 				<h2>You are chatting with <span class="nickname-chat"></span>.</h2>
 				<h5>Send them a message from the form below!</h5>
-			</div>
 
 		</div>
 
diff --git a/views/home.html b/views/home.html
index fc84148..9e95d1e 100644
--- a/views/home.html
+++ b/views/home.html
@@ -1,9 +1,5 @@
 <!DOCTYPE html>
 
-<!--
-This file is rendered by express.js. It is simply a page to create a chatroom.
--->
-
 <html>
 
 <head>