diff --git a/app/views/layouts/tailwind/navbar/_logged_in.html.erb b/app/views/layouts/tailwind/navbar/_logged_in.html.erb
index 4e2278bd..aeef79c4 100644
--- a/app/views/layouts/tailwind/navbar/_logged_in.html.erb
+++ b/app/views/layouts/tailwind/navbar/_logged_in.html.erb
@@ -1,4 +1,4 @@
-<header class="flex sticky top-0 z-50 w-full bg-notebook-blue border-b border-blue-400 h-14 shadow">
+<header class="flex sticky top-0 z-50 w-full border-b border-blue-400 h-14 shadow" style="background-color: <%= @navbar_color.presence || '#2196F3' %>">
   <%= link_to root_path, class: 'flex items-center mr-2 px-3 sm:px-6 py-4 border-b border-gray-300 shadow hover:shadow-md transition bg-white rounded-br-lg' do %>
     <%= image_tag 'logos/book-small.webp', class: 'h-6 sm:h-8 mr-2 sm:mr-3' %>
     <span class="text-lg sm:text-2xl font-bold text-notebook-blue tracking-wide">
@@ -8,7 +8,7 @@
 
   <div x-cloak x-show="!showSidebar" class="lg:hidden">
     <span class="sr-only">Menu</span> 
-    <div @click.stop="showSidebar = true" class="mt-2 mr-1 p-1 border-2 border-notebook-blue hover:border-blue-200 rounded-full">
+    <div @click.stop="showSidebar = true" class="mt-2 mr-1 p-1 border-2 hover:border-blue-200 rounded-full" style="border-color: <%= @navbar_color.presence || '#2196F3' %>">
       <svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
         <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
       </svg>
@@ -28,7 +28,7 @@
   <div class="pr-2 flex items-center justify-end space-x-1 sm:space-x-2 ml-auto">
     <% if user_signed_in? %>
       <div x-data="{ notificationsDropdownOpen: false }" class="inline-block">
-        <button @click="notificationsDropdownOpen = !notificationsDropdownOpen" class="z-10 block p-1 border-2 border-notebook-blue hover:border-blue-200 rounded-full">
+        <button @click="notificationsDropdownOpen = !notificationsDropdownOpen" class="z-10 block p-1 border-2 hover:border-blue-200 rounded-full" style="border-color: <%= @navbar_color.presence || '#2196F3' %>">
           <svg class="h-5 w-5 sm:h-6 sm:w-6 <%= @user_notifications.reject { |n| n.viewed_at? }.any? ? 'text-white' : 'text-blue-300' %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
           </svg>
@@ -86,7 +86,7 @@
       <% end %>
 
       <div x-data="{ accountDropdownOpen: false }" class="inline-block">
-        <button @click="accountDropdownOpen = !accountDropdownOpen" class="z-10 block p-1 border-2 border-notebook-blue hover:border-blue-200 rounded-full">
+        <button @click="accountDropdownOpen = !accountDropdownOpen" class="z-10 block p-1 border-2 hover:border-blue-200 rounded-full" style="border-color: <%= @navbar_color.presence || '#2196F3' %>">
           <%= image_tag current_user.image_url, class: 'rounded-full h-6 w-6 sm:h-8 sm:w-8' %>
         </button>
         <div x-show="accountDropdownOpen" @click="accountDropdownOpen = false" class="fixed inset-0 h-full w-full z-10"></div>
diff --git a/app/views/layouts/tailwind/navbar/_logged_out.html.erb b/app/views/layouts/tailwind/navbar/_logged_out.html.erb
index 3c516ac4..390c5fb9 100644
--- a/app/views/layouts/tailwind/navbar/_logged_out.html.erb
+++ b/app/views/layouts/tailwind/navbar/_logged_out.html.erb
@@ -1,4 +1,4 @@
-<div class="bg-notebook-blue text-white w-full flex justify-between sticky top-0 z-50 shadow-lg">
+<div class="text-white w-full flex justify-between sticky top-0 z-50 shadow-lg" style="background-color: <%= @navbar_color.presence || '#2196F3' %>">
   <%= link_to root_path, class: 'flex items-center mr-2 -mb-2 px-6 py-4 border-b border-gray-300 shadow hover:shadow-md transition bg-white hover:bg-gray-50 rounded-br-lg' do %>
     <%= image_tag 'logos/book-small.webp', class: 'h-8 mr-3' %>
     <span class="text-2xl font-bold text-notebook-blue tracking-wide">