diff --git a/design/overview.md b/design/overview.md
new file mode 100644
index 0000000..51354fb
--- /dev/null
+++ b/design/overview.md
@@ -0,0 +1,40 @@
+# Gorge
+
+Gorge is an idle game but with vore
+
+lol
+
+## Resources
+
+* Food: Base currency
+
+## Buildings
+
+Buildings are bought with *food*
+
+Each tier of building:
+
+* costs more than the previous tier of buildings
+* produces food proportional to its cost
+
+The cost for a building is:
+
+$$1.02^{\textrm{count}} \times \textrm{base cost}$$
+
+### Upgrades
+
+There are several categories of upgrades for buildings:
+
+#### Productivity
+
+All buildings have productivity upgrades. Each upgrade doubles production.
+
+#### Synergy
+
+Some buildings have synergy upgrades. Each upgrade causes buildings of one type to enhance buildings of another type.
+
+## Height
+
+Growth can be purchased with *food*
+
+Each growth reduces the cost of buildings and unlocks new tiers of buildings. 
diff --git a/gorge.css b/gorge.css
new file mode 100644
index 0000000..31b4a2e
--- /dev/null
+++ b/gorge.css
@@ -0,0 +1,30 @@
+body {
+  font-family: Sans-Serif;
+}
+
+body.dark {
+  background: #111;
+  color: #eee;
+}
+
+#buildings-area {
+  width: 20%;
+}
+
+#tasty-micro {
+  color: #ddd;
+  background-color: #211;
+  width: 100px;
+  height: 75px;
+}
+#buildings-area button {
+  display: block;
+  width: 100%;
+  height: 50px;
+  background-color: #222;
+  color: #eee;
+}
+
+#buildings-area button:not(:last-child) {
+
+}
diff --git a/gorge.html b/gorge.html
index 9302650..b2fb857 100644
--- a/gorge.html
+++ b/gorge.html
@@ -4,7 +4,7 @@
 
   
   Gorge
-  
+  
   
   
   
@@ -17,6 +17,16 @@
   
 
 
-
+
+  Resources
   Food: 0
+  
+  
 
diff --git a/gorge.js b/gorge.js
index 8127928..139b011 100644
--- a/gorge.js
+++ b/gorge.js
@@ -8,23 +8,6 @@ let resources = {
 
 let updateRate = 60;
 
-// setup stuff lol
-
-// we'll initialize the dict of buildings we can own
-
-function setup() {
-  for (const [key, value] of Object.entries(buildings)) {
-    belongings[key] = {};
-    belongings[key].count = 0;
-  }
-
-  console.log(belongings)
-}
-
-function price(type) {
-  return buildings[type].cost * Math.pow(1.02, belongings[type].count)
-}
-
 function calculateProductivity() {
   let productivity = 0;
   for (const [key, value] of Object.entries(belongings)) {
@@ -41,11 +24,29 @@ function productivityOf(type) {
   return baseProd * belongings[type].count;
 }
 
+function costOf(type) {
+  let baseCost =  buildings[type].cost
+
+  let countCost = baseCost * Math.pow(1.02, belongings[type].count);
+
+  return countCost;
+}
+
+function buyBuilding(type) {
+  let cost = costOf(type);
+
+  if (resources.food > cost) {
+    belongings[type].count += 1;
+    resources.food -= cost;
+  }
+
+}
 // update stuff
 
 function updateResources() {
   addResources();
   displayResources();
+  displayBuildings();
 
   setTimeout(updateResources, 1000/updateRate);
 }
@@ -58,6 +59,42 @@ function displayResources() {
   document.getElementById("resource-food").innerText = "Food: " + render(resources.food);
 }
 
+function displayBuildings() {
+  for (const [key, value] of Object.entries(belongings)) {
+    document.getElementById("building-" + key).innerText = buildings[key].name + ": " + belongings[key].count;
+  }
+}
+
+function eatMicro() {
+  resources.food += 1;
+}
+// setup stuff lol
+
+// we'll initialize the dict of buildings we can own
+
+function setup() {
+  initializeData();
+  registerListeners();
+
+  console.log(belongings)
+}
+
+function initializeData() {
+  for (const [key, value] of Object.entries(buildings)) {
+    belongings[key] = {};
+    belongings[key].count = 0;
+  }
+}
+
+function registerListeners() {
+  document.querySelectorAll(".building-button").forEach(function(button) {
+    let id = button.id.replace("building-", "");
+    button.addEventListener("click", function() { buyBuilding(id); });
+  });
+
+  document.querySelector("#tasty-micro").addEventListener("click", eatMicro);
+}
+
 window.onload = function() {
   setup();