diff --git a/code/modules/goonchat/browserassets/css/browserOutput.css b/code/modules/goonchat/browserassets/css/browserOutput.css
index 4ea8c85b16..f766491d02 100644
--- a/code/modules/goonchat/browserassets/css/browserOutput.css
+++ b/code/modules/goonchat/browserassets/css/browserOutput.css
@@ -43,12 +43,17 @@ img.icon {
 	content: 'x';
 }
 .r {
-		display: inline;
-		padding: .2em .6em .3em;
-		font-size: 75%;
-		font-weight: 700;
-		line-height: 1;
-		color: #f00;
+	display: inline-block;
+	min-width: 0.5em;
+	font-size: 0.7em;
+	padding: 0.2em 0.3em;
+	line-height: 1;
+	color: white;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: middle;
+	background-color: crimson;
+	border-radius: 10px;
 }
 
 a {color: #0000ff;}
diff --git a/code/modules/goonchat/browserassets/js/browserOutput.js b/code/modules/goonchat/browserassets/js/browserOutput.js
index b9aa5fb94c..77aae1148a 100644
--- a/code/modules/goonchat/browserassets/js/browserOutput.js
+++ b/code/modules/goonchat/browserassets/js/browserOutput.js
@@ -312,8 +312,14 @@ function output(message, flag) {
 			{
 				lastmessages.append($('<span/>', { 'class': 'r', 'text': 2}));
 			}
-			if(parseInt(lastmessages.css("font-size")) < 24) //Completely arbitrary max size
-				lastmessages.css("font-size","+=2")
+			var insertedBadge = $(lastmessages).find('.r');
+			insertedBadge.animate({
+				"font-size": "0.9em"
+			}, 100, function() {
+				insertedBadge.animate({
+					"font-size": "0.7em"
+				}, 100);
+			});
 			opts.messageCount--;
 			handled = true;
 		}