diff --git a/public/js/script.js b/public/js/script.js
index 280c4c9..b6a91c8 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -9,34 +9,60 @@ var to = null;
 let controller;
 var BOOKS = {};
 
-fetch('/js/data.json')
-    .then((res) => {
-        if (!res.ok) {
-            throw new Error('HTTP Error: Status: ${res.status}');
+$(function () {
+    setHeight();
+    setBooks();
+    setEventListeners();
+    $('#note-table').DataTable({
+        paging: false,
+        ajax: {
+            url: '/index.php/get-notes',
+            type: 'POST'
+        },
+        columns: [
+            { data: 'link' },
+            { data: 'speaker.name' },
+            { data: 'passage' },
+            {
+                data: 'date.date',
+                render: DataTable.render.date("L")
+            },
+        ]
+    });
+});
+
+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);
+        })
+}
+
+function setEventListeners() {
+    document.addEventListener('keyup', function (event) {
+        if (event.key == "F3") {
+            openRef(false);
         }
-        return res.json();
-    })
-    .then((data) => {
-        BOOKS = data;
-    })
-    .catch((error) => {
-        console.log(error);
-    })
+    });
 
-document.addEventListener('keyup', function (event) {
-    if (event.key == "F3") {
-        openRef(false);
-    }
-});
+    document.querySelector('#notes').addEventListener('keyup', function (event) {
+        let key = event.keyCode;
 
-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');
-    }
-});
+        if (key >= 48 && key <= 90 || key >= 96 && key <= 111 || key >= 186 && key <= 222) {
+            textDirty = true;
+            document.querySelector('#note-header-left h2').classList.add('dirty');
+        }
+    });
+}
 
 function setHeight() {
     md = new markdownit({
@@ -133,7 +159,7 @@ function newNote() {
     document.querySelector('#series').value = 0;
     document.querySelector('#template').value = 0;
     document.querySelector('#passage').value = '';
-    document.querySelector('#noteId').value = uuidv4();
+    document.querySelector('#recording').value = '';
 
     document.querySelector('#ref-list').innerHTML = '';
     document.querySelector('#ref').innerHTML = '';
@@ -658,6 +684,30 @@ function filterVerse() {
     verseRange.innerText = 'Verse: ' + verse;
 }
 
+function retrieveReferenceType(el) {
+    fetch('/index.php/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);
+            }
+        })
+}
+
 function retrieveReference(el) {
     if (el.value == 'new') {
         document.querySelector('#refName').style.display = 'inline-block';
@@ -669,8 +719,7 @@ function retrieveReference(el) {
             "Content-Type": "application/json"
         },
         body: JSON.stringify({
-            file: el.value,
-            type: el.options[el.selectedIndex].getAttribute('type')
+            id: el.value
         })
     })
         .then(response => response.json())