diff --git a/compose.override.yml b/compose.override.yml
index 59c80ecc..64afa618 100644
--- a/compose.override.yml
+++ b/compose.override.yml
@@ -93,7 +93,7 @@ x-shared:
       - ${NEODB_DATA:-../data}/takahe-cache:/www/cache
       - ${NEODB_DATA:-../data}/www-root:/www/root
       - ./custom/edition.custom.html:/neodb/catalog/templates/edition.html
-      - ./custom/_header.scss:/neodb/common/static/scss/_header.scss
+      - ./custom/common_libs.custom.html:/neodb/common/templates/common_libs.html
     depends_on:
       - redis
       - neodb-db
diff --git a/custom/_header.scss b/custom/_header.scss
deleted file mode 100644
index c2d76549..00000000
--- a/custom/_header.scss
+++ /dev/null
@@ -1,191 +0,0 @@
-body {
-  &>header.container-fluid {
-    padding: 0px;
-
-    &>nav {
-      ul.nav-logo {
-        margin-left: var(--pico-nav-link-spacing-horizontal);
-      }
-
-      .nav-search form {
-        margin-bottom: 0px;
-      }
-
-      details.dropdown summary:not([role]) {
-        border-color: transparent;
-        background-color: transparent;
-      }
-
-      ul {
-        min-width: -webkit-max-content;
-        min-width: -moz-max-content;
-      }
-
-      .nav-links a {
-        color: var(--pico-secondary);
-      }
-
-      font-weight: bold;
-
-      .nav-search,
-      .nav-search li {
-        width: 100%;
-      }
-
-      .nav-search select {
-        max-width: max-content;
-      }
-
-      .nav-search input[type="submit"] {
-        background-color: var(--pico-primary-background);
-        border-color: var(--pico-primary-background);
-        padding-left: calc(var(--pico-nav-link-spacing-horizontal)*2);
-        padding-right: calc(var(--pico-nav-link-spacing-horizontal)*2);
-      }
-
-      .nav-logo img {
-        max-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 - var(--pico-nav-link-spacing-horizontal) * 2);
-      }
-/*
-/*      /* Dark color scheme (Auto) */
-/*      /* Automatically enabled if user has Dark mode enabled */
-/*      @media only screen and (prefers-color-scheme: dark) {
-/*        .nav-logo img {
-/*          filter: brightness(100%) grayscale(100%) invert(20%);
-/*        }
-/*      }
-/*
-/*    /* Dark color scheme (Forced) */
-/*    /* Enabled if forced with data-theme="dark" */
-/*      .nav-logo img [data-theme="dark"] {
-/*        filter: brightness(100%) grayscale(100%) invert(20%);
-/*     }
-*/
-
-      .unhide {
-        display: unset !important;
-      }
-
-      .nav-dropdown summary {
-        padding-top: 0px !important;
-        padding-bottom: 0px !important;
-      }
-
-      .nav-dropdown summary::after {
-        height: calc(1rem * var(--pico-line-height, 1.5) + 8px) !important;
-      }
-
-      .nav-dropdown {
-        margin-right: 0rem !important;
-
-        // this fixes positioning in iOS 14 and lower but will break in other browsers and iOS 15+
-        // details.dropdown {
-        //   display: block !important;
-        // }
-
-        ul li a {
-          padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal) !important
-        }
-      }
-
-      .avatar {
-        display: inline;
-
-        img {
-          height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 - var(--pico-border-width) * 2);
-          width: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2 - var(--pico-border-width) * 2);
-        }
-      }
-    }
-  }
-
-  //pack for small phones like iPhone 5s
-  @media (max-width: 320px) {
-    .nav-dropdown {
-      li {
-        padding-left: 0;
-        padding-right: 0;
-
-        summary {
-          padding: 0 !important;
-        }
-
-        details.dropdown summary::after {
-          width: 0;
-        }
-      }
-    }
-  }
-
-  @media (max-width: 768px) {
-    body>header {
-      position: sticky;
-      top: 0px;
-      background: var(--pico-background-color);
-      z-index: 999;
-      box-shadow: var(--pico-box-shadow);
-    }
-
-    nav {
-      display: flex;
-      flex-flow: row wrap;
-    }
-
-    .nav-search {
-      order: 999;
-      display: none;
-      min-width: unset !important;
-      li {
-        padding: 0px;
-        padding-bottom: 4px;
-        select {
-          max-width: 6em !important;
-        }
-        input[type="submit"] {
-          padding-left: calc(var(--pico-nav-link-spacing-horizontal)*1);
-          padding-right: calc(var(--pico-nav-link-spacing-horizontal)*1);
-        }
-      }
-    }
-
-    .nav-links li.small-only {
-      a {
-        color: var(--pico-secondary);
-      }
-    }
-    .nav-dropdown {
-      li {
-        padding-left: 0;
-        padding-right: 0;
-
-        summary {
-          padding: 0 !important;
-        }
-      }
-    }
-    /*
-    .nav-dropdown::after {
-      flex-basis: 100%;
-      width: 0;
-    }
-    */
-  }
-}
-
-.nav-page-discover .nav-links a.nav-link-discover {
-  color: var(--pico-primary) !important;
-  font-weight: bold;
-}
-
-.nav-page-feed .nav-links a.nav-link-feed {
-  color: var(--pico-primary) !important;
-  font-weight: bold;
-}
-.nav-page-home .nav-links a.nav-link-home {
-  color: var(--pico-primary) !important;
-  font-weight: bold;
-}
-.nav-page-search .nav-links a.nav-link-search {
-  color: var(--pico-primary) !important;
-  font-weight: bold;
-}
diff --git a/custom/common_libs.custom.html b/custom/common_libs.custom.html
new file mode 100644
index 00000000..2ab58ed6
--- /dev/null
+++ b/custom/common_libs.custom.html
@@ -0,0 +1,74 @@
+{% load static %}
+{% load sass_tags %}
+{% load tz_detect %}
+{% if request.user.is_authenticated %}
+  {% tz_detect %}
+{% endif %}
+<script src="{{ cdn_url }}/npm/cash-dom@8.1.5/dist/cash.min.js"></script>
+<script type="text/javascript">
+  if (!$.fn.is_visible) $.fn.is_visible = function () {
+    return this.filter((_, elt) => (elt.offsetWidth || elt.offsetHeight || elt.getClientRects().length)).length > 0;
+  };
+  if (!$.fn.submit) $.fn.submit = function () {
+    this.each(function () {
+      $(this).trigger('submit');
+      this.submit();
+    });
+    return this;
+  };
+</script>
+<script src="{{ cdn_url }}/npm/htmx.org@2.0.4/dist/htmx.min.js"></script>
+<script src="{{ cdn_url }}/npm/hyperscript.org@0.9.13"></script>
+<!-- link rel="stylesheet"
+      href="{{ cdn_url }}/npm/@yohns/picocss@2.2.1/css/pico.{{site_color}}.min.css" /-->
+{% if site_color == 'azure' %}
+  <link rel="stylesheet"
+        href="{{ cdn_url }}/npm/@picocss/pico@2/css/pico.min.css" />
+{% else %}
+  <link rel="stylesheet"
+        href="{{ cdn_url }}/npm/@picocss/pico@2/css/pico.{{ site_color }}.min.css" />
+{% endif %}
+<style>
+* { border-radius: 0!important; }
+:where(nav li)::before {
+  float: none;
+  content: " ";
+}
+</style>
+<link href="{% sass_src 'scss/neodb.scss' %}"
+      rel="stylesheet"
+      type="text/css" />
+<link href="{{ cdn_url }}/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css"
+      rel="stylesheet"
+      type="text/css">
+<link rel="search"
+      type="application/opensearchdescription+xml"
+      title="{{ site_name }}"
+      href="{% static 'opensearch.xml' %}">
+<script defer>
+(function(){
+  const s = localStorage.getItem("user_style");
+  if (s) {
+    const style = document.createElement("style");
+    style.innerHTML = s;
+    document.head.appendChild(style);
+  }
+  const solo = localStorage.getItem("solo_mode")=="1";
+  if (solo) {
+    const style = document.createElement("style");
+    style.innerHTML = ".solo-hidden {display: none;}";
+    document.head.appendChild(style);
+  }
+  $('html').attr('data-theme', localStorage.getItem("theme_color")||null)
+})();
+</script>
+<link rel="icon" href="{{ site_icon }}">
+<link rel="apple-touch-icon" href="{{ site_icon }}">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-title" content="{{ site_name }}">
+{% if request.META.HTTP_HOST == site_domain %}
+  <style type="text/css">.hide_unless_alter_domain{display:none;}</style>
+{% else %}
+  <meta name="robots" content="noindex">
+{% endif %}
+{{ site_head|safe }}