diff --git a/library-app/index.html b/library-app/index.html
index 12477f5..c468273 100644
--- a/library-app/index.html
+++ b/library-app/index.html
@@ -9,6 +9,10 @@
     
 </head>
 <body class="bg-gray-50">
+    <div class="min-h-2 flex justify-end align-center p-2">
+        <button class="mr-8 bg-blue-400 p-2 border border-slate-300 rounded-xl text-white" id="addBook">Add Book</button>
+    </div>
+    
     <div class="container grid grid-cols-3 gap-4 mx-auto p-6" id="main">
         <div class="p-6 border border-slate-300 bg-white rounded-xl shadow-xl flex flex-col gap-x-4">
             <h3>Book Title</h3>
@@ -24,6 +28,19 @@
         </div>
 
     </div>
+
+    <dialog>
+        <form>
+            <label for="title">Book Title</label>
+            <input type="text" name="title" id="title">
+            <label for="author">Author</label>
+            <input type="text" name="author" id="author">
+            <label for="pages">Total Pages</label>
+            <input type="number" name="pages" id="pages">
+            <label for="haveread">Read Book?</label>
+            <input type="checkbox" name="haveread" id="haveread">
+        </form>
+    </dialog>
     <script src="js/javascript.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/library-app/js/javascript.js b/library-app/js/javascript.js
index bb3f8ce..6091d62 100644
--- a/library-app/js/javascript.js
+++ b/library-app/js/javascript.js
@@ -1,5 +1,7 @@
 const myLibrary = [];
 const container = document.getElementById("main");
+const addBookBtn = document.getElementById("addBook");
+const dialog = document.querySelector("dialog");
 
 function Book(title, author, pages, read) {
     this.title = title;
@@ -41,6 +43,9 @@ function createCard (book){
 
 }
 
+addBookBtn.addEventListener("click", () => {
+    dialog.showModal()
+})
 
 console.log(myLibrary)
 addBookToLibrary("Test Book", "Kyle", "300", true)
