diff --git a/Images/spinner.gif b/Images/spinner.gif
index ddb7ff1..d84f653 100644
Binary files a/Images/spinner.gif and b/Images/spinner.gif differ
diff --git a/html/commit.html b/html/commit.html
index 06047b4..c0e66c0 100644
--- a/html/commit.html
+++ b/html/commit.html
@@ -11,13 +11,14 @@
 </head>
 
 <body style="padding: 0px; border: 0px">
-
-	<div id="notification" style="display:none;">
-		<img src="spinner.gif" width="25px" alt="Spinner" id="spinner"></img>
-		<span id="notification_message"></span>
+	<div id="rightcontent">
+		<div id="buttons">
+			<a class="servicebutton" onClick="gistie();return false" href='#'>
+				Gist&nbsp;it
+			</a>
+		</div>
+		<img id="gravatar" src="">
 	</div>
-	<div id="gistie" onClick="gistie()">Paste online</div>
-	<img id="gravatar" src="http://www.gravatar.com/avatar/?d=wavatar" />
 	<table id="commit_header">
 	<tr>
 		<td class="property_name">SHA:</td>
@@ -40,7 +41,11 @@
 		<td id="refs"></td>
 	</tr>
 	</table>
+	<div id="notification" style="display:none;">
+		<img src="spinner.gif" alt="Spinner" id="spinner"></img>
+		<div id="notification_message"></div>
+	</div>
 	<hr>
 	<pre id="message"></pre>
 	<pre><code class="diffcode" id='details'></code></pre>
-</body>
\ No newline at end of file
+</body>
diff --git a/html/commit.js b/html/commit.js
index babed2a..a2e654b 100644
--- a/html/commit.js
+++ b/html/commit.js
@@ -38,19 +38,28 @@ var Commit = Class.create({
 	}
 });
 
-var notify = function(text, busy) {
+var notify = function(text, state) {
 	var n = $("notification");
 	n.style.display = "";
-	if (busy)
-		$("spinner").style.display = "";
-	else
-		$("spinner").style.display = "none";
-	
 	$("notification_message").innerHTML = text;
+
+	// Change color
+	if (!state) { // Busy
+		$("spinner").style.display = "";
+		n.setAttribute("class", "");
+	}
+	else if (state == 1) { // Success
+		$("spinner").style.display = "none";
+		n.setAttribute("class", "success");
+	} else if (state == -1) {// Fail
+		$("spinner").style.display = "none";
+		n.setAttribute("class", "fail");
+	}
 }
 
 var gistie = function() {
-	notify("Uploading code to Gistie..", true);
+	notify("Uploading code to Gistie..", 0);
+
 	parameters = {
 		"file_ext[gistfile1]":      "patch",
 		"file_name[gistfile1]":     commit.object.subject.replace(/[^a-zA-Z0-9]/g, "-") + ".patch",
@@ -74,15 +83,15 @@ var gistie = function() {
 
 		onSuccess: function(t) {
 			if (m = t.responseText.match(/gist: ([a-f0-9]+)/))
-				notify("Code uploaded to gistie <a target='_new' href='http://gist.github.com/" + m[1] + "'>#" + m[1] + "</a>");
+				notify("Code uploaded to gistie <a target='_new' href='http://gist.github.com/" + m[1] + "'>#" + m[1] + "</a>", 1);
 			else
-				notify("Pasting to Gistie failed.");
+				notify("Pasting to Gistie failed.", -1);
 		},
 		onFailure: function(t) {
-			notify("Pasting to Gistie failed.");
+			notify("Pasting to Gistie failed.", -1);
 		},
 		onException: function(t) {
-			notify("Pasting to Gistie failed.");
+			notify("Pasting to Gistie failed.", -1);
 		},
 		
 	});
@@ -127,14 +136,12 @@ var loadCommit = function() {
 	$("notification").style.display = "none";
 
 	$("commitID").innerHTML = commit.sha;
-	if (commit.author_email) {
+
+	if (commit.author_email)
 		$("authorID").innerHTML = commit.author_name + " &lt;<a href='mailto:" + commit.author_email + "'>" + commit.author_email + "</a>&gt;";
-		$("gravatar").src = "http://www.gravatar.com/avatar/" + hex_md5(commit.author_email) + "?d=wavatar";
-	}
-	else {
+	else
 		$("authorID").innerHTML = commit.author_name;
-		$("gravatar").src = "http://www.gravatar.com/avatar/?d=wavatar";
-	}
+
 	$("date").innerHTML = commit.author_date;
 	$("subjectID").innerHTML =CommitObject.subject.escapeHTML();
 	
@@ -157,5 +164,10 @@ var loadCommit = function() {
 		$("details").innerHTML = "<a class='showdiff' href='' onclick='showDiffs(); return false;'>This is a large commit. Click here or press 'v' to view.</a>";
 	}
 
+	if (commit.author_email)
+		$("gravatar").src = "http://www.gravatar.com/avatar/" + hex_md5(commit.author_email) + "?d=wavatar&s=60";
+	else
+		$("gravatar").src = "http://www.gravatar.com/avatar/?d=wavatar&s=60";
+
 	scroll(0, 0);
 }
diff --git a/html/commits.css b/html/commits.css
index 396a1e3..3eb801f 100644
--- a/html/commits.css
+++ b/html/commits.css
@@ -1,35 +1,73 @@
+body {
+	font-family: 'Lucida Grande';
+}
+
 #commit_header {
 	width: 100%;
-	font-family: Helvetica;
 	font-size: 12px;
 }
 
-#gistie {
-	float: right;
-	margin-right: 100px;
-	color: rgb(20, 79, 174);
-	text-decoration: underline;
+#commit_header td {
+  padding-left: 5px;
 }
 
 #notification {
-	width: 80%;
-	margin: auto;
-	border: 1px solid #A8A159;
-	background-color: #FFF487;
-	font-size: 140%;
-	padding: 10px;
+	margin: 5px;
+	padding: 3px;
+	clear: both;
+
+	border: 1px solid black;
+	background-color: #f3f3f3;
+
+	text-align: center;
+	font-size: 80%;
+
+	-webkit-border-radius: 2px;
 }
 
-#notification img {
-	vertical-align: bottom;
-	margin-right: 10px;
+#notification.success {
+	background-color: #CCFF99;
+	border: 1px solid #99CC66;
+}
+
+#notification.fail {
+	background-color: #ff9999;
+	border: 1px solid #cc6666;
+}
+
+#rightcontent {
+	float: right;
+}
+
+#buttons {
+	float: left;
+	margin-top: 5px;
+}
+
+a.servicebutton{
+	display: block;
+	width: 80px;
+	padding: 2px;
+	margin-bottom: 4px;
+
+	border: 1px solid #3465a4;
+	background-color: #cce5ff;
+	color: #204a87;
+
+	font-size: 65%;
+	text-decoration: none;
+	text-align: center;
+
+	-webkit-border-radius: 2px;
 }
 
 #gravatar {
 	margin: 5px;
 	padding: 2px;
+	width: 60px;
+	height: 60px;
+
 	border: solid gray 1px;
-	float: left;
 	-webkit-border-radius: 2px;
 }
 
@@ -55,8 +93,9 @@
 hr {
 	border: 0;
 	height: 1px;
-	width: 80%;
-	background-color: #999;
+	margin: 0 8px;
+	background-color: #DEDEDE;
+	clear: both;
 }
 
 a {
