diff --git a/api/public/css/stylesheet.css b/api/public/css/stylesheet.css
index 314a3660..ecb9792f 100644
--- a/api/public/css/stylesheet.css
+++ b/api/public/css/stylesheet.css
@@ -48,4 +48,9 @@ body {
 }
 #arm_disarm {
     float: right;
+}
+
+#button_stop {
+    background-color: red;
+    color: white;
 }
\ No newline at end of file
diff --git a/api/views/index.ejs b/api/views/index.ejs
index 5146e3d3..b275f848 100644
--- a/api/views/index.ejs
+++ b/api/views/index.ejs
@@ -15,13 +15,28 @@
         <div class="mainvideo">
             <p>Camera view:</p>
             <div id="connectedbuttons">
+                <div id="connectedstatus">
+                    <p>Connected: <%- api_connected %></p>
+                </div>
                 <div id="buttons">
                     <button id="take_picture">Take picture</button>
                     <br>
                     <button id="arm_disarm">Arm/Disarm</button>
                 </div>
-                <div id="connectedstatus">
-                    <p>Connected: <%- api_connected %></p>
+            </div>
+            <div id="controls">
+                <h2>Controls</h2>
+                <div id="buttons">
+                    <button id="button_turnleft">Turn left</button>
+                    <button id="button_turnright">Turn right</button>
+                    <button id="button_up">Up</button>
+                    <button id="button_down">Down</button>
+                    <button id="button_forward">Forward</button>
+                    <button id="button_backward">Backward</button>
+                    <button id="button_left">Left</button>
+                    <button id="button_right">Right</button>
+                    <button id="button_stop"><strong>Emergency Stop</strong></button>
+
                 </div>
             </div>
         </div>