diff --git a/html/views/history/history.css b/html/views/history/history.css
index 10b52c0..07c281b 100644
--- a/html/views/history/history.css
+++ b/html/views/history/history.css
@@ -68,14 +68,15 @@ a.servicebutton{
 
 #files {
 	margin-top: 1em;
-	font-family: Monaco;
-	font-size: 10px;
 }
 
 #files a {
 	color: #666666;
 }
 
+#files p {
+	margin: 4px;
+}
 #files a:hover {
 	color: #4444ff;
 }
@@ -137,18 +138,45 @@ a.showdiff {
 	font-weight: bold;
 }
 
-.addedfile {
-	color: green;
+div.button
+{
+	color: #666666;
+
+	font-size: 60%;
+	text-align: center;
+
+	width: 50px;
+
+	margin-right: 10px;
+
+	padding: 2px;
+
+	float: left;
+	clear: both;
+
+	border: 1px solid;
+	-webkit-border-radius: 3px;
 }
 
-.deletedfile {
-	color: red;
+div.created
+{
+	background-color: #ccffcc;
+	border-color: #66ff66;
 }
 
-.changedfile {
-	color: purple;
+div.changed
+{
+	background-color: #ffcc99;
+	border-color: #ff9933;
 }
 
-.movedfile {
-	color: gray;
+div.deleted
+{
+	background-color: #ffcccc;
+	border-color: #ff6666;
+}
+
+div.renamed
+{
+	/*No colour needed right now.*/
 }
diff --git a/html/views/history/history.js b/html/views/history/history.js
index a748485..d11358d 100644
--- a/html/views/history/history.js
+++ b/html/views/history/history.js
@@ -175,13 +175,13 @@ var loadCommit = function(commitObject, currentRef) {
 var showDiff = function() {
 	var newfile = function(name1, name2, id) {
 		if (name1 == name2)
-			$("files").innerHTML += "<a href='#" + id + "'>" + name1 + "</a> <span class='changedfile'>changed</span><br>";
+			$("files").innerHTML += "<div class='button changed'>changed</div><p><a href='#" + id + "'>" + name1 + "</a></p>";
 		else if (name1 == "/dev/null")
-			$("files").innerHTML += "<a href='#" + id + "'>" + name2 + "</a> <span class='addedfile'>created</span><br>";
+			$("files").innerHTML += "<div class='button created'>created</div><p><a href='#" + id + "'>" + name2 + "</a></p>";
 		else if (name2 == "/dev/null")
-			$("files").innerHTML += "<a href='#" + id + "'>" + name1 + "</a> <span class='deletedfile'>deleted</span><br>";
+			$("files").innerHTML += "<div class='button deleted'>deleted</div><p><a href='#" + id + "'>" + name1 + "</a></p>";
 		else
-			$("files").innerHTML += "<a href='#" + id + "'>" + name1 + "</a> <span class='movedfile'>moved to</span> " + name2 + "<br>";
+			$("files").innerHTML += "<div class='button renamed' alt='renamed''>renamed</div><p>" + name1 + " &#8594; <a href='#" + id + "'>" + name2 + "</a></p>";
 	}
 
 	var binaryDiff = function(filename) {