diff --git a/library-app/css/styles.css b/library-app/css/styles.css
index e69de29..0b7afbb 100644
--- a/library-app/css/styles.css
+++ b/library-app/css/styles.css
@@ -0,0 +1,3 @@
+#main {
+    text-transform: capitalize;
+}
\ No newline at end of file
diff --git a/library-app/index.html b/library-app/index.html
index 2f2a3d1..12477f5 100644
--- a/library-app/index.html
+++ b/library-app/index.html
@@ -6,10 +6,10 @@
     <title>Library App</title>
     <link rel="stylesheet" href="css/styles.css">
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="js/javascript.js"></script>
+    
 </head>
 <body class="bg-gray-50">
-    <div class="container grid grid-cols-3 gap-4 mx-auto p-6">
+    <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>
             <p>Book Author</p>
@@ -24,5 +24,6 @@
         </div>
 
     </div>
+    <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 ee9d874..bb3f8ce 100644
--- a/library-app/js/javascript.js
+++ b/library-app/js/javascript.js
@@ -1,4 +1,5 @@
 const myLibrary = [];
+const container = document.getElementById("main");
 
 function Book(title, author, pages, read) {
     this.title = title;
@@ -16,6 +17,33 @@ function addBookToLibrary(title,author,pages,read) {
 }
 
 
+function createCard (book){
+    const card = document.createElement("div");
+    const classList = ["p-6", "border", "border-slate-300", 
+        "bg-white", "rounded-xl", "shadow-xl", "flex", "flex-col", "gap-x-4"];
+    card.classList.add(...classList);
+    
+
+    Object.keys(book).forEach((element) => {
+        if (element == 'title') {
+            let item = document.createElement('h2');
+            item.textContent = `${book[element]}`;
+            item.classList.add(...["font-bold", "text-2xl"])
+            card.appendChild(item);
+        } else {
+            let item = document.createElement('p');
+            item.textContent = `${element}: ${book[element]}`;
+            card.appendChild(item);
+        }
+    })
+
+    container.appendChild(card);
+
+}
+
+
 console.log(myLibrary)
 addBookToLibrary("Test Book", "Kyle", "300", true)
-console.log(myLibrary)
\ No newline at end of file
+console.log(myLibrary)
+
+myLibrary.forEach((book) => createCard(book))
\ No newline at end of file
