diff --git a/app/templates/base.html b/app/templates/base.html
index d659065..9be32fb 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -1,49 +1,46 @@
 {% extends "_base.html" %}
 
 {% block brand %}
-<a href="https://blog.rose-ash.com/" class="text-white hover:text-gray-200 no-underline">Rose Ash</a>
-<span class="text-gray-500 mx-1">|</span>
-Art-DAG
+<a href="https://blog.rose-ash.com/" class="no-underline text-stone-900">Rose Ash</a>
+<span class="text-stone-400 mx-1">|</span>
+<a href="/" class="no-underline text-stone-900">Art-DAG</a>
 {% endblock %}
 
-{% block nav_items %}
-<nav class="flex items-center space-x-6">
-    <a href="/runs" class="text-gray-300 hover:text-white {% if active_tab == 'runs' %}text-white font-medium{% endif %}">Runs{% if nav_counts and nav_counts.runs %} ({{ nav_counts.runs }}){% endif %}</a>
-    <a href="/recipes" class="text-gray-300 hover:text-white {% if active_tab == 'recipes' %}text-white font-medium{% endif %}">Recipes{% if nav_counts and nav_counts.recipes %} ({{ nav_counts.recipes }}){% endif %}</a>
-    <a href="/effects" class="text-gray-300 hover:text-white {% if active_tab == 'effects' %}text-white font-medium{% endif %}">Effects{% if nav_counts and nav_counts.effects %} ({{ nav_counts.effects }}){% endif %}</a>
-    <a href="/media" class="text-gray-300 hover:text-white {% if active_tab == 'media' %}text-white font-medium{% endif %}">Media{% if nav_counts and nav_counts.media %} ({{ nav_counts.media }}){% endif %}</a>
-    <a href="/storage" class="text-gray-300 hover:text-white {% if active_tab == 'storage' %}text-white font-medium{% endif %}">Storage{% if nav_counts and nav_counts.storage %} ({{ nav_counts.storage }}){% endif %}</a>
-    <a href="/download/client" class="text-gray-300 hover:text-white" title="Download CLI client">Client</a>
-    {% if request and request.state.nav_tree_html %}
-    <span class="text-gray-600">|</span>
-    <div class="flex items-center space-x-3 [&_a]:text-gray-400 [&_a:hover]:text-white [&_a]:text-sm [&_a]:no-underline [&_img]:w-5 [&_img]:h-5">
-        {{ request.state.nav_tree_html | safe }}
-    </div>
-    {% else %}
-    <span class="text-gray-600">|</span>
-    <a href="https://blog.rose-ash.com/" class="text-gray-400 hover:text-white text-sm">Blog</a>
-    <a href="https://market.rose-ash.com/" class="text-gray-400 hover:text-white text-sm">Market</a>
-    <a href="https://account.rose-ash.com/" class="text-gray-400 hover:text-white text-sm">Account</a>
-    {% endif %}
-</nav>
+{% block cart_mini %}
+{% if request and request.state.cart_mini_html %}
+  {{ request.state.cart_mini_html | safe }}
+{% endif %}
 {% endblock %}
 
-{% block nav_right %}
-<div class="flex items-center space-x-4">
-    {% if request and request.state.cart_mini_html %}
-    <div class="[&_a]:text-gray-300 [&_a:hover]:text-white">
-        {{ request.state.cart_mini_html | safe }}
-    </div>
-    {% endif %}
-    {% if request and request.state.auth_menu_html %}
-    <div class="[&_a]:text-gray-300 [&_a:hover]:text-white [&_a]:text-sm [&_a]:no-underline">
-        {{ request.state.auth_menu_html | safe }}
-    </div>
-    {% elif user %}
-    <span class="text-gray-400">{{ user.username }}</span>
-    <a href="/auth/logout" class="text-gray-300 hover:text-white">Logout</a>
-    {% else %}
-    <a href="/auth/login" class="text-gray-300 hover:text-white">Login</a>
-    {% endif %}
+{% block nav_tree %}
+{% if request and request.state.nav_tree_html %}
+  {{ request.state.nav_tree_html | safe }}
+{% endif %}
+{% endblock %}
+
+{% block auth_menu %}
+{% if request and request.state.auth_menu_html %}
+  {{ request.state.auth_menu_html | safe }}
+{% endif %}
+{% endblock %}
+
+{% block auth_menu_mobile %}
+{% if request and request.state.auth_menu_html %}
+  {{ request.state.auth_menu_html | safe }}
+{% endif %}
+{% endblock %}
+
+{% block sub_nav %}
+<div class="bg-stone-200 border-b border-stone-300">
+  <div class="max-w-screen-2xl mx-auto px-4">
+    <nav class="flex items-center gap-4 py-2 text-sm overflow-x-auto no-scrollbar">
+      <a href="/runs" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'runs' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Runs{% if nav_counts and nav_counts.runs %} ({{ nav_counts.runs }}){% endif %}</a>
+      <a href="/recipes" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'recipes' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Recipes{% if nav_counts and nav_counts.recipes %} ({{ nav_counts.recipes }}){% endif %}</a>
+      <a href="/effects" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'effects' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Effects{% if nav_counts and nav_counts.effects %} ({{ nav_counts.effects }}){% endif %}</a>
+      <a href="/media" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'media' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Media{% if nav_counts and nav_counts.media %} ({{ nav_counts.media }}){% endif %}</a>
+      <a href="/storage" class="whitespace-nowrap px-3 py-1.5 rounded {% if active_tab == 'storage' %}bg-stone-500 text-white{% else %}text-stone-700 hover:bg-stone-300{% endif %}">Storage{% if nav_counts and nav_counts.storage %} ({{ nav_counts.storage }}){% endif %}</a>
+      <a href="/download/client" class="whitespace-nowrap px-3 py-1.5 rounded text-stone-700 hover:bg-stone-300" title="Download CLI client">Client</a>
+    </nav>
+  </div>
 </div>
 {% endblock %}