diff --git a/css/app.css b/css/app.css
index e025ec9f7..a4690101a 100644
--- a/css/app.css
+++ b/css/app.css
@@ -123,6 +123,10 @@ table td {
     color:#000;
 }
 
+#modebuttons button.active {
+    background:#fff;
+}
+
 #modebuttons button.mini,
 #modebuttons button.mini {
     width:50px;
diff --git a/index.html b/index.html
index 8c83ace52..f285645b7 100755
--- a/index.html
+++ b/index.html
@@ -48,7 +48,7 @@
         <script type='text/javascript' src='js/iD/ui/Inspector.js'></script>
 
         <script type='text/javascript' src='js/iD/actions/actions.js'></script>
-        <script type='text/javascript' src='js/iD/actions/CreatePOI.js'></script>
+        <script type='text/javascript' src='js/iD/actions/AddPlace.js'></script>
 
         <script type='text/javascript' src='js/iD/format/GeoJSON.js'></script>
         <script type='text/javascript' src='js/iD/format/XML.js'></script>
@@ -83,6 +83,8 @@
                 });
             }
 
+            for (var a in iD.actions) iD.actions[a].bind();
+
             d3.select('#geocode-form').on('submit', function() {
                 d3.event.preventDefault();
                 var val = d3.select('#geocode-location').node().value;
diff --git a/js/iD/UI.js b/js/iD/UI.js
index 684abb811..3977a63bf 100644
--- a/js/iD/UI.js
+++ b/js/iD/UI.js
@@ -1,13 +1,9 @@
 iD.UI = {};
 
 iD.UI.bind = function() {
-    var buttons = {
+    this.buttons = {
         place: d3.select('button#place'),
         area: d3.select('button#area'),
         road: d3.select('button#road')
     };
-
-    for (var mode in buttons) {
-
-    }
 };
diff --git a/js/iD/actions/AddPlace.js b/js/iD/actions/AddPlace.js
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/js/iD/actions/AddPlace.js
@@ -0,0 +1 @@
+
diff --git a/js/iD/actions/CreatePOI.js b/js/iD/actions/CreatePOI.js
deleted file mode 100644
index d61d8291f..000000000
--- a/js/iD/actions/CreatePOI.js
+++ /dev/null
@@ -1,3 +0,0 @@
-iD.actions.createPoi = function() {
-    
-};
diff --git a/js/iD/actions/actions.js b/js/iD/actions/actions.js
index 481fa8285..477f44915 100644
--- a/js/iD/actions/actions.js
+++ b/js/iD/actions/actions.js
@@ -1 +1,46 @@
 iD.actions = {};
+
+iD.actions.AddPlace = {
+    bind: function() {
+        d3.selectAll('button#place').on('click', function() {
+            iD.actions.AddPlace.enter();
+        });
+    },
+    enter: function() {
+        d3.selectAll('button').classed('active', false);
+        d3.selectAll('button#place').classed('active', true);
+    },
+    exit: function() {
+        d3.selectAll('button#place').classed('active', false);
+    }
+};
+
+iD.actions.AddRoad = {
+    bind: function() {
+        d3.selectAll('button#road').on('click', function() {
+            iD.actions.AddRoad.enter();
+        });
+    },
+    enter: function() {
+        d3.selectAll('button').classed('active', false);
+        d3.selectAll('button#road').classed('active', true);
+    },
+    exit: function() {
+        d3.selectAll('button#road').classed('active', false);
+    }
+};
+
+iD.actions.AddArea = {
+    bind: function() {
+        d3.selectAll('button#area').on('click', function() {
+            iD.actions.AddArea.enter();
+        });
+    },
+    enter: function() {
+        d3.selectAll('button').classed('active', false);
+        d3.selectAll('button#area').classed('active', true);
+    },
+    exit: function() {
+        d3.selectAll('button#area').classed('active', false);
+    }
+};