diff --git a/templates/base.html.twig b/templates/base.html.twig
index 3cda30f..5c8cda3 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -6,12 +6,11 @@
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
         {% block stylesheets %}
         {% endblock %}
-
+    </head>
+    <body onload='setHeight()' onresize='setHeight()'>
+        {% block body %}{% endblock %}
         {% block javascripts %}
             {% block importmap %}{{ importmap('app') }}{% endblock %}
         {% endblock %}
-    </head>
-    <body>
-        {% block body %}{% endblock %}
     </body>
 </html>
diff --git a/templates/default/index.html.twig b/templates/default/index.html.twig
new file mode 100644
index 0000000..e058be7
--- /dev/null
+++ b/templates/default/index.html.twig
@@ -0,0 +1,70 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Notes{% endblock %}
+
+{% block stylesheets %}
+<link href='/css/style.css' rel='stylesheet' />
+{% endblock %}
+
+{% block javascripts %}
+<script src='/js/script.js'></script>
+<script src="https://kit.fontawesome.com/f15a79324f.js" crossorigin="anonymous"></script>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js'></script>
+{% endblock %}
+
+{% block body %}
+<main class="container">
+    <section class="top-tab">
+        <i class="fa fa-bars hamburger" aria-hidden="true"></i>
+        <ul class="hamburger-list" style="display: none">
+            <li><a href="#">New Note</a></li>
+            <li><a href="#">Open Note</a></li>
+            <li><a href="#" onclick="saveNote();link.click();">Save Note</a></li>
+            <li><a href='#' onclick='discardNote()'>Discard Note</a></li>
+            <li><a href='/index.php/reference-editor'>Reference Editor</a></li>
+            <li><a href='#' onclick="openRef()">Open Reference</a></li>
+            <li><a href='/index.php/template-editor'>Template Editor</a></li>
+        </ul>&nbsp;&nbsp;
+        <i id='save-check' class='fa fa-check' style='opacity:0;'></i>
+        <div id='res'></div>
+    </section>
+    <section class="ref-tab">
+        <ul id='ref-list'>
+        </ul>
+    </section>
+    <section class="ref">
+        <h2>Reference</h2>
+        <div id="ref"></div>
+    </section>
+    <section class="notes">
+        <h2>Notes</h2>
+        <input type="text" id="noteTitle" placeholder="Title...">
+        <select id="speaker">
+            <option value=0>-- Speaker --</option>
+            {% for s in speakers %}
+            <option value='{{ s.id }}'>{{ s.name }}</option>
+            {% endfor %}
+        </select>
+        <select id="series">
+            <option value=0>-- Series --</option>
+            {% for s in series %}
+            <option value='{{ s.id }}'>{{ s.name }}</option>
+            {% endfor %}
+        </select>
+        <select id='template' onchange="retrieveTemplate('template','notes')">
+            <option value=0>-- Template --</option>
+            {% for t in templates %}
+            <option value="{{ t.id }}">{{ t.name }}</option>
+            {% endfor %}
+        </select>
+        <input type="button" id="previewBtn" value="Preview"><br />
+
+        <textarea id="notes" wrap="hard"></textarea>
+    </section>
+</main>
+
+<div id="refQuery">
+    <input type="text" id="search" placeholder="Search"><br />
+    <button id="searchBtn" onclick="queryRef()">Search</button>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/default/reference-editor.html.twig b/templates/default/reference-editor.html.twig
new file mode 100644
index 0000000..84b9f4c
--- /dev/null
+++ b/templates/default/reference-editor.html.twig
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Reference Editor</title>
+    </head>
+
+    <body>
+        <script src='/js/script.js'></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/templates/default/series-editor.html.twig b/templates/default/series-editor.html.twig
new file mode 100644
index 0000000..b059c32
--- /dev/null
+++ b/templates/default/series-editor.html.twig
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Series Editor</title>
+    </head>
+
+    <body>
+        <select id='series' onchange='retrieveSeries()'>
+            <option value='0'>-- Series --</option>
+            {% for s in series %}
+            <option value='{{ s.id }}'>{{ s.name }}</option>
+            {% endfor %}
+        </select>&nbsp;&nbsp;
+        <input type='text' name='series_name' id='series_name' />&nbsp;&nbsp;
+        <input type='button' name='save' value='Save' onclick='saveSeries()' />&nbsp;&nbsp;
+        <a href='/index.php/'>Back</a>
+
+        <script src='/js/script.js'></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/templates/default/speaker-editor.html.twig b/templates/default/speaker-editor.html.twig
new file mode 100644
index 0000000..6868c36
--- /dev/null
+++ b/templates/default/speaker-editor.html.twig
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Speaker Editor</title>
+    </head>
+
+    <body>
+        <select name='speaker_id' id='speaker_id' onchange='retrieveSpeaker()'>
+            <option value='0'>-- Speaker --</option>
+            {% for s in speakers %}
+            <option value='{{ s.id }}'>{{ s.name }}</option>
+            {% endfor %}
+        </select>&nbsp;&nbsp;
+        <input type='text' name='speaker_name' id='speaker_name' />&nbsp;&nbsp;
+        <input type='button' name='save' value='Save' onclick='saveSpeaker()' />&nbsp;&nbsp;
+        <a href='/index.php/'>Back</a>
+        
+        <script src='/js/script.js'></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/templates/default/template-editor.html.twig b/templates/default/template-editor.html.twig
new file mode 100644
index 0000000..55b1538
--- /dev/null
+++ b/templates/default/template-editor.html.twig
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Template Editor</title>
+    </head>
+
+    <body>
+        <form>
+            <select id='template_id' name='template_id' onchange="retrieveTemplate('template_id','template_value')">
+                <option value='0'>-- Templates --</option>
+                {% for t in templates %}
+                <option value='{{ t.id }}'>{{ t.name }}</option>
+                {% endfor %}
+            </select>&nbsp;&nbsp;
+            <input type='text' name='name' id='template_name' />&nbsp;&nbsp;
+            <input type='button' name='submit' value='Save' onclick='saveTemplate()' />&nbsp;&nbsp;
+            <a href='/index.php/'>Back</a>
+            <br />
+
+            <textarea id='template_value' name='template' wrap='hard' cols=100 rows=50></textarea>
+        </form>
+
+        <script src='/js/script.js'></script>
+    </body>
+</html>
\ No newline at end of file
