diff --git a/src/renderer.js b/src/renderer.js
index 86f281a..80b7a2d 100644
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -7,7 +7,8 @@ console.log('test');
 
 // const url = 'file://C:\\Users\\JISAUAY\\Documents\\misc\\sspm\\test.ogg';
 // const path = 'C:\\Users\\JISAUAY\\Documents\\misc\\sspm\\ChangelingForest.mp3';
-const libPath = 'C:/Users/JISAUAY/Documents/misc/sspm/test-library/';
+// const libPath = 'C:/Users/JISAUAY/Documents/misc/sspm/test-library/';
+const libPath = '/home/jackson/Documents/code/SSPM/test-library/'
 
 let library;
 
@@ -18,6 +19,8 @@ class Dir {
     constructor(path, children) {
         this.path = path;
         this.children = children;
+        this.name = path.split('/').at(-1);
+        this.open = false;
     }
 }
 
@@ -40,7 +43,9 @@ async function readChildren(path) {
         let child = dirChildren[i];
 
         if (child.isDirectory) {
-            children.push(await readChildren(child.path));
+            let dirPath = child.path + child.name;
+            let dirChildren = await readChildren(dirPath);
+            children.push(new Dir(dirPath, dirChildren));
         } else {
             children.push(child);
         }
@@ -53,25 +58,26 @@ async function readChildren(path) {
 document.addEventListener('DOMContentLoaded', async () => {
     const libContentDisplay = document.getElementById('libContents');
 
-    libEntryPathes = await readDir(libPath);
+    // let libEntryPathes = await readDir(libPath);
+    // console.log(libEntryPathes);
 
     let dirChildren = await readChildren(libPath);
 
-    let dirTest = new Dir(libPath, dirChildren);
+    library = new Dir(libPath, dirChildren);
 
-    console.log(dirTest);
+    console.log(library);
 
-    console.log(libEntryPathes);
+    // console.log(libEntryPathes);
 
-    for (const file_i in libEntryPathes) {
-        const dirent = libEntryPathes[file_i];
+    for (const i in library.children) {
+        const e = library.children[i];
 
-        const filename = dirent.name;
+        const filename = e.name;
 
-        if (dirent.isDirectory) {
-            libContentDisplay.innerHTML += `<div class="LibDir" id=${file_i}>${filename}</div`;
+        if (e instanceof Dir) {
+            libContentDisplay.innerHTML += `<div class="LibDir" id=${i}>- ${filename}</div`;
         } else {
-            libContentDisplay.innerHTML += `<div class="LibEntry" id="${file_i}">${filename}</div>`;
+            libContentDisplay.innerHTML += `<div class="LibEntry" id="${i}">${filename}</div>`;
         }
     }
 });
@@ -100,7 +106,28 @@ document.addEventListener('DOMContentLoaded', async () => {
                     console.error(`Audio failed to play with ${e}`);
                 });
         } else if (e.target.className == 'LibDir') {
-            let dirContents = readDir()
+            let id = parseInt(e.target.id);
+
+            let dir = library.children[id];
+
+            if (!dir.open) {
+                e.target.innerHTML = `+ ${dir.name}`;
+
+                for (const i in dir.children) {
+                    let entry = dir.children[i];
+
+                    if (entry.isDirectory) {
+                        e.target.innerHTML += `<div class="LibDir" id="">${entry.name}</div>`
+                    } else {
+                        e.target.innerHTML += `<div class="LibEntry">${entry.name}</div>`
+                    }
+                }
+
+                dir.open = true;
+            } else {
+                e.target.innerHTML = `- ${dir.name}`;
+                dir.open = false;
+            }
         }
     });
 });