diff --git a/Charcoal/Charcoal/Charcoal.cpp b/Charcoal/Charcoal/Charcoal.cpp
index 7ed981e..96f3e9c 100644
--- a/Charcoal/Charcoal/Charcoal.cpp
+++ b/Charcoal/Charcoal/Charcoal.cpp
@@ -117,22 +117,18 @@ void Charcoal::grayscaleName(const JSObject& thisobject, const JSArgs& args) {
 }
 
 
-JSValue Charcoal::printAllBooks(const JSObject& thisObject, const JSArgs& args) {
+JSValue Charcoal::printAllBooks(const JSObject& thisObject, const JSArgs& args) { //debug function only, do not use as is currently
    
     std::string bookList = ebooks.printall();
 
     MessageBoxA(NULL, bookList.c_str(), "Book List", MB_OK); //this confirms there is an actual booklist.
 
-    //convert the book list string to a JavaScript string, but does not work. 
-
     JSStringRef jsBookList = JSStringCreateWithUTF8CString(bookList.c_str());
 
     JSValue jsValue = JSValue(jsBookList);
 
     JSStringRelease(jsBookList);
 
-    //return the JSValue object, I tried with JSString and the issue persisted. 
-
     return jsValue;
 
 }
diff --git a/Charcoal/x64/Debug/Charcoal.exe b/Charcoal/x64/Debug/Charcoal.exe
index 5169e2b..3935144 100644
Binary files a/Charcoal/x64/Debug/Charcoal.exe and b/Charcoal/x64/Debug/Charcoal.exe differ
diff --git a/Charcoal/x64/Debug/Charcoal.pdb b/Charcoal/x64/Debug/Charcoal.pdb
index bde7f27..4170d47 100644
Binary files a/Charcoal/x64/Debug/Charcoal.pdb and b/Charcoal/x64/Debug/Charcoal.pdb differ
diff --git a/Charcoal/x64/Debug/assets/books.html b/Charcoal/x64/Debug/assets/books.html
index ed82746..36d7603 100644
--- a/Charcoal/x64/Debug/assets/books.html
+++ b/Charcoal/x64/Debug/assets/books.html
@@ -98,13 +98,11 @@
 
         ul {
             text-align: center;
-            list-style-type: none; /* Remove bullets */
-            padding: 0; /* Remove padding */
-            margin: 0; /* Remove margins */
-        }
-        .list ul li:hover {
-            left: 10px;
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
         }
+
         .form-control {
             font-family: system-ui, sans-serif;
             font-size: 2rem;
@@ -202,7 +200,16 @@ <h3 id="result">BOOKS: </h3>
             <button class="button-28" onclick="gscalebutton()">Grayscale</button>
             <script>
                 function gscalebutton() {
-                    nameToGrayscale();
+                    var array = []
+                    var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
+                    for (var i = 0; i < checkboxes.length; i++) {
+                        array.push(checkboxes[i].id)
+                        alert(checkboxes[i].id);
+                        var toGray = parseInt(checkboxes[i].id); //sets string ID to int so it can be passed back.
+                        grayscaleName(toGray);
+                    }
+
+                    OnButtonClick();
                 }
             </script>
 
@@ -210,15 +217,15 @@ <h3 id="result">BOOKS: </h3>
             <button class="button-28" onclick="rmbooksbutton()">Remove Books</button>
             <script>
                 function rmbooksbutton() {
-                    
                     var array = []
                     var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
-
                     for (var i = 0; i < checkboxes.length; i++) {
-                        array.push(checkboxes[i].value)
-                        alert(checkboxes[i].value);
+                        array.push(checkboxes[i].id)
+                        alert(checkboxes[i].id);
+                        var toDelete = parseInt(checkboxes[i].id); //sets string ID to int so it can be passed back.
+                        deleteBook(toDelete);
                     }
-                    deleteBook();
+
                     OnButtonClick();
                 }
             </script>