diff --git a/assets/static/css/main.css b/assets/static/css/main.css
index c05eb24..2f35d3f 100644
--- a/assets/static/css/main.css
+++ b/assets/static/css/main.css
@@ -14,7 +14,7 @@
 
   /* Default (light) theme */
   --bg: #fff;
-  --bg-primary-color: #2b5797;
+  --primary-color: #2b5797;
 }
 
 /* Dark theme */
@@ -57,10 +57,15 @@ h1,h2,h3,h4,h5,h6, form {
 
 a {
   text-decoration: none;
+  color: var(--primary-color);
 }
-
 /* End reset */
 
+body {
+  color: #000 !important;
+  background-color: #f1f1f1 !important;
+}
+
 html {
   font-family: var(--sans-font), sans-serif;
   scroll-behavior: smooth;
@@ -147,7 +152,7 @@ input[type='radio'] {
   width: 18px;
   height: 18px;
   position: relative;
-  accent-color: var(--bg-primary-color);
+  accent-color: var(--primary-color);
 }
 
 .label-checkbox {
@@ -156,14 +161,78 @@ input[type='radio'] {
   margin-left: 4px;
 }
 
+.table-all {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  display: table;
+  border: 1px solid #ccc
+}
+
+.bordered tr,
+.table-all tr {
+  border-bottom: 1px solid #ddd
+}
+
+.striped tbody tr:nth-child(even) {
+  background-color: #f1f1f1
+}
+
+.table-all tr:nth-child(odd) {
+  background-color: #fff
+}
+
+.table-all tr:nth-child(even) {
+  background-color: #f1f1f1
+}
+
+.hoverable tbody tr:hover,
+.ul.w3-hoverable li:hover {
+  background-color: #ccc
+}
+
+.centered tr th,
+.centered tr td {
+  text-align: center
+}
+
+.table-all td,
+.table-all th {
+  padding: 8px 8px;
+  display: table-cell;
+  text-align: left;
+  vertical-align: top
+}
+
+.table-all th:first-child,
+.table-all td:first-child {
+  padding-left: 16px
+}
+
+#page-main {
+  transition: margin-left .4s;
+  width: 100%;
+}
+
+#form-login {
+  width: 600px;
+}
+
 #main-sidebar {
   width: 300px;
   z-index: 5;
+  height: 100%;
+  background-color: #fff;
+  position: fixed !important;
+  overflow: auto;
+  color: #000 !important;
+  animation: animateleft 0.4s;
+  display: none;
 }
 
 #app-title {
   height: 50px;
-  background-color: var(--bg-primary-color);
+  background-color: var(--primary-color);
   color: #ffffff;
   font-size: 1.4rem;
   padding-left: 8px;
@@ -173,6 +242,20 @@ input[type='radio'] {
   position: fixed;
 }
 
+#app-title a {
+  color: #ffffff;
+}
+
+#app-title img {
+  height: 32px;
+  float: left;
+  padding-right: 10px;
+}
+
+#app-title a span {
+  vertical-align: top;
+}
+
 #main-sidebar-content {
   margin-top: 50px;
 }
@@ -188,6 +271,9 @@ input[type='radio'] {
   align-items: center;
   z-index: 1;
   height: 50px;
+  background-color: var(--primary-color);
+  position: fixed;
+  width: inherit;
 }
 
 #page-title-container {
@@ -207,20 +293,25 @@ input[type='radio'] {
   font-size: 1.4rem;
 }
 
+#page-title h5 {
+  color: #ffffff;
+}
+
 #search-bar {
   float: right;
 }
 
+#search-bar button {
+  color: #ffffff;
+  margin-top: 2px;
+}
+
 #search-text {
   float: left;
   width: auto;
   padding: 4px;
 }
 
-#search-bar button {
-  margin-top: 2px;
-}
-
 .sidebar-block {
   padding: 0.01em 4px;
 }
@@ -237,13 +328,33 @@ input[type='radio'] {
   font-size: 1rem;
 }
 
+#types_menu, #settings_menu {
+  margin-left: 2px !important;
+}
+
+.menu-item-title:hover, #settings_menu a:hover{
+  border-radius: 8px;
+  background-color: var(--primary-color);
+  color: #ffffff;
+}
+
+.accordion {
+  cursor: pointer;
+}
+
+#page-content {
+    padding-top: 4px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
 #page-container {
   padding: 0.01em 4px;
 }
 
 #dashboard h5 {
   font-size: 1rem;
-  color: var(--bg-primary-color);
+  color: var(--primary-color);
 }
 
 .tab-bar {
@@ -304,13 +415,13 @@ input[type='radio'] {
 }
 
 .ss-main .ss-values .ss-value {
-  background-color: var(--bg-primary-color);
+  background-color: var(--primary-color);
 }
 
 .ss-content .ss-list .ss-option:hover,
 .ss-content .ss-list .ss-option.ss-highlighted,
 .ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
-  background-color:var(--bg-primary-color);
+  background-color:var(--primary-color);
 }
 
 #quickbox {
@@ -389,4 +500,57 @@ input[type='radio'] {
 
 #quickbox-content div:nth-child(2n+1) {
   background-color: #fafafa;
+}
+
+.hide,.hidden {
+  display: none !important
+}
+
+.block,
+.show {
+  display: block !important
+}
+
+/* Small */
+@media (max-width: 568px) {
+  .hide-small {
+    display: none !important
+  }
+}
+
+/* Medium */
+@media (max-width: 768px) {
+
+}
+
+@media (max-width:993px) and (min-width:768px) {
+  .hide-medium {
+    display: none !important
+  }
+}
+
+@media (min-width:993px) {
+  .hide-large {
+    display: none !important
+  }
+
+  #main-sidebar {
+    display: block !important;
+  }
+
+  .w3-row > .w3-half:first {
+    padding-right: 4px;
+  }
+
+  .w3-row > .w3-half:nth-child(2) {
+    padding-left: 4px;
+  }
+
+  #page-main {
+    padding-left: 300px;
+  }
+
+  #page-top-bar {
+    padding-right: 300px;
+  }
 }
\ No newline at end of file
diff --git a/assets/static/css/orig.css b/assets/static/css/orig.css
index 982792a..c42cf0c 100644
--- a/assets/static/css/orig.css
+++ b/assets/static/css/orig.css
@@ -1,72 +1,3 @@
-.w3-image {
-  max-width: 100%;
-  height: auto
-}
-
-img {
-  vertical-align: middle
-}
-
-a {
-  color: inherit
-}
-
-.w3-table,
-.w3-table-all {
-  border-collapse: collapse;
-  border-spacing: 0;
-  width: 100%;
-  display: table
-}
-
-.w3-table-all {
-  border: 1px solid #ccc
-}
-
-.w3-bordered tr,
-.w3-table-all tr {
-  border-bottom: 1px solid #ddd
-}
-
-.w3-striped tbody tr:nth-child(even) {
-  background-color: #f1f1f1
-}
-
-.w3-table-all tr:nth-child(odd) {
-  background-color: #fff
-}
-
-.w3-table-all tr:nth-child(even) {
-  background-color: #f1f1f1
-}
-
-.w3-hoverable tbody tr:hover,
-.w3-ul.w3-hoverable li:hover {
-  background-color: #ccc
-}
-
-.w3-centered tr th,
-.w3-centered tr td {
-  text-align: center
-}
-
-.w3-table td,
-.w3-table th,
-.w3-table-all td,
-.w3-table-all th {
-  padding: 8px 8px;
-  display: table-cell;
-  text-align: left;
-  vertical-align: top
-}
-
-.w3-table th:first-child,
-.w3-table td:first-child,
-.w3-table-all th:first-child,
-.w3-table-all td:first-child {
-  padding-left: 16px
-}
-
 .w3-disabled,
 .w3-btn:disabled,
 .w3-button:disabled {
@@ -193,15 +124,6 @@ a {
   accent-color: #2b5797;
 }
 
-.w3-sidebar {
-  height: 100%;
-  width: 200px;
-  background-color: #fff;
-  position: fixed !important;
-  z-index: 1;
-  overflow: auto
-}
-
 .w3-bar-block .w3-dropdown-hover,
 .w3-bar-block .w3-dropdown-click {
   width: 100%
@@ -532,15 +454,6 @@ a {
   vertical-align: bottom
 }
 
-.w3-hide {
-  display: none !important
-}
-
-.w3-show-block,
-.w3-show {
-  display: block !important
-}
-
 .w3-show-inline-block {
   display: inline-block !important
 }
@@ -566,10 +479,6 @@ a {
     position: relative
   }
 
-  .w3-hide-small {
-    display: none !important
-  }
-
   .w3-mobile {
     display: block;
     width: 100% !important
@@ -615,26 +524,9 @@ a {
     width: 900px
   }
 
-  .w3-hide-large {
-    display: none !important
-  }
-
-  .w3-sidebar.w3-collapse {
-    display: block !important
-  }
-}
-
-@media (max-width:992px) and (min-width:601px) {
-  .w3-hide-medium {
-    display: none !important
-  }
 }
 
 @media (max-width:992px) {
-  .w3-sidebar.w3-collapse {
-    display: none
-  }
-
   .w3-main {
     margin-left: 0 !important;
     margin-right: 0 !important
@@ -1149,524 +1041,6 @@ a {
   box-shadow: none !important
 }
 
-/* Colors */
-.w3-amber,
-.w3-hover-amber:hover {
-  color: #000 !important;
-  background-color: #ffc107 !important
-}
-
-.w3-aqua,
-.w3-hover-aqua:hover {
-  color: #000 !important;
-  background-color: #00ffff !important
-}
-
-.w3-blue,
-.w3-hover-blue:hover {
-  color: #fff !important;
-  background-color: #2196F3 !important
-}
-
-.w3-light-blue,
-.w3-hover-light-blue:hover {
-  color: #000 !important;
-  background-color: #87CEEB !important
-}
-
-.w3-brown,
-.w3-hover-brown:hover {
-  color: #fff !important;
-  background-color: #795548 !important
-}
-
-.w3-cyan,
-.w3-hover-cyan:hover {
-  color: #000 !important;
-  background-color: #00bcd4 !important
-}
-
-.w3-blue-grey,
-.w3-hover-blue-grey:hover,
-.w3-blue-gray,
-.w3-hover-blue-gray:hover {
-  color: #fff !important;
-  background-color: #607d8b !important
-}
-
-.w3-green,
-.w3-hover-green:hover {
-  color: #fff !important;
-  background-color: #4CAF50 !important
-}
-
-.w3-light-green,
-.w3-hover-light-green:hover {
-  color: #000 !important;
-  background-color: #8bc34a !important
-}
-
-.w3-indigo,
-.w3-hover-indigo:hover {
-  color: #fff !important;
-  background-color: #3f51b5 !important
-}
-
-.w3-khaki,
-.w3-hover-khaki:hover {
-  color: #000 !important;
-  background-color: #f0e68c !important
-}
-
-.w3-lime,
-.w3-hover-lime:hover {
-  color: #000 !important;
-  background-color: #cddc39 !important
-}
-
-.w3-orange,
-.w3-hover-orange:hover {
-  color: #000 !important;
-  background-color: #ff9800 !important
-}
-
-.w3-deep-orange,
-.w3-hover-deep-orange:hover {
-  color: #fff !important;
-  background-color: #ff5722 !important
-}
-
-.w3-pink,
-.w3-hover-pink:hover {
-  color: #fff !important;
-  background-color: #e91e63 !important
-}
-
-.w3-purple,
-.w3-hover-purple:hover {
-  color: #fff !important;
-  background-color: #9c27b0 !important
-}
-
-.w3-deep-purple,
-.w3-hover-deep-purple:hover {
-  color: #fff !important;
-  background-color: #673ab7 !important
-}
-
-.w3-red,
-.w3-hover-red:hover {
-  color: #fff !important;
-  background-color: #f44336 !important
-}
-
-.w3-sand,
-.w3-hover-sand:hover {
-  color: #000 !important;
-  background-color: #fdf5e6 !important
-}
-
-.w3-teal,
-.w3-hover-teal:hover {
-  color: #fff !important;
-  background-color: #009688 !important
-}
-
-.w3-yellow,
-.w3-hover-yellow:hover {
-  color: #000 !important;
-  background-color: #ffeb3b !important
-}
-
-.w3-white,
-.w3-hover-white:hover {
-  color: #000 !important;
-  background-color: #fff !important
-}
-
-.w3-black,
-.w3-hover-black:hover {
-  color: #fff !important;
-  background-color: #000 !important
-}
-
-.w3-grey,
-.w3-hover-grey:hover,
-.w3-gray,
-.w3-hover-gray:hover {
-  color: #000 !important;
-  background-color: #9e9e9e !important
-}
-
-.w3-light-grey,
-.w3-hover-light-grey:hover,
-.w3-light-gray,
-.w3-hover-light-gray:hover {
-  color: #000 !important;
-  background-color: #f1f1f1 !important
-}
-
-.w3-dark-grey,
-.w3-hover-dark-grey:hover,
-.w3-dark-gray,
-.w3-hover-dark-gray:hover {
-  color: #fff !important;
-  background-color: #616161 !important
-}
-
-.w3-pale-red,
-.w3-hover-pale-red:hover {
-  color: #000 !important;
-  background-color: #ffdddd !important
-}
-
-.w3-pale-green,
-.w3-hover-pale-green:hover {
-  color: #000 !important;
-  background-color: #ddffdd !important
-}
-
-.w3-pale-yellow,
-.w3-hover-pale-yellow:hover {
-  color: #000 !important;
-  background-color: #ffffcc !important
-}
-
-.w3-pale-blue,
-.w3-hover-pale-blue:hover {
-  color: #000 !important;
-  background-color: #ddffff !important
-}
-
-.w3-text-amber,
-.w3-hover-text-amber:hover {
-  color: #ffc107 !important
-}
-
-.w3-text-aqua,
-.w3-hover-text-aqua:hover {
-  color: #00ffff !important
-}
-
-.w3-text-blue,
-.w3-hover-text-blue:hover {
-  color: #2196F3 !important
-}
-
-.w3-text-light-blue,
-.w3-hover-text-light-blue:hover {
-  color: #87CEEB !important
-}
-
-.w3-text-brown,
-.w3-hover-text-brown:hover {
-  color: #795548 !important
-}
-
-.w3-text-cyan,
-.w3-hover-text-cyan:hover {
-  color: #00bcd4 !important
-}
-
-.w3-text-blue-grey,
-.w3-hover-text-blue-grey:hover,
-.w3-text-blue-gray,
-.w3-hover-text-blue-gray:hover {
-  color: #607d8b !important
-}
-
-.w3-text-green,
-.w3-hover-text-green:hover {
-  color: #4CAF50 !important
-}
-
-.w3-text-light-green,
-.w3-hover-text-light-green:hover {
-  color: #8bc34a !important
-}
-
-.w3-text-indigo,
-.w3-hover-text-indigo:hover {
-  color: #3f51b5 !important
-}
-
-.w3-text-khaki,
-.w3-hover-text-khaki:hover {
-  color: #b4aa50 !important
-}
-
-.w3-text-lime,
-.w3-hover-text-lime:hover {
-  color: #cddc39 !important
-}
-
-.w3-text-orange,
-.w3-hover-text-orange:hover {
-  color: #ff9800 !important
-}
-
-.w3-text-deep-orange,
-.w3-hover-text-deep-orange:hover {
-  color: #ff5722 !important
-}
-
-.w3-text-pink,
-.w3-hover-text-pink:hover {
-  color: #e91e63 !important
-}
-
-.w3-text-purple,
-.w3-hover-text-purple:hover {
-  color: #9c27b0 !important
-}
-
-.w3-text-deep-purple,
-.w3-hover-text-deep-purple:hover {
-  color: #673ab7 !important
-}
-
-.w3-text-red,
-.w3-hover-text-red:hover {
-  color: #f44336 !important
-}
-
-.w3-text-sand,
-.w3-hover-text-sand:hover {
-  color: #fdf5e6 !important
-}
-
-.w3-text-teal,
-.w3-hover-text-teal:hover {
-  color: #009688 !important
-}
-
-.w3-text-yellow,
-.w3-hover-text-yellow:hover {
-  color: #d2be0e !important
-}
-
-.w3-text-white,
-.w3-hover-text-white:hover {
-  color: #fff !important
-}
-
-.w3-text-black,
-.w3-hover-text-black:hover {
-  color: #000 !important
-}
-
-.w3-text-grey,
-.w3-hover-text-grey:hover,
-.w3-text-gray,
-.w3-hover-text-gray:hover {
-  color: #757575 !important
-}
-
-.w3-text-light-grey,
-.w3-hover-text-light-grey:hover,
-.w3-text-light-gray,
-.w3-hover-text-light-gray:hover {
-  color: #f1f1f1 !important
-}
-
-.w3-text-dark-grey,
-.w3-hover-text-dark-grey:hover,
-.w3-text-dark-gray,
-.w3-hover-text-dark-gray:hover {
-  color: #3a3a3a !important
-}
-
-.w3-border-amber,
-.w3-hover-border-amber:hover {
-  border-color: #ffc107 !important
-}
-
-.w3-border-aqua,
-.w3-hover-border-aqua:hover {
-  border-color: #00ffff !important
-}
-
-.w3-border-blue,
-.w3-hover-border-blue:hover {
-  border-color: #2196F3 !important
-}
-
-.w3-border-light-blue,
-.w3-hover-border-light-blue:hover {
-  border-color: #87CEEB !important
-}
-
-.w3-border-brown,
-.w3-hover-border-brown:hover {
-  border-color: #795548 !important
-}
-
-.w3-border-cyan,
-.w3-hover-border-cyan:hover {
-  border-color: #00bcd4 !important
-}
-
-.w3-border-blue-grey,
-.w3-hover-border-blue-grey:hover,
-.w3-border-blue-gray,
-.w3-hover-border-blue-gray:hover {
-  border-color: #607d8b !important
-}
-
-.w3-border-green,
-.w3-hover-border-green:hover {
-  border-color: #4CAF50 !important
-}
-
-.w3-border-light-green,
-.w3-hover-border-light-green:hover {
-  border-color: #8bc34a !important
-}
-
-.w3-border-indigo,
-.w3-hover-border-indigo:hover {
-  border-color: #3f51b5 !important
-}
-
-.w3-border-khaki,
-.w3-hover-border-khaki:hover {
-  border-color: #f0e68c !important
-}
-
-.w3-border-lime,
-.w3-hover-border-lime:hover {
-  border-color: #cddc39 !important
-}
-
-.w3-border-orange,
-.w3-hover-border-orange:hover {
-  border-color: #ff9800 !important
-}
-
-.w3-border-deep-orange,
-.w3-hover-border-deep-orange:hover {
-  border-color: #ff5722 !important
-}
-
-.w3-border-pink,
-.w3-hover-border-pink:hover {
-  border-color: #e91e63 !important
-}
-
-.w3-border-purple,
-.w3-hover-border-purple:hover {
-  border-color: #9c27b0 !important
-}
-
-.w3-border-deep-purple,
-.w3-hover-border-deep-purple:hover {
-  border-color: #673ab7 !important
-}
-
-.w3-border-red,
-.w3-hover-border-red:hover {
-  border-color: #f44336 !important
-}
-
-.w3-border-sand,
-.w3-hover-border-sand:hover {
-  border-color: #fdf5e6 !important
-}
-
-.w3-border-teal,
-.w3-hover-border-teal:hover {
-  border-color: #009688 !important
-}
-
-.w3-border-yellow,
-.w3-hover-border-yellow:hover {
-  border-color: #ffeb3b !important
-}
-
-.w3-border-white,
-.w3-hover-border-white:hover {
-  border-color: #fff !important
-}
-
-.w3-border-black,
-.w3-hover-border-black:hover {
-  border-color: #000 !important
-}
-
-.w3-border-grey,
-.w3-hover-border-grey:hover,
-.w3-border-gray,
-.w3-hover-border-gray:hover {
-  border-color: #9e9e9e !important
-}
-
-.w3-border-light-grey,
-.w3-hover-border-light-grey:hover,
-.w3-border-light-gray,
-.w3-hover-border-light-gray:hover {
-  border-color: #f1f1f1 !important
-}
-
-.w3-border-dark-grey,
-.w3-hover-border-dark-grey:hover,
-.w3-border-dark-gray,
-.w3-hover-border-dark-gray:hover {
-  border-color: #616161 !important
-}
-
-.w3-border-pale-red,
-.w3-hover-border-pale-red:hover {
-  border-color: #ffe7e7 !important
-}
-
-.w3-border-pale-green,
-.w3-hover-border-pale-green:hover {
-  border-color: #e7ffe7 !important
-}
-
-.w3-border-pale-yellow,
-.w3-hover-border-pale-yellow:hover {
-  border-color: #ffffcc !important
-}
-
-.w3-border-pale-blue,
-.w3-hover-border-pale-blue:hover {
-  border-color: #e7ffff !important
-}
-
-.w3-metro-darken {
-  color: #fff !important;
-  background-color: #1d1d1d !important
-}
-
-.w3-metro-light-blue {
-  color: #000 !important;
-  background-color: #eff4ff !important
-}
-
-.w3-metro-blue {
-  color: #fff !important;
-  background-color: #2d89ef !important
-}
-
-.w3-metro-dark-blue {
-  color: #fff !important;
-  background-color: var(--bg-primary-color) !important
-}
-
-.w3-text-metro-dark-blue {
-  color: #2b5797;
-}
-
-.w3-hover-metro-dark-blue:hover {
-  color: #fff !important;
-  background-color: #2b5797 !important;
-}
-
-.w3-hover-round-large {
-  border-radius: 8px;
-}
-
 .alert-success {
   color: #000;
   background-color: #ccc;
@@ -1685,16 +1059,6 @@ a {
   margin-left: 5px;
 }
 
-#page-content {
-  padding-top: 48px;
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
-.page-container {
-  padding-top: 10px;
-}
-
 .w3-row .threequarter {
   width: 75%;
   float: left;
@@ -1705,10 +1069,6 @@ a {
   float: left;
 }
 
-#form-login {
-  width: 600px;
-}
-
 .w3-button.w3-edit {
   background-color: #f1f1f1;
 }
@@ -1733,14 +1093,6 @@ a {
   padding-left: 0;
 }
 
-.hidden {
-  display: none;
-}
-
-.accordion {
-  cursor: pointer;
-}
-
 .footerNavbar-container {
   position: fixed;
   bottom: 5px;
@@ -1821,17 +1173,11 @@ a {
   margin: 0;
 }
 
-#types_menu, #settings_menu {
-  margin-left: 2px !important;
-}
-
 tr.htmx-swapping td {
   opacity: 0;
   transition: opacity 1s ease-out;
 }
 
-
-
 #items_search, #all_items_search {
   position: sticky;
   top: 50px;
@@ -1985,7 +1331,6 @@ table.stickyheader.searchopened thead {
 }
 
 @media (max-width:992px) {
-
   /* The switch - the box around the slider */
   .switch {
     position: relative;
@@ -2087,21 +1432,3 @@ table.stickyheader.searchopened thead {
 
 }
 
-/* Large */
-@media (min-width:993px) {
-  .w3-row > .w3-half:first {
-    padding-right: 4px;
-  }
-
-  .w3-row > .w3-half:nth-child(2) {
-    padding-left: 4px;
-  }
-
-  #page-main {
-    padding-left: 300px;
-  }
-
-  #page-top-bar {
-    padding-right: 300px;
-  }
-}
diff --git a/assets/templates/base.tmpl b/assets/templates/base.tmpl
index f297245..9be16e5 100644
--- a/assets/templates/base.tmpl
+++ b/assets/templates/base.tmpl
@@ -17,24 +17,24 @@
       end
     }}
   </head>
-  <body class="w3-light-gray" hx-headers='{"X-CSRF-TOKEN": "{{ .CSRFToken }}"}'>
+  <body hx-headers='{"X-CSRF-TOKEN": "{{ .CSRFToken }}"}'>
 
     {{template "partial:sidebar" .}}
 
-    <div id="page-main" class="w3-main">
-    <div class="w3-top w3-metro-dark-blue w3-large" id="page-top-bar">
+    <div id="page-main">
+    <div id="page-top-bar">
       <div id="page-title-container">
-        <a class="w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="bm_toggle_sidebar('main-sidebar'); return false" href="#" style="float: left; padding-left: 4px; padding-right: 10px;">
+        <a class="hide-large" onclick="bm_toggle_sidebar('main-sidebar'); return false" href="#" style="float: left; padding-left: 4px; padding-right: 10px;">
           <img src="/static/img/brainminder.svg" alt="BrainMinder" style="height: 32px;" />
         </a>
         <div id="page-title">{{template "page:title" .}}</div>
         <div id="search-bar">
-          <form class="w3-hide-small" method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" style="float: left">
+          <form class="hide-small" method="POST" hx-post="/items/search" hx-target="#page-content" hx-push-url="true" style="float: left">
           <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
           <input type="text" id="search-text" name="SearchText" class="w3-bar-item" placeholder="Search.." />
-          <button type="submit" style="margin-left: 4px;padding: 4px 8px;"><i class="bi bi-search"></i></button>
+          <button type="submit"><i class="bi bi-search"></i></button>
           </form>
-          <button type="button" onclick="bm_toggle_quickbox();" style="margin-left: 4px;padding: 4px 8px; margin-right: 8px;"><i class="bi bi-inbox-fill"></i></button>
+          <button type="button" onclick="bm_toggle_quickbox();"><i class="bi bi-inbox-fill"></i></button>
         </div>
       </div>
     </div>  
@@ -71,9 +71,9 @@
     <div id="quickbox" class="w3-light-gray">
       <div class="w3-bar w3-top w3-metro-dark-blue w3-large noswipe" id="quickbox-top-bar">
         <div class="w3-bar-item" id="quickbox-title-container">
-          <button type="button" class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey"
+          <button type="button" class="w3-bar-item w3-button hide-large w3-hover-none w3-hover-text-light-grey"
             onclick="bm_toggle_sidebar('main-sidebar');" style="padding-left: 4px; padding-right: 10px;">
-            <img class="w3-hide-large" alt="BrainMinder" src="/static/img/brainminder.svg" style="height: 32px;">
+            <img class="hide-large" alt="BrainMinder" src="/static/img/brainminder.svg" style="height: 32px;">
         </button>
           <div id="quickbox-title">
             <div class="w3-left"><h5>Quickbox</h5></div>
diff --git a/assets/templates/categories/create_title.tmpl b/assets/templates/categories/create_title.tmpl
index ddaa641..6a09da9 100644
--- a/assets/templates/categories/create_title.tmpl
+++ b/assets/templates/categories/create_title.tmpl
@@ -2,7 +2,7 @@
 <div class="w3-left">
     <h5>New Category</h5>
 </div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
     <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
 </div>
 {{end}}
diff --git a/assets/templates/categories/form.tmpl b/assets/templates/categories/form.tmpl
index 366a735..8850201 100644
--- a/assets/templates/categories/form.tmpl
+++ b/assets/templates/categories/form.tmpl
@@ -16,7 +16,7 @@
       />
     </p>
 
-  <p class="w3-hide-small w3-container">
+  <p class="hide-small w3-container">
     <button class="w3-btn w3-metro-dark-blue w3-round-large">
       <i class="bi bi-floppy"></i> Save
     </button>
@@ -30,7 +30,7 @@
   </p>
   </div>
   <div class="footerNavbar-container">
-  <div class="w3-bar footerNavbar w3-hide-medium w3-hide-large w3-round-large">
+  <div class="w3-bar footerNavbar hide-medium hide-large w3-round-large">
     <div class="w3-bar-item">
       <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large" title="Save">
         <i class="bi bi-floppy"></i>
diff --git a/assets/templates/categories/list.tmpl b/assets/templates/categories/list.tmpl
index 94ce351..58353cd 100644
--- a/assets/templates/categories/list.tmpl
+++ b/assets/templates/categories/list.tmpl
@@ -31,7 +31,7 @@
   </form>
 </div>
 <div id="categories" class="list" style="overflow-x:auto;">
-  <table class="w3-table-all w3-striped">
+  <table class="table-all w3-striped">
     <thead>
       <tr>
         <th>Name</th>
diff --git a/assets/templates/categories/list_title.tmpl b/assets/templates/categories/list_title.tmpl
index bcc4c56..d5d89ff 100644
--- a/assets/templates/categories/list_title.tmpl
+++ b/assets/templates/categories/list_title.tmpl
@@ -2,7 +2,7 @@
 <div class="w3-left">
     <h5>Categories</h5>
 </div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
     <a
         class="w3-button w3-medium"
         hx-get="/category/create"
diff --git a/assets/templates/categories/update_title.tmpl b/assets/templates/categories/update_title.tmpl
index e2a8264..14546de 100644
--- a/assets/templates/categories/update_title.tmpl
+++ b/assets/templates/categories/update_title.tmpl
@@ -2,7 +2,7 @@
 <div class="w3-left">
     <h5>Edit Category</h5>
 </div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
     <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
 </div>
 {{end}}
diff --git a/assets/templates/full.tmpl b/assets/templates/full.tmpl
index b2eb676..3630293 100644
--- a/assets/templates/full.tmpl
+++ b/assets/templates/full.tmpl
@@ -15,7 +15,7 @@
       end
     }}
   </head>
-  <body class="w3-light-gray">
+  <body>
     <div class="w3-container">
       <div id="page-content">{{template "page:content" .}}</div>
     </div>
diff --git a/assets/templates/items/add_relation.tmpl b/assets/templates/items/add_relation.tmpl
index 7b81eab..36f9315 100644
--- a/assets/templates/items/add_relation.tmpl
+++ b/assets/templates/items/add_relation.tmpl
@@ -11,7 +11,7 @@
     </td>
     <td class="no-label">
       {{ if gt (len .relatedItem.Categories) 0 }}
-        <i class="w3-hide-medium w3-hide-large bi bi-bookmark-star-fill"></i>
+        <i class="hide-medium hide-large bi bi-bookmark-star-fill"></i>
         {{ range (stringToArray .relatedItem.Categories "|")}}
           {{ $category_name := index $.categoriesMap .}}
           <div class="tag" style="padding: 3px">
@@ -22,7 +22,7 @@
     </td>
     <td class="no-label">
       {{ if gt (len .relatedItem.Tags) 0 }}
-        <i class="w3-hide-medium w3-hide-large bi bi-tags-fill"></i>
+        <i class="hide-medium hide-large bi bi-tags-fill"></i>
         {{ range (stringToArray .relatedItem.Tags ",")}}
           <div class="tag" style="padding: 3px">
             {{ . }}
@@ -37,7 +37,7 @@
           class="w3-right w3-btn w3-metro-dark-red w3-round-large"
           href="#"
           _="on click remove #{{$relation_name}}-Row"
-          ><i class="bi bi-link-45deg" title="Remove relation"></i><span class="w3-hide-small"> Remove</span></a
+          ><i class="bi bi-link-45deg" title="Remove relation"></i><span class="hide-small"> Remove</span></a
         >
         </div>
     </td>
diff --git a/assets/templates/items/all_list.tmpl b/assets/templates/items/all_list.tmpl
index 345ac1c..5b4c80f 100644
--- a/assets/templates/items/all_list.tmpl
+++ b/assets/templates/items/all_list.tmpl
@@ -52,7 +52,7 @@
   </div>
 </div>
 <div id="items" class="list">
-  <table class="w3-table-all responsive w3-striped stickyheader">
+  <table class="table-all responsive w3-striped stickyheader">
     <thead>
       <tr>
         <th>Title</th>
diff --git a/assets/templates/items/all_list_rows.tmpl b/assets/templates/items/all_list_rows.tmpl
index 43e6ae6..cd71230 100644
--- a/assets/templates/items/all_list_rows.tmpl
+++ b/assets/templates/items/all_list_rows.tmpl
@@ -14,14 +14,14 @@
     >
     <td class="title no-label">
       <a
-      class="w3-hide-small"
+      class="hide-small"
       href="/item/view/{{.Id}}"
       hx-get="/item/view/{{.Id}}"
       hx-target="#modal-container"
         >{{.Title}}</a
       >
       <a
-      class="w3-hide-medium w3-hide-large"
+      class="hide-medium hide-large"
       href="/item/read/{{.Id}}"
       hx-get="/item/read/{{.Id}}"
       hx-target="#page-content"
@@ -29,10 +29,10 @@
         ><i title="{{.Type_title}}" class="{{.Type_icon}}"></i> {{.Title}}</a
       >
     </td>
-    <td data-label="Type" class="w3-hide-small" nowrap="nowrap"><i class="{{.Type_icon}}"></i> {{.Type_title}}</td>
+    <td data-label="Type" class="hide-small" nowrap="nowrap"><i class="{{.Type_icon}}"></i> {{.Type_title}}</td>
     <td data-label="Categories" class="no-label links-list">
       {{ if gt (len .Categories) 0 }}
-      <i class="w3-hide-medium w3-hide-large bi bi-tags-fill"></i>
+      <i class="hide-medium hide-large bi bi-tags-fill"></i>
       {{ range (stringToArray .Categories "|")}}
         {{ $category_id := index $.categoriesMap .}}
         <a hx-post="/items" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{&quot;category_id&quot; : &quot;{{ . }}&quot;}">{{ $category_id }}</a>
@@ -41,7 +41,7 @@
     </td>
     <td data-label="Tags" class="no-label links-list">
       {{ if gt (len .Tags) 0 }}
-      <i class="w3-hide-medium w3-hide-large bi bi-tags"></i>
+      <i class="hide-medium hide-large bi bi-tags"></i>
       {{ range (stringToArray .Tags ",")}}
       <a hx-post="/items" hx-target="#page-content" 
       hx-push-url="true" href="#" hx-vals="{&quot;Tags&quot; : &quot;{{.}}&quot;}">{{ . }}</a>
diff --git a/assets/templates/items/fields.tmpl b/assets/templates/items/fields.tmpl
index 657c0fb..de278a5 100644
--- a/assets/templates/items/fields.tmpl
+++ b/assets/templates/items/fields.tmpl
@@ -43,8 +43,8 @@
   {{ end }}
   </div>
 
-  <span class="w3-hide" id="fields-{{.Type_field_id}}-counter">{{incr $g_counter }}</span>
-  <button type="button" onclick="bm_item_field_add('{{.Type_field_id}}', '{{.Widget}}')" class="w3-button w3-edit w3-border w3-round-large"><i class='bi bi-plus-square-fill'></i> <span class="w3-hide-small"> Add value</span></button>
+  <span class="hide" id="fields-{{.Type_field_id}}-counter">{{incr $g_counter }}</span>
+  <button type="button" onclick="bm_item_field_add('{{.Type_field_id}}', '{{.Widget}}')" class="w3-button w3-edit w3-border w3-round-large"><i class='bi bi-plus-square-fill'></i> <span class="hide-small"> Add value</span></button>
 </fieldset>
 {{ else }}
   <p>
diff --git a/assets/templates/items/form.tmpl b/assets/templates/items/form.tmpl
index ae037a7..a567d09 100644
--- a/assets/templates/items/form.tmpl
+++ b/assets/templates/items/form.tmpl
@@ -96,7 +96,7 @@
             />
           </div>
           <div class="w3-col l6 m3 s1" style="padding-left: 10px;">  
-            <a class="button w3-metro-blue" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations" hx-get="/items/search-for-relations/{{.item.Id}}"><i class="bi bi-search"></i><span class="w3-hide-small"> Find</span></a>
+            <a class="button w3-metro-blue" hx-vals="js:{SearchText: document.getElementById('search-item-relation').value}" hx-target="#items-list-for-relations" hx-get="/items/search-for-relations/{{.item.Id}}"><i class="bi bi-search"></i><span class="hide-small"> Find</span></a>
             </div>
       </div>
       <div id="items-list-for-relations" style="margin-top:10px">
@@ -104,7 +104,7 @@
      </fieldset>
   </div>
 </div>
-  <p class="w3-hide-small w3-container">
+  <p class="hide-small w3-container">
     <button class="w3-metro-dark-blue">
       <i class="bi bi-floppy"></i> Save
     </button>
@@ -117,7 +117,7 @@
   </p>
 
   <div class="footerNavbar-container">
-  <div class="w3-bar footerNavbar w3-hide-medium w3-hide-large">
+  <div class="w3-bar footerNavbar hide-medium hide-large">
     <div class="w3-bar-item">
     <button type="submit" class="w3-metro-dark-blue" title="Save">
       <i class="bi bi-floppy"></i>
diff --git a/assets/templates/items/list.tmpl b/assets/templates/items/list.tmpl
index 2bbaef1..8d2207a 100644
--- a/assets/templates/items/list.tmpl
+++ b/assets/templates/items/list.tmpl
@@ -52,7 +52,7 @@
   </div>
 </div>
 <div id="items" class="list">
-  <table class="w3-table-all responsive w3-striped stickyheader">
+  <table class="table-all responsive w3-striped stickyheader">
     <thead>
       <tr>
         <th>Title</th>
diff --git a/assets/templates/items/list_for_relations.tmpl b/assets/templates/items/list_for_relations.tmpl
index 377eb1d..1072ae8 100644
--- a/assets/templates/items/list_for_relations.tmpl
+++ b/assets/templates/items/list_for_relations.tmpl
@@ -1,5 +1,5 @@
 {{define "items:list-for-relations"}}
-  <table class="w3-table-all w3-striped responsive">
+  <table class="table-all w3-striped responsive">
     <thead>
       <tr>
         <th>Item</th>
@@ -22,7 +22,7 @@
     </td>
     <td class="no-label">
       {{ if gt (len .Categories) 0 }}
-        <i class="w3-hide-medium w3-hide-large bi bi-tags-fill"></i>
+        <i class="hide-medium hide-large bi bi-tags-fill"></i>
         {{ range (stringToArray .Categories "|")}}
           {{ $category_name := index $.categoriesMap .}}
           <div class="tag" style="padding: 3px">
@@ -33,7 +33,7 @@
     </td>
     <td class="no-label">
       {{ if gt (len .Tags) 0 }}
-        <i class="w3-hide-medium w3-hide-large bi bi-tags"></i>
+        <i class="hide-medium hide-large bi bi-tags"></i>
         {{ range (stringToArray .Tags ",")}}
           <div class="tag" style="padding: 3px">
             {{ . }}
@@ -50,7 +50,7 @@
           hx-get="/item/relation/add/{{.Id}}"
           hx-target="#relations-items"
           hx-swap="beforeend"
-          ><i class="bi bi-link" title="Add relation"></i><span class="w3-hide-small"> Add</span></a
+          ><i class="bi bi-link" title="Add relation"></i><span class="hide-small"> Add</span></a
         >
         </div>
     </td>
diff --git a/assets/templates/items/list_rows.tmpl b/assets/templates/items/list_rows.tmpl
index 01e1a64..dd479bc 100644
--- a/assets/templates/items/list_rows.tmpl
+++ b/assets/templates/items/list_rows.tmpl
@@ -14,14 +14,14 @@
     >
     <td class="title no-label" data-label="Title">
       <a
-      class="w3-hide-small"
+      class="hide-small"
       href="/item/view/{{.Id}}"
       hx-get="/item/view/{{.Id}}"
       hx-target="#modal-container"
         >{{.Title}}</a
       >
       <a
-      class="w3-hide-medium w3-hide-large"
+      class="hide-medium hide-large"
       href="/item/read/{{.Id}}"
       hx-get="/item/read/{{.Id}}"
       hx-target="#page-content"
@@ -31,7 +31,7 @@
     </td>
     <td data-label="Categories" class="no-label links-list">
       {{ if gt (len .Categories) 0 }}
-      <i class="w3-hide-medium w3-hide-large bi bi-tags-fill"></i>
+      <i class="hide-medium hide-large bi bi-tags-fill"></i>
       {{ range (stringToArray .Categories "|")}}
         {{ $category_name := index $.categoriesMap .}}
         <a hx-post="/items/type/{{$.type.Id}}" hx-target="#page-content" hx-push-url="true" href="#" hx-vals="{&quot;category_id&quot; : &quot;{{ . }}&quot;}">{{ $category_name }}</a>
@@ -40,7 +40,7 @@
     </td>
     <td data-label="Tags" class="no-label links-list">
       {{ if gt (len .Tags) 0 }}
-      <i class="w3-hide-medium w3-hide-large bi bi-tags"></i>
+      <i class="hide-medium hide-large bi bi-tags"></i>
       {{ range (stringToArray .Tags ",")}}
       <a hx-post="/items/type/{{$.type.Id}}" hx-target="#page-content" 
       hx-push-url="true" href="#" hx-vals="{&quot;Tags&quot; : &quot;{{.}}&quot;}">{{ . }}</a>
@@ -52,7 +52,7 @@
     <td class="no-label" data-label="{{.Title}}">
       {{ $values_str := renderFieldValues (index $fieldsValuesMap .Type_field_id) .Widget }}
       {{ if gt (len $values_str) 0 }}
-      <span class="field-label w3-hide-medium w3-hide-large">{{.Title}} : </span>{{ $values_str }}
+      <span class="field-label hide-medium hide-large">{{.Title}} : </span>{{ $values_str }}
       {{ end }}
     </td>
     {{end}}
diff --git a/assets/templates/items/list_title.tmpl b/assets/templates/items/list_title.tmpl
index 5f511f4..4fc4406 100644
--- a/assets/templates/items/list_title.tmpl
+++ b/assets/templates/items/list_title.tmpl
@@ -2,7 +2,7 @@
     <div class="w3-left">
         <h5>{{.type.Title}} Items</h5>
     </div>
-    <div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+    <div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
         <a
         class="w3-button w3-medium w3-round-large"
         href="#"
diff --git a/assets/templates/items/read.tmpl b/assets/templates/items/read.tmpl
index 48779ab..4a34083 100644
--- a/assets/templates/items/read.tmpl
+++ b/assets/templates/items/read.tmpl
@@ -23,8 +23,8 @@
     <div class="w3-row">
       <div class="w3-half">
         {{if gt (len .item.Categories) 0 }}
-        <i class="w3-hide-medium w3-hide-large bi bi-tags-fill"></i>
-        <strong class="w3-hide-small">Categories</strong> 
+        <i class="hide-medium hide-large bi bi-tags-fill"></i>
+        <strong class="hide-small">Categories</strong>
         {{ range (stringToArray .item.Categories "|")}}
         {{ $category_name := index $.categoriesMap .}}
         <div class="tag" style="padding: 3px">
@@ -42,8 +42,8 @@
       </div>
       <div class="w3-half">
         {{if gt (len .item.Tags) 0 }}
-        <i class="w3-hide-medium w3-hide-large bi bi-tags"></i>
-        <strong class="w3-hide-small">Tags</strong> {{ range (stringToArray .item.Tags ",")}}
+        <i class="hide-medium hide-large bi bi-tags"></i>
+        <strong class="hide-small">Tags</strong> {{ range (stringToArray .item.Tags ",")}}
         <div class="tag" style="padding: 3px">
         <a
           hx-post="/items"
@@ -60,7 +60,7 @@
     </div>
 
     <a
-      class="w3-btn w3-metro-dark-blue w3-round-large w3-hide-small"
+      class="w3-btn w3-metro-dark-blue w3-round-large hide-small"
       hx-get="/item/update/{{.item.Id}}"
       hx-push-url="true"
       hx-target="#page-content"
@@ -68,7 +68,7 @@
       ><i class="bi bi-pencil"></i> Edit</a
     >
     <a
-    class="w3-btn w3-metro-blue w3-round-large  w3-hide-small"
+    class="w3-btn w3-metro-blue w3-round-large  hide-small"
     href="#"
     hx-target="#modal-container"
     hx-get="/item/share/{{.item.Id}}"
@@ -77,7 +77,7 @@
   </div>
 </div>
 <div class="footerNavbar-container">
-<div class="w3-bar footerNavbar w3-hide-medium w3-hide-large w3-round-large">
+<div class="w3-bar footerNavbar hide-medium hide-large w3-round-large">
   <div class="w3-bar-item">
   <a
   class="w3-btn w3-metro-dark-blue "
diff --git a/assets/templates/items/read_title.tmpl b/assets/templates/items/read_title.tmpl
index a49d8b0..ff6c084 100644
--- a/assets/templates/items/read_title.tmpl
+++ b/assets/templates/items/read_title.tmpl
@@ -2,7 +2,7 @@
 <div class="w3-left">
     <h5>{{ .item.Type_title }}</h5>
 </div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
     <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
 </div>
 {{end}}
diff --git a/assets/templates/items/relations.tmpl b/assets/templates/items/relations.tmpl
index b1d6a86..914fd85 100644
--- a/assets/templates/items/relations.tmpl
+++ b/assets/templates/items/relations.tmpl
@@ -1,5 +1,5 @@
 {{define "item:relations"}}
-<table class="w3-table-all w3-striped responsive">
+<table class="table-all w3-striped responsive">
   <thead>
     <tr>
       <th>Item</th>
@@ -40,7 +40,7 @@
     </td>
     <td class="no-label {{$relation_name}}-Col">
       {{ if gt (len .Categories) 0 }}
-        <i class="w3-hide-medium w3-hide-large bi bi-tags-fill"></i>
+        <i class="hide-medium hide-large bi bi-tags-fill"></i>
         {{ range (stringToArray .Categories "|")}}
           {{ $category_name := index $.categoriesMap .}}
           <div class="tag" style="padding: 3px">class="w3-button w3-round-large w3-hover-metro-dark-blue w3-medium"
@@ -51,7 +51,7 @@
     </td>
     <td class="no-label {{$relation_name}}-Col">
       {{ if gt (len .Tags) 0 }}
-        <i class="w3-hide-medium w3-hide-large bi bi-tags"></i>
+        <i class="hide-medium hide-large bi bi-tags"></i>
         {{ range (stringToArray .Tags ",")}}
           <div class="tag" style="padding: 3px">
             {{ . }}
@@ -68,7 +68,7 @@
           type="button"
           _="on click set {value: '1'} on #{{$relation_name_remove}} then hide me then show #Undelete-{{$relation_name}} then add .w3-opacity-max to .{{$relation_name}}-Col"
         >
-          <i class="bi bi-x-square" title="Remove"></i><span class="w3-hide-small"> Remove</span>
+          <i class="bi bi-x-square" title="Remove"></i><span class="hide-small"> Remove</span>
         </button>
         <button
           id="Undelete-{{$relation_name}}"
@@ -77,7 +77,7 @@
           type="button"
           _="on click set {value: ''} on #{{$relation_name_remove}} then hide me then show #Delete-{{$relation_name}} then remove .w3-opacity-max from .{{$relation_name}}-Col"
         >
-          <i class="bi bi-arrow-counterclockwise" title="Undo"></i><span class="w3-hide-small"> Undo</span>
+          <i class="bi bi-arrow-counterclockwise" title="Undo"></i><span class="hide-small"> Undo</span>
         </button>
       </div>    
     </td>
diff --git a/assets/templates/notebooks/create_title.tmpl b/assets/templates/notebooks/create_title.tmpl
index 7379908..917b41a 100644
--- a/assets/templates/notebooks/create_title.tmpl
+++ b/assets/templates/notebooks/create_title.tmpl
@@ -2,7 +2,7 @@
 <div class="w3-left">
     <h5>New Notebook</h5>
 </div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
     <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
 </div>
 {{end}}
diff --git a/assets/templates/notebooks/form.tmpl b/assets/templates/notebooks/form.tmpl
index 88ecff3..6598ac7 100644
--- a/assets/templates/notebooks/form.tmpl
+++ b/assets/templates/notebooks/form.tmpl
@@ -40,7 +40,7 @@
     >
   </p>
 
-  <p class="w3-hide-small w3-container">
+  <p class="hide-small w3-container">
     <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large">
       <i class="bi bi-floppy" title="Save"></i> Save
     </button>
@@ -53,7 +53,7 @@
   </p>
   </div>
   <div class="footerNavbar-container">
-  <div class="w3-bar footerNavbar w3-hide-medium w3-hide-large w3-round-large">
+  <div class="w3-bar footerNavbar hide-medium hide-large w3-round-large">
     <div class="w3-bar-item">
     <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large" title="Save">
       <i class="bi bi-floppy"></i>
diff --git a/assets/templates/notebooks/list.tmpl b/assets/templates/notebooks/list.tmpl
index 2344d62..6fedf65 100644
--- a/assets/templates/notebooks/list.tmpl
+++ b/assets/templates/notebooks/list.tmpl
@@ -31,7 +31,7 @@
   </form>
 </div>
 <div id="notebooks" style="overflow-x:auto;">
-  <table class="w3-table-all w3-striped">
+  <table class="table-all w3-striped">
     <thead>
       <tr>
         <th>Title</th>
diff --git a/assets/templates/notebooks/list_title.tmpl b/assets/templates/notebooks/list_title.tmpl
index 6a5be5e..00b1e09 100644
--- a/assets/templates/notebooks/list_title.tmpl
+++ b/assets/templates/notebooks/list_title.tmpl
@@ -2,7 +2,7 @@
 <div class="w3-left">
     <h5>Notebooks</h5>
 </div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
     <a
         class="w3-button w3-medium"
         hx-get="/notebook/create"
diff --git a/assets/templates/notebooks/update_title.tmpl b/assets/templates/notebooks/update_title.tmpl
index 2343a0b..506221d 100644
--- a/assets/templates/notebooks/update_title.tmpl
+++ b/assets/templates/notebooks/update_title.tmpl
@@ -2,7 +2,7 @@
 <div class="w3-left">
     <h5>Edit Notebook</h5>
 </div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
     <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
 </div>
 {{end}}
diff --git a/assets/templates/pages/home_items.tmpl b/assets/templates/pages/home_items.tmpl
index 88bbde0..9d2ccc8 100644
--- a/assets/templates/pages/home_items.tmpl
+++ b/assets/templates/pages/home_items.tmpl
@@ -16,8 +16,8 @@
       <div class="w3-row">
         <div class="w3-col l11 m11 s11">
           <h5>
-            <a class="w3-hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#modal-container"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
-            <a class="w3-hide-medium w3-hide-large" href="/item/read/{{.Id}}" hx-get="/item/read/{{.Id}}" hx-target="#page-content" hx-push-url="true"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
+            <a class="hide-small" href="/item/view/{{.Id}}" hx-get="/item/view/{{.Id}}" hx-target="#modal-container"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
+            <a class="hide-medium hide-large" href="/item/read/{{.Id}}" hx-get="/item/read/{{.Id}}" hx-target="#page-content" hx-push-url="true"><i class="{{.Type_icon}}" title="{{.Type_title}}"></i> {{.Title}}</a>
           </h5>
           <div class="home-card-summary">{{.Summary | markdownfy | safeHTML}}</div>
         </div>
diff --git a/assets/templates/pages/home_title.tmpl b/assets/templates/pages/home_title.tmpl
index e26fd47..b8e5604 100644
--- a/assets/templates/pages/home_title.tmpl
+++ b/assets/templates/pages/home_title.tmpl
@@ -2,7 +2,7 @@
 <div class="w3-left">
     <h5>Dashboard</h5>
 </div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
     <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
 </div>
 {{ end }}
diff --git a/assets/templates/partials/sidebar.tmpl b/assets/templates/partials/sidebar.tmpl
index 7d7afc0..85ac623 100644
--- a/assets/templates/partials/sidebar.tmpl
+++ b/assets/templates/partials/sidebar.tmpl
@@ -1,14 +1,14 @@
 {{define "partial:sidebar"}}
 <!-- Sidebar/menu -->
-<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" id="main-sidebar">
+<nav id="main-sidebar">
 <div id="app-title">
-  <a class="w3-hide-large" href="#" onclick="bm_toggle_sidebar('main-sidebar'); return false;">
-    <img src="/static/img/brainminder.svg" style="height: 32px; padding-right: 10px;" />
-    <span style="font-weight: bold;">B</span>rain<span style="font-weight: bold;">M</span>inder
+  <a class="hide-large" href="#" onclick="bm_toggle_sidebar('main-sidebar'); return false;">
+    <img src="/static/img/brainminder.svg" alt="BrainMinder" />
+    <span>BrainMinder</span>
   </a>
-  <a class="w3-hide-small w3-hide-medium" href="/" hx-get="/" hx-push-url="true" hx-target="#page-content">
-    <img src="/static/img/brainminder.svg" style="height: 32px; padding-right: 10px;" />
-    <span style="font-weight: bold;">B</span>rain<span style="font-weight: bold;">M</span>inder
+  <a class="hide-small hide-medium" href="/" hx-get="/" hx-push-url="true" hx-target="#page-content">
+    <img src="/static/img/brainminder.svg" alt="BrainMinder" />
+    <span>BrainMinder</span>
   </a>
 </div>
 
@@ -28,13 +28,13 @@
 </div>
 
   <div class="sidebar-block">
-    <h5 class="w3-text-metro-dark-blue">
+    <h5>
       <a hx-get="/" hx-target="#page-content" hx-push-url="true" href="/" hx-on:click="bm_sidebar_click('main-sidebar')"><i class="bi bi-speedometer"></i> Dashboard</a>
     </h5>
   </div>
 
   <div class="sidebar-block">
-    <h5 class="w3-text-metro-dark-blue">
+    <h5>
       <i class="bi bi-journals"></i> Notebook
     </h5>
     <form method="POST" action="/" hx-post="/" hx-push-url="true" hx-target="#page-content">
@@ -44,7 +44,7 @@
   </div>
 
   <div class="sidebar-block">
-    <h5 class="w3-text-metro-dark-blue accordion" onclick="bm_toggle_visibility('types_menu')">
+    <h5 class="accordion" onclick="bm_toggle_visibility('types_menu')">
       <i class="bi bi-list-task"></i> Items <i class='w3-right bi bi-chevron-down types_menu'></i><i class='w3-right bi bi-chevron-up hidden types_menu'></i>
     </h5>
   </div>
@@ -53,7 +53,7 @@
     {{template "partial:types-list" . }}
     <div class="menu-item">
     <div class="menu-item-title">
-      <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/items" hx-target="#page-content" hx-push-url="true" href="/items" hx-on:click="bm_sidebar_click('main-sidebar')">
+      <a class="button" hx-get="/items" hx-target="#page-content" hx-push-url="true" href="/items" hx-on:click="bm_sidebar_click('main-sidebar')">
       <i class="bi bi-list-task"></i> <strong>All</strong>
       </a>
     </div>
@@ -61,27 +61,25 @@
   </div>
   
   <div class="sidebar-block">
-    <h5 class="w3-text-metro-dark-blue accordion" onclick="bm_toggle_visibility('settings_menu')">
+    <h5 class="accordion" onclick="bm_toggle_visibility('settings_menu')">
       <i class="bi bi-gear-fill"></i> Settings <i class='w3-right bi bi-chevron-down settings_menu'></i><i class='w3-right bi bi-chevron-up hidden settings_menu'></i>
     </h5>
   </div>
 
   <div id="settings_menu" class="sidebar-block sidebar-menu hidden">
-    <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/notebooks" hx-target="#page-content" hx-push-url="true" href="/notebooks" hx-on:click="bm_sidebar_click('main-sidebar')">
+    <a class="button" hx-get="/notebooks" hx-target="#page-content" hx-push-url="true" href="/notebooks" hx-on:click="bm_sidebar_click('main-sidebar')">
       <i class="bi bi-journals"></i> Notebooks
     </a>
-    <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/categories" hx-target="#page-content" hx-push-url="true" href="/categories" hx-on:click="bm_sidebar_click('main-sidebar')">
+    <a class="button" hx-get="/categories" hx-target="#page-content" hx-push-url="true" href="/categories" hx-on:click="bm_sidebar_click('main-sidebar')">
       <i class="bi bi-bookmarks"></i> Categories
     </a>
-    <a class="button w3-hover-metro-dark-blue w3-hover-round-large" hx-get="/types" hx-target="#page-content" hx-push-url="true" href="/types" hx-on:click="bm_sidebar_click('main-sidebar')">
+    <a class="button" hx-get="/types" hx-target="#page-content" hx-push-url="true" href="/types" hx-on:click="bm_sidebar_click('main-sidebar')">
       <i class="bi bi-boxes"></i> Types
     </a>
   </div>
 
   <div class="sidebar-block">
-    <h5 class="w3-text-metro-dark-blue">
-    <a href="/logout"><i class="bi bi-box-arrow-left"></i></i> Logout</a>
-    </h5>
+    <h5><a href="/logout"><i class="bi bi-box-arrow-left"></i></i> Logout</a></h5>
   </div>
 </div>
 </nav>
diff --git a/assets/templates/quickbox/transform.tmpl b/assets/templates/quickbox/transform.tmpl
index fb78fbd..b1cbd69 100644
--- a/assets/templates/quickbox/transform.tmpl
+++ b/assets/templates/quickbox/transform.tmpl
@@ -71,7 +71,7 @@
           <span class="slider round"></span> </label
         ><span class="label-checkbox">Keep in Quickbox</span>
       </p>
-      <p class="w3-hide-small w3-container" style="text-align: center;">
+      <p class="hide-small w3-container" style="text-align: center;">
           <button
             type="submit"
             class="w3-btn w3-metro-dark-blue w3-round-large"
@@ -88,7 +88,7 @@
       </p>
       </div>
       <div class="footerNavbar-container" style="padding-left:8px;">
-        <div class="w3-bar footerNavbar w3-hide-medium w3-hide-large w3-round-large">
+        <div class="w3-bar footerNavbar hide-medium hide-large w3-round-large">
           <div class="w3-bar-item">
             <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large">
               <i class="bi bi-arrow-up-left-circle-fill" title="Transform"></i>
diff --git a/assets/templates/types/create_title.tmpl b/assets/templates/types/create_title.tmpl
index 25f33b8..6264152 100644
--- a/assets/templates/types/create_title.tmpl
+++ b/assets/templates/types/create_title.tmpl
@@ -2,7 +2,7 @@
 <div class="w3-left">
     <h5>New Type</h5>
 </div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
     <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
 </div>
 {{end}}
diff --git a/assets/templates/types/field_new.tmpl b/assets/templates/types/field_new.tmpl
index 5f7e752..45c590d 100644
--- a/assets/templates/types/field_new.tmpl
+++ b/assets/templates/types/field_new.tmpl
@@ -85,7 +85,7 @@
       _="on click remove #field-new-{{.counter}}"
       class="w3-right w3-btn w3-metro-dark-red w3-round-large"
     >
-      <i class="bi bi-file-minus" title="Remove"></i><span class="w3-hide-small"> Remove</span>
+      <i class="bi bi-file-minus" title="Remove"></i><span class="hide-small"> Remove</span>
     </button>
   </div>
 </div>
diff --git a/assets/templates/types/fields.tmpl b/assets/templates/types/fields.tmpl
index 8b61d17..e7d8ccb 100644
--- a/assets/templates/types/fields.tmpl
+++ b/assets/templates/types/fields.tmpl
@@ -96,7 +96,7 @@
       type="button"
       _="on click set {value: '1'} on #Fields-{{.Type_field_id}}-ToRemove then hide me then show #Undelete-{{.Type_field_id}} then add .w3-opacity-max to #Field-{{.Type_field_id}}"
     >
-      <i class="bi bi-file-minus" title="Remove"></i><span class="w3-hide-small"> Remove</span>
+      <i class="bi bi-file-minus" title="Remove"></i><span class="hide-small"> Remove</span>
     </button>
     <button
       id="Undelete-{{.Type_field_id}}"
@@ -104,7 +104,7 @@
       class="w3-right w3-btn w3-metro-blue w3-round-large"
       type="button"
       _="on click set {value: ''} on #Fields-{{.Type_field_id}}-ToRemove then hide me then show #Delete-{{.Type_field_id}} then remove .w3-opacity-max from #Field-{{.Type_field_id}}">
-      <i class="bi bi-arrow-counterclockwise" title="Undo"></i><span class="w3-hide-small"> Undo</span>
+      <i class="bi bi-arrow-counterclockwise" title="Undo"></i><span class="hide-small"> Undo</span>
     </button>
   </div>
 </div>
diff --git a/assets/templates/types/form.tmpl b/assets/templates/types/form.tmpl
index 7c80cf7..8d9769f 100644
--- a/assets/templates/types/form.tmpl
+++ b/assets/templates/types/form.tmpl
@@ -110,12 +110,12 @@
           hx-swap="beforeend"
           href="#"
           hx-vals="js:{counter: document.getElementById(&quot;fields-list&quot;).childElementCount + 1}"
-          ><i class="bi bi-file-plus" title="Add field"></i><span class="w3-hide-small"> Add field</span></a
+          ><i class="bi bi-file-plus" title="Add field"></i><span class="hide-small"> Add field</span></a
         >
       </div>
   </div>
 
-  <p class="w3-hide-small w3-container">
+  <p class="hide-small w3-container">
       <button class="w3-btn w3-metro-dark-blue w3-round-large">
         <i class="bi bi-floppy" title="Save"></i> Save
       </button>
@@ -128,7 +128,7 @@
   </p>
 </div>
 <div class="footerNavbar-container">
-  <div class="w3-bar footerNavbar w3-hide-medium w3-hide-large w3-round-large">
+  <div class="w3-bar footerNavbar hide-medium hide-large w3-round-large">
     <div class="w3-bar-item">
     <button type="submit" class="w3-btn w3-metro-dark-blue w3-round-large" title="Save">
       <i class="bi bi-floppy"></i>
diff --git a/assets/templates/types/list.tmpl b/assets/templates/types/list.tmpl
index c385817..bafc4d5 100644
--- a/assets/templates/types/list.tmpl
+++ b/assets/templates/types/list.tmpl
@@ -31,7 +31,7 @@
   </form>
 </div>
 <div id="types" class="list" style="overflow-x:auto;">
-  <table class="w3-table-all w3-striped">
+  <table class="table-all w3-striped">
     <thead>
       <tr>
         <th>Title</th>
diff --git a/assets/templates/types/list_title.tmpl b/assets/templates/types/list_title.tmpl
index c5c2e98..c618db2 100644
--- a/assets/templates/types/list_title.tmpl
+++ b/assets/templates/types/list_title.tmpl
@@ -2,7 +2,7 @@
 <div class="w3-left">
     <h5>Types</h5>
 </div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
     <a
         class="w3-button w3-medium"
         hx-get="/type/create"
diff --git a/assets/templates/types/update_title.tmpl b/assets/templates/types/update_title.tmpl
index c4c9786..e885ec4 100644
--- a/assets/templates/types/update_title.tmpl
+++ b/assets/templates/types/update_title.tmpl
@@ -2,7 +2,7 @@
 <div class="w3-left">
     <h5>Edit Type</h5>
 </div>
-<div class="w3-right w3-hide-medium w3-hide-large" style="margin-top: 6px; margin-right: 6px;">
+<div class="w3-right hide-medium hide-large" style="margin-top: 6px; margin-right: 6px;">
     <a href="#" onclick="bm_toggle_quickbox(); return false;" class="w3-button w3-medium w3-round-large"><i class='bi bi-inbox-fill'></i></a>
 </div>