diff --git a/css/main.css b/css/main.css
index e731b86..3b037b9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -32,8 +32,8 @@ body {
   border: solid;
   border-color: yellow;
   background-image: url(../images/infobg.png);
-  width: 1200;
-  height: 576;
+  width: 1192;
+  height: 568;
   overflow-y: scroll;
   padding: 4;
 }
diff --git a/js/game.js b/js/game.js
index d8a504f..6f7c987 100644
--- a/js/game.js
+++ b/js/game.js
@@ -119,9 +119,27 @@ function render() {
   }
   //DRAW CURSOR BOX
   if (isCursorInScreen) {
-    ctx.globalAlpha = 0.4
-    ctx.fillRect(cursorScreenX * 48, cursorScreenY * 48, 48, 48)
-    ctx.globalAlpha = 1
+    if (mode == "build") {
+      ctx.globalAlpha = 0.6
+      var tile = new toBuild()
+      var img = new Image
+      var tmp = tile.getTexture(fulltime, 0)
+      if (tmp != "0") {
+        img.src = tmp
+        drawRotatedImage(img, cursorScreenX * 48 + 24, cursorScreenY * 48 + 24, 0)
+      }
+      img = new Image
+      tmp = tile.getTexture(fulltime, 1)
+      if (tmp != "0") {
+        img.src = tmp
+        drawRotatedImage(img, cursorScreenX * 48 + 24, cursorScreenY * 48 + 24, 0)
+      }
+      ctx.globalAlpha = 1
+    } else {
+      ctx.globalAlpha = 0.4
+      ctx.fillRect(cursorScreenX * 48, cursorScreenY * 48, 48, 48)
+      ctx.globalAlpha = 1
+    }
   }
   //DRAW INFO BAR
   drawInfoBar()
@@ -148,20 +166,25 @@ function prepairRender() {
   canvas.height = 240
   infoCtx = canvas.getContext('2d')
   //tileClasses
-  for(var i=0;i<tileClasses.length;i++){
+  var tilesLoaded = 0
+  console.log("Building Tileselection-Menu...")
+  for (var i = 0; i < tileClasses.length; i++) {
     var tmp = new tileClasses[i]()
     var src = ""
-    if(tmp.texture[1].length>0){
-      src = ' src="images/tiles/'+tmp.texture[1][0]+'.png"'
+    if (tmp.texture[1].length > 0) {
+      src = ' src="images/tiles/' + tmp.texture[1][0] + '.png"'
     }
     var style = ''
-    if(tmp.texture[0].length>0){
-      style = ' style="background-image: url(images/tiles/'+tmp.texture[0][0]+'.png)"'
+    if (tmp.texture[0].length > 0) {
+      style = ' style="background-image: url(images/tiles/' + tmp.texture[0][0] + '.png)"'
     }
-    var tag = '<img class="buildtile"'+src+style+'>'
-    console.log(tag)
+    var tag = '<img id="build_' + i + '" draggable="false" class="buildtile"' + src + style + '>'
     $('#buildselect').append(tag)
+    tilesLoaded++
   }
+  console.log(tilesLoaded + "/" + tileClasses.length + " Tiles Loaded!")
+  $('#buildselect').hide()
+  buildEvents()
 }
 
 var infoBarIcons = ["build.png", "move.png", "rotate.png", "delete.png", null, "upgrade.png", "info.png", null, "rocket.png"]
diff --git a/js/modes.txt b/js/modes.txt
new file mode 100644
index 0000000..2600d0f
--- /dev/null
+++ b/js/modes.txt
@@ -0,0 +1,3 @@
+none
+selectbuilding
+building
diff --git a/js/userinterface.js b/js/userinterface.js
index 8d073a7..0fe6305 100644
--- a/js/userinterface.js
+++ b/js/userinterface.js
@@ -8,6 +8,7 @@ $(document).ready(function() {
   $('body').on("contextmenu", function() {
     return false;
   })
+  clickEvents()
 })
 
 function style() {
@@ -102,3 +103,36 @@ function onDocumentMouseMove(event) {
     isCursorInInfo = false
   }
 }
+
+function clickEvents() {
+  $('#info').click(function() {
+    if (cursorInfoY == 0) {
+      switch (cursorInfoX) {
+        case 0:
+          //BUILD BUTTON
+          if (mode == "none") {
+            $('#buildselect').fadeIn(200)
+            mode = "selectbuilding"
+          } else {
+            $('#buildselect').fadeOut(200)
+            mode = "none"
+          }
+          break
+      }
+    }
+  })
+}
+
+var toBuild = {}
+
+function buildEvents(){
+  $('img').click(function() {
+    var id = $(this).attr("id");
+    if(id.startsWith("build_")){
+      id = parseInt(id.substr(6))
+      toBuild = tileClasses[id]
+      mode = "build"
+      $('#buildselect').fadeOut(200)
+    }
+  })
+}