diff --git a/beango/index.html b/beango/index.html
index 23db9ea..c5c387c 100644
--- a/beango/index.html
+++ b/beango/index.html
@@ -108,6 +108,12 @@
                                 </div>
                              </div>
                         </div>
+                        <!-- START Header Font Size Setting -->
+                        <div class="mt-2">
+                            <label for="header-text-font-size-input" class="block text-sm font-medium text-gray-700">Header Font Size (px):</label>
+                            <input type="number" id="header-text-font-size-input" name="header-text-font-size-input" min="10" max="100" step="1" value="36" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
+                        </div>
+                        <!-- END Header Font Size Setting -->
                         <!-- START Header Text Outline Settings -->
                         <div class="mt-2">
                             <label for="header-text-outline-color-picker" class="block text-xs font-medium text-gray-700">Outline Color:</label>
diff --git a/beango/js/beango.js b/beango/js/beango.js
index 24ab91c..5951d9f 100644
--- a/beango/js/beango.js
+++ b/beango/js/beango.js
@@ -53,6 +53,7 @@ const LS_MARKED_CELL_OUTLINE_WIDTH = 'beango_markedCellOutlineWidth';
 const LS_HEADER_TEXT_OUTLINE_COLOR = 'beango_headerTextOutlineColor';
 const LS_HEADER_TEXT_OUTLINE_OPACITY = 'beango_headerTextOutlineOpacity';
 const LS_HEADER_TEXT_OUTLINE_WIDTH = 'beango_headerTextOutlineWidth';
+const LS_HEADER_TEXT_FONT_SIZE = 'beango_headerTextFontSize'; // New key
 
 // --- Default Values ---
 const DEFAULT_SAMPLE_ITEMS = [
@@ -105,6 +106,7 @@ const DEFAULT_MARKED_CELL_OUTLINE_WIDTH = 0; // Default 0px - No outline for mar
 const DEFAULT_HEADER_TEXT_OUTLINE_COLOR = '#ffffff'; // Default outline white
 const DEFAULT_HEADER_TEXT_OUTLINE_OPACITY = 100;
 const DEFAULT_HEADER_TEXT_OUTLINE_WIDTH = 0; // Default no outline
+const DEFAULT_HEADER_TEXT_FONT_SIZE = 36; // New default (approx text-4xl)
 
 // --- Notification Function ---
 function showNotification(message, type = 'info', duration = 3000) {
@@ -448,6 +450,7 @@ 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);
+    localStorage.setItem(LS_HEADER_TEXT_FONT_SIZE, document.getElementById('header-text-font-size-input').value); // Save font size
     // 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);
@@ -517,7 +520,14 @@ function updateHeaderDisplay() {
     // Add text if it exists
     if (hasText) {
         const h1 = document.createElement("h1");
-        h1.className = "text-4xl font-bold"; // Base styles
+        h1.className = "font-bold"; // Remove default text-4xl, apply font size via style
+        // Get and apply font size
+        let headerFontSize = parseInt(localStorage.getItem(LS_HEADER_TEXT_FONT_SIZE), 10);
+        if (isNaN(headerFontSize) || headerFontSize <= 0) {
+            headerFontSize = DEFAULT_HEADER_TEXT_FONT_SIZE;
+        }
+        h1.style.fontSize = `${headerFontSize}px`; // Apply font size
+
         h1.style.color = rgbaDefaultColor; // Apply default color+opacity to H1
         // Apply outline to H1
         if (headerOutlineWidth > 0) {
@@ -1217,12 +1227,14 @@ function restoreBackgroundSettings() {
 }
 
 function restoreHeaderSettings(savedHeaderText, savedHeaderImageUrl, savedHeaderTextColor, savedHeaderTextOpacity, savedHeaderBgColor, savedHeaderBgOpacity,
-                                savedHeaderOutlineColor, savedHeaderOutlineOpacity, savedHeaderOutlineWidth) {
+                                savedHeaderOutlineColor, savedHeaderOutlineOpacity, savedHeaderOutlineWidth, savedHeaderFontSize) {
     _restoreInputSetting('header-text-input', savedHeaderText);
     // if the header image is the default bean, then add the explodeBeans function to the onclick event
     _restoreInputSetting('header-image-url-input', savedHeaderImageUrl);
     _restoreColorPickerSetting('header-text-color-picker', savedHeaderTextColor);
     _restoreOpacitySetting('header-text-color-opacity-slider', 'header-text-color-opacity-value', savedHeaderTextOpacity);
+    // Restore header font size input
+    _restoreInputSetting('header-text-font-size-input', savedHeaderFontSize);
     // Restore header background inputs
     _restoreColorPickerSetting('header-bg-color-picker', savedHeaderBgColor);
     _restoreOpacitySetting('header-bg-opacity-slider', 'header-bg-opacity-value', savedHeaderBgOpacity);
@@ -1383,6 +1395,7 @@ function loadFromLocalStorage() {
     const savedHeaderOutlineColor = localStorage.getItem(LS_HEADER_TEXT_OUTLINE_COLOR) || DEFAULT_HEADER_TEXT_OUTLINE_COLOR;
     const savedHeaderOutlineOpacity = localStorage.getItem(LS_HEADER_TEXT_OUTLINE_OPACITY) || DEFAULT_HEADER_TEXT_OUTLINE_OPACITY;
     const savedHeaderOutlineWidth = localStorage.getItem(LS_HEADER_TEXT_OUTLINE_WIDTH) || DEFAULT_HEADER_TEXT_OUTLINE_WIDTH;
+    const savedHeaderFontSize = localStorage.getItem(LS_HEADER_TEXT_FONT_SIZE) || DEFAULT_HEADER_TEXT_FONT_SIZE; // Load font size
     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;
@@ -1430,7 +1443,8 @@ function loadFromLocalStorage() {
     restoreHeaderSettings(
         savedHeaderText, savedHeaderImageUrl, savedHeaderTextColor, savedHeaderTextOpacity,
         savedHeaderBgColor, savedHeaderBgOpacity,
-        savedHeaderOutlineColor, savedHeaderOutlineOpacity, savedHeaderOutlineWidth
+        savedHeaderOutlineColor, savedHeaderOutlineOpacity, savedHeaderOutlineWidth,
+        savedHeaderFontSize // Pass font size
     );
 
     restoreMarkedStyleSettings(
@@ -1612,6 +1626,7 @@ document.addEventListener('DOMContentLoaded', () => {
     setupInputListener('header-image-url-input', 'input', saveHeaderSettings, updateHeaderDisplay);
     setupInputListener('header-text-color-picker', 'input', saveHeaderSettings, updateHeaderDisplay);
     setupOpacitySliderListener('header-text-color-opacity-slider', 'header-text-color-opacity-value', saveHeaderSettings, updateHeaderDisplay);
+    setupInputListener('header-text-font-size-input', 'input', saveHeaderSettings, updateHeaderDisplay); // Add listener for font size
     setupInputListener('header-bg-color-picker', 'input', saveHeaderSettings, applyHeaderBgStyle);
     setupOpacitySliderListener('header-bg-opacity-slider', 'header-bg-opacity-value', saveHeaderSettings, applyHeaderBgStyle);
     // Header Text Outline Listeners