diff --git a/atoms/js/onload.js b/atoms/js/onload.js
index 90cd644..aa058d6 100644
--- a/atoms/js/onload.js
+++ b/atoms/js/onload.js
@@ -39,6 +39,8 @@ function createTable() {
 }
 
 function keyLegend() {
+	var rowlength = 3;
+
  	// Get theme
  	var theme = settings["displayTheme"];
  	var index = choices[1].indexOf(theme);
@@ -47,16 +49,20 @@ function keyLegend() {
  	// id for CSS
  	tbl.id = "keylegend";
 
- 	for (var i = 0; i < Object.keys(keyColors[index]).length; i++) {
+ 	for (var i = 0; i < Object.keys(keyColors[index]).length; i+=rowlength) {
  		var tr = tbl.insertRow();
- 		var keycolor = tr.insertCell();
- 		keycolor.className = "keycolor";
- 		keycolor.style.backgroundColor = keyColors[index][Object.keys(keyColors[index])[i]];
+ 		for (var x = 0; x < rowlength; x++) {
+ 			if ((i + x) < Object.keys(keyColors[index]).length) {
+	 			var keycolor = tr.insertCell();
+		 		keycolor.className = "keycolor";
+		 		keycolor.style.backgroundColor = keyColors[index][Object.keys(keyColors[index])[i + x]];
 
- 		var keyname = tr.insertCell();
- 		keyvalue = document.createTextNode(Object.keys(keyColors[index])[i]);
- 		keyname.appendChild(keyvalue);
- 		keyname.className = "keyvalue";
+		 		var keyname = tr.insertCell();
+		 		keyvalue = document.createTextNode(Object.keys(keyColors[index])[i + x]);
+		 		keyname.appendChild(keyvalue);
+		 		keyname.className = "keyvalue";
+		 	}
+ 		}
 
  	};
  	get("key").appendChild(tbl);