diff --git a/css/style.css b/css/style.css
index 08b9f5e..d428af6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -308,3 +308,59 @@ h1 br {
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
 }
+
+/* science-click custom css */
+
+.panel-body.large {
+    min-height: 500px;
+}
+
+.ui-draggable-handle {
+    cursor: move;
+}
+.element {
+    font-size: 3em;
+    font-weight: bold;
+    border: 0px;
+    padding: 1px;
+    z-index: 50;
+}
+#observationsContent {
+    font-size: 24px;
+}
+
+.white-badge {
+    color: black;
+    background-color: transparent;
+    position: relative;
+    font-weight: bold;
+    top: -20px;
+    left: 20px;
+}
+
+/* https://github.com/mbostock/d3/blob/master/lib/colorbrewer/colorbrewer.css */
+.Paired .q0-12{fill:rgb(166,206,227)}
+.Paired .q1-12{fill:rgb(31,120,180)}
+.Paired .q2-12{fill:rgb(178,223,138)}
+.Paired .q3-12{fill:rgb(51,160,44)}
+.Paired .q4-12{fill:rgb(251,154,153)}
+.Paired .q5-12{fill:rgb(227,26,28)}
+.Paired .q6-12{fill:rgb(253,191,111)}
+.Paired .q7-12{fill:rgb(255,127,0)}
+.Paired .q8-12{fill:rgb(202,178,214)}
+.Paired .q9-12{fill:rgb(106,61,154)}
+.Paired .q10-12{fill:rgb(255,255,153)}
+.Paired .q11-12{fill:rgb(177,89,40)}
+
+.Paired .q0-12{color:rgb(166,206,227)}
+.Paired .q1-12{color:rgb(31,120,180)}
+.Paired .q2-12{color:rgb(178,223,138)}
+.Paired .q3-12{color:rgb(51,160,44)}
+.Paired .q4-12{color:rgb(251,154,153)}
+.Paired .q5-12{color:rgb(227,26,28)}
+.Paired .q6-12{color:rgb(253,191,111)}
+.Paired .q7-12{color:rgb(255,127,0)}
+.Paired .q8-12{color:rgb(202,178,214)}
+.Paired .q9-12{color:rgb(106,61,154)}
+.Paired .q10-12{color:rgb(255,255,153)}
+.Paired .q11-12{color:rgb(177,89,40)}
diff --git a/index.html b/index.html
index 6ca3463..d5234a4 100644
--- a/index.html
+++ b/index.html
@@ -69,33 +69,27 @@
       </div>
     </nav>
 
-    <div id="main-content" class="container-fluid col-no-padding">
+    <div id="main-content" class="container-fluid col-no-padding Paired">
       <div class="col-md-3 col-md-3s col-lg-2 col-no-padding visible-md-block visible-lg-block">
         <div class="panel panel-default">
           <div class="panel-heading">
             <h4 class="panel-title">
-              <i class="fa fa-cogs"></i> Research
+              <i class="fa fa-cogs"></i> Elements
             </h4>
           </div>
-          <div class="panel-body scrollable large" id="researchLarge" ng-controller="ResearchController as rc">
-            <div id="researchContent" ng-controller="ResearchController as rc">
-              <ul class="media-list" ng-cloak>
-                <li class="media" ng-repeat="r in rc.research" ng-show="rc.isVisible(r)">
-                  <img ng-show="r.state.level > 0" class="research-icon media-object" ng-src="{{ r.image }}" alt="">
-                  <img ng-hide="r.state.level > 0" class="research-icon media-object" src="assets/icons/png/unknown.png" alt="">
-                  <div class="media-body">
-                    <h4 class="media-heading">{{ r.state.level > 0 ? r.name : '?????' }} <span ng-show="r.state.level > 0" class="badge">Level {{ r.state.level }}</span></h4>
-                    <p ng-show="r.state.level > 0">{{ r.description }}</p>
-                    <p ng-show="r.state.level > 0" class="small">Research yields <strong>{{ r.state.reputation | niceNumber }}</strong> reputation.</p>
-                    <div class="btn-group">
-                      <button class="btn btn-primary" ng-disabled="!rc.isAvailable(r)" ng-click="rc.doResearch(r)"><i class="fa fa-cogs"></i> <small>{{ r.state.cost | niceNumber }} data</small></button>
-                    <button class="btn btn-info {{ r.state.interesting ? 'blink' : '' }}" ng-show="r.state.level > 0" ng-click="rc.showInfo(r)"><i class="fa {{ r.state.interesting ? 'fa-exclamation' : 'fa-info' }}"></i></button>
-                  </div>
-                  </div>
-                </li>
-              </ul>
+
+          <div class="panel-body scrollable large" id="elementLarge">
+            <div id="elementContent" ng-controller="ElementController as rc">
+              <div class="row" ng-cloak>
+
+                <div class="col-md-3" ng-repeat="r in rc.elements" ng-show="rc.isVisible(r)">
+                  <span id="{{r.key}}" class="{{r.key}} element element-icon {{ r.state.interesting ? 'blink' : '' }} {{'q'+r.state.color+'-12'}}">{{r.key}}</span>
+                  <span ng-show="r.state.amount > 0" class="white-badge ng-binding">{{r.state.amount}}</span>
+                </div>
+              </div>
             </div>
           </div>
+
         </div>
       </div>
 
@@ -103,6 +97,7 @@
         <input class="hidden-xs" id="labname" value="{{ lc.lab.state.name }}" ng-model="lc.lab.state.name" ng-cloak>
         <hr class="hidden-xs">
         <div id="detector-holder">
+
           <div id="detector" ng-controller="DetectorController as dc">
             <canvas id="detector-core" class="test-tube" width="400"
                            height="400" style=""></canvas>
@@ -113,6 +108,7 @@
               Your bunsen burner. Click it to turn on and off.
             </canvas>
           </div>
+
         </div>
         <button id="detector-info" class="btn btn-info" ng-click="lc.showDetectorInfo()"><i class="fa fa-info"></i></button>
         <div class="row status" ng-cloak>
@@ -142,6 +138,7 @@
             </h4>
           </div>
           <div class="panel-body scrollable large" id="hrLarge">
+
             <div id="hrContent" ng-controller="HRController as hrc">
               <ul class="media-list" ng-cloak>
                 <li class="media" ng-repeat="w in hrc.workers" ng-show="hrc.isVisible(w)">
@@ -154,6 +151,7 @@
                 </li>
               </ul>
             </div>
+
           </div>
         </div>
       </div>
@@ -185,12 +183,12 @@
 
       <div id="column-tabs" class="col-xs-6 visible-xs-block visible-sm-block col-no-padding">
         <ul id="TabList" class="nav nav-tabs" role="tablist">
-          <li class="active"><a href="#research" role="tab" data-toggle="tab"><i class="fa fa-cogs"></i> Research</a></li>
+          <li class="active"><a href="#element" role="tab" data-toggle="tab"><i class="fa fa-cogs"></i> Elements </a></li>
           <li><a href="#hr" role="tab" data-toggle="tab"><i class="fa fa-users"></i> HR</a></li>
           <li><a href="#upgrades" role="tab" data-toggle="tab"><i class="fa fa-wrench"></i> Upgrades</a></li>
         </ul>
         <div id="TabContent" class="tab-content">
-          <div class="tab-pane active scrollable" id="research">
+          <div class="tab-pane active scrollable" id="element">
 
           </div>
           <div class="tab-pane scrollable" id="hr">
diff --git a/js/app.js b/js/app.js
index 4d3f1a2..212d48f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -10,7 +10,7 @@
   game.load();
 
   var lab = game.lab;
-  var research = game.research;
+  var elements = game.elements;
   var workers = game.workers;
   var upgrades = game.upgrades;
   var achievements = game.achievements;
@@ -40,6 +40,11 @@
     };
   }]);
 
+  // Hack to prevent text highlighting
+  document.getElementById('detector').addEventListener('mousedown', function(e) {
+    e.preventDefault();
+  });
+
   // controllers
   app.controller('DetectorController', function() {
     this.click = function() {
@@ -50,10 +55,26 @@
     };
   });
 
-  // Hack to prevent text highlighting
-  document.getElementById('detector').addEventListener('mousedown', function(e) {
-    e.preventDefault();
-  });
+  app.controller('ElementController', ['$compile', function($compile) {
+    this.elements = elements;
+    this.isVisible = function(item) {
+      return item.isVisible(lab);
+    };
+    this.isAvailable = function(item) {
+      return item.isAvailable(lab);
+    };
+    this.doElement = function(item) {
+      var cost = item.element(lab);
+      if (cost > 0) {
+        UI.showUpdateValue("#update-data", -cost);
+        UI.showUpdateValue("#update-reputation", item.state.reputation);
+      }
+    };
+    this.showInfo = function(r) {
+      UI.showModal(r.name, r.getInfo());
+      UI.showLevels(r.state.level);
+    };
+  }]);
 
   app.controller('LabController', ['$interval', function($interval) {
     this.lab = lab;
@@ -80,27 +101,6 @@
     }, 1000);
   }]);
 
-  app.controller('ResearchController', ['$compile', function($compile) {
-    this.research = research;
-    this.isVisible = function(item) {
-      return item.isVisible(lab);
-    };
-    this.isAvailable = function(item) {
-      return item.isAvailable(lab);
-    };
-    this.doResearch = function(item) {
-      var cost = item.research(lab);
-      if (cost > 0) {
-        UI.showUpdateValue("#update-data", -cost);
-        UI.showUpdateValue("#update-reputation", item.state.reputation);
-      }
-    };
-    this.showInfo = function(r) {
-      UI.showModal(r.name, r.getInfo());
-      UI.showLevels(r.state.level);
-    };
-  }]);
-
   app.controller('HRController', function() {
     this.workers = workers;
     this.isVisible = function(worker) {
diff --git a/js/detector/bubblr.js b/js/detector/bubblr.js
index 52c38e3..e7a06a1 100644
--- a/js/detector/bubblr.js
+++ b/js/detector/bubblr.js
@@ -64,9 +64,6 @@
 			self.animationLoop();
 			}, this.options.animationSpeed);
 
-
-		$(window).on('resize',this.onResize.bind(this));
-
     };
 
 	Bubblr.prototype.onResize= function(){
diff --git a/js/game.js b/js/game.js
index 2f13809..2c43666 100644
--- a/js/game.js
+++ b/js/game.js
@@ -6,7 +6,7 @@ var Game = (function(Helpers,GameObjects,ObjectStorage) {
 
   var Game = function() {
     this.lab = new GameObjects.Lab();
-    this.research = null;
+    this.elements = null;
     this.workers = null;
     this.upgrades = null;
     this.achievements = null;
@@ -23,10 +23,12 @@ var Game = (function(Helpers,GameObjects,ObjectStorage) {
     // However, I don't see any other reasonable way to do this in order to
     // make it work with Angular. If you know a way, let me know, and I'll
     // give you a beer. - Kevin
-    this.research = Helpers.loadFile('json/research.json');
+    this.elements = Helpers.loadFile('json/elements.json');
     this.workers = Helpers.loadFile('json/workers.json');
     this.upgrades = Helpers.loadFile('json/upgrades.json');
     this.achievements = Helpers.loadFile('json/achievements.json');
+    this.runes = Helpers.loadFile('json/runes.json');
+    this.keywords = Helpers.loadFile('json/keywords.json');
 
     // Turn JSON files into actual game objects and fill map of all objects
     var _this = this;
@@ -37,8 +39,8 @@ var Game = (function(Helpers,GameObjects,ObjectStorage) {
       _this.allObjects[o.key] = o;
       return o;
     };
-    this.research = this.research.map(
-        function(r) { return makeGameObject(GameObjects.Research, r); });
+    this.elements = this.elements.map(
+        function(r) { return makeGameObject(GameObjects.Element, r); });
     this.workers = this.workers.map(
         function(w) { return makeGameObject(GameObjects.Worker, w); });
     this.upgrades = this.upgrades.map(
diff --git a/js/gameobjects.js b/js/gameobjects.js
index 75ca21d..c6c7182 100644
--- a/js/gameobjects.js
+++ b/js/gameobjects.js
@@ -82,34 +82,35 @@ var GameObjects = (function() {
     return false;
   };
 
-  /** @class Research
+  /** @class Element
    */
-  var Research = function(obj) {
+  var Element = function(obj) {
     GameObject.apply(this, [obj]);
-    this.state.level = 0;
-    this.state.interesting = false;
+    this.state.amount = Math.round(Math.random()*2);
+    this.state.discovered = Math.random()<0.1;
+    this.state.interesting = Math.random()<0.1;
+    this.state.color = Math.round(Math.random()*12);
   };
 
-  Research.prototype = Object.create(GameObject.prototype);
+  Element.prototype = Object.create(GameObject.prototype);
 
-  Research.prototype.constructor = Research;
+  Element.prototype.constructor = Element;
 
-  Research.prototype.isVisible = function(lab) {
+  Element.prototype.isVisible = function(lab) {
     if (!lab) {
       return false;
     }
-    return this.state.level > 0 ||
-           lab.state.data >= this.state.cost * GLOBAL_VISIBILITY_THRESHOLD;
+    return this.state.discovered;
   };
 
-  Research.prototype.isAvailable = function(lab) {
+  Element.prototype.isAvailable = function(lab) {
     if (!lab) {
       return false;
     }
-    return lab.state.data >= this.state.cost;
+    return this.state.amount>0;
   };
 
-  Research.prototype.research = function(lab) {
+  Element.prototype.research = function(lab) {
     if (lab && lab.research(this.state.cost, this.state.reputation)) {
       this.state.level++;
       if (this.state.info_levels.length > 0 &&
@@ -124,7 +125,7 @@ var GameObjects = (function() {
     return -1;
   };
 
-  Research.prototype.getInfo = function() {
+  Element.prototype.getInfo = function() {
     if (!this._info) {
       this._info = Helpers.loadFile(this.info);
     }
@@ -269,7 +270,7 @@ var GameObjects = (function() {
   // Expose classes in module.
   return {
     Lab: Lab,
-    Research: Research,
+    Element: Element,
     Worker: Worker,
     Upgrade: Upgrade,
     Achievement: Achievement
diff --git a/js/ui.js b/js/ui.js
index 8630d23..541d88f 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -18,7 +18,7 @@ var UI = (function () {
       }
       $('.scrollable').height(h - offset + 'px');
 
-      var types = ['research', 'hr', 'upgrades'];
+      var types = ['element', 'hr', 'upgrades'];
 
       if ($(window).width() < 992) {
         for (var i = 0; i < types.length; i++) {
@@ -65,6 +65,8 @@ var UI = (function () {
           detector.init(400);
         }
       }
+
+      detector.bubblr.onResize();
     }
 
     $(window).resize(resize);
diff --git a/json/elements.json b/json/elements.json
new file mode 100644
index 0000000..bc51132
--- /dev/null
+++ b/json/elements.json
@@ -0,0 +1,83 @@
+[
+    {"key":"ᚠ"},
+    {"key":"ᚡ"},
+    {"key":"ᚢ"},
+    {"key":"ᚣ"},
+    {"key":"ᚤ"},
+    {"key":"ᚥ"},
+    {"key":"ᚦ"},
+    {"key":"ᚧ"},
+    {"key":"ᚨ"},
+    {"key":"ᚩ"},
+    {"key":"ᚪ"},
+    {"key":"ᚫ"},
+    {"key":"ᚬ"},
+    {"key":"ᚭ"},
+    {"key":"ᚮ"},
+    {"key":"ᚯ"},
+    {"key":"ᚰ"},
+    {"key":"ᚱ"},
+    {"key":"ᚲ"},
+    {"key":"ᚳ"},
+    {"key":"ᚴ"},
+    {"key":"ᚵ"},
+    {"key":"ᚶ"},
+    {"key":"ᚷ"},
+    {"key":"ᚸ"},
+    {"key":"ᚹ"},
+    {"key":"ᚺ"},
+    {"key":"ᚻ"},
+    {"key":"ᚼ"},
+    {"key":"ᚽ"},
+    {"key":"ᚾ"},
+    {"key":"ᚿ"},
+    {"key":"ᛀ"},
+    {"key":"ᛁ"},
+    {"key":"ᛂ"},
+    {"key":"ᛃ"},
+    {"key":"ᛄ"},
+    {"key":"ᛅ"},
+    {"key":"ᛆ"},
+    {"key":"ᛇ"},
+    {"key":"ᛈ"},
+    {"key":"ᛉ"},
+    {"key":"ᛊ"},
+    {"key":"ᛋ"},
+    {"key":"ᛌ"},
+    {"key":"ᛍ"},
+    {"key":"ᛎ"},
+    {"key":"ᛏ"},
+    {"key":"ᛐ"},
+    {"key":"ᛑ"},
+    {"key":"ᛒ"},
+    {"key":"ᛓ"},
+    {"key":"ᛔ"},
+    {"key":"ᛕ"},
+    {"key":"ᛖ"},
+    {"key":"ᛗ"},
+    {"key":"ᛘ"},
+    {"key":"ᛙ"},
+    {"key":"ᛚ"},
+    {"key":"ᛛ"},
+    {"key":"ᛜ"},
+    {"key":"ᛝ"},
+    {"key":"ᛞ"},
+    {"key":"ᛟ"},
+    {"key":"ᛠ"},
+    {"key":"ᛡ"},
+    {"key":"ᛢ"},
+    {"key":"ᛣ"},
+    {"key":"ᛤ"},
+    {"key":"ᛥ"},
+    {"key":"ᛦ"},
+    {"key":"ᛧ"},
+    {"key":"ᛨ"},
+    {"key":"ᛩ"},
+    {"key":"ᛪ"},
+    {"key":"᛫"},
+    {"key":"᛬"},
+    {"key":"᛭"},
+    {"key":"ᛮ"},
+    {"key":"ᛯ"},
+    {"key":"ᛰ"}
+]
diff --git a/json/runes.json b/json/runes.json
deleted file mode 100644
index 702d808..0000000
--- a/json/runes.json
+++ /dev/null
@@ -1,83 +0,0 @@
-[
-    "ᚠ",
-    "ᚡ",
-    "ᚢ",
-    "ᚣ",
-    "ᚤ",
-    "ᚥ",
-    "ᚦ",
-    "ᚧ",
-    "ᚨ",
-    "ᚩ",
-    "ᚪ",
-    "ᚫ",
-    "ᚬ",
-    "ᚭ",
-    "ᚮ",
-    "ᚯ",
-    "ᚰ",
-    "ᚱ",
-    "ᚲ",
-    "ᚳ",
-    "ᚴ",
-    "ᚵ",
-    "ᚶ",
-    "ᚷ",
-    "ᚸ",
-    "ᚹ",
-    "ᚺ",
-    "ᚻ",
-    "ᚼ",
-    "ᚽ",
-    "ᚾ",
-    "ᚿ",
-    "ᛀ",
-    "ᛁ",
-    "ᛂ",
-    "ᛃ",
-    "ᛄ",
-    "ᛅ",
-    "ᛆ",
-    "ᛇ",
-    "ᛈ",
-    "ᛉ",
-    "ᛊ",
-    "ᛋ",
-    "ᛌ",
-    "ᛍ",
-    "ᛎ",
-    "ᛏ",
-    "ᛐ",
-    "ᛑ",
-    "ᛒ",
-    "ᛓ",
-    "ᛔ",
-    "ᛕ",
-    "ᛖ",
-    "ᛗ",
-    "ᛘ",
-    "ᛙ",
-    "ᛚ",
-    "ᛛ",
-    "ᛜ",
-    "ᛝ",
-    "ᛞ",
-    "ᛟ",
-    "ᛠ",
-    "ᛡ",
-    "ᛢ",
-    "ᛣ",
-    "ᛤ",
-    "ᛥ",
-    "ᛦ",
-    "ᛧ",
-    "ᛨ",
-    "ᛩ",
-    "ᛪ",
-    "᛫",
-    "᛬",
-    "᛭",
-    "ᛮ",
-    "ᛯ",
-    "ᛰ"
-]