diff --git a/debugging/book-library/index.html b/debugging/book-library/index.html
index 23acfa71..80f84ac4 100644
--- a/debugging/book-library/index.html
+++ b/debugging/book-library/index.html
@@ -27,48 +27,49 @@ <h1>Library</h1>
       Add new book
     </button>
 
-    <div id="demo" class="collapse">
-      <div class="form-group">
-        <label for="title">Title:</label>
+ <div id="demo" class="collapse">
+  <form id="book-form">
+    <div class="form-group">
+      <label for="title">Title:</label>
+      <input
+        type="text"
+        class="form-control"
+        id="title"
+        name="title"
+        required
+      />
+      <label for="author">Author:</label>
+      <input
+        type="text"
+        class="form-control"
+        id="author"
+        name="author"
+        required
+      />
+      <label for="pages">Pages:</label>
+      <input
+        type="number"
+        class="form-control"
+        id="pages"
+        name="pages"
+        required
+      />
+      <label class="form-check-label">
         <input
-          type="title"
-          class="form-control"
-          id="title"
-          name="title"
-          required
-        />
-        <label for="author">Author: </label>
-        <input
-          type="author"
-          class="form-control"
-          id="author"
-          name="author"
-          required
-        />
-        <label for="pages">Pages:</label>
-        <input
-          type="number"
-          class="form-control"
-          id="pages"
-          name="pages"
-          required
-        />
-        <label class="form-check-label">
-          <input
-            type="checkbox"
-            class="form-check-input"
-            id="check"
-            value=""
-          />Read
-        </label>
-        <input
-          type="submit"
-          value="Submit"
-          class="btn btn-primary"
-          onclick="submit();"
-        />
-      </div>
+          type="checkbox"
+          class="form-check-input"
+          id="check"
+          value=""
+        />Read
+      </label>
+      <input
+        type="submit"
+        value="Submit"
+        class="btn btn-primary"
+      />
     </div>
+  </form>
+</div>
 
     <table class="table" id="display">
       <thead class="thead-dark">
@@ -81,16 +82,9 @@ <h1>Library</h1>
         </tr>
       </thead>
       <tbody>
-        <tr>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-          <td></td>
-        </tr>
       </tbody>
     </table>
 
     <script src="script.js"></script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/debugging/book-library/script.js b/debugging/book-library/script.js
index 75ce6c1d..121c71ae 100644
--- a/debugging/book-library/script.js
+++ b/debugging/book-library/script.js
@@ -1,23 +1,27 @@
 let myLibrary = [];
 
-window.addEventListener("load", function (e) {
+window.addEventListener("load", function () {
   populateStorage();
   render();
 });
 
+// Attach form submit event listener
+document.getElementById("book-form").addEventListener("submit", function (event) {
+  event.preventDefault(); // Prevent default form submission
+  submit();
+});
+
 function populateStorage() {
-  if (myLibrary.length == 0) {
-    let book1 = new Book("Robison Crusoe", "Daniel Defoe", "252", true);
-    let book2 = new Book(
-      "The Old Man and the Sea",
-      "Ernest Hemingway",
-      "127",
-      true
-    );
-    myLibrary.push(book1);
-    myLibrary.push(book2);
-    render();
+  const storedLibrary = localStorage.getItem("myLibrary");
+  if (storedLibrary) {
+    myLibrary = JSON.parse(storedLibrary);
+  } else {
+    let book1 = new Book("Robinson Crusoe", "Daniel Defoe", 252, true);
+    let book2 = new Book("The Old Man and the Sea", "Ernest Hemingway", 127, true);
+    myLibrary.push(book1, book2);
+    localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
   }
+  render();
 }
 
 const title = document.getElementById("title");
@@ -25,22 +29,42 @@ const author = document.getElementById("author");
 const pages = document.getElementById("pages");
 const check = document.getElementById("check");
 
-//check the right input from forms and if its ok -> add the new book (object in array)
-//via Book function and start render function
 function submit() {
+  console.log("submit() function called");
+  console.log("Input values:", {
+    title: title.value,
+    author: author.value,
+    pages: pages.value,
+    read: check.checked
+  });
+
+  const maxPages = 30000; // Maximum allowed pages
+  const pageCount = parseInt(pages.value);
   if (
-    title.value == null ||
-    title.value == "" ||
-    pages.value == null ||
-    pages.value == ""
+    !title.value.trim() ||
+    !author.value.trim() ||
+    !pages.value ||
+    isNaN(pageCount) ||
+    pageCount <= 0 ||
+    pageCount > maxPages
   ) {
-    alert("Please fill all fields!");
-    return false;
-  } else {
-    let book = new Book(title.value, title.value, pages.value, check.checked);
-    library.push(book);
-    render();
+    console.log("Validation failed: One or more fields are empty or invalid");
+    alert(
+      `Please fill all fields with valid data! Pages must be a number between 1 and ${maxPages}.`
+    );
+    return;
   }
+
+  let book = new Book(title.value.trim(), author.value.trim(), pageCount, check.checked);
+  console.log("New book created:", book);
+  myLibrary.push(book);
+  console.log("myLibrary after push:", myLibrary);
+  localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
+  render();
+  document.querySelector("form").reset();
+  console.log("Form reset");
+  $("#demo").collapse("hide");
+  console.log("Form collapsed");
 }
 
 function Book(title, author, pages, check) {
@@ -53,14 +77,11 @@ function Book(title, author, pages, check) {
 function render() {
   let table = document.getElementById("display");
   let rowsNumber = table.rows.length;
-  //delete old table
-  for (let n = rowsNumber - 1; n > 0; n-- {
+  for (let n = rowsNumber - 1; n > 0; n--) {
     table.deleteRow(n);
   }
-  //insert updated row and cells
-  let length = myLibrary.length;
-  for (let i = 0; i < length; i++) {
-    let row = table.insertRow(1);
+  for (let i = 0; i < myLibrary.length; i++) {
+    let row = table.insertRow(-1);
     let titleCell = row.insertCell(0);
     let authorCell = row.insertCell(1);
     let pagesCell = row.insertCell(2);
@@ -70,34 +91,27 @@ function render() {
     authorCell.innerHTML = myLibrary[i].author;
     pagesCell.innerHTML = myLibrary[i].pages;
 
-    //add and wait for action for read/unread button
     let changeBut = document.createElement("button");
-    changeBut.id = i;
+    changeBut.id = `read-${i}`;
     changeBut.className = "btn btn-success";
+    changeBut.innerText = myLibrary[i].check ? "Yes" : "No";
     wasReadCell.appendChild(changeBut);
-    let readStatus = "";
-    if (myLibrary[i].check == false) {
-      readStatus = "Yes";
-    } else {
-      readStatus = "No";
-    }
-    changeBut.innerText = readStatus;
-
     changeBut.addEventListener("click", function () {
       myLibrary[i].check = !myLibrary[i].check;
+      localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
       render();
     });
 
-    //add delete button to every row and render again
     let delButton = document.createElement("button");
-    delBut.id = i + 5;
-    deleteCell.appendChild(delBut);
-    delBut.className = "btn btn-warning";
-    delBut.innerHTML = "Delete";
-    delBut.addEventListener("clicks", function () {
+    delButton.id = `delete-${i}`;
+    delButton.className = "btn btn-warning";
+    delButton.innerHTML = "Delete";
+    deleteCell.appendChild(delButton);
+    delButton.addEventListener("click", function () {
       alert(`You've deleted title: ${myLibrary[i].title}`);
       myLibrary.splice(i, 1);
+      localStorage.setItem("myLibrary", JSON.stringify(myLibrary));
       render();
     });
   }
-}
+}
\ No newline at end of file