diff --git a/README.md b/README.md
index f9b8c62..0b47212 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@ downloaded from the following locations:
 * [Popper.js](https://github.com/FezVrasta/popper.js#installation)
 * [Highlight.js](https://highlightjs.org/download/)
 * [Showdown](https://github.com/showdownjs/showdown/releases)
+* [ace](https://github.com/ajaxorg/ace-builds/releases)
 
 ## Building and running with Docker
 
@@ -21,16 +22,19 @@ Run with `docker run -p 4242:4242 <id>` to bind the container's port to localhos
 
 ## Running locally
 
-Open two terminals in the project root.
+Create a new virtualenv, preferably with [virtualenvwrapper](https://virtualenvwrapper.readthedocs.io). Install the
+dependencies with `pip install tornado pyzmq transitions`. If using virtualenvwrapper, issue `add2virtualenv lib` from
+the project root to add the local libraries to the virtualenv's PYTHONPATH.
 
-Issue 
+To start the project issue
 ```
 cd src/app/
-PYTHONPATH="../../lib/" python app.py
+python app.py
 ```
-in one, and 
+in one terminal, and
 ```
 cd src/components/
-PYTHONPATH="../../lib/" python event_handler_main.py
+python event_handler_main.py
 ```
-in the other.
+in another. Prepend the python commands with `PYTHONPATH="../../lib/"` if the folder weren't added to the PYTHONPATH
+permanently.
diff --git a/lib/debug.py b/lib/debug.py
new file mode 100644
index 0000000..1127d26
--- /dev/null
+++ b/lib/debug.py
@@ -0,0 +1,19 @@
+from glob import iglob as glob
+from itertools import chain
+
+from tornado.autoreload import watch
+
+
+# yo dawg, we heard you like generators, so now you can generate generators
+# with generators
+def _static_files():
+    return chain.from_iterable(
+        glob(pattern) for pattern in (
+            'static/*.js', 'static/*.css', 'templates/*htm?'
+        )
+    )
+
+
+def watch_static_files():
+    for file in _static_files():
+        watch(file)
diff --git a/src/app/app.py b/src/app/app.py
index 0b4a79a..c52833c 100644
--- a/src/app/app.py
+++ b/src/app/app.py
@@ -7,6 +7,7 @@ from tornado.web import Application
 from tornado.ioloop import IOLoop
 
 from config import WEB_PORT
+import debug
 from handlers import MainHandler, ZMQWebSocketHandler, LoginWebappHandler
 import ui_modules
 
@@ -23,6 +24,7 @@ if __name__ == '__main__':
         ui_modules=ui_modules,
         autoreload=True
     )
+
     application.listen(WEB_PORT)
     logging.getLogger().setLevel(logging.DEBUG)
     logging.debug('Python version: {}'.format(sys.version[:5]))
@@ -30,4 +32,5 @@ if __name__ == '__main__':
     logging.debug('ZeroMQ version: {}'.format(zmq.zmq_version()))
     logging.debug('PyZMQ version: {}'.format(zmq.pyzmq_version()))
     logging.info('Tornado application listening on port {}'.format(WEB_PORT))
+    debug.watch_static_files()
     IOLoop.instance().start()
diff --git a/src/app/static/index.css b/src/app/static/index.css
new file mode 100644
index 0000000..e4934d4
--- /dev/null
+++ b/src/app/static/index.css
@@ -0,0 +1,4 @@
+.tfw-container {
+    min-height: 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/app/static/module-webide.css b/src/app/static/module-webide.css
new file mode 100644
index 0000000..7938185
--- /dev/null
+++ b/src/app/static/module-webide.css
@@ -0,0 +1,4 @@
+#anchor_webide {
+    position: relative;
+    height: 100%;
+}
diff --git a/src/app/static/ws_listener.js b/src/app/static/ws_listener.js
index 0cf9887..dbff144 100644
--- a/src/app/static/ws_listener.js
+++ b/src/app/static/ws_listener.js
@@ -1,6 +1,11 @@
 let ws = new WebSocket('ws://' + document.location.host + '/ws');
 
 let converter = new showdown.Converter();
+// TODO: don't hardcode anchor id
+let editor = ace.edit('anchor_webide');
+editor.setTheme('ace/theme/monokai');
+editor.getSession().setMode('ace/mode/python');
+editor.$blockScrolling = Infinity;
 
 $('#container').on('click', '.anchor', ( function (event) {
     let anchorName = $(this).attr('id').replace('_event', '');
@@ -42,8 +47,7 @@ ws.onmessage = function (messageEvent) {
     console.log(message);
     let $anchor = $('#' + message['anchor']);
     if (message['anchor'] === 'anchor_webide') {
-        let code = hljs.highlightAuto(message['data']);
-        $anchor.html(code.value);
+        editor.setValue(message['data'], -1);
     }
     else {
         let formatted_message = converter.makeHtml(message['data']);
diff --git a/src/app/templates/index.html b/src/app/templates/index.html
index 7445d3b..930b73b 100644
--- a/src/app/templates/index.html
+++ b/src/app/templates/index.html
@@ -6,12 +6,13 @@
 
     <link rel="stylesheet" href="{{ static_url('vendor/css/bootstrap.min.css') }}">
     <link rel="stylesheet" href="{{ static_url('vendor/css/highlight/github.min.css')}}">
+    <link rel="stylesheet" href="{{ static_url('index.css')}}">
 </head>
 <body>
     <div class="jumbotron text-center">
         <h1>Tutorial framework Demo</h1>
     </div>
-    <div id="container">
+    <div id="container" class="container-fluid tfw-container">
         <!--div class="row">
             {% for aid in ('a', 'b', 'c') %}
             <div class="col-sm m-3 p-3">
@@ -25,13 +26,13 @@
             {% end %}
         </div-->
         <div class="row">
-            <div class="col-sm m-3 p-3" id="anchor_login">
+            <div class="col-sm col-md col-lg m-3 p-3" id="anchor_login">
                 {% module Login('anchor_login') %}
             </div>
-            <div class="col-sm m-3 p-3">
+            <div class="col-sm-6 col-md-6 col-lg-6 m-3 p-3">
                 {% module WebIDE('anchor_webide') %}
             </div>
-            <div class="col-sm m-3 p-3">
+            <div class="col-sm col-md col-lg m-3 p-3">
                 {% module Logger('anchor_logger') %}
             </div>
         </div>
@@ -42,6 +43,7 @@
     <script src="{{ static_url('vendor/js/bootstrap.min.js') }}" defer></script>
     <script src="{{ static_url('vendor/js/highlight.min.js') }} defer"></script>
     <script src="{{ static_url('vendor/js/showdown.min.js') }} defer"></script>
+    <script src="{{ static_url('vendor/js/ace/ace.js') }} defer"></script>
     <script src="{{ static_url('ws_listener.js') }}" defer></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/app/templates/module-webide.html b/src/app/templates/module-webide.html
index bb716d4..46b410d 100644
--- a/src/app/templates/module-webide.html
+++ b/src/app/templates/module-webide.html
@@ -1,9 +1,6 @@
 <h1>Source code</h1>
-<pre>
-    <code id="{{ anchor_id }}">
-        &nbsp;
-    </code>
-</pre>
+<div  id="{{ anchor_id }}" class="mt-3 mb-3">
+</div>
 <button type="button" class="btn btn-outline-primary anchor" id="{{ anchor_id }}_event">
     Next
 </button>
diff --git a/src/app/ui_modules/webide.py b/src/app/ui_modules/webide.py
index 011c427..e0d0123 100644
--- a/src/app/ui_modules/webide.py
+++ b/src/app/ui_modules/webide.py
@@ -4,3 +4,6 @@ from tornado.web import UIModule
 class WebIDE(UIModule):
     def render(self, anchor_id, *args, **kwargs):
         return self.render_string('module-webide.html', anchor_id=anchor_id, **kwargs)
+
+    def css_files(self):
+        return ['module-webide.css']