diff --git a/web/app.html b/web/app.html
index 5a77ec7..f7a4697 100644
--- a/web/app.html
+++ b/web/app.html
@@ -21,9 +21,9 @@
 <div class="banner">
     <p></p>
     <div class="btn-toolbar btn-group-sm" role="toolbar" aria-label="Toolbar">
-      <div class="btn-group mr-2" role="group" aria-label="Add group">
-        <input id="additemid" type="text" placeholder="item id" pattern="[0-9]*">
-        <input id="addattributes" type="text" placeholder="attributes (comma separated)" pattern="[0-9a-zA-Z, ]*">
+      <div class="btn-group mr-2 w-50" role="group" aria-label="Add group">
+        <input id="additemid" type="text" class="form-control input-sm w-15 w-50" placeholder="item id" pattern="[0-9]*">
+        <input id="addattributes" type="text" class="form-control input-sm w-15" placeholder="attributes (comma separated)" pattern="[0-9a-zA-Z, ]*">
         <button id="addbutton" class="btn btn-secondary" type="button">add</button>
       </div>
       <div class="btn-group mr-2" role="group" aria-label="Manage list group">
@@ -47,9 +47,9 @@
 <!--popup manage list-->
 <div id="manageListPopup" class="popup">
   <div class="popup-content">
-    <button id="create_list" type="button">create</button>
-    <button id="modify_list" type="button">modify</button>
-    <button id="delete_list" type="button">delete</button>
+    <button id="create_list" type="button" class="btn btn-secondary">create</button>
+    <button id="modify_list" type="button" class="btn btn-secondary">modify</button>
+    <button id="delete_list" type="button" class="btn btn-secondary">delete</button>
   </div>
 </div>
 
@@ -59,8 +59,8 @@
     <p>Create new list</p>
     <input id="listName" type="text" placeholder="name">
     <input id="listDescription" type="text" placeholder="description">
-    <button id="create_list_add" type="button">add</button>
-    <button id="create_list_cancel" type="button">cancel</button>
+    <button id="create_list_add" type="button" class="btn btn-secondary">add</button>
+    <button id="create_list_cancel" type="button" class="btn btn-secondary">cancel</button>
     <p>Include items</p>
     <div id="checkbox-container"></div>
   </div>
@@ -70,8 +70,8 @@
 <div id="confirmationPopup" class="popup">
   <div class="popup-content">
     <p>Are you sure?</p>
-    <button id="yesBtn">Yes</button>
-    <button id="noBtn">No</button>
+    <button id="yesBtn" type="button" class="btn btn-secondary">Yes</button>
+    <button id="noBtn" type="button" class="btn btn-secondary">No</button>
   </div>
 </div>
 
diff --git a/web/rendergraphs.js b/web/rendergraphs.js
index e53b336..3e0a753 100644
--- a/web/rendergraphs.js
+++ b/web/rendergraphs.js
@@ -54,6 +54,7 @@ function render_graphs(items, history, show_hidden) {
         } else {
             hide_button.innerHTML = "show";
         }
+        hide_button.className = "btn btn-secondary";
         hide_button.style.position = "relative";
         hide_button.style.top = `-${height+margin.bottom}px`;
         hide_button.style.left = `${margin.left+20}px`;
@@ -64,6 +65,7 @@ function render_graphs(items, history, show_hidden) {
         // button to delete item
         const del_button = document.createElement("button");
         del_button.innerHTML = "delete";
+        del_button.className = "btn btn-secondary";
         del_button.style.position = "relative";
         del_button.style.top = `-${height+margin.bottom}px`;
         del_button.style.left = `${margin.left+30}px`;
diff --git a/web/style.css b/web/style.css
index e41a3c1..fc7b9f3 100644
--- a/web/style.css
+++ b/web/style.css
@@ -30,7 +30,7 @@ body {
 .banner {
   background-color: #30fc66;
   color: #fff;
-  padding: 10px;
+  padding: 5px;
   position: fixed;
   z-index: 300;
   top: 0;