diff --git a/mtda/templates/index.html b/mtda/templates/index.html
index ec1b3c09..176956cf 100644
--- a/mtda/templates/index.html
+++ b/mtda/templates/index.html
@@ -78,7 +78,7 @@
     <div class="menu">
       <div class="title" id="mtda_title">MTDA</div>
         <ul class="nav">
-          <li><a href="#" id=power-toggle><i class="large material-icons">power</i></a></li>
+          <li><a href="#" id=power-toggle><i id=power-status-icon class="large material-icons">power</i></a></li>
           <li><a href="#" id=keyboard-show><i class="large material-icons">keyboard</i></a></li>
           <li id="mtda_status">Connecting...</li>
           <li id="vnc_status">Loading Video</li>
@@ -96,6 +96,7 @@
     <script type=text/javascript>
       $(function() {
         $('a#power-toggle').bind('click', function() {
+          document.getElementById("power-status-icon").innerHTML = "downloading"
           $.getJSON('./power-toggle', function(data) {
             // do nothing
           });
@@ -133,6 +134,7 @@
       const status = document.getElementById("mtda_status");
       const version = document.getElementById("mtda_version");
       const video = document.getElementById("video");
+      const power_status = document.getElementById("power-status-icon")
 
       socket.on("console-output", function (data) {
         term.write(data.output);
@@ -165,6 +167,14 @@
       socket.on("disconnect", () => {
         status.innerHTML = '<span style="color: #ff8383;"><b>Disconnected</b></span>';
       });
+
+      socket.on("power-event", (data) => {
+        switch(data.event) {
+          case 'ON': power_status.innerHTML = "power_off"; break;
+          case 'OFF': power_status.innerHTML = "power"; break;
+          default: power_status.innerHTML = "help"
+        }
+      });
     </script>
   </body>
 </html>