diff --git a/index.html b/index.html
index 5cc42f5..e24bac2 100644
--- a/index.html
+++ b/index.html
@@ -45,7 +45,7 @@
                     <div class="intro-content">
                         <h1>LiteraCure</h1>
                         <p> ------------</p>
-                        <h2>Cara mudah mengarsipkan buku kamu </h2>
+                        <h3>Cara mudah mengarsipkan buku kamu </h3>
                         <p> ------------</p>
                         <p> ------------</p>
                         <h3>Jangan sampai progres membacamu terkendala karena tidak tercatat dengan baik.</h3>
@@ -104,6 +104,7 @@ <h2>Cari Buku</h2>
                                     <label for="searchBook" style="text-align: center;">Judul</label>
                                     <input type="text" id="searchBook" placeholder="masukkan judul...">
                                     <button type="submit" id="btn-search-book">Cari</button>
+                                    <button type="submit" id="btn-clear-search" onclick="window.location.href=window.location.href">Clear</button>
                                 </div>
                             </form>
                             <div id="shelf-base"></div>
diff --git a/script/main.js b/script/main.js
index 056a7d3..a40cc64 100644
--- a/script/main.js
+++ b/script/main.js
@@ -5,9 +5,7 @@ document.addEventListener('DOMContentLoaded', function(){
         const titleBook = document.getElementById('searchBook').value;
         event.preventDefault();
         searchTitleBook(titleBook);
-        console.log(titleBook);
     });
-
     if (isStorageExist()) {
         loadData();
     };
@@ -29,7 +27,11 @@ function registry() {
             category: bookCategory.value,
             isComplete: isRead.checked
         };
-    books.push(bookDetails);
+    if (bookDetails.title !== "" && bookDetails.author !== "" && bookDetails.year !== "" && bookDetails.year !== "" && bookDetails.category !== ""){
+        books.push(bookDetails);
+    } else {
+        alert("Tolong lengkapi formulir!");
+    }
     document.dispatchEvent(new Event('render-event'));
     clearText();
     save();
@@ -56,12 +58,10 @@ function searchTitleBook(title){
     inCompleteBooks.innerHTML = '';
     searchResult.innerHTML = '';
 
-    const lowerTitle = title.toLowerCase();
     for (const book of books){
-        if ( book.title.toLowerCase() == lowerTitle){
+        if ( book.title == title){
             const bookElement = createShelf(book);
             const searchElements = displaySearch(book);
-            console.log(bookElement);
             if(book.isComplete){
                 completeBooks.append(bookElement);
                 searchResult.append(searchElements);
@@ -70,6 +70,12 @@ function searchTitleBook(title){
                 inCompleteBooks.append(bookElement);
                 searchResult.append(searchElements);
             }
+        } 
+        else {
+            const noCompleteBook = emptyBook();
+            completeBooks.append(noCompleteBook);
+            const noIncompleteBook = emptyBook();
+            inCompleteBooks.append(noIncompleteBook);
         }
     }
 }
diff --git a/script/render.js b/script/render.js
index 67e2423..288aa0d 100644
--- a/script/render.js
+++ b/script/render.js
@@ -32,16 +32,17 @@ function emptyBook(){
     noBook.classList.add('no-book');
 
     const text = document.createElement('h3');
-    text.innerText = 'belum ada buku';
+    text.innerText = 'Tidak ada buku';
 
     noBook.append(text);
+    styleBox(noBook);
     return noBook;
 }
 
 // create object book
 function createShelf(objectBook) {
     const titleBook = document.createElement('h3');
-    titleBook.innerText = objectBook.title.toUpperCase();
+    titleBook.innerText = objectBook.title;
     titleBook.style.backgroundColor='#675bd1';
     titleBook.style.padding='5px';
     titleBook.style.borderRadius='5px';
@@ -122,7 +123,7 @@ function createShelf(objectBook) {
 // Custom search result
 function displaySearch (objectBook) {
     const titleSearch = document.createElement('h3');
-    titleSearch.innerText = objectBook.title.toUpperCase();
+    titleSearch.innerText = objectBook.title;
     titleSearch.style.backgroundColor='#675bd1';
     titleSearch.style.padding='5px';
     titleSearch.style.borderRadius='5px';
@@ -166,7 +167,5 @@ function clearText(){
     document.querySelector("#input-IsComplete").value = '';
     document.getElementById('searchBook').value = '';
     let readCheck = document.querySelector("#input-IsComplete");
-    for (const reaD of readCheck ){
-        readCheck.checked = false;
-    }
+    readCheck.checked = false;
 }
\ No newline at end of file
diff --git a/script/storage.js b/script/storage.js
index 50cf530..45eaece 100644
--- a/script/storage.js
+++ b/script/storage.js
@@ -4,7 +4,18 @@ function getData() {
     return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
 }
 
-// check storage
+//check storage 
+function loadData() {
+    const resultData = localStorage.getItem(STORAGE_KEY);
+    let dataBooks = JSON.parse(resultData);
+    if (dataBooks !== null) {
+        for (const book of dataBooks) {
+            books.push(book);
+        }
+    }
+    document.dispatchEvent(new Event('render-event'));
+}
+
 function isStorageExist() /* boolean */ {
     if (typeof (Storage) === undefined) {
       alert('Browser tidak mendukung local storage');
@@ -20,18 +31,4 @@ function save() {
     const parsed = JSON.stringify(books);
     localStorage.setItem(STORAGE_KEY, parsed);
     }
-}
-
-//check storage 
-function loadData() {
-    const resultData = localStorage.getItem(STORAGE_KEY);
-    let dataBooks = JSON.parse(resultData);
-    books = [];
-    if (dataBooks !== null) {
-    for (const book of dataBooks) {
-        books.push(book);
-    }
-    }
-    
-    document.dispatchEvent(new Event('render-event'));
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index a99ddf3..7fb68d7 100644
--- a/style.css
+++ b/style.css
@@ -135,6 +135,14 @@ main {
     background-color: #FFFFD0;
 }
 
+h2 {
+    padding: 10px 0px 10px 0px;
+    font-size: 20px;
+    color: black;
+    background-color: #aea9d3;
+    border-radius: 10px;
+    margin: 5px 20px 5px 20px;
+}
 .inner-main {
     display: flex;
     flex-direction: column;
@@ -314,8 +322,8 @@ form {
     text-align: left;
     padding: 10px;
     font-size: 20px;
-    color: rgb(245, 196, 63);
-    background-color: #25223b;
+    color: black;
+    background-color: #aea9d3;
     border-radius: 10px;
     margin: 5px 20px 5px 20px;
 }
diff --git a/templates/index.html b/templates/index.html
deleted file mode 100644
index 64eb6d7..0000000
--- a/templates/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport"
-        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Bookshelf Apps</title>
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap"
-        rel="stylesheet">
-  <link rel="stylesheet" href="style.css">
-        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
-<body>
-<header class="head_bar">
-  <h1 class="head_bar__title">Bookshelf Apps</h1>
-</header>
-<main>
-  <section class="input_section">
-    <h2>Masukkan Buku Baru</h2>
-    <form id="inputBook">
-      <div class="input">
-        <label for="inputBookTitle">Judul</label>
-        <input id="inputBookTitle" type="text" required>
-      </div>
-      <div class="input">
-        <label for="inputBookAuthor">Penulis</label>
-        <input id="inputBookAuthor" type="text" required>
-      </div>
-      <div class="input">
-        <label for="inputBookYear">Tahun</label>
-        <input id="inputBookYear" type="number" required>
-      </div>
-      <div class="input_inline">
-        <label for="inputBookIsComplete">Selesai dibaca</label>
-        <input id="inputBookIsComplete" type="checkbox">
-      </div>
-      <button id="bookSubmit" type="submit">Masukkan Buku ke rak <span>Belum selesai dibaca</span></button>
-    </form>
-  </section>
-  
-  <section class="search_section">
-    <h2>Cari Buku (Opsional)</h2>
-    <form id="searchBook">
-      <label for="searchBookTitle">Judul</label>
-      <input id="searchBookTitle" type="text">
-      <button id="searchSubmit" type="submit">Cari</button>
-    </form>
-  </section>
-  
-  <section class="book_shelf">
-    <h2>Belum selesai dibaca</h2>
-    
-    <div id="incompleteBookshelfList" class="book_list">
-<!--      <article class="book_item">-->
-<!--        <h3>Book Title</h3>-->
-<!--        <p>Penulis: John Doe</p>-->
-<!--        <p>Tahun: 2002</p>-->
-<!--    -->
-<!--        <div class="action">-->
-<!--          <button class="green">Selesai dibaca</button>-->
-<!--          <button class="red">Hapus buku</button>-->
-<!--        </div>-->
-<!--      </article>-->
-    </div>
-  </section>
-  
-  <section class="book_shelf">
-    <h2>Selesai dibaca</h2>
-    
-    <div id="completeBookshelfList" class="book_list">
-<!--      <article class="book_item">-->
-<!--        <h3>Book Title</h3>-->
-<!--        <p>Penulis: John Doe</p>-->
-<!--        <p>Tahun: 2002</p>-->
-<!--        -->
-<!--        <div class="action">-->
-<!--          <button class="green">Belum selesai di Baca</button>-->
-<!--          <button class="red">Hapus buku</button>-->
-<!--        </div>-->
-<!--      </article>-->
-    </div>
-  </section>
-</main>
-
-<script src="main.js"></script>
-
-</body>
-</html>
diff --git a/templates/style.css b/templates/style.css
deleted file mode 100644
index 9bfc401..0000000
--- a/templates/style.css
+++ /dev/null
@@ -1,171 +0,0 @@
-* {
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-}
-
-body, input, button {
-    font-family: 'Open Sans', sans-serif;
-}
-
-input, button {
-    font-size: 16px;
-}
-
-.head_bar {
-    padding: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: cornflowerblue;
-    color: white;
-}
-
-main {
-    max-width: 800px;
-    width: 80%;
-    margin: 0 auto;
-    padding: 16px;
-
-}
-
-.input_section {
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-    border: 1px solid black;
-    border-radius: 10px;
-}
-
-.input_section > h2 {
-    text-align: center;
-    color: cornflowerblue;
-}
-
-.input_section > form > .input {
-    margin: 8px 0;
-}
-
-.input_section > form > button {
-    background-color: cornflowerblue;
-    color: white;
-    border: 0;
-    border-radius: 5px;
-    display: block;
-    width: 100%;
-    padding: 8px;
-    cursor: pointer;
-}
-
-.input_section > form > button > span {
-    font-weight: bold;
-}
-
-.input_section > form > .input > input {
-    display: block;
-    width: 100%;
-    padding: 8px;
-    border-radius: 5px;
-}
-
-
-.input_section > form > .input > label {
-    color: cornflowerblue;
-    font-weight: bold;
-}
-
-.input_section > form > .input_inline {
-    margin: 12px 0;
-    display: flex;
-    align-items: center;
-}
-
-.input_section > form > .input_inline > label {
-    color: cornflowerblue;
-    font-weight: bold;
-    margin-right: 10px;
-}
-
-.search_section {
-    margin: 16px 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 16px;
-    border: 1px solid black;
-    border-radius: 10px;
-}
-
-.search_section > h2 {
-    color: cornflowerblue;
-}
-
-.search_section > form {
-    padding: 16px;
-    width: 100%;
-    display: grid;
-    grid-template-columns: auto 1fr 0.5fr;
-    grid-gap: 10px;
-}
-
-.search_section > form > label {
-    display: flex;
-    align-items: center;
-}
-
-.search_section > form > input {
-    padding: 5px;
-    border-radius: 5px;
-}
-
-.search_section > form > button {
-    background-color: cornflowerblue;
-    color: white;
-    border: 0;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.book_shelf {
-    margin: 16px 0 0 0;
-    border: 1px solid black;
-    padding: 16px;
-    border-radius: 10px;
-}
-
-.book_shelf > h2 {
-    color: cornflowerblue;
-}
-
-.book_shelf > .book_list {
-    padding: 16px;
-}
-
-.book_shelf > .book_list > .book_item {
-    padding: 8px 16px 16px 16px;
-    border: 1px solid black;
-    border-radius: 5px;
-    margin: 10px 0;
-}
-
-.book_shelf > .book_list > .book_item > h3, p {
-    margin: 8px 0;
-}
-
-.book_shelf > .book_list > .book_item > .action > button {
-    border: 0;
-    padding: 5px;
-    margin: 0 5px 0 0;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.book_shelf > .book_list > .book_item > .action > .green {
-    background-color: darkgreen;
-    color: white;
-}
-
-.book_shelf > .book_list > .book_item > .action > .red {
-    background-color: darkred;
-    color: white;
-}