diff --git a/www/custom.css b/www/custom.css
new file mode 100644
index 0000000..95b9b8d
--- /dev/null
+++ b/www/custom.css
@@ -0,0 +1,364 @@
+:root {
+  --color-primary:          #145369;
+  --color-primary-hover:    #1b6d89;
+  --color-primary-dark:     #123d3f;
+  --color-primary-darker:   #185153;
+
+  --color-secondary:        #71bdc1;
+  --color-secondary-hover:  #4eacb2;
+  --color-secondary-dark:   #267f82;
+
+  --color-navbar-bg:        #e5e9e7;
+  --color-navbar-active:    #c2cbc7;
+  --color-navbar-text:      #333333;
+  --color-navbar-brand:     #000000;
+
+  --color-panel-heading-bg:   #e5e9e7;
+  --color-panel-heading-text: #4C5773;
+
+  --color-btn-modern-bg:       #ffffff;
+  --color-btn-modern-hover-bg: #92BFC0;
+  --color-btn-modern-text:     #000000;
+}
+a {
+  color: var(--color-primary);
+}
+
+.text-primary {
+  color: var(--color-primary);
+}
+
+a.text-primary:hover,
+a.text-primary:focus {
+  color: var(--color-primary-hover);
+}
+
+.bg-primary {
+  background-color: var(--color-primary);
+}
+
+a.bg-primary:hover,
+a.bg-primary:focus {
+  background-color: var(--color-primary-hover);
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary-dark);
+}
+
+.btn-primary:focus,
+.btn-primary.focus,
+.btn-primary:hover {
+  background-color: var(--color-primary-hover);
+  border-color: var(--color-primary-dark);
+}
+
+.btn-primary:active,
+.btn-primary.active,
+.open > .dropdown-toggle.btn-primary {
+  background-color: var(--color-primary-hover);
+  border-color: var(--color-primary-dark);
+}
+
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled.focus,
+.btn-primary[disabled].focus,
+fieldset[disabled] .btn-primary.focus {
+  background-color: var(--color-primary);
+}
+
+.btn-primary .badge {
+  color: var(--color-primary);
+}
+
+.btn-link {
+  color: var(--color-primary);
+}
+
+.btn-primary .icon {
+  filter: brightness(0) invert(1);
+}
+
+html[theme="default"] .btn-primary:active {
+  background-image: radial-gradient(circle, var(--color-primary-darker) 10%, var(--color-primary) 11%);
+}
+
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  background-color: var(--color-primary);
+}
+
+.nav .open > a,
+.nav .open > a:hover,
+.nav .open > a:focus {
+  border-color: var(--color-primary);
+}
+
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+  background-color: var(--color-primary);
+}
+
+.navbar-inverse {
+  background-color: var(--color-navbar-bg);
+  border-color: var(--color-primary-hover);
+}
+
+.navbar-inverse .navbar-brand {
+  color: var(--color-navbar-brand);
+}
+
+.navbar-brand #title,
+.navbar-brand .icon {
+  color: var(--color-primary);
+}
+
+.navbar-inverse .navbar-nav > li > a {
+  color: var(--color-navbar-text);
+}
+
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .active > a:hover,
+.navbar-inverse .navbar-nav > .active > a:focus {
+  background-color: var(--color-navbar-active);
+}
+
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .open > a:hover,
+.navbar-inverse .navbar-nav > .open > a:focus {
+  background-color: var(--color-primary-hover);
+}
+
+.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
+  border-color: var(--color-primary-hover);
+}
+
+.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
+  background-color: var(--color-primary-hover);
+}
+
+.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
+  color: var(--color-secondary-dark);
+}
+
+.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
+.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
+.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
+  background-color: var(--color-primary-hover);
+}
+
+.navbar-inverse .navbar-link {
+  color: var(--color-secondary-dark);
+}
+
+.navbar-inverse .btn-link {
+  color: var(--color-secondary-dark);
+}
+
+.navbar-inverse .close {
+  color: var(--color-secondary-dark);
+}
+
+.navbar-inverse .active .close,
+.navbar-inverse .active .close:hover,
+.navbar-inverse .active .close:focus {
+  background-color: var(--color-navbar-active);
+}
+
+
+.pagination > li > a,
+.pagination > li > span {
+  color: var(--color-primary);
+}
+
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.pagination > .active > a:focus,
+.pagination > .active > span:focus {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.label-primary {
+  background-color: var(--color-primary);
+}
+
+.label-primary[href]:hover,
+.label-primary[href]:focus {
+  background-color: var(--color-primary-hover);
+}
+
+.list-group-item.active > .badge,
+.nav-pills > .active > a > .badge {
+  color: var(--color-primary);
+}
+
+.progress-bar {
+  background-color: var(--color-primary);
+}
+
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+a.thumbnail:hover,
+a.thumbnail:focus,
+a.thumbnail.active {
+  border-color: var(--color-primary);
+}
+
+.panel-default > .panel-heading {
+  color: var(--color-panel-heading-text);
+  background-color: var(--color-panel-heading-bg);
+}
+
+.panel-default > .panel-heading .badge {
+  color: var(--color-primary);
+}
+
+.panel-primary {
+  border-color: var(--color-primary);
+}
+
+.panel-primary > .panel-heading {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.panel-primary > .panel-heading + .panel-collapse > .panel-body {
+  border-top-color: var(--color-primary);
+}
+
+.panel-primary > .panel-heading .badge {
+  color: var(--color-primary);
+}
+
+.panel-primary > .panel-footer + .panel-collapse > .panel-body {
+  border-bottom-color: var(--color-primary);
+}
+
+.modal-header {
+  background-color: var(--color-primary);
+}
+
+html[theme="default"] textarea:focus,
+html[theme="default"] textarea.form-control:focus,
+html[theme="default"] input.form-control:focus,
+html[theme="default"] input[type=text]:focus,
+html[theme="default"] input[type=password]:focus,
+html[theme="default"] input[type=email]:focus,
+html[theme="default"] input[type=number]:focus,
+html[theme="default"] [type=text].form-control:focus,
+html[theme="default"] [type=password].form-control:focus,
+html[theme="default"] [type=email].form-control:focus,
+html[theme="default"] [type=tel].form-control:focus,
+html[theme="default"] [contenteditable].form-control:focus {
+  -webkit-box-shadow: inset 0 -2px 0 var(--color-primary);
+  box-shadow: inset 0 -2px 0 var(--color-primary);
+}
+
+html[theme="default"] select:focus,
+html[theme="default"] select.form-control:focus {
+  -webkit-box-shadow: inset 0 -2px 0 var(--color-primary);
+  box-shadow: inset 0 -2px 0 var(--color-primary);
+}
+
+html[theme="default"] input[type="radio"]:before,
+html[theme="default"] .radio input[type="radio"]:before,
+html[theme="default"] .radio-inline input[type="radio"]:before {
+  background-color: var(--color-primary);
+}
+
+html[theme="default"] input[type="radio"]:checked:after,
+html[theme="default"] .radio input[type="radio"]:checked:after,
+html[theme="default"] .radio-inline input[type="radio"]:checked:after {
+  border-color: var(--color-primary);
+}
+
+html[theme="default"] input[type="checkbox"]:focus:before,
+html[theme="default"] .checkbox input[type="checkbox"]:focus:before,
+html[theme="default"] .checkbox-inline input[type="checkbox"]:focus:before {
+  border-color: var(--color-primary);
+}
+
+html[theme="default"] input[type="checkbox"]:checked:before,
+html[theme="default"] .checkbox input[type="checkbox"]:checked:before,
+html[theme="default"] .checkbox-inline input[type="checkbox"]:checked:before,
+html[theme="default"] input[type="checkbox"]:indeterminate:before,
+html[theme="default"] .checkbox input[type="checkbox"]:indeterminate:before,
+html[theme="default"] .checkbox-inline input[type="checkbox"]:indeterminate:before {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+html[theme="default"] .nav-tabs > li > a:hover,
+html[theme="default"] .nav-tabs > li > a:focus:hover {
+  -webkit-box-shadow: inset 0 -2px 0 var(--color-primary);
+  box-shadow: inset 0 -2px 0 var(--color-primary);
+  color: var(--color-primary);
+}
+
+html[theme="default"] .nav-tabs > li.active > a,
+html[theme="default"] .nav-tabs > li.active > a:focus {
+  -webkit-box-shadow: inset 0 -2px 0 var(--color-primary);
+  box-shadow: inset 0 -2px 0 var(--color-primary);
+  color: var(--color-primary);
+}
+
+html[theme="default"] .nav-tabs > li.active > a:hover,
+html[theme="default"] .nav-tabs > li.active > a:focus:hover {
+  color: var(--color-primary);
+}
+
+
+.form-link.btn.btn-link > img.icon {
+  width: 48px !important;
+  height: 48px !important;
+  margin-right: 4px;
+  vertical-align: middle;
+  filter: none !important;
+}
+
+.form-link.btn.btn-link svg {
+  fill: initial !important;
+  color: initial !important;
+  filter: none !important;
+}
+
+
+.btn-modern {
+  background-color: var(--color-btn-modern-bg);
+  color: var(--color-btn-modern-text);
+  border: none;
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease-in-out;
+  text-transform: uppercase;
+}
+
+.btn-modern:hover {
+  background-color: var(--color-btn-modern-hover-bg);
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.btn-modern:active {
+  transform: translateY(1px);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
+}