diff --git a/assets/js/reference.js b/assets/js/reference.js
new file mode 100644
index 0000000..f778dd5
--- /dev/null
+++ b/assets/js/reference.js
@@ -0,0 +1,85 @@
+/**
+ * Retrieves the reference type from the server and populates the reference series dropdown.
+ *
+ * @param {HTMLElement} el - The element that triggered the function.
+ * @return {Promise} A promise that resolves with the response from the server.
+ */
+export function retrieveReferenceType(el) {
+    fetch('/reference/' + el.value, {
+        method: 'GET',
+        header: {
+            'Content-Type': 'application/json'
+        }
+    })
+        .then(response => response.json())
+        .then(results => {
+            document.querySelector('#referenceSeries').innerHTML = '';
+            var none = document.createElement('option');
+            none.value = '';
+            none.text = '-- Select --';
+            document.querySelector('#referenceSeries').appendChild(none);
+
+            for (var x in results) {
+                var newSeries = document.createElement('option');
+                newSeries.value = results[x].id;
+                newSeries.text = results[x].label;
+                document.querySelector('#referenceSeries').appendChild(newSeries);
+            }
+        });
+}
+
+/**
+ * Retrieves a reference based on the provided element value.
+ *
+ * @param {Element} el - The element triggering the reference retrieval
+ * @return {void} No return value
+ */
+export function retrieveReference(el) {
+    if (el.value == 'new') {
+        document.querySelector('#refName').style.display = 'inline-block';
+        return;
+    }
+    fetch('/get-reference', {
+        method: "POST",
+        header: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            id: el.value
+        })
+    })
+        .then(response => response.json())
+        .then(results => {
+            document.querySelector('#reference').value = results.text;
+        });
+}
+
+/**
+ * Saves a reference by sending a POST request to the server with the selected type,
+ * file, and text values. Displays an alert with the response message, and clears
+ * the reference and file input fields.
+ *
+ * @return {Promise} A Promise that resolves with the response message from the server.
+ */
+export function saveReference() {
+    let ref = document.querySelector('#referenceSeries');
+    let cont = document.querySelector('#reference');
+    fetch('/save-reference', {
+        method: 'POST',
+        header: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            refId: ref.value,
+            text: cont.value
+        })
+    })
+        .then(response => response.json())
+        .then(results => {
+            //alert(results.msg);
+
+            document.querySelector('#reference').value = '';
+            document.querySelector('#referenceType').value = '';
+            document.querySelector('#referenceSeries').value = '';
+        });
+}
diff --git a/assets/js/script.js b/assets/js/script.js
index 28cc299..b0adcd7 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -8,122 +8,6 @@ var to = null;
 let controller;
 var BOOKS = {};
 
-$(function () {
-    setHeight();
-    setBooks();
-    setEventListeners();
-    $('#note-table').DataTable({
-        paging: false,
-        ajax: {
-            url: '/get-notes',
-            type: 'POST'
-        },
-        columns: [
-            { data: 'link' },
-            { data: 'speaker.name' },
-            { data: 'passage' },
-            {
-                data: 'date.date',
-                render: DataTable.render.date("L")
-            },
-        ]
-    });
-    $('#shareBtn').on('click', openShareNote);
-    $('#modal-backdrop').on('click', closeShareNote);
-});
-
-/**
- * Fetches data from '/js/data.json', assigns it to BOOKS, and handles errors.
- *
- * @return {void}
- */
-function setBooks() {
-    fetch('js/data.json')
-        .then((res) => {
-            if (!res.ok) {
-                throw new Error('HTTP Error: Status: ${res.status}');
-            }
-            return res.json();
-        })
-        .then((data) => {
-            BOOKS = data;
-        })
-        .catch((error) => {
-            console.log(error);
-        })
-}
-
-/**
- * Sets event listeners for keyup events on the document and the '#notes' element.
- *
- * @return {void}
- */
-function setEventListeners() {
-    document.addEventListener('keyup', function (event) {
-        if (event.key == "F3") {
-            openRef(false);
-        }
-    });
-
-    document.querySelector('#notes').addEventListener('keyup', function (event) {
-        let key = event.keyCode;
-
-        if (key >= 48 && key <= 90 || key >= 96 && key <= 111 || key >= 186 && key <= 222) {
-            textDirty = true;
-            document.querySelector('#note-header-left h2').classList.add('dirty');
-        }
-    });
-}
-
-/**
- * Sets the height of various elements on the page based on the window's inner height.
- * Also initializes a datepicker and event listener for the search input field.
- *
- * @return {void}
- */
-function setHeight() {
-    md = new markdownit({
-        html: true,
-        linkify: true,
-        breaks: true
-    });
-
-    body = document.querySelector('body');
-    body.style.height = window.innerHeight + 'px';
-
-    cont = document.querySelector('#main');
-    cont.style.height = (window.innerHeight) + 'px';
-
-    tabs = document.querySelector('.ref-tab');
-    tabs.style.height = (window.innerHeight - 13) + 'px';
-
-    ref = document.querySelector('.ref');
-    ref.style.height = (window.innerHeight - 60) + 'px';
-
-    noteList = document.querySelector('#note-list');
-    noteList.style.height = (window.innerHeight - 60) + 'px';
-
-    notes = document.querySelector('.notes');
-    notes.style.height = (window.innerHeight - 60) + 'px';
-
-    notePreview = document.querySelector('#notePreview');
-    notePreview.style.height = (window.innerHeight - 50) + 'px';
-
-    if ($('#noteDate')) {
-        $('#noteDate').datepicker();
-    }
-
-    if ($('#query')) {
-        document.querySelector('#query').addEventListener('keyup', function (event) {
-            if (event.key == "Enter") {
-                search();
-            }
-        });
-    }
-    if (!to) {
-        to = setTimeout(saveNote, saveInterval);
-    }
-}
 
 /**
  * Searches for notes based on the query entered in the search field.
@@ -619,56 +503,6 @@ function removeActiveRef() {
     }
 }
 
-/**
- * Retrieves a template from the server and sets it as the value of a specified destination element.
- *
- * @param {string} orig - The ID of the element containing the original template value.
- * @param {string} dest - The ID of the destination element where the retrieved template will be set.
- * @return {Promise} A Promise that resolves when the template is successfully retrieved and set as the value of the destination element.
- */
-function retrieveTemplate(orig, dest) {
-    const temp = document.querySelector('#' + orig);
-    if (temp.value == '0') {
-        document.querySelector('#' + dest).value = '';
-        return;
-    }
-    fetch('/retrieve-template', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'plain/text'
-        },
-        body: JSON.stringify({
-            'template': temp.value
-        })
-    })
-        .then(response => response.text())
-        .then(results => {
-            const div = document.querySelector('#' + dest);
-            div.value = results;
-        });
-}
-
-/**
- * Saves the template by sending a POST request to the server with template data.
- */
-function saveTemplate() {
-    fetch('/save-template', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'plain/text'
-        },
-        body: JSON.stringify({
-            'template_id': document.querySelector('#template_id').value,
-            'template_name': document.querySelector('#template_name').value,
-            'template_value': document.querySelector('#template_value').value,
-        })
-    })
-        .then(response => response.text())
-        .then(results => {
-            alert(results);
-        });
-}
-
 /**
  * Toggles the visibility of the fields container and updates the active state of the show/hide button.
  *
@@ -843,93 +677,6 @@ function filterVerse() {
     verseRange.innerText = 'Verse: ' + verse;
 }
 
-/**
- * Retrieves the reference type from the server and populates the reference series dropdown.
- *
- * @param {HTMLElement} el - The element that triggered the function.
- * @return {Promise} A promise that resolves with the response from the server.
- */
-function retrieveReferenceType(el) {
-    fetch('/reference/' + el.value, {
-        method: 'GET',
-        header: {
-            'Content-Type': 'application/json'
-        }
-    })
-        .then(response => response.json())
-        .then(results => {
-            document.querySelector('#referenceSeries').innerHTML = '';
-            var none = document.createElement('option');
-            none.value = '';
-            none.text = '-- Select --';
-            document.querySelector('#referenceSeries').appendChild(none);
-
-            for (var x in results) {
-                var newSeries = document.createElement('option');
-                newSeries.value = results[x].id;
-                newSeries.text = results[x].label;
-                document.querySelector('#referenceSeries').appendChild(newSeries);
-            }
-        })
-}
-
-/**
- * Retrieves a reference based on the provided element value.
- *
- * @param {Element} el - The element triggering the reference retrieval
- * @return {void} No return value
- */
-function retrieveReference(el) {
-    if (el.value == 'new') {
-        document.querySelector('#refName').style.display = 'inline-block';
-        return;
-    }
-    fetch('/get-reference', {
-        method: "POST",
-        header: {
-            "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-            id: el.value
-        })
-    })
-        .then(response => response.json())
-        .then(results => {
-            document.querySelector('#reference').value = results.text;
-        });
-}
-
-/**
- * Saves a reference by sending a POST request to the server with the selected type,
- * file, and text values. Displays an alert with the response message, and clears
- * the reference and file input fields.
- *
- * @return {Promise} A Promise that resolves with the response message from the server.
- */
-function saveReference() {
-    let ref = document.querySelector('#referenceSeries');
-    let cont = document.querySelector('#reference');
-    fetch('/save-reference', {
-        method: 'POST',
-        header: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-            refId: ref.value,
-            text: cont.value
-        })
-    })
-        .then(response => response.json())
-        .then(results => {
-            alert(results.msg);
-
-            document.querySelector('#reference').value = '';
-            document.querySelector('#references').value = '';
-            document.querySelector('#referenceType').value = '';
-            document.querySelector('#referenceSeries').value = '';
-        });
-}
-
 /**
  * Previews a note by rendering the markdown content of the note in a preview section.
  * Toggles between the note text and preview sections.
@@ -1236,6 +983,8 @@ function shareNote(event) {
 function increaseFont() {
     var currentSize = document.querySelector('#ref').style.fontSize;
     document.querySelector('#ref').style.fontSize = (parseInt(currentSize) + 1) + 'pt';
+    document.querySelector('#notes').style.fontSize = (parseInt(currentSize) + 1) + 'pt';
+    document.querySelector('#notePreview').style.fontSize = (parseInt(currentSize) + 1) + 'pt';
 }
 
 /**
@@ -1246,6 +995,8 @@ function increaseFont() {
 function decreaseFont() {
     var currentSize = document.querySelector('#ref').style.fontSize;
     document.querySelector('#ref').style.fontSize = (parseInt(currentSize) - 1) + 'pt';
+    document.querySelector('#notes').style.fontSize = (parseInt(currentSize) - 1) + 'pt';
+    document.querySelector('#notePreview').style.fontSize = (parseInt(currentSize) - 1) + 'pt';
 }
 
 /**
diff --git a/assets/js/site.js b/assets/js/site.js
new file mode 100644
index 0000000..6c5290d
--- /dev/null
+++ b/assets/js/site.js
@@ -0,0 +1,116 @@
+export function initHome() {
+    setHeight();
+    setBooks();
+    setEventListeners();
+    $('#note-table').DataTable({
+        paging: false,
+        ajax: {
+            url: '/get-notes',
+            type: 'POST'
+        },
+        columns: [
+            { data: 'link' },
+            { data: 'speaker.name' },
+            { data: 'passage' },
+            {
+                data: 'date.date',
+                render: DataTable.render.date("L")
+            },
+        ]
+    });
+    $('#shareBtn').on('click', openShareNote);
+    $('#modal-backdrop').on('click', closeShareNote);
+}
+
+/**
+ * Fetches data from '/js/data.json', assigns it to BOOKS, and handles errors.
+ *
+ * @return {void}
+ */
+export function setBooks() {
+    fetch('js/data.json')
+        .then((res) => {
+            if (!res.ok) {
+                throw new Error('HTTP Error: Status: ${res.status}');
+            }
+            return res.json();
+        })
+        .then((data) => {
+            BOOKS = data;
+        })
+        .catch((error) => {
+            console.log(error);
+        })
+}
+
+/**
+ * Sets event listeners for keyup events on the document and the '#notes' element.
+ *
+ * @return {void}
+ */
+export function setEventListeners() {
+    document.addEventListener('keyup', function (event) {
+        if (event.key == "F3") {
+            openRef(false);
+        }
+    });
+
+    document.querySelector('#notes').addEventListener('keyup', function (event) {
+        let key = event.keyCode;
+
+        if (key >= 48 && key <= 90 || key >= 96 && key <= 111 || key >= 186 && key <= 222) {
+            textDirty = true;
+            document.querySelector('#note-header-left h2').classList.add('dirty');
+        }
+    });
+}
+
+/**
+ * Sets the height of various elements on the page based on the window's inner height.
+ * Also initializes a datepicker and event listener for the search input field.
+ *
+ * @return {void}
+ */
+export function setHeight() {
+    md = new markdownit({
+        html: true,
+        linkify: true,
+        breaks: true
+    });
+
+    var body = document.querySelector('body');
+    body.style.height = window.innerHeight + 'px';
+
+    var cont = document.querySelector('#main');
+    cont.style.height = (window.innerHeight) + 'px';
+
+    var tabs = document.querySelector('.ref-tab');
+    tabs.style.height = (window.innerHeight - 13) + 'px';
+
+    var ref = document.querySelector('.ref');
+    ref.style.height = (window.innerHeight - 60) + 'px';
+
+    var noteList = document.querySelector('#note-list');
+    noteList.style.height = (window.innerHeight - 60) + 'px';
+
+    var notes = document.querySelector('.notes');
+    notes.style.height = (window.innerHeight - 60) + 'px';
+
+    var notePreview = document.querySelector('#notePreview');
+    notePreview.style.height = (window.innerHeight - 50) + 'px';
+
+    if ($('#noteDate')) {
+        $('#noteDate').datepicker();
+    }
+
+    if ($('#query')) {
+        document.querySelector('#query').addEventListener('keyup', function (event) {
+            if (event.key == "Enter") {
+                search();
+            }
+        });
+    }
+    if (!to) {
+        to = setTimeout(saveNote, saveInterval);
+    }
+}
diff --git a/assets/js/template.js b/assets/js/template.js
new file mode 100644
index 0000000..ae91649
--- /dev/null
+++ b/assets/js/template.js
@@ -0,0 +1,49 @@
+/**
+ * Retrieves a template from the server and sets it as the value of a specified destination element.
+ *
+ * @param {string} orig - The ID of the element containing the original template value.
+ * @param {string} dest - The ID of the destination element where the retrieved template will be set.
+ * @return {Promise} A Promise that resolves when the template is successfully retrieved and set as the value of the destination element.
+ */
+export function retrieveTemplate(orig, dest) {
+    const temp = document.querySelector('#' + orig);
+    if (temp.value == '0') {
+        document.querySelector('#' + dest).value = '';
+        return;
+    }
+    fetch('/retrieve-template', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'plain/text'
+        },
+        body: JSON.stringify({
+            'template': temp.value
+        })
+    })
+        .then(response => response.text())
+        .then(results => {
+            const div = document.querySelector('#' + dest);
+            div.value = results;
+        });
+}
+
+/**
+ * Saves the template by sending a POST request to the server with template data.
+ */
+export function saveTemplate() {
+    fetch('/save-template', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'plain/text'
+        },
+        body: JSON.stringify({
+            'template_id': document.querySelector('#template_id').value,
+            'template_name': document.querySelector('#template_name').value,
+            'template_value': document.querySelector('#template_value').value,
+        })
+    })
+        .then(response => response.text())
+        .then(results => {
+            alert(results);
+        });
+}