diff --git a/compile_server/app/static/common.css b/compile_server/app/static/common.css
index c767fc6..592f21f 100644
--- a/compile_server/app/static/common.css
+++ b/compile_server/app/static/common.css
@@ -1,5 +1,5 @@
-.editor_container{
-   width: 60%;
+div.editor_container{
    height: 30em;
    border: 1px solid #ddd;
+   border-top: 0px;
 }
diff --git a/compile_server/app/templates/code_page.html b/compile_server/app/templates/code_page.html
index b3ba77a..87ea27d 100644
--- a/compile_server/app/templates/code_page.html
+++ b/compile_server/app/templates/code_page.html
@@ -6,14 +6,17 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Editor</title>
   <link rel="stylesheet" href="{% static "common.css" %}" />
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 </head>
 <body>
 
-<div id="editor_area">
+<div id="editor_area" class="container">
 </div>
 
 <script src="{% static "ace-builds/src/ace.js" %}"  type="text/javascript" charset="utf-8"></script>
 <script src="{% static "jquery-3.2.1.min.js" %}"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
 <script>
    $( document ).ready(function() {
@@ -27,16 +30,46 @@
    })
    .done(function( json ) {
       // On success, create editors for each of the resources
-      json.resources.forEach(function(resource){
-          // a title
-          $( "<h1>" ).text(resource.basename).appendTo($("#editor_area"));
 
-          // a container for an ACE editor
-          $( '<div class="editor_container" id="' + resource.basename + '"></div>'
-           ).appendTo($("#editor_area"));
+      var ul = $( '<ul class="nav nav-tabs" role="tablist">' )
+      ul.appendTo($("#editor_area"));
+
+      var counter = 0;
+
+      json.resources.forEach(function(resource){
+          counter++;
+          var li = $( '<li role="presentation" class="'
+           + (counter == 1 ? 'active' : '')
+           + '">' ).appendTo(ul);
+          $('<a href="#tab_' + counter  + '" aria-controls="tab_'
+            + counter + '" '
+            + 'id="tab_' + counter + '-tab"'
+            + 'role="tab" data-toggle="tab">'
+            + resource.basename + '</a>').appendTo(li)
+      })
+
+      var content = $( '<div class="tab-content">' )
+      content.appendTo($("#editor_area"));
+
+      counter = 0;
+
+      json.resources.forEach(function(resource){
+          counter++;
+          // a title
+          var div = $('<div role="tabpanel" class="tab-pane'
+                      + (counter == 1 ? ' active' : '')
+                      + '" id="tab_' + counter + '">');
+          var editordiv = $('<div class="editor_container" id="' + resource.basename + '_editor">');
+          editordiv.appendTo(div)
+          div.appendTo(content);
+
+           $('#' + "tab_" + counter + "-tab" + ' a').click(function (e) {
+             e.preventDefault()
+             $(this).tab('show')
+           })
 
           // ACE editors...
-          var editor = ace.edit(resource.basename);
+          var editor = ace.edit(resource.basename + '_editor');
           editor.session.setMode("ace/mode/ada");
 
           // ... and their contents
@@ -44,7 +77,6 @@
 
           // TODO: place the cursor at 1,1
       })
-
    })
    .fail(function( xhr, status, errorThrown ) {
      //
