diff --git a/beango/css/beango.css b/beango/css/beango.css
index cf5f6d8..0edb99d 100644
--- a/beango/css/beango.css
+++ b/beango/css/beango.css
@@ -3,6 +3,10 @@
     margin-bottom: 0px;
 }
 
+#board-header {
+    /* Background color/opacity set by JS */
+}
+
 html,
 body {
     min-height: 100vh;
diff --git a/beango/index.html b/beango/index.html
index 651e5fd..cc5cd1b 100644
--- a/beango/index.html
+++ b/beango/index.html
@@ -17,7 +17,7 @@
     <!-- Main Content Area (Board and Controls) -->
     <div class="w-full flex flex-col items-center justify-center p-4 overflow-y-auto">
         <!-- Updated Header Section -->
-        <div id="board-header" class="bg-white rounded-t-lg pt-4 pb-4 w-full max-w-2xl flex justify-center items-center gap-4">
+        <div id="board-header" class="rounded-t-lg pt-4 pb-4 w-full max-w-2xl flex justify-center items-center gap-4">
              <!-- Content will be dynamically added by JS -->
              <div id="custom-header-content" class="flex justify-center items-center gap-4">
                  <!-- Default content (can be replaced) -->
@@ -112,6 +112,16 @@
                         <input type="url" id="header-image-url-input" name="header-image-url-input" placeholder="Leave blank to use default bean with text" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
                         <p class="mt-1 text-xs text-gray-500">If text is also provided, image appears next to it.</p>
                     </div>
+                     <div class="border-t pt-4 mt-4">
+                         <label for="header-bg-color-picker" class="block text-sm font-medium text-gray-700">Header Background Color:</label>
+                         <div class="flex items-center space-x-2 mt-1">
+                            <input type="color" id="header-bg-color-picker" name="header-bg-color-picker" value="#ffffff" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
+                            <div class="w-28 flex flex-col items-center">
+                                <label for="header-bg-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="header-bg-opacity-value">100</span>%</label>
+                                <input type="range" id="header-bg-opacity-slider" name="header-bg-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </details>
 
diff --git a/beango/js/beango.js b/beango/js/beango.js
index d8fa247..40c633c 100644
--- a/beango/js/beango.js
+++ b/beango/js/beango.js
@@ -21,6 +21,8 @@ const LS_HEADER_TEXT = 'beango_headerText';
 const LS_HEADER_IMAGE_URL = 'beango_headerImageUrl';
 const LS_HEADER_TEXT_COLOR = 'beango_headerTextColor';
 const LS_HEADER_TEXT_COLOR_OPACITY = 'beango_headerTextColorOpacity'; // New
+const LS_HEADER_BG_COLOR = 'beango_headerBgColor';
+const LS_HEADER_BG_OPACITY = 'beango_headerBgOpacity';
 const LS_MARKED_COLOR = 'beango_markedColor';
 const LS_MARKED_COLOR_OPACITY = 'beango_markedColorOpacity'; // New (replaces LS_MARKED_OPACITY)
 const LS_MARKED_IMAGE_URL = 'beango_markedImageUrl';
@@ -49,6 +51,8 @@ const DEFAULT_HEADER_TEXT = 'Beango!'; // REVERTED default back to Beango!
 const DEFAULT_HEADER_IMAGE_URL = ''; // No default image
 const DEFAULT_HEADER_TEXT_COLOR = '#15803d'; // Tailwind green-700 (approx)
 const DEFAULT_HEADER_TEXT_COLOR_OPACITY = 100; // New
+const DEFAULT_HEADER_BG_COLOR = '#ffffff';
+const DEFAULT_HEADER_BG_OPACITY = 100;
 const DEFAULT_MARKED_COLOR = '#fde047'; // Default yellow
 const DEFAULT_MARKED_COLOR_OPACITY = 80; // New (replaces DEFAULT_MARKED_OPACITY)
 const DEFAULT_MARKED_IMAGE_URL = '';
@@ -325,6 +329,20 @@ function saveHeaderSettings() {
     localStorage.setItem(LS_HEADER_IMAGE_URL, document.getElementById('header-image-url-input').value);
     localStorage.setItem(LS_HEADER_TEXT_COLOR, document.getElementById('header-text-color-picker').value);
     localStorage.setItem(LS_HEADER_TEXT_COLOR_OPACITY, document.getElementById('header-text-color-opacity-slider').value);
+    // Save header background
+    localStorage.setItem(LS_HEADER_BG_COLOR, document.getElementById('header-bg-color-picker').value);
+    localStorage.setItem(LS_HEADER_BG_OPACITY, document.getElementById('header-bg-opacity-slider').value);
+}
+
+// --- Function to apply header background style ---
+function applyHeaderBgStyle() {
+    const headerElement = document.getElementById('board-header');
+    if (!headerElement) return;
+
+    const bgColor = localStorage.getItem(LS_HEADER_BG_COLOR) || DEFAULT_HEADER_BG_COLOR;
+    const opacity = parseInt(localStorage.getItem(LS_HEADER_BG_OPACITY) || DEFAULT_HEADER_BG_OPACITY, 10);
+
+    headerElement.style.backgroundColor = hexToRgba(bgColor, opacity);
 }
 
 // --- Function to update the header display ---
@@ -832,6 +850,8 @@ function loadFromLocalStorage() {
         savedHeaderTextColor = DEFAULT_HEADER_TEXT_COLOR;
     }
     const savedHeaderTextOpacity = localStorage.getItem(LS_HEADER_TEXT_COLOR_OPACITY) || DEFAULT_HEADER_TEXT_COLOR_OPACITY;
+    const savedHeaderBgColor = localStorage.getItem(LS_HEADER_BG_COLOR) || DEFAULT_HEADER_BG_COLOR;
+    const savedHeaderBgOpacity = localStorage.getItem(LS_HEADER_BG_OPACITY) || DEFAULT_HEADER_BG_OPACITY;
     const savedMarkedColor = localStorage.getItem(LS_MARKED_COLOR) || DEFAULT_MARKED_COLOR;
     const savedMarkedColorOpacity = localStorage.getItem(LS_MARKED_COLOR_OPACITY) || DEFAULT_MARKED_COLOR_OPACITY;
     const savedMarkedImageUrl = localStorage.getItem(LS_MARKED_IMAGE_URL) || DEFAULT_MARKED_IMAGE_URL;
@@ -978,7 +998,12 @@ function loadFromLocalStorage() {
     document.getElementById('header-text-color-picker').value = savedHeaderTextColor;
     document.getElementById('header-text-color-opacity-slider').value = savedHeaderTextOpacity;
     if(document.getElementById('header-text-color-opacity-value')) document.getElementById('header-text-color-opacity-value').textContent = savedHeaderTextOpacity; // Update display span
-    updateHeaderDisplay(); // Apply the loaded header
+    // Restore header background inputs
+    document.getElementById('header-bg-color-picker').value = savedHeaderBgColor;
+    document.getElementById('header-bg-opacity-slider').value = savedHeaderBgOpacity;
+    if(document.getElementById('header-bg-opacity-value')) document.getElementById('header-bg-opacity-value').textContent = savedHeaderBgOpacity;
+    applyHeaderBgStyle(); // Apply header background style
+    updateHeaderDisplay(); // Apply the loaded header content
     // --- End Restore Header Settings ---
 
     // --- Restore Marked Style Settings ---
@@ -1357,6 +1382,15 @@ document.addEventListener('DOMContentLoaded', () => {
         saveHeaderSettings();
         updateHeaderDisplay();
     });
+    document.getElementById('header-bg-color-picker').addEventListener('input', () => {
+        saveHeaderSettings();
+        applyHeaderBgStyle();
+    });
+    document.getElementById('header-bg-opacity-slider').addEventListener('input', (e) => {
+        if(document.getElementById('header-bg-opacity-value')) document.getElementById('header-bg-opacity-value').textContent = e.target.value;
+        saveHeaderSettings();
+        applyHeaderBgStyle();
+    });
 
     // --- Add Event Listeners for Marked Style Controls ---
     document.getElementById('marked-color-picker').addEventListener('input', () => {
@@ -1431,6 +1465,35 @@ document.addEventListener('DOMContentLoaded', () => {
         applyBoardBgStyle();
     });
 
+    // --- Search Listener ---
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) {
+        searchInput.addEventListener('input', () => {
+            const searchTerm = searchInput.value.trim().toLowerCase();
+            const cells = document.querySelectorAll('#bingo-board .bingo-cell');
+
+            // Split search term into words
+            const searchWords = searchTerm.split(/\s+/).filter(word => word.length > 0);
+
+            cells.forEach(cell => {
+                const textSpan = cell.querySelector('.bingo-cell-text');
+                let isMatch = false;
+                if (textSpan && searchWords.length > 0) {
+                    const cellText = textSpan.textContent.trim().toLowerCase();
+                    // Check if ALL search words are included in the cell text
+                    isMatch = searchWords.every(word => cellText.includes(word));
+                }
+
+                // Add or remove highlight based on match status
+                if (isMatch) {
+                    cell.classList.add('highlighted');
+                } else {
+                    cell.classList.remove('highlighted');
+                }
+            });
+        });
+    }
+
     // --- Other Listeners ---
     window.addEventListener('resize', equalizeCellSizes);
     equalizeCellSizes(); // Initial call after load