diff --git a/assets/static/css/main.css b/assets/static/css/main.css
index 89ed591..4775a2c 100644
--- a/assets/static/css/main.css
+++ b/assets/static/css/main.css
@@ -425,7 +425,8 @@ th.operations, td.operations {
   height: 50px;
   background-color: var(--primary-color);
   color: #ffffff;
-  font-size: 1.4rem;
+  font-size: 1.25rem;
+  font-weight: bold;
   padding-left: 8px;
   width: 300px;
   display: flex;
@@ -738,7 +739,6 @@ th.operations, td.operations {
   position: fixed;
   display: none;
   width: 100vw;
-  height: 100vh;
   top: 0;
   left: 0;
   right: 0;
@@ -779,19 +779,6 @@ th.operations, td.operations {
   padding-right: 10px;
 }
 
-#quickbox-footer {
-  position:fixed;
-  bottom:0;
-  background-color: #999999;
-}
-
-#quickbox-content {
-  height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-topbar-height));
-  overflow: auto;
-  display: flex;
-  flex-direction: column-reverse;
-}
-
 .quickbox-row {
   border: 1px solid #cccccc;
   display: block;
@@ -824,6 +811,37 @@ th.operations, td.operations {
   overflow: hidden;
 }
 
+.quickbox-row {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  background-color: #fff;
+}
+
+#quickbox-notes div:nth-child(2n+1) {
+  background-color: #fafafa;
+}
+
+#quickbox-footer {
+  position:fixed;
+  bottom:0;
+  width:100%;
+}
+
+#quickbox-footer > form {
+  margin:4px;
+  border-radius: 8px;
+  border:2px solid #999999;
+  background-color: #999999;
+}
+
+#quickbox-content {
+  height: calc(100vh - var(--quickbox-footer-height) - var(--quickbox-topbar-height));
+  overflow: auto;
+  display: flex;
+  flex-direction: column-reverse;
+  padding: 4px;
+}
+
 #quickbox-content .buttons :first-child {
   margin-bottom: 4px;
 }
@@ -838,6 +856,11 @@ th.operations, td.operations {
   padding: 2px;
 }
 
+#quickbox-footer > form > div {
+  display:flex;
+  align-items: center
+}
+
 #quickbox-footer:after, #quickbox-footer:before {
   content: "";
   display: table;
@@ -846,7 +869,6 @@ th.operations, td.operations {
 
 #notesend {
   width: 50px;
-  float: right;
 }
 
 #notesend button {
@@ -855,24 +877,13 @@ th.operations, td.operations {
 }
 
 #notetext {
-  padding-right: 4px;
-  overflow: hidden;
-  display: block;
+  padding-left: 2px;
+  flex-grow: 1;
 }
 
 #notetext textarea {
   resize: none;
-  padding: 0px;
-}
-
-.quickbox-row {
-  margin-top: 4px;
-  margin-bottom: 4px;
-  background-color: #fff;
-}
-
-#quickbox-notes div:nth-child(2n+1) {
-  background-color: #fafafa;
+  padding: 0;
 }
 
 .hide,.hidden {
@@ -914,7 +925,7 @@ dialog::backdrop {
 }
 
 dialog header {
-  margin-bottom: 20px;
+  height: 40px;
   font-weight: bold;
 }
 
@@ -929,6 +940,14 @@ dialog .content {
   overflow: auto;
 }
 
+#dialog-confirm {
+  min-width: 300px;
+}
+
+dialog.share {
+  min-width: 400px;
+}
+
 /* Small */
 @media (max-width: 568px) {
   body.full {
@@ -1024,7 +1043,6 @@ dialog .content {
     position: fixed;
     top: 54px;
     left: calc(100vw - 420px);
-    height: calc(100vh - 46px);
     background-color: #fff !important;
     border: 2px solid var(--primary-color);
     border-radius: 8px;
diff --git a/assets/static/js/main.js b/assets/static/js/main.js
index 78cc58f..f6ff5e9 100644
--- a/assets/static/js/main.js
+++ b/assets/static/js/main.js
@@ -140,13 +140,13 @@ function bm_toggle_quickbox() {
   }
 }
 
-function bm_show_confirm(sender, title, message) {
-  document.querySelector("#dialog-confirm h5").innerHTML = title;
-  document.querySelector("#dialog-confirm p").innerHTML = message;
-  document.querySelector("#dialog-confirm").showModal();
+function bm_show_confirm_delete(sender, title, message) {
+  document.querySelector("#dialog-confirm-delete h5").innerHTML = title;
+  document.querySelector("#dialog-confirm-delete p").innerHTML = message;
+  document.querySelector("#dialog-confirm-delete").showModal();
   document.getElementById("modal-confirm-ok").addEventListener('click', (event) => {
       htmx.trigger(sender, 'confirmed', null);
-      document.querySelector("#dialog-confirm").close();
+      document.querySelector("#dialog-confirm-delete").close();
   });
 }
 
@@ -176,7 +176,7 @@ document.addEventListener("DOMContentLoaded", function(event){
   );
   */
 
-  document.querySelector('#dialog-confirm').addEventListener('click', (event) => {
+  document.querySelector('.dialog-confirm').addEventListener('click', (event) => {
         if (event.target.classList.contains("close-dialog")) {
             event.target.closest('dialog').close();
         }
diff --git a/assets/templates/base.tmpl b/assets/templates/base.tmpl
index 135941e..0da3731 100644
--- a/assets/templates/base.tmpl
+++ b/assets/templates/base.tmpl
@@ -46,7 +46,7 @@
     <div id="message"></div>
     <div id="overlay" onclick="bm_overlay_off('main-sidebar')"></div>
 
-  <dialog role="dialog" id="dialog-confirm">
+  <dialog class="dialog-confirm" id="dialog-confirm-delete">
     <header>
       <div style="float:left; max-width: 420px;">
         <h5></h5>
@@ -57,10 +57,9 @@
     </header>
     <p style="clear: both"></p>
 
-    <footer class="w3-container">
+    <footer>
       <p style="text-align: center;">
-        <button id="modal-confirm-ok">Ok</button>
-        <button class="close-dialog">Cancel</button>
+        <button id="modal-confirm-ok" class="delete">Delete</button>
       </p>
     </footer>
   </dialog>
@@ -80,11 +79,11 @@
         <div id="quickbox-notes"></div>
       </div>
 
-      <div id="quickbox-footer" class="bar">
+      <div id="quickbox-footer">
         <form method="POST">
-            <div class="row">
-              <div id="notesend"><button type="button" hx-validate="true" hx-post="/quickbox/add" hx-target="#quickbox-notes" hx-swap="beforeend"><i class='bi bi-caret-right-square-fill'></i></button></div>
+            <div>
               <div id="notetext"><textarea required name="Note"></textarea></div>
+              <div id="notesend"><button type="button" hx-validate="true" hx-post="/quickbox/add" hx-target="#quickbox-notes" hx-swap="beforeend"><i class='bi bi-caret-right-square-fill'></i></button></div>
             </div>
         </form>
       </div>
diff --git a/assets/templates/categories/list.tmpl b/assets/templates/categories/list.tmpl
index fd606f8..8eafeec 100644
--- a/assets/templates/categories/list.tmpl
+++ b/assets/templates/categories/list.tmpl
@@ -48,7 +48,7 @@
         </td>
         <td data-label="" class="operations">
           <button hx-get="/category/update/{{.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-pencil"></i></button>
-          <button hx-delete="/category/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Categories', 'Delete this category ?')"><i class="bi bi-trash"></i>
+          <button hx-delete="/category/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm_delete(this, 'Categories', 'Delete this category ?')"><i class="bi bi-trash"></i>
           </button>
         </td>
       </tr>
diff --git a/assets/templates/items/all_list_rows.tmpl b/assets/templates/items/all_list_rows.tmpl
index 7f6d4b7..7738b18 100644
--- a/assets/templates/items/all_list_rows.tmpl
+++ b/assets/templates/items/all_list_rows.tmpl
@@ -44,7 +44,7 @@
 
       <button href="#" hx-target="body" hx-swap="beforeend" hx-get="/item/share/{{.Id}}" title="Share"><i class="bi bi-share-fill"></i></button>
       <button hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit"><i class="bi bi-pencil"></i></button>
-      <button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
+      <button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm_delete(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
     </td>
   </tr>
   {{ end }}
diff --git a/assets/templates/items/form.tmpl b/assets/templates/items/form.tmpl
index fcef7fa..1f932b4 100644
--- a/assets/templates/items/form.tmpl
+++ b/assets/templates/items/form.tmpl
@@ -108,10 +108,10 @@
   <div id="footer-navbar">
       <button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
     {{ if not (eq .item.Id 0) }}
+      <a class="button secondary hide-small" href="/item/view/{{.item.Id}}" hx-get="/item/view/{{.item.Id}}" hx-target="body" hx-swap="beforeend"><i class="bi bi-binoculars"></i><span>View</span></a>
       <a class="button secondary hide-medium hide-large" href="/item/read/{{.item.Id}}" hx-get="/item/read/{{.item.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-binoculars"></i><span>View</span></a>
-      <a class="button secondary hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#dialog-container"><i class="bi bi-binoculars"></i><span>View</span></a>
-      <a class="button delete" hx-delete="/item/delete/{{.item.Id}}"  hx-target="#page-content"  hx-trigger="confirmed"  onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')"  title="Delete"><i class="bi bi-trash"></i><span>Delete</span></a>
-      <a class="button secondary" href="#" hx-target="#dialog-container"  hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i><span>Share</span></a>
+      <a class="button delete" hx-delete="/item/delete/{{.item.Id}}"  hx-target="#page-content"  hx-trigger="confirmed"  onClick="bm_show_confirm_delete(this, 'Items', 'Delete this item ?')"  title="Delete"><i class="bi bi-trash"></i><span>Delete</span></a>
+      <a class="button secondary" href="#" hx-target="body" hx-swap="beforeend" hx-get="/item/share/{{.item.Id}}" title="Share"><i class="bi bi-share-fill"></i><span>Share</span></a>
     {{ end }}
       <a class="button secondary" hx-target="#page-content" hx-push-url="true" hx-get="/items/type/{{.item.Type_id}}"><i class="bi bi-arrow-left-circle"></i><span>Back</span></a>
     </div>
diff --git a/assets/templates/items/list_rows.tmpl b/assets/templates/items/list_rows.tmpl
index a7dbc3a..623927e 100644
--- a/assets/templates/items/list_rows.tmpl
+++ b/assets/templates/items/list_rows.tmpl
@@ -52,7 +52,7 @@
 
       <button href="#" hx-target="body" hx-swap="beforeend"  hx-get="/item/share/{{.Id}}" title="Share"><i class="bi bi-share-fill"></i></button>
       <button hx-get="/item/update/{{.Id}}" hx-push-url="true" hx-target="#page-content" title="Edit"><i class="bi bi-pencil"></i></button>
-      <button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
+      <button hx-delete="/item/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm_delete(this, 'Items', 'Delete this item ?')" title="Delete"><i class="bi bi-trash"></i></button>
     </td>
   </tr>
   {{ end }}
diff --git a/assets/templates/items/share.tmpl b/assets/templates/items/share.tmpl
index 083d97b..71c4e2b 100644
--- a/assets/templates/items/share.tmpl
+++ b/assets/templates/items/share.tmpl
@@ -1,78 +1,54 @@
 {{define "page:content"}}
-  <dialog id="dialog">
+  <dialog id="dialog" class="share">
       <header>
         <div style="float:left; max-width: 420px;">
           <h5><i class="bi bi-share-fill" title="Share"></i> Share item</h5>
         </div>
         <div style="float:right">
+          <button type="submit" class="main" title="Share"><i class='bi bi-share-fill'></i></button>
           <span class="close-dialog button close"><i class='close-dialog bi bi-x-circle-fill'></i></span>
         </div>
       </header>
       <div class="content">
           <form>
             <h5>{{ .item.Title }}</h5>
-            <div class="w3-row">
-              <div class="w3-col l6">
+            <div class="row">
+              <div class="col l6">
                 <p style="margin-right: 6px">
                   <label for="share-start-datetime">Start date time</label>
-                  <input
-                    name="start-datetime"
-                    class=" w3-border"
-                    id="share-start-datetime"
-                    type="datetime-local"
-                    value=""
-                  />
+                  <input name="start-datetime" id="share-start-datetime" type="datetime-local" value=""/>
                 </p> 
               </div>
-              <div class="w3-col l6">
+              <div class="col l6">
                 <p>
                   <label for="share-end-datetime">End date time</label>
-                  <input
-                    name="end-datetime"
-                    class=" w3-border"
-                    id="share-end-datetime"
-                    type="datetime-local"
-                    value=""
-                  />
+                  <input name="end-datetime" id="share-end-datetime" type="datetime-local" value=""/>
                 </p> 
               </div>
             </div>
-            <div class="w3-row">
-              <div class="w3-col l12">
+            <div class="row">
+              <div class="col l12">
                 <p style="margin-right: 6px">
                   <label for="share-token">Share Url</label>
                   <div class="input-container">
                     <span class="prefix">{{ .baseUrl }}/</span>
-                  <input
-                    name="token"
-                    class="w3-border"
-                    id="share-token"
-                    type="url"
-                    readonly="readonly"
-                    value="{{ .shareToken }}"
-                  />
+                    <input name="token" id="share-token" type="url" readonly="readonly" value="{{ .shareToken }}" />
                   </div>
                 </p> 
               </div>
             </div>
-            <div class="w3-row">
-              <div class="w3-col l12">
+            <div class="row">
+              <div class="col l12">
                 <p style="margin-right: 6px">
                   <label for="share-password">Password</label>
-                  <input
-                    name="password"
-                    class=" w3-border"
-                    id="share-password"
-                    type="password"
-                    value=""
-                  />
+                  <input name="password" id="share-password" type="password" value=""/>
                 </p> 
               </div>
             </div>
             <fieldset>
               <legend>Permissions</legend>
-              <div class="w3-row">
-                <div class="w3-col l6">
+              <div class="row">
+                <div class="col l6">
                     <p>
                       <label class="switch">
                         <input class="" name="read" type="checkbox" value="1" checked="checked">
@@ -80,7 +56,7 @@
                       </label><span class="label-checkbox">Read</span>
                     </p>
                 </div>
-                <div class="w3-col l6">
+                <div class="col l6">
                   <p>
                     <label class="switch">
                       <input class="" name="edit" type="checkbox" value="1">
@@ -90,11 +66,6 @@
               </div>
             </div>  
             </fieldset>
-            <footer class="w3-container">
-              <p style="text-align: center;">
-                <button type="submit" class="main"><i class='bi bi-share-fill'></i> Share</button>
-              </p>
-            </footer>
           </form>
     </div>
   </dialog>
diff --git a/assets/templates/items/view.tmpl b/assets/templates/items/view.tmpl
index ad9a2b7..73032ab 100644
--- a/assets/templates/items/view.tmpl
+++ b/assets/templates/items/view.tmpl
@@ -1,5 +1,5 @@
 {{define "page:content"}}
-<dialog id="dialog">
+<dialog id="dialog" class="view">
   <header>
     <div style="float:left; max-width: 420px;">
       <h5><i class="{{.item.Type_icon}}" title="{{.item.Type_title}}"></i> {{.item.Type_title}} : {{.item.Title}}</h5>
diff --git a/assets/templates/notebooks/form.tmpl b/assets/templates/notebooks/form.tmpl
index 0bfb787..3b526f3 100644
--- a/assets/templates/notebooks/form.tmpl
+++ b/assets/templates/notebooks/form.tmpl
@@ -42,7 +42,7 @@
 
   </div>
   <div id="footer-navbar">
-    <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
+    <button type="submit" class="main" title="Save"><i class="bi bi-floppy"></i><span>Save</span></button>
     <a class="button secondary" href="/notebooks" hx-get="/notebooks" hx-push-url="true" hx-target="#page-content" title="Back"><i class="bi bi-arrow-left-circle"></i><span>Back</span></a>
  </div>
 </form>
diff --git a/assets/templates/notebooks/list.tmpl b/assets/templates/notebooks/list.tmpl
index 33fb756..2738a77 100644
--- a/assets/templates/notebooks/list.tmpl
+++ b/assets/templates/notebooks/list.tmpl
@@ -47,7 +47,7 @@
         <td class="title" data-label="Title"><i class="{{.Icon}}"></i> {{.Title}}</td>
         <td class="operations">
           <button hx-get="/notebook/update/{{.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-pencil"></i></button>
-          <button hx-delete="/notebook/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Notebooks', 'Delete this notebook ?')"><i class="bi bi-trash"></i></button>
+          <button hx-delete="/notebook/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm_delete(this, 'Notebooks', 'Delete this notebook ?')"><i class="bi bi-trash"></i></button>
         </td>
       </tr>
       {{ end }}
diff --git a/assets/templates/quickbox/list.tmpl b/assets/templates/quickbox/list.tmpl
index 984a876..9c4e9ae 100644
--- a/assets/templates/quickbox/list.tmpl
+++ b/assets/templates/quickbox/list.tmpl
@@ -6,15 +6,12 @@
 {{ if eq $rowCount 10 }}
 {{ $offset := addI $.offset $rowCount}}
 {{ if gt $offset -1 }}
-hx-get="/quickbox/all?offset={{ $offset }}"
-hx-trigger="intersect once"
-hx-swap="afterbegin"
-hx-target="#quickbox-notes"
+hx-get="/quickbox/all?offset={{ $offset }}" hx-trigger="intersect once" hx-swap="afterbegin" hx-target="#quickbox-notes"
 {{ end }}
 {{ end }}>
   <div class="buttons">
-    <button class="button" hx-delete="/quickbox/delete/{{.Id}}" hx-target="closest div.quickbox-row" hx-swap="outerHTML swap:1s" hx-trigger='confirmed' onClick="bm_show_confirm(this, 'Quickbox', 'Delete this note ?')"><i class="bi bi-dash-square"></i></button>
-    <button class="button" hx-target="#modal-container" hx-get="/quickbox/transform/{{.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
+    <button class="button" hx-delete="/quickbox/delete/{{.Id}}" hx-target="closest div.quickbox-row" hx-swap="outerHTML swap:1s" hx-trigger='confirmed' onClick="bm_show_confirm_delete(this, 'Quickbox', 'Delete this note ?')"><i class="bi bi-dash-square"></i></button>
+    <button class="button" href="#" hx-target="body" hx-swap="beforeend" hx-get="/quickbox/transform/{{.Id}}"><i class='bi bi-arrow-up-left-circle-fill'></i></button>
   </div>
   <div class="note">{{.Note_rendered | safeHTML}}</div>
 </div>
diff --git a/assets/templates/quickbox/transform.tmpl b/assets/templates/quickbox/transform.tmpl
index 727f603..b834942 100644
--- a/assets/templates/quickbox/transform.tmpl
+++ b/assets/templates/quickbox/transform.tmpl
@@ -1,5 +1,5 @@
 {{define "page:content"}}
-<div id="modal" class="w3-modal w3-modal-full">
+<dialog class="quickbox-transform">
   <div class="w3-modal-content w3-round-large w3-animate-top">
     <header class="w3-container">
       <h5>
@@ -103,5 +103,5 @@
       </div>
     </form>
   </div>
-</div>
+</dialog>
 {{ end }}
diff --git a/assets/templates/types/list.tmpl b/assets/templates/types/list.tmpl
index e1522a4..451de50 100644
--- a/assets/templates/types/list.tmpl
+++ b/assets/templates/types/list.tmpl
@@ -47,7 +47,7 @@
         <td class="title" data-label="Title">{{.Title}}</td>
         <td class="operations">
           <button hx-get="/type/update/{{.Id}}" hx-push-url="true" hx-target="#page-content"><i class="bi bi-pencil"></i></button>
-          <button hx-delete="/type/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm(this, 'Types', 'Delete this type ?')"><i class="bi bi-trash"></i></button>
+          <button hx-delete="/type/delete/{{.Id}}" hx-target="closest tr" hx-swap="outerHTML swap:1s" hx-trigger="confirmed" onClick="bm_show_confirm_delete(this, 'Types', 'Delete this type ?')"><i class="bi bi-trash"></i></button>
         </td>
       </tr>
       {{ end }}