diff --git a/templates/default/home.html.twig b/templates/default/home.html.twig
index cdbcb24..74408d5 100644
--- a/templates/default/home.html.twig
+++ b/templates/default/home.html.twig
@@ -3,191 +3,223 @@
 {% block title %}Sermon Notes{% endblock %}
 
 {% block stylesheets %}
-<link href="{{ asset('css/main.css') }}" rel="stylesheet" />
-<link href='{{ asset('css/jquery-ui.theme.css') }}' rel='stylesheet' />
-<link href='{{ asset('css/jquery-ui.structure.css') }}' rel='stylesheet' />
-<link href='{{ asset('styles/style.css') }}' rel='stylesheet' />
-<link href='//cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css' rel='stylesheet' />
+<link href="{{ asset('css/jquery-ui.theme.css') }}" rel="stylesheet" />
+<link href="{{ asset('css/jquery-ui.structure.css') }}" rel="stylesheet" />
+<link href="{{ asset('css/light-mode.css') }}" rel="stylesheet" data-css="mode" data-light="{{ asset('css/light-mode.css') }}" data-dark="{{ asset('css/dark-mode.css') }}" />
+<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
+
+<link href="//cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css" rel="stylesheet" />
 <style>
 #notes,
 #notePreview {
     font-size: {{ meta.noteTextSize }}pt;
 }
-button.button i {
-    font-size: 1.5em;
-}
 .input-error {
-    border: solid 2px red !important;
+    /* border: solid 2px red !important; */
 }
 </style>
 {% endblock %}
 
 {% block javascripts %}
 <script src="{{ asset('js/jquery.min.js') }}"></script>
-<script src='{{ asset('js/jquery-ui.js') }}'></script>
+<script src="{{ asset('js/jquery-ui.js') }}"></script>
 <script src="{{ asset('js/browser.min.js') }}"></script>
 <script src="{{ asset('js/breakpoints.min.js') }}"></script>
 <script src="{{ asset('js/util.js') }}"></script>
-<script src="{{ asset('js/main.js') }}"></script>
-<script src='//momentjs.com/downloads/moment-with-locales.js'></script>
+{#<script src="{{ asset('js/main.js') }}"></script>#}
+<script src="//momentjs.com/downloads/moment-with-locales.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js" integrity="sha512-ohlWmsCxOu0bph1om5eDL0jm/83eH09fvqLDhiEdiqfDeJbEvz4FSbeY0gLJSVJwQAp0laRhTXbUQG+ZUuifUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src='//cdn.datatables.net/2.0.8/js/dataTables.min.js'></script>
-<script>
-let saveInterval = ({{ meta.saveInterval }} * 1000);
-let saveTimeout = ({{ meta.saveTimeout }} * 1000);
-const SAVE_FAILURE_LIMIT = {{ meta.saveFailureCount }};
-let saveFailureCount = {{ meta.saveFailureCount }};
+<script src="//cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
+
+{{ importmap('app') }}
+
+<script type="module">
+    import * as ref from "{{ asset('js/reference.js') }}";
+    import * as home from "{{ asset('js/home.js') }}";
+    import * as note from "{{ asset('js/note.js') }}";
+    import { state } from "{{ asset('js/state.js') }}";
+    import * as series from "{{ asset('js/series.js') }}";
+    import * as speaker from "{{ asset('js/speaker.js') }}";
+    import * as template from "{{ asset('js/template.js') }}";
+    window.ref = ref;
+    window.home = home;
+    window.note = note;
+    window.state = state;
+    window.series = series;
+    window.speaker = speaker;
+    window.template = template;
+
+    document.addEventListener('DOMContentLoaded', () => {
+        home.initHome();
+
+        const sidebarToggle = document.getElementById('sidebar-link');
+        const container = document.querySelector('.container');
+
+        if (sidebarToggle && container) {
+            sidebarToggle.addEventListener('click', (e) => {
+                e.preventDefault();
+                container.classList.toggle('sidebar-collapsed');
+            })
+        }
+
+        state.saveInterval = ({{ meta.saveInterval }} * 1000);
+        state.saveTimeout = ({{ meta.saveTimeout }} * 1000);
+        state.saveFailureCount = {{ meta.saveFailureCount }};
+    });
 </script>
-<script type='module'>
-    var body;
-    import {initHome, setBooks, setHeight, setEventListeners} from "{{ asset('js/site.js') }}";
-    document.onload = initHome();
-    window.setHeight = setHeight;
-    import {retrieveTemplate, saveTemplate} from "{{ asset('js/template.js') }}";
-    window.retrieveTemplate = retrieveTemplate;
-    window.saveTemplate = saveTemplate;
-</script>
-<script src='{{ asset('js/script.js') }}'></script>
 {% endblock %}
 
 {% block body %}
-<div id='wrapper'>
-    <div id='main'>
-        <div class='inner'>
-            <section class='ref-tab'>
-                <ul id='ref-list'>
-                </ul>
-            </section>
-
-            <section class='ref'>
-                <h2>Reference</h2>
-                <div style='display:inline-block'>
-                    <button onclick='increaseFont()'><i class='fa fa-plus'></i></button>&nbsp;
-                    <button onclick='decreaseFont()'><i class='fa fa-minus'></i></button>&nbsp;
-                    <button id='openRefBtn' class='button' onclick='openRef(false)'><i class='fa fa-book'></i></button>
-                </div>
-                <div id="ref" style='font-size:{{ meta.noteTextSize }}pt;'></div>
-                <div id='note-list'>
-                    <table id='note-table' data-order='[[ 3, "desc" ]]'>
-                        <thead>
-                            <tr>
-                                <th>Title</th>
-                                <th>Speaker</th>
-                                <th>Passage</th>
-                                <th>Date</th>
-                            </tr>
-                        </thead>
-                    </table>
-                </div>
-            </section>
-
-            <section class="notes">
-                <div id='note-header-left'>
-                    <h2>Notes</h2>
-                    <i id='save-check' class='fa fa-save'></i>
-                </div>
-                <div id='note-header-right'>
-                    <select id='template' onchange="retrieveTemplate('template','notes')" style='width:200px;'>
-                        <option value=0>-- Template --</option>
-                        {% for t in app.user.templates %}
-                        <option value="{{ t.id }}">{{ t.name }}</option>
-                        {% endfor %}
-                    </select>&nbsp;
-                    <button id="previewBtn" class='button' onclick='previewNote()'>
-                        <i class='fa fa-eye'></i>
-                    </button>&nbsp;
-                    <button id='show-hide-btn' class='button' onclick='toggleFields()'>
-                        <i class='fa fa-table'></i>
-                    </button>&nbsp;
-                    <button id='shareBtn' class='button'>
-                        <i class='fas fa-share-alt'></i>
-                    </button>
-                </div>
-
-                <div id='fields-container'>
-                    <input type="hidden" id="noteId" value="" />
-                    <input type="text" id="noteTitle" placeholder="Title..." />
-                    <input type='text' id='noteDate' placeholder='Date...' onchange='textDirty=true;saved=false;' />
-                    <input type='text' id='passage' placeholder='Passage...' onchange='saved=false;textDirty=true;' />
-                    <br />
-                    <input type='text' id='recording' name='recording' placeholder='Recording link...' />
-                    <input type='text' id='newSpeaker' placeholder='Name...' onkeyup='saveSpeaker(event)' style='display:none;' />
-                    <select id="speaker" onchange='newSpeaker()'>
-                        <option value=0>-- Speaker --</option>
-                        <option value='new'>New Speaker</option>
-                        {% for s in speakers %}
-                        <option value='{{ s.id }}'>{{ s.name }}</option>
-                        {% endfor %}
-                    </select>
-                    <input type='text' id='newSeries' placeholder='Series...' onkeyup='saveSeries(event)' style='display:none;' />
-                    <select id="series" onchange='newSeries()'>
-                        <option value=0>-- Series --</option>
-                        <option value='new'>New Series</option>
-                        {% for s in series %}
-                        <option value='{{ s.id }}'>{{ s.name }}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-
-                <textarea id="notes" wrap="hard" style='font-size:{{ meta.noteTextSize }}pt'></textarea>
-                <div id='notePreview'></div>
-            </section>
-        </div>
-    </div>
-
+<div id="query"></div>
+<div class="container sidebar-collapsed">
     {% include('default/sidebar.html.twig') %}
 
+	<div class="ref-btn-header">&nbsp;</div>
+	<div class="ref-btn bottom-row">
+		<ul id="ref-list" class="ref-list"></ul>
+	</div>
+	<div class="mobile-note-header">
+		<h2>Notes</h2>
+		<label class="switch">
+			<input type="checkbox" id="mobile-dark-mode-checkbox"/>
+			<span class="slider round"></span>
+		</label>
+		<button id="mobile-open-ref" class="button">
+            <i class="fa fa-book"></i>
+        </button>
+		<button id="mobile-show-hide-btn" class="button">
+            <i class="fa fa-table"></i>
+        </button>
+	</div>
+	<div class="ref-header">
+		<label class="switch">
+			<input type="checkbox" id="dark-mode-checkbox"/>
+			<span class="slider round"></span>
+		</label>
+		<h2>Reference</h2>
+		<div class="ref-header-buttons">
+			<button id="increaseFont"><i class="fa fa-plus"></i></button>
+			<button id="decreaseFont"><i class="fa fa-minus"></i></button>
+			<button id="open-ref" class="button"><i class="fa fa-book"></i></button>
+		</div>
+	</div>
+	<div id="ref-text" class="ref-text bottom-row" style="font-size:{{ meta.noteTextSize }}pt;"></div>
+    <div id="note-list">
+        <table id="note-table" data-order='[[ 3, "desc" ]]'>
+            <thead>
+                <tr>
+                    <th>Title</th>
+                    <th>Speaker</th>
+                    <th>Passage</th>
+                    <th>Date</th>
+                </tr>
+            </thead>
+        </table>
+    </div>
+
+	<div class="note-header">
+		<div class="note-header-column">
+			<button id="previewBtn" class="button">
+				<i class="fa fa-eye"></i>
+			</button>
+			<button id="show-hide-btn" class="button">
+				<i class="fa fa-table"></i>
+			</button>
+			<button id="shareBtn" class="button">
+				<i class="fas fa-share-alt"></i>
+			</button>
+		</div>
+		<div class="note-header-column">
+			<h2>Notes</h2>
+			<i id="save-check" class="fa fa-save"></i>
+		</div>
+		<div class="note-header-column">
+			<div class="dropdown" id="templateDropdown">
+				<select id="template" onchange="template.retrieveTemplate('template', 'notes')" >
+					<option value="0">-- Template --</option>
+                    {% for t in app.user.templates %}
+                        <option value="{{ t.id }}">{{ t.name }}</option>
+                    {% endfor %}
+				</select>
+			</div>
+		</div>
+	</div>
+	<div class="notes bottom-row">
+		<div class="fields-container">
+			<input type="hidden" id="noteId" value="">
+			<input type="text" id="noteTitle" placeholder="Title..." onkeyup="state.textDirty=true;state.saved=false;">
+			<input type="text" id="noteDate" placeholder="Date..." onchange="state.textDirty=true;state.saved=false;">
+			<input type="text" id="passage" placeholder="Passage..." onchange="state.textDirty=true;state.saved=false;">
+			<input type="text" id="recording" placeholder="Recording link...">
+			<input type="text" id="newSpeaker" placeholder="Name..." onkeyup="speaker.saveSpeaker(event)" style="display:none;">
+			<div class="dropdown" id="speakerDropdown">
+				<select id="speaker" onchange="speaker.newSpeaker()">
+					<option value="0">-- Speaker --</option>
+					<option value="new">New Speaker</option>
+                    {% for s in speakers %}
+                        <option value="{{ s.id }}">{{ s.name }}</option>
+                    {% endfor %}
+				</select>
+			</div>
+			<input type="text" id="newSeries" placeholder="Series..." onkeyup="series.saveSeries(event)" style="display:none;">
+			<div class="dropdown" id="seriesDropdown">
+				<select id="series" onchange="series.newSeries()">
+					<option value="0">-- Series --</option>
+					<option value="new">New Series</option>
+                    {% for s in series %}
+                        <option value="{{ s.id }}">{{ s.name }}</option>
+                    {% endfor %}
+				</select>
+			</div>
+		</div>
+		<div class="note-text">
+			<textarea id="notes" wrap="hard" style="font-size: {{ meta.noteTextSize }}pt"></textarea>
+		</div>
+        <div id="notePreview"></div>
+	</div>
 </div>
 
 <div id="refQuery">
-    <select id='referenceType' onchange='retrieveBooks()'>
+    <select id="referenceType" onchange="ref.retrieveBooks()">
         <option>-- Select --</option>
-        <option value='bible'>Bible</option>
-        <option value='creed'>Various Creed</option>
-        <option value='bc'>Belgic Confession</option>
-        <option value='hc'>Heidelberg Catechism</option>
-        <option value='cd'>Canons of Dort</option>
-        <option value='wcf'>Westminster Confession of Faith</option>
-        <option value='wsc'>Westminster Shorter Catechism</option>
-        <option value='wlc'>Westminster Larger Catechism</option>
-        <option value='lbc'>London Baptist Confession</option>
-        <option value='39a'>Thirty-Nine Articles</option>
-        <option value='1hc'>First Helvetic Confession</option>
-        <option value='2hc'>Second Helvetic Confession</option>
-        <option value='sd'>Savoy Declaration</option>
-        <option value='agc'>Augsburg Confession</option>
+        <option value="bible">Bible</option>
+        <option value="creed">Various Creed</option>
+        <option value="bc">Belgic Confession</option>
+        <option value="hc">Heidelberg Catechism</option>
+        <option value="cd">Canons of Dort</option>
+        <option value="wcf">Westminster Confession of Faith</option>
+        <option value="wsc">Westminster Shorter Catechism</option>
+        <option value="wlc">Westminster Larger Catechism</option>
+        <option value="lbc">London Baptist Confession</option>
+        <option value="39a">Thirty-Nine Articles</option>
+        <option value="1hc">First Helvetic Confession</option>
+        <option value="2hc">Second Helvetic Confession</option>
+        <option value="sd">Savoy Declaration</option>
+        <option value="agc">Augsburg Confession</option>
     </select>
-    <select id='referenceBook' onchange='filterBooks()'>
-    </select>
-    <span id='chapter-range' style='color:white;'></span>
-    <input type="text" id="referenceSearch" placeholder="Search" onkeyup='filterVerse()'>
-    <span id='verse-range' style='color:white;'></span>
+    <select id="referenceBook" onchange="ref.filterBooks()" style="display:none;"></select>
+    <span id="chapter-range"></span>
+    <input type="text" id="referenceSearch" placeholder="Search" onkeyup="ref.filterVerse()" style="display:none;">
+    <span id="verse-range"></span>
     <br />
-    <button id="searchBtn" onclick="queryRef()">Search</button>&nbsp;
-    <button id='closeSearch' onclick='closeRef()'>Close</button>
+    <button id="searchBtn">Search</button>&nbsp;
+    <button id="closeSearch">Close</button>
 </div>
 
-<div id='passage-popup'>
-</div>
+<div id="passage-popup"></div>
 
-<!-- The modal background -->
-<div id='modal-backdrop' class="modal-backdrop fade in" style='display:none;'></div>
+<div id="modal-backdrop" class="modal-backdrop fade in" style="display:none;"></div>
 
-<!-- The modal container -->
-<div id='modal-container' class="modal-container" style='display:none;'>
-  <!-- The modal header -->
+<div id="modal-container" class="modal-container" style="display:none;">
   <header class="modal-header">Share Note</header>
-
-  <!-- The modal body -->
   <form id="emailForm" class="modal-body">
     <label for="shareEmail">Enter Friends Email:</label>
-    <input type="email" id="shareEmail" name="email" autocomplete=false required />
-    <button type='button' id="submit" class="btn btn-primary" onclick='shareNote()'>Submit</button>
+    <input type="email" id="shareEmail" name="email" required />
+    <button type="button" id="submit" class="btn btn-primary" onclick="note.shareNote()">Submit</button>
   </form>
-
-  <!-- The modal footer -->
   <footer class="modal-footer">
-    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick='closeShareNote()'>Close</button>
+    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="note.closeShareNote()">Close</button>
   </footer>
 </div>
+
 {% endblock %}
\ No newline at end of file
diff --git a/templates/editors/reference-editor.html.twig b/templates/editors/reference-editor.html.twig
index f37af15..ea4e094 100644
--- a/templates/editors/reference-editor.html.twig
+++ b/templates/editors/reference-editor.html.twig
@@ -3,7 +3,7 @@
     <head>
         <title>Reference Editor</title>
         <script type='module'>
-            import {setHeight, setBooks, setEventListeners} from "{{ asset('js/site.js') }}";
+            import {setHeight, setBooks, setEventListeners} from "{{ asset('js/home.js') }}";
             import {retrieveReference, retrieveReferenceType, saveReference} from '{{ asset("js/reference.js") }}';
             window.retrieveReference = retrieveReference;
             window.retrieveReferenceType = retrieveReferenceType;