diff --git a/www/hack/index.html b/www/hack/index.html
index 4fa7e6065..2e8df970f 100644
--- a/www/hack/index.html
+++ b/www/hack/index.html
@@ -12,8 +12,14 @@
             box-sizing: border-box;
         }
         textarea{
+            position: absolute;
+            top: 5vh;
+            left: 0px;
+            border: 0px;
+
+            padding-top: 15px;
             width: 100%;
-            height: 100vh;
+            height: 95vh;
             max-width: 100%;
             max-height: 100vh;
 
@@ -32,26 +38,41 @@
             color: #637476;
         }
 
-        #run {
+        #panel {
             position: fixed;
             top: 0px;
             right: 0px;
-
-            z-index: 100;
-            width: 5vw;
+            width: 100%;
             height: 5vh;
+            z-index: 95;
+            background-color: #777;
+            /* min-height: 75px; */
+        }
+        #run {
+            display: block;
+            float: right;
+            height: 100%;
+            width: 10vw;
+            z-index: 100;
+            line-height: 5vw;
+            font-size: 1.5em;
             background-color: #222;
             color: #CCC;
-
-            display: block;
             text-align: center;
+            border-radius: 5%;
+            border: 0px;
         }
 
     </style>
 </head>
 <body>
     <textarea></textarea>
-    <a href="#" id="run">RUN</a>
+    <div id="panel">
+            <!-- TODO update this element when new users join -->
+            <span id="users"></span>
+            <!-- what else should go in the panel? -->
+            <a href="#" id="run">RUN</a>
+    </div>
 </body>
 </html>
 
diff --git a/www/hack/main.js b/www/hack/main.js
index 8877260eb..f5618c8b3 100644
--- a/www/hack/main.js
+++ b/www/hack/main.js
@@ -84,16 +84,35 @@ define([
         setSelectionRange(el, pos, pos);
     };
 
+    var state = {};
+
+    // TODO
+    $textarea.on('keydown', function (e) {
+        // track when control keys are pushed down
+        //switch (e.key) { }
+    });
+
+    // TODO
+    $textarea.on('keyup', function (e) {
+        // track when control keys are released
+    });
+
     $textarea.on('keypress', function (e) {
         switch (e.key) {
             case 'Tab':
                 // insert a tab wherever the cursor is...
-                var position = $textarea.prop("selectionStart");
-                if (typeof position !== 'undefined') {
-                    $textarea.val(function (i, val) {
-                        return splice(val, position, "\t");
-                    });
-                    setCursor($textarea[0], position +1);
+                var start = $textarea.prop('selectionStart');
+                var end = $textarea.prop('selectionEnd');
+                if (typeof start !== 'undefined') {
+                    if (start === end) {
+                        $textarea.val(function (i, val) {
+                            return splice(val, start, "\t");
+                        });
+                        setCursor($textarea[0], start +1);
+                    } else {
+                        // indentation?? this ought to be fun.
+
+                    }
                 }
                 // prevent default behaviour for tab
                 e.preventDefault();
