diff --git a/atoms/index.css b/atoms/index.css
index cae2fc4..8a76716 100644
--- a/atoms/index.css
+++ b/atoms/index.css
@@ -183,7 +183,7 @@ img {
 	color: #FF746B;
 }
 
-.keyholder {
+.legendholder {
 	margin-bottom: -17%;
 	margin-top: 17%;
 	margin-left: 31%;
diff --git a/atoms/index.html b/atoms/index.html
index abbdb88..88c61ea 100644
--- a/atoms/index.html
+++ b/atoms/index.html
@@ -12,7 +12,7 @@
 		<div class="pulltab first"><p class="tDesc">Elements</p></div>
 		<div class="sidebar elements">
 			<i class="fa fa-close"></i>
-			<div class="keyholder"></div>
+			<div class="legendholder"></div>
 		</div>
 
 		<div class="pulltab second"><p class="tDesc">Settings</p></div>
@@ -30,7 +30,42 @@
 		
 		<div class="workspace"></div>
 	</body>
-	<script src="./index.js"></script>
+	<script type='text/javascript' > 
+		var settings = {};
+		var info;
+		var options = ["theme","displayTheme","elecConf","unit"];
+
+		var choices = [
+			["light","dark"],
+			["category", "atomRadi", "moleWeig", "ioniEner", "elecAffi", "elecNega", "density", "melting","boiling"],
+			["abr","norm"],
+			["K","C","F"]
+		];
+		var choicesDisplay = [
+			["Light","Dark"],
+			["Region", "Atomic Radius", "Molecular Mass", "Ionization Energy", "Electron Affinity", "Electronegativity", "Density", "Melting Point", "Boiling Point"],
+			["Abbreviated","Full"],
+			["Kelvin","Celsius","Fahrenheit"]
+		];
+
+		var colorChart = {
+			"category": {"al":'#8EF02B',"ae":"#D77A1D","md":"#387290","nm":"#52BFF6","ha":"#4842E9","ng":"#7B1AE9","tm":"#E5D439",
+						 "bm":"#2ADEA8","lh":"#F02BBC","ac":"#D78A8A"},
+			"atomRadi": ["#151618", "#2C7BF2"],
+			"moleWeig": ["#151618", "#2C7BF2"],
+			"ioniEner":["#E2DC27", "#5535D4"],
+			"elecAffi": ["#E2DC27", "#5535D4"],
+			"elecNega": ["#E2DC27","#5535D4"],
+			"density": ["#151618", "#2C7BF2"],
+			"melting": ["#D7301E", "#69F2F2"],
+			"boiling": ["#D7301E", "#69F2F2"]		
+		};
+	</script>
+	<script src="./js/main.js"></script>
+	<script src="./js/backend.js"></script>
+	<script src="./js/buttons.js"></script>
+	<script src="./js/reactive.js"></script>
+	<script src="./js/settings.js"></script>
 	<!--<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.1/jquery.scrollTo.js"></script>
 	-->
diff --git a/atoms/js/buttons.js b/atoms/js/buttons.js
new file mode 100644
index 0000000..a916221
--- /dev/null
+++ b/atoms/js/buttons.js
@@ -0,0 +1,12 @@
+get("pulltab")[0].onclick = function(){open(get("elements"));}
+get("pulltab")[1].onclick = function(){open(get("settings"));}
+get("fa")[0].onclick = function(){
+	get("elements").style.marginLeft = "-150%";
+}
+get("fa")[1].onclick = function(){
+	get("settings").style.marginLeft = "-40%";
+}
+
+function open(dom) {
+	dom.style.marginLeft = "0%";
+}
\ No newline at end of file
diff --git a/atoms/js/main.js b/atoms/js/main.js
new file mode 100644
index 0000000..43dbcba
--- /dev/null
+++ b/atoms/js/main.js
@@ -0,0 +1,140 @@
+function getJSON() {		 
+	xhr.open("GET","./resources/static/info.json", true);
+	xhr.onreadystatechange = function() {
+	    if (xhr.readyState == 4) {
+	        info = JSON.parse(xhr.responseText);
+	    }
+	}
+	xhr.send(null);
+}
+
+function update() {
+	var cookie = document.cookie;
+	var cookieArray = cookie.split(";");
+
+	// For all settings, append into object format
+
+	for(var i = 0; i < cookieArray.length; i++) {
+		var set = cookieArray[i].split("=");
+		settings[set[0].replace(" ","")] = set[1];
+	}
+
+	// Below are settings applied based 
+	var dispTheme = settings["displayTheme"];
+	changeTheme(settings["theme"]);
+	tableTheme(dispTheme);
+	legendChange(dispTheme);
+}
+
+function createTable() {
+    var tbl = document.createElement('table');
+    tbl.style.border = "1px hidden";
+    tbl.className = "normal";
+
+    // Creates table width j, height i
+    for(var i = 0; i < 7; i++) {
+        var tr = tbl.insertRow();
+        for(var j = 0; j < 18; j++) {
+            td = tr.insertCell();
+            td.className = "periodictable";
+        }
+    }
+   	get("sidebar")[0].appendChild(tbl);
+
+   	// Repeat of process above for Lanthanides and Actinides
+   	tbl = document.createElement('table');
+    tbl.className = "extension";
+    for(var i = 0; i < 2; i++) {
+        var tr = tbl.insertRow();
+        for(var j = 0; j < 15; j++) {
+            var td = tr.insertCell();
+            td.className = "periodictable";
+        }
+    }
+   	get("sidebar")[0].appendChild(tbl);
+
+   	// Creates text for the periodic table
+    cells = get("td");
+    for(var i = 0;i < 118;i++) {
+    	ele = document.createElement("p");
+    	text = document.createTextNode(i+1); // i+1 to offset 0
+    	ele.appendChild(text);
+    	cells[info["location"][i]].appendChild(ele);
+    	text = document.createTextNode(info["shorthand"][i]);
+    	cells[info["location"][i]].appendChild(text);
+    	cells[info["location"][i]].className = cells[info["location"][i]].className +" atom"; // Adds class to prevent hover animation on blank cells
+    }
+}
+
+function createGradientLegend() {
+	// Create Table element
+	var tbl = document.createElement('table');
+	
+	// Adds Class for styling
+	tbl.className = "legend";
+
+	// Gets theme then makes vars for hexes so that repeated table access not necessary
+	var theme = settings["displayTheme"];
+
+	// Filter out non-gradient layouts
+	if (colorChart[theme].length > 2) {
+		//keyLegend();
+		return;
+	}
+
+	var color1 = colorChart[theme][0];
+	var color2 = colorChart[theme][1];
+
+
+	// Creates a gradient of 101 values wide (j) for good transition
+    var tr = tbl.insertRow();
+    for(var j = 0; j <= 1; j += 0.01) {
+        var td = tr.insertCell();
+        td.className = "legendcell";
+        td.id
+        td.style.backgroundColor = gradientColor(color1, color2 , j);
+    }
+
+    // Adds table to key area
+    get("legendholder").appendChild(tbl);
+}
+
+function get(name) {
+	// Condensed format for document.getX
+	var elements = [];
+	if(document.getElementsByClassName(name).length > 0) {
+		elements = document.getElementsByClassName(name);
+	} 
+	else if(document.getElementsByTagName(name).length > 0) {
+		for(var a = 0; a < document.getElementsByTagName(name).length; a++) {
+			elements.push(document.getElementsByTagName(name)[a]);
+		}
+	}
+	else if(document.getElementById(name) != null) {
+		elements.push(document.getElementById(name));
+	}
+	
+	if(elements.length == 1) {
+		return elements[0];
+	} else { return elements; } 
+}
+
+var reader = new FileReader();
+var xhr = new XMLHttpRequest();
+
+if(document.cookie == "") { // Set defaults if no cookie
+	document.cookie = "theme=light";
+	document.cookie = "displayTheme=category;";
+	document.cookie = "elecConf=abr;";
+	document.cookie = "unit=K;"
+}
+
+getJSON();
+
+setTimeout(function mainFunc() {
+	createTable();
+	update();
+	makeSettings();
+	tableDesc();
+	createGradientLegend();
+}, 600);	
\ No newline at end of file