diff --git a/example.conf b/example.conf
index 5835dd7..0135e7b 100644
--- a/example.conf
+++ b/example.conf
@@ -52,6 +52,8 @@
     Slaapkamer lightstrip = 12, rgb
     Open Garage door = 456, pushon
     Close Garage door = 567, pushoff
+    Scene Home = 4, scene
+    Group kitchen lights = 5, group
   [[power_usage]]
     Totaal slaapkamer lamp = 12
     Totaal playstation = 71
diff --git a/static/js/domoboard.js b/static/js/domoboard.js
index 51fdd52..4c54582 100644
--- a/static/js/domoboard.js
+++ b/static/js/domoboard.js
@@ -31,6 +31,13 @@ function changePush(idx, action) {
   }
 }
 
+function changeScene(idx, action) {
+  if (action == 'on') {
+    requestAPI(flask_server + "/api?type=command&param=switchscene&idx=" + idx + "&switchcmd=On" );
+  } else {
+    requestAPI(flask_server + "/api?type=command&param=switchscene&idx=" + idx + "&switchcmd=Off"  );
+  }
+}
 
 function refreshSwitches(updateSwitches, block) {
   $.each(updateSwitches, function (i, switchID) {
diff --git a/templates/switches.html b/templates/switches.html
index 635f67d..bfdc042 100644
--- a/templates/switches.html
+++ b/templates/switches.html
@@ -23,9 +23,13 @@
               {% elif "dimmer" in v[1] %}
                 <input id="dimmer_{{v[0]}}_block_{{count}}" data-slider-id='dimmer_{{v[0]}}' type="text" test={{ v[1] }} data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="14" />
               {% elif "pushon" in v[1] %}
-                <button id="push_{{v[0]}}_block_{{count}}" class="btn  btn-primary btn-circle">On</button>
+                <button id="push_{{v[0]}}_block_{{count}}" class="btn  btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
                 {% elif "pushoff" in v[1] %}
-                  <button id="push_{{v[0]}}_block_{{count}}" class="btn  btn-primary btn-circle">Off</button>
+                  <button id="push_{{v[0]}}_block_{{count}}" class="btn  btn-danger btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
+                {% elif "group" in v[1] %}
+                  <div><div style="float: left"><button id="groupon_{{v[0]}}_block_{{count}}" class="btn  btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button></div><div style="padding-left: 20px; float: left"><button id="groupoff_{{v[0]}}_block_{{count}}" class="btn  btn-primary btn-circle btn-danger">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button></div></div>
+                {% elif "scene" in v[1] %}
+                  <button id="scene_{{v[0]}}_block_{{count}}" class="btn btn-primary btn-circle">&nbsp;<li class="fa fa-power-off" aria-hidden="true"></i>&nbsp;</button>
                {% elif "setpoint" in v[1]  %}
                      <div>
                          <div style="float: left; margin-right: 5px"><h1 id="setpoint_{{v[0]}}_block_{{count}}" style="font-size: 16px;"></h1></div>
@@ -105,6 +109,21 @@ $(document).ready(function() {
       e.preventDefault();
       changePush({{v[0]}}, 'off');
     });
+    {% elif (v[1] == "group") or (v[1] == "scene") %}
+    $('button[id="groupon_{{v[0]}}_block_{{count}}"]').click(function(e) {
+      e.preventDefault();
+      console.log('group on');
+      changeScene({{v[0]}}, 'on');
+    });
+    $('button[id="groupoff_{{v[0]}}_block_{{count}}"]').click(function(e) {
+        e.preventDefault();
+        console.log('group off');
+        changeScene({{v[0]}}, 'off');
+      });
+    $('button[id="scene_{{v[0]}}_block_{{count}}"]').click(function(e) {
+          e.preventDefault();
+          changeScene({{v[0]}}, 'on');
+      });
     {% elif (v[1] == "setpoint") %}
   		updateSetpoints_block_{{count}}.push("{{v[0]}}");
   	{% elif (v[1] == "dimmer" or v[1] == "rgb") %}