diff --git a/app.js b/app.js
index cfc2d71966..7bd551524d 100644
--- a/app.js
+++ b/app.js
@@ -270,6 +270,7 @@ app.get('/account/api', userController.getAccountAngular);
  */
 app.get('/playground', bonfireController.index);
 app.get('/bonfires', bonfireController.returnNextBonfire);
+app.get('/courseware', bonfireController.courseware);
 app.get('/bonfire-json-generator', bonfireController.returnGenerator);
 app.post('/bonfire-json-generator', bonfireController.generateChallenge);
 app.get('/bonfire-challenge-generator', bonfireController.publicGenerator);
diff --git a/controllers/bonfire.js b/controllers/bonfire.js
index 3b98c1bef8..07289986d1 100644
--- a/controllers/bonfire.js
+++ b/controllers/bonfire.js
@@ -8,6 +8,11 @@ var _ = require('lodash'),
  * Bonfire controller
  */
 
+exports.courseware = function(req, res) {
+    res.render('courseware/show.jade', {
+    });
+};
+
 var highestBonfireNumber = resources.numberOfBonfires();
 
 exports.index = function(req, res) {
diff --git a/views/bonfire/bonfire.jade b/views/bonfire/bonfire.jade
deleted file mode 100644
index 498f7d3a23..0000000000
--- a/views/bonfire/bonfire.jade
+++ /dev/null
@@ -1,45 +0,0 @@
-extends ../layout-wide
-block content
-    script(src='/js/lib/codemirror/lib/codemirror.js')
-    script(src='/js/lib/codemirror/addon/edit/closebrackets.js')
-    script(src='/js/lib/codemirror/addon/edit/matchbrackets.js')
-    script(src='/js/lib/codemirror/addon/lint/lint.js')
-    script(src='/js/lib/codemirror/addon/lint/javascript-lint.js')
-    script(src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js')
-    script(src='/js/lib/chai/chai.js')
-    link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css')
-    link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css')
-    link(rel='stylesheet', href='/js/lib/codemirror/theme/monokai.css')
-    link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Ubuntu+Mono")
-    script(src='/js/lib/codemirror/mode/javascript/javascript.js')
-    script(src='/js/lib/jailed/jailed.js')
-    script(src='/js/lib/bonfire/bonfireInit.js')
-    .row
-        script(type="text/javascript").
-            var tests = !{JSON.stringify(tests)};
-            var challengeSeed = !{JSON.stringify(challengeSeed)};
-            var challengeEntryPoint = !{JSON.stringify(challengeEntryPoint)};
-            var title = !{JSON.stringify(title)};
-
-        #mainEditorPanel.col-sm-12.col-md-7.col-xs-12
-            .panel.panel-primary.panel-bonfire
-                .panel-heading.text-center Playground
-                .panel.panel-body
-                    form.code
-                        .form-group.codeMirrorView
-                            textarea#codeEditor(autofocus=true)
-
-
-        #testCreatePanel.col-sm-12.col-md-5.col-xs-12
-            .panel.panel-primary.panel-bonfire
-                .panel-heading.text-center Output
-                .panel.panel-body
-                    #submitButton.btn.btn-primary.btn-big.btn-block Run code (ctrl + enter)
-                    br
-                    form.code
-                        .form-group.codeMirrorView
-                            textarea#codeOutput
-                    br
-                    ul#testSuite.list-group
-                    br
-                    script(src='/js/lib/bonfire/bonfireFramework.js')
\ No newline at end of file
diff --git a/views/courseware/show.jade b/views/courseware/show.jade
new file mode 100644
index 0000000000..bf1d6212d6
--- /dev/null
+++ b/views/courseware/show.jade
@@ -0,0 +1,60 @@
+extends ../layout-wide
+block content
+    script(src='/js/lib/codemirror/lib/codemirror.js')
+    script(src='/js/lib/codemirror/addon/edit/closebrackets.js')
+    script(src='/js/lib/codemirror/addon/edit/matchbrackets.js')
+    script(src='/js/lib/codemirror/addon/lint/lint.js')
+    script(src='/js/lib/codemirror/addon/lint/javascript-lint.js')
+    script(src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js')
+    script(src='/js/lib/chai/chai.js')
+    link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css')
+    link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css')
+    link(rel='stylesheet', href='/js/lib/codemirror/theme/monokai.css')
+    link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Ubuntu+Mono")
+    script(src='/js/lib/codemirror/mode/javascript/javascript.js')
+    script(src='/js/lib/jailed/jailed.js')
+    script(src='/js/lib/bonfire/bonfireInit.js')
+    script(src='/js/lib/codemirror/mode/xml/xml.js')
+    script(src='/js/lib/codemirror/mode/css/css.js')
+    script(src='/js/lib/codemirror/mode/htmlmixed/htmlmixed.js')
+    style(type='text/css').
+    style.
+        .CodeMirror {
+            float: left;
+            width: 50%;
+            border: 1px solid black;
+        }
+        iframe {
+            width: 49%;
+            float: left;
+            height: 300px;
+            border: 1px solid black;
+            border-left: 0px;
+        }
+
+    textarea#code(name='code')
+
+
+    iframe#preview
+    script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js")
+    script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
+    style(src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css")
+    script.
+        var delay;
+        // Initialize CodeMirror editor with a nice html5 canvas demo.
+        var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
+            mode: 'text/html'
+        });
+        editor.on("change", function () {
+            clearTimeout(delay);
+            delay = setTimeout(updatePreview, 300);
+        });
+        function updatePreview() {
+            var previewFrame = document.getElementById('preview');
+            var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
+            preview.open();
+            preview.write(editor.getValue());
+            preview.close();
+        }
+        setTimeout(updatePreview, 300);
+                                                                     
\ No newline at end of file