diff --git a/app/templates/book/components/header_buttons.html b/app/templates/book/components/header_buttons.html
index fd1ca76..0a3af00 100644
--- a/app/templates/book/components/header_buttons.html
+++ b/app/templates/book/components/header_buttons.html
@@ -2,36 +2,62 @@
   <ul class="flex font-medium">
     <li>
       <!-- prettier-ignore -->
-      <button type="button" data-modal-target="add-book-modal" data-modal-toggle="add-book-modal" class="text-white ml-2 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> New book </button>
+      <button type="button" data-modal-target="add-book-modal" data-modal-toggle="add-book-modal" class="text-white ml-2 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
+        New book
+      </button>
     </li>
     <li>
       <!-- prettier-ignore -->
       <button id="dropdownDelayButton" data-dropdown-toggle="dropdownDelay" data-dropdown-delay="500" data-dropdown-trigger="hover" class="text-white ml-4 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
-          Sort by
-          {{request.args.get('sort',"")}}
-          <!-- prettier-ignore -->
-          <svg class="w-4 h-4 ml-auto" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg>
-        </button>
+        Sort by
+        {{request.args.get('sort',"")}}
+        <!-- prettier-ignore -->
+        <svg class="w-4 h-4 ml-auto" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg>
+      </button>
+
       <!-- Dropdown menu -->
       <!-- prettier-ignore -->
       <div id="dropdownDelay" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
-          <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
-            <!-- prettier-ignore -->
-            {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
-            <li> <a href="?sort=upvoted" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Most upvoted</a > </li>
-            {% endif %}
-            {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
-            <li> <a href="?sort=favored" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Most favored</a > </li>
-            {% endif %}
-            <li> <a href="?sort=recent" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Most recent</a > </li>
-            {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
-            <li> <a href="?sort=commented" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Most comments</a > </li>
-            {% endif %}
-            {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
-            <li> <a href="?sort=interpretations" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Most interpretations</a > </li>
-            {% endif %}
-          </ul>
-        </div>
+        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
+          <!-- prettier-ignore -->
+          {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
+            <li>
+              <a href="?sort=upvoted" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
+                Most upvoted
+              </a >
+            </li>
+          {% endif %}
+
+          {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
+            <li>
+              <a href="?sort=favored" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
+                Most favored
+              </a>
+            </li>
+          {% endif %}
+
+          <li>
+            <a href="?sort=recent" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
+              Most recent
+            </a >
+          </li>
+          {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
+            <li>
+              <a href="?sort=commented" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
+                Most comments
+              </a >
+            </li>
+          {% endif %}
+
+          {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
+            <li>
+              <a href="?sort=interpretations" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
+                Most interpretations
+              </a >
+            </li>
+          {% endif %}
+        </ul>
+      </div>
     </li>
   </ul>
 </div>
diff --git a/app/templates/book/my_library.html b/app/templates/book/my_library.html
index 7de957a..fe46e70 100644
--- a/app/templates/book/my_library.html
+++ b/app/templates/book/my_library.html
@@ -11,32 +11,40 @@
 {% endif %}
 
 
-<div
-  class="pt-1 relative pr-5 shadow-md sm:rounded-lg mt-1 h-box flex">
+<div class="pt-1 relative pr-5 shadow-md sm:rounded-lg mt-1 h-box flex">
   {% if not current_user.is_authenticated %}
-  <!-- prettier-ignore -->
-  <div class="mx-auto my-auto h-full w-full p-2">
-  <button type="button" id="connectWalletBtn" class="w-full h-full text-black dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-100 font-medium rounded-lg text-sm px-4 py-2.5 justify-center text-center inline-flex items-center border border-gray-200 dark:border-gray-700"><div class="my-auto"></div> Connect you wallet to see your library! </div></button></div>
-  <!-- prettier-ignore -->
+    <div class="mx-auto my-auto h-full w-full p-2">
+      <button type="button" id="connectWalletBtn" class="w-full h-full text-black dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-100 font-medium rounded-lg text-sm px-4 py-2.5 justify-center text-center inline-flex items-center border border-gray-200 dark:border-gray-700">
+        <div class="my-auto">
+          Connect you wallet to see your library!
+        </div>
+      </button>
+    </div>
   {% endif %}
-  {% if current_user.is_authenticated and books.total<1 %}
-  <!-- prettier-ignore -->
-  <div class="mx-auto my-auto h-full w-full p-2">
-  <button type="button" data-modal-target="add-book-modal" data-modal-toggle="add-book-modal" class="w-full h-full text-black dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-100 font-medium rounded-lg text-sm px-4 py-2.5 justify-center text-center inline-flex items-center border border-gray-200 dark:border-gray-700"><div class="my-auto"></div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> New book </div></button></div>
-  <!-- prettier-ignore -->
+
+  {% if current_user.is_authenticated and not books.total %}
+    <div class="mx-auto my-auto h-full w-full p-2">
+      <button type="button" data-modal-target="add-book-modal" data-modal-toggle="add-book-modal" class="w-full h-full text-black dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-100 font-medium rounded-lg text-sm px-4 py-2.5 justify-center text-center inline-flex items-center border border-gray-200 dark:border-gray-700">
+        <div class="my-auto">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
+          New book
+        </div>
+      </button>
+    </div>
   {% endif %}
+
   <!-- prettier-ignore -->
   <div class="flex flex-col w-full">
-  <div class="flex justify-between mt-1">
-  {% if current_user.is_authenticated and books.total>0 %}
-  <h1 class=" text-lg font-extrabold dark:text-white ml-4">My library</h1>
-  {% if current_user.is_authenticated %}
-  {% include 'book/components/header_buttons.html' %}
-  {% endif %}
-  </div>
-  {% endif %}
-  {% for book in books if not book.is_deleted%}
-   
+    {% if current_user.is_authenticated and books.total %}
+    <div class="flex justify-between mt-1">
+      <h1 class=" text-lg font-extrabold dark:text-white ml-4">My library</h1>
+      {% if current_user.is_authenticated %}
+        {% include 'book/components/header_buttons.html' %}
+      {% endif %}
+    </div>
+    {% endif %}
+
+  {% for book in books if not book.is_deleted %}
     <!-- prettier-ignore -->
     <dl class="bg-white dark:bg-gray-900 h-max w-full p-5 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
       <dt class="mb-2 flex">
@@ -81,59 +89,58 @@
 
   <!-- prettier-ignore -->
   {% if current_user.is_authenticated and page.pages > 1 %}
-  <div class="container content-center mt-3 flex bg-white dark:bg-gray-800">
-    <nav aria-label="Page navigation example" class="mx-auto">
-      <ul class="inline-flex items-center -space-x-px">
-        <li>
-          <!-- prettier-ignore -->
-          <a href="{{ url_for('book.my_library') }}?page=1&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-          <span class="sr-only">First</span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" /> </svg>
-        </a>
-        </li>
-        <li>
-          <!-- prettier-ignore -->
-          <a href="{{ url_for('book.my_library') }}?page={{page.page-1 if page.page > 1 else 1}}&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-          <span class="sr-only">Previous</span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /> </svg>
-        </a>
-        </li>
+    <div class="container content-center mt-3 flex bg-white dark:bg-gray-800">
+      <nav aria-label="Page navigation example" class="mx-auto">
+        <ul class="inline-flex items-center -space-x-px">
+          <li>
+            <!-- prettier-ignore -->
+            <a href="{{ url_for('book.my_library') }}?page=1&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+            <span class="sr-only">First</span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" /> </svg>
+          </a>
+          </li>
+          <li>
+            <!-- prettier-ignore -->
+            <a href="{{ url_for('book.my_library') }}?page={{page.page-1 if page.page > 1 else 1}}&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+            <span class="sr-only">Previous</span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /> </svg>
+          </a>
+          </li>
 
-        <!-- prettier-ignore -->
-        {% for p in page.pages_for_links %}
-        <li>
           <!-- prettier-ignore -->
-          {% if p == page.page %}
-          <!-- prettier-ignore -->
-          <a href="{{ url_for('book.my_library') }}?page={{p}}&q={{page.query}}" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{{p}}</a>
-          {% else %}
-          <!-- prettier-ignore -->
-          <a href="{{ url_for('book.my_library') }}?page={{p}}&q={{page.query}}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{p}}</a>
-          {% endif %}
-        </li>
-        {% endfor %}
+          {% for p in page.pages_for_links %}
+            <li>
+              <!-- prettier-ignore -->
+              {% if p == page.page %}
+                <!-- prettier-ignore -->
+                <a href="{{ url_for('book.my_library') }}?page={{p}}&q={{page.query}}" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{{p}}</a>
+              {% else %}
+                <!-- prettier-ignore -->
+                <a href="{{ url_for('book.my_library') }}?page={{p}}&q={{page.query}}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{p}}</a>
+              {% endif %}
+            </li>
+          {% endfor %}
 
-        <li>
-          <!-- prettier-ignore -->
-          <a href="{{ url_for('book.my_library') }}?page={{page.page+1 if page.page < page.pages else page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-          <!-- prettier-ignore -->
-          <span class="sr-only">Next</span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
-        </a>
-        </li>
-        <li>
-          <!-- prettier-ignore -->
-          <a href="{{ url_for('book.my_library') }}?page={{page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-          <!-- prettier-ignore -->
-          <span class="sr-only">Last</span>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M10.21 14.77a.75.75 0 01.02-1.06L14.168 10 10.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M4.21 14.77a.75.75 0 01.02-1.06L8.168 10 4.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
-        </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
+          <li>
+            <!-- prettier-ignore -->
+            <a href="{{ url_for('book.my_library') }}?page={{page.page+1 if page.page < page.pages else page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              <!-- prettier-ignore -->
+              <span class="sr-only">Next</span>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
+            </a>
+          </li>
+          <li>
+            <!-- prettier-ignore -->
+            <a href="{{ url_for('book.my_library') }}?page={{page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+              <!-- prettier-ignore -->
+              <span class="sr-only">Last</span>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M10.21 14.77a.75.75 0 01.02-1.06L14.168 10 10.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M4.21 14.77a.75.75 0 01.02-1.06L8.168 10 4.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
   {% endif %}
-  </div>
 </div>
 <!-- prettier-ignore -->
 {% endblock %}