diff --git a/community/public/css/lms.css b/community/public/css/lms.css
index 67b08a94..590f8160 100644
--- a/community/public/css/lms.css
+++ b/community/public/css/lms.css
@@ -54,4 +54,11 @@
   border: 1px solid #ddd;
 }
 
+.sketch-header h1 {
+  font-size: 1.5em;
+  margin-bottom: 0px;
+}
 
+.sketch-header {
+  margin-bottom: 1em;
+}
diff --git a/community/www/macros/livecode.html b/community/www/macros/livecode.html
index 8d6b99d3..21715887 100644
--- a/community/www/macros/livecode.html
+++ b/community/www/macros/livecode.html
@@ -20,3 +20,19 @@
   </div>
 </div>
 {% endmacro %}
+
+
+{% macro LiveCodeEditorJS(name, code) %}
+<script type="text/javascript" src="{{ livecode_url }}/static/livecode.js"></script>
+<script type="text/javascript">
+  $(function() {
+    $(".canvas-editor").each((i, e) => {
+      var editor = new LiveCodeEditor(e, {
+        runtime: "python-canvas",
+        base_url: "{{ livecode_url }}",
+        codemirror: true
+      })
+    })
+  })
+</script>
+{% endmacro %}
diff --git a/community/www/sketches/index.html b/community/www/sketches/index.html
new file mode 100644
index 00000000..167fb0de
--- /dev/null
+++ b/community/www/sketches/index.html
@@ -0,0 +1,26 @@
+{% extends "templates/base.html" %}
+{% from "www/macros/livecode.html" import LiveCodeEditor, LiveCodeEditorJS %}
+
+{% block title %}Sketches{% endblock %}
+{% block head_include %}
+	<meta name="description" content="Sketches" />
+	<meta name="keywords" content="sketches" />
+  <link rel="stylesheet" href="/assets/css/lms.css">
+{% endblock %}
+
+{% block content %}
+<section class="top-section" style="padding: 1rem 0rem;">
+	<div class='container pb-5'>
+		<h1>Recent Sketches</h1>
+	</div>
+	<div class='container'>
+    {% for sketch in sketches %}
+      <div class="sketch-preview mb-5">
+        <span class="sketch-ts">{{ sketch.modified }}</span>
+        <a href="/sketches/sketch?sketch={{sketch.name}}">{{sketch.title}}</a>
+        By {{sketch.owner}}
+      </div>
+    {% endfor %}
+	</div>
+</section>
+{% endblock %}
diff --git a/community/www/sketches/index.py b/community/www/sketches/index.py
new file mode 100644
index 00000000..156604e9
--- /dev/null
+++ b/community/www/sketches/index.py
@@ -0,0 +1,16 @@
+import frappe
+
+def get_context(context):
+    context.no_cache = 1
+    context.sketches = get_sketches()
+
+def get_sketches():
+    sketches = frappe.get_all(
+        "LMS Sketch",
+        fields=['name', 'title', 'owner', 'modified'],
+        order_by='modified desc',
+        page_length=100
+    )
+    for s in sketches:
+        s['owner'] = s['owner'].split("@")[0]
+    return sketches
diff --git a/community/www/sketches/sketch.html b/community/www/sketches/sketch.html
new file mode 100644
index 00000000..57b08c53
--- /dev/null
+++ b/community/www/sketches/sketch.html
@@ -0,0 +1,44 @@
+{% extends "templates/base.html" %}
+{% from "www/macros/livecode.html" import LiveCodeEditor, LiveCodeEditorJS with context %}
+
+{% block title %}{{sketch.title}}{% endblock %}
+{% block head_include %}
+	<meta name="description" content="Sketch {{sketch.title}}" />
+	<meta name="keywords" content="sketch {{sketch.title}}" />
+	<style>
+	</style>
+
+<link rel="stylesheet" href="{{ livecode_url }}/static/codemirror/lib/codemirror.css">
+<link rel="stylesheet" href="/assets/css/lms.css">
+
+<script src="{{ livecode_url }}/static/codemirror/lib/codemirror.js"></script>
+<script src="{{ livecode_url }}/static/codemirror/mode/python/python.js"></script>
+<script src="{{ livecode_url }}/static/codemirror/keymap/sublime.js"></script>
+
+<script src="{{ livecode_url }}/static/codemirror/addon/edit/matchbrackets.js"></script>
+<script src="{{ livecode_url }}/static/codemirror/addon/comment/comment.js"></script>
+{% endblock %}
+
+{% block content %}
+<section class="top-section" style="padding: 1rem 0rem;">
+	<div class='container pb-5'>
+		<nav aria-label="breadcrumb">
+			<ol class="breadcrumb">
+				<li class="breadcrumb-item" aria-current="page"><a href="/sketches">Sketches</a></li>
+			</ol>
+		</nav>
+
+    <div class="sketch-header">
+		  <h1 class="sketch-title">{{ sketch.title }}</h1>
+      <div class="sketch-owner-wrapper">By <span class="sketch-owner">{{sketch.owner}}</span></div>
+    </div>
+
+    {{LiveCodeEditor(sketch.name, sketch.code) }}
+</section>
+{% endblock %}
+
+{%- block script %}
+  {{ super() }}
+  {{ LiveCodeEditorJS() }}
+{%- endblock %}
+
diff --git a/community/www/sketches/sketch.py b/community/www/sketches/sketch.py
new file mode 100644
index 00000000..68750024
--- /dev/null
+++ b/community/www/sketches/sketch.py
@@ -0,0 +1,27 @@
+import frappe
+
+def get_context(context):
+    context.no_cache = 1
+    course_name = get_queryparam("sketch", '/sketches')
+    context.sketch = get_sketch(course_name)
+    context.livecode_url = get_livecode_url()
+
+def get_livecode_url():
+    doc = frappe.get_doc("LMS Settings")
+    return doc.livecode_url
+
+def get_queryparam(name, redirect_when_not_found):
+    try:
+        return frappe.form_dict[name]
+    except KeyError:
+        frappe.local.flags.redirect_location = redirect_when_not_found
+        raise frappe.Redirect
+
+def get_sketch(name):
+    try:
+        sketch = frappe.get_doc('LMS Sketch', name)
+    except frappe.exceptions.DoesNotExistError:
+        raise frappe.NotFound
+
+    sketch.owner = sketch.owner.split("@")[0]
+    return sketch