diff --git a/Jellyfin.Plugin.Seasonals/Configuration/PluginConfiguration.cs b/Jellyfin.Plugin.Seasonals/Configuration/PluginConfiguration.cs
index 70004c0..92e19da 100644
--- a/Jellyfin.Plugin.Seasonals/Configuration/PluginConfiguration.cs
+++ b/Jellyfin.Plugin.Seasonals/Configuration/PluginConfiguration.cs
@@ -49,6 +49,11 @@ public class PluginConfiguration : BasePluginConfiguration
     /// </summary>
     public bool EnableClientSideToggle { get; set; }
 
+    /// <summary>
+    /// Gets or sets the seasonal rules configuration as JSON.
+    /// </summary>
+    public string SeasonalRules { get; set; } = "[{\"Name\":\"New Year Fireworks\",\"StartDay\":28,\"StartMonth\":12,\"EndDay\":5,\"EndMonth\":1,\"Theme\":\"fireworks\"},{\"Name\":\"Valentine's Day\",\"StartDay\":10,\"StartMonth\":2,\"EndDay\":18,\"EndMonth\":2,\"Theme\":\"hearts\"},{\"Name\":\"Santa\",\"StartDay\":22,\"StartMonth\":12,\"EndDay\":27,\"EndMonth\":12,\"Theme\":\"santa\"},{\"Name\":\"Snowflakes (December)\",\"StartDay\":1,\"StartMonth\":12,\"EndDay\":31,\"EndMonth\":12,\"Theme\":\"snowflakes\"},{\"Name\":\"Snowfall (January)\",\"StartDay\":1,\"StartMonth\":1,\"EndDay\":31,\"EndMonth\":1,\"Theme\":\"snowfall\"},{\"Name\":\"Snowfall (February)\",\"StartDay\":1,\"StartMonth\":2,\"EndDay\":29,\"EndMonth\":2,\"Theme\":\"snowfall\"},{\"Name\":\"Easter\",\"StartDay\":25,\"StartMonth\":3,\"EndDay\":25,\"EndMonth\":4,\"Theme\":\"easter\"},{\"Name\":\"Halloween\",\"StartDay\":24,\"StartMonth\":10,\"EndDay\":5,\"EndMonth\":11,\"Theme\":\"halloween\"},{\"Name\":\"Autumn\",\"StartDay\":1,\"StartMonth\":9,\"EndDay\":30,\"EndMonth\":11,\"Theme\":\"autumn\"}]";
+
     /// <summary>
     /// Gets or sets the Seasonals options.
     /// </summary>
diff --git a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
index f8dd938..445c79e 100644
--- a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
+++ b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
@@ -6,15 +6,15 @@
 </head>
 <body>
     <div id="SeasonalsConfigPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input,emby-button,emby-select,emby-checkbox">
-        <style>
+        <!-- <style>
             select option:disabled {
                 color: #a3a3a3 !important;
             }
-        </style>
+        </style> -->
         <div data-role="content">
             <div class="content-primary">
                 <div class="sectionTitleContainer">
-                    <h2 class="sectionTitle">Seasonals</h2>
+                    <h2 class="sectionTitle">Seasonals Configuration</h2>
                     <a is="emby-linkbutton" class="raised raised-mini emby-button" style="margin-left: 2em;"
                         target="_blank" href="https://github.com/CodeDevMLH/Jellyfin-Seasonals">
                         <i class="md-icon button-icon button-icon-left secondaryText"></i>
@@ -22,63 +22,96 @@
                     </a>
                 </div>
                 <hr style="max-width: 800px; margin: 1em 0;">
-                <br>
-                <form id="SeasonalsConfigForm">
-                    <div class="checkboxContainer checkboxContainer-withDescription">
-                        <label class="emby-checkbox-label">
-                            <input id="IsEnabled" name="IsEnabled" type="checkbox" is="emby-checkbox" />
-                            <span>Enable Seasonals</span>
-                        </label>
-                        <div class="fieldDescription">Enable or disable the entire plugin functionality.</div>
-                    </div>
-                    <div class="checkboxContainer checkboxContainer-withDescription">
-                        <label class="emby-checkbox-label">
-                            <input id="AutomateSeasonSelection" name="AutomateSeasonSelection" type="checkbox" is="emby-checkbox" />
-                            <span>Automate Season Selection</span>
-                        </label>
-                        <div class="fieldDescription">Automatically select the season based on the date.</div>
-                    </div>
-                    <div class="selectContainer">
-                        <label class="selectLabel" for="SelectedSeason">Selected Season</label>
-                        <select is="emby-select" id="SelectedSeason" name="SelectedSeason" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
-                            <option value="none">None</option>
-                            <option value="snowflakes">Snowflakes</option>
-                            <option value="snowfall">Snowfall</option>
-                            <option value="snowstorm">Snowstorm</option>
-                            <option value="fireworks">Fireworks</option>
-                            <option value="halloween">Halloween</option>
-                            <option value="hearts">Hearts</option>
-                            <option value="christmas">Christmas</option>
-                            <option value="santa">Santa</option>
-                            <option value="autumn">Autumn</option>
-                            <option value="easter">Easter</option>
-                            <option value="summer" disabled>Summer (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="spring" disabled>Spring (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="oktoberfest" disabled>Oktoberfest (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="carnival" disabled>Carnival (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="championships" disabled>European/World Championships (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="patrick" disabled>St. Patrick's Day (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="thanksgiving" disabled>Thanksgiving (not implemented yet. Please commit ideas in a issue or PR)</option>
-                            <option value="pride" disabled>Pride (not implemented yet. Please commit ideas in a issue or PR)</option>
-                        </select>
-                        <div class="fieldDescription">The season to display if automation is disabled.</div>
-                    </div>
-                    <div class="checkboxContainer checkboxContainer-withDescription">
-                        <label class="emby-checkbox-label">
-                            <input id="EnableClientSideToggle" name="EnableClientSideToggle" type="checkbox"
-                                is="emby-checkbox" />
-                            <span>Allow Client-Side Toggle</span>
-                        </label>
-                        <div class="fieldDescription">If enabled, users will see a seasonals icon in the header to toggle seasonals for their browser (device-specific).</div>
-                    </div>
-                    <br>
 
-                    <details>
-                        <summary>Advanced Configuration</summary>
-                        <p>Configure specific settings for each seasonal theme below.</p>
-                        <p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p>
+                <div style="margin-bottom: 1.5em;">
+                    <button class="jellyfin-tab-button active" onclick="showTab('basic', this)"
+                        style="background: none; border: none; color: #fff; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid #00a4dc;">
+                        <h3>General</h3>
+                    </button>
+                    <button class="jellyfin-tab-button" onclick="showTab('auto-selection', this)"
+                        style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
+                        <h3>Auto Selection</h3>
+                    </button>
+                    <button class="jellyfin-tab-button" onclick="showTab('advanced', this)"
+                        style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
+                        <h3>Advanced Settings</h3>
+                    </button>
+                </div>
+
+                <form id="SeasonalsConfigForm">
+                    <!-- General Tab -->
+                    <div id="tab-general" class="tab-content" style="display: block;">
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label class="emby-checkbox-label">
+                                <input id="IsEnabled" name="IsEnabled" type="checkbox" is="emby-checkbox" />
+                                <span>Enable Seasonals</span>
+                            </label>
+                            <div class="fieldDescription">Enable or disable the entire plugin functionality.</div>
+                        </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label class="emby-checkbox-label">
+                                <input id="AutomateSeasonSelection" name="AutomateSeasonSelection" type="checkbox" is="emby-checkbox" />
+                                <span>Automate Season Selection</span>
+                            </label>
+                            <div class="fieldDescription">If enabled, the plugin will use the rules defined in the "Auto Selection" tab to assume the season. If no rule matches, it falls back to the "Standard Season" below.</div>
+                        </div>
+                        <div class="selectContainer">
+                            <label class="selectLabel" for="SelectedSeason">Standard Season</label>
+                            <select is="emby-select" id="SelectedSeason" name="SelectedSeason" class="selectLayout emby-select-withcolor emby-select" style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
+                                <option value="none">None</option>
+                                <option value="snowflakes">Snowflakes</option>
+                                <option value="snowfall">Snowfall</option>
+                                <option value="snowstorm">Snowstorm</option>
+                                <option value="fireworks">Fireworks</option>
+                                <option value="halloween">Halloween</option>
+                                <option value="hearts">Hearts</option>
+                                <option value="christmas">Christmas</option>
+                                <option value="santa">Santa</option>
+                                <option value="autumn">Autumn</option>
+                                <option value="easter">Easter</option>
+                                <option value="resurrection">Resurrection</option>
+                                <option value="summer" disabled>Summer (not implemented yet. Please commit ideas in a issue or PR)</option>
+                                <option value="spring" disabled>Spring (not implemented yet. Please commit ideas in a issue or PR)</option>
+                                <option value="oktoberfest" disabled>Oktoberfest (not implemented yet. Please commit ideas in a issue or PR)</option>
+                                <option value="carnival" disabled>Carnival (not implemented yet. Please commit ideas in a issue or PR)</option>
+                                <option value="championships" disabled>European/World Championships (not implemented yet. Please commit ideas in a issue or PR)</option>
+                                <option value="patrick" disabled>St. Patrick's Day (not implemented yet. Please commit ideas in a issue or PR)</option>
+                                <option value="thanksgiving" disabled>Thanksgiving (not implemented yet. Please commit ideas in a issue or PR)</option>
+                                <option value="pride" disabled>Pride (not implemented yet. Please commit ideas in a issue or PR)</option>
+                            </select>
+                            <div class="fieldDescription">The season to display if automation is disabled or no "Auto Selection" rule matches the current date.</div>
+                        </div>
+                        <div class="checkboxContainer checkboxContainer-withDescription">
+                            <label class="emby-checkbox-label">
+                                <input id="EnableClientSideToggle" name="EnableClientSideToggle" type="checkbox" is="emby-checkbox" />
+                                <span>Allow Client-Side Toggle</span>
+                            </label>
+                            <div class="fieldDescription">If enabled, users will see a seasonals icon in the header to toggle seasonals for their browser (device-specific).</div>
+                        </div>
+                    </div>
+
+                    <!-- Auto Selection Tab -->
+                    <div id="tab-auto-selection" class="tab-content" style="display: none;">
+                        <div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin-bottom: 1.5em;">
+                            <h3>Auto Selection Rules</h3>
+                            <p>Define rules to automatically select a season based on the date. Rules are evaluated from top to bottom. The first matching rule wins.</p>
+                        </div>
                         
-                        <details>
+                        <div id="seasonalRulesList">
+                            <!-- Rules will be injected here via JS -->
+                        </div>
+
+                        <button is="emby-button" type="button" class="raised block" onclick="SeasonalsConfigPage.addRule()">
+                            <i class="md-icon button-icon button-icon-left">add</i>
+                            <span>Add Rule</span>
+                        </button>
+                    </div>
+
+                    <!-- Advanced Tab -->
+                    <div id="tab-advanced" class="tab-content" style="display: none;">
+                         <p>Configure specific settings for each seasonal theme below.</p>
+                         <p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p>
+                         <details>
                             <summary>Autumn</summary>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
@@ -505,8 +538,8 @@
                                 <div class="fieldDescription">Maximum time the bunny waits before appearing again.</div>
                             </div>
                         </details>
-                    </details>
-
+                    </div>
+                
                     <div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;">
                         <i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i>
                         <div>
@@ -526,20 +559,198 @@
                 </form>
             </div>
         </div>
-        <script type="text/javascript">
-            var SeasonalsConfig = {
-                pluginUniqueId: 'ef1e863f-cbb0-4e47-9f23-f0cbb1826ad4'
+        <style>
+             /* Styles for the Seasonal Rules List (Auto Selection Tab) */
+            .seasonal-rule {
+                background: rgba(0, 0, 0, 0.2);
+                border-radius: 8px;
+                padding: 15px;
+                margin-bottom: 15px;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                border: 1px solid rgba(255,255,255,0.05);
+            }
+            .seasonal-rule-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .seasonal-rule-content {
+                display: grid;
+                grid-template-columns: 2fr 1fr 1fr 2fr;
+                gap: 15px;
+                align-items: end;
+            }
+            .rule-actions {
+                display: flex;
+                gap: 5px;
+            }
+            .date-range-group {
+                display: flex;
+                gap: 10px;
+                align-items: center;
+            }
+            @media (max-width: 800px) {
+                .seasonal-rule-content {
+                    grid-template-columns: 1fr;
+                }
+            }
+
+            /* Styles for the Tabs */
+            .jellyfin-tab-button.active {
+                color: #fff !important;
+                border-bottom: 2px solid #00a4dc !important;
+            }
+        </style>
+        <script>
+            function showTab(tabId, btn) {
+                document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
+                document.getElementById(tabId).style.display = 'block';
+
+                document.querySelectorAll('.jellyfin-tab-button').forEach(b => {
+                    b.classList.remove('active');
+                    b.style.color = '#ccc';
+                    b.style.borderBottom = '2px solid transparent';
+                });
+
+                if (btn) {
+                    btn.classList.add('active');
+                    btn.style.color = '#fff';
+                    btn.style.borderBottom = '2px solid #00a4dc';
+                }
+            }
+            
+            var SeasonalsConfigPage = {
+                pluginUniqueId: 'ef1e863f-cbb0-4e47-9f23-f0cbb1826ad4',
+
+                addRule: function(data = null) {
+                    var container = document.querySelector('#seasonalRulesList');
+                    var div = document.createElement('div');
+                    div.className = 'seasonal-rule';
+                    
+                    var name = data ? data.Name : 'New Rule';
+                    var startDay = data ? data.StartDay : 1;
+                    var startMonth = data ? data.StartMonth : 1;
+                    var endDay = data ? data.EndDay : 1;
+                    var endMonth = data ? data.EndMonth : 1;
+                    var theme = data ? data.Theme : 'snowflakes';
+
+                    div.innerHTML = `
+                         <div class="seasonal-rule-header">
+                             <div style="font-weight: bold; font-size: 1.1em;" class="rule-title">${name}</div>
+                             <div class="rule-actions">
+                                 <button type="button" is="paper-icon-button-light" class="btn-move-up" title="Move Up"><i class="material-icons">arrow_upward</i></button>
+                                 <button type="button" is="paper-icon-button-light" class="btn-move-down" title="Move Down"><i class="material-icons">arrow_downward</i></button>
+                                 <button type="button" is="paper-icon-button-light" class="btn-remove" title="Remove"><i class="material-icons">delete</i></button>
+                             </div>
+                         </div>
+                         <div class="seasonal-rule-content">
+                            <div class="inputContainer" style="margin:0;">
+                                <label class="inputLabel">Name</label>
+                                <input is="emby-input" class="rule-name" value="${name}" onchange="this.closest('.seasonal-rule').querySelector('.rule-title').innerText = this.value" />
+                            </div>
+                            <div class="date-range-group">
+                                <div class="inputContainer" style="margin:0;">
+                                    <label class="inputLabel">Start Day</label>
+                                    <input is="emby-input" type="number" class="rule-start-day" value="${startDay}" min="1" max="31" />
+                                </div>
+                                <div class="inputContainer" style="margin:0;">
+                                    <label class="inputLabel">Month</label>
+                                    <input is="emby-input" type="number" class="rule-start-month" value="${startMonth}" min="1" max="12" />
+                                </div>
+                            </div>
+                            
+                            <div class="date-range-group">
+                                <div class="inputContainer" style="margin:0;">
+                                    <label class="inputLabel">End Day</label>
+                                    <input is="emby-input" type="number" class="rule-end-day" value="${endDay}" min="1" max="31" />
+                                </div>
+                                <div class="inputContainer" style="margin:0;">
+                                    <label class="inputLabel">Month</label>
+                                    <input is="emby-input" type="number" class="rule-end-month" value="${endMonth}" min="1" max="12" />
+                                </div>
+                            </div>
+
+                            <div class="selectContainer" style="margin:0;">
+                                <label class="selectLabel">Theme</label>
+                                <select is="emby-select" class="rule-theme" style="width: 100%;">
+                                    <option value="none" ${theme === 'none' ? 'selected' : ''}>None</option>
+                                    <option value="snowflakes" ${theme === 'snowflakes' ? 'selected' : ''}>Snowflakes</option>
+                                    <option value="snowfall" ${theme === 'snowfall' ? 'selected' : ''}>Snowfall</option>
+                                    <option value="snowstorm" ${theme === 'snowstorm' ? 'selected' : ''}>Snowstorm</option>
+                                    <option value="fireworks" ${theme === 'fireworks' ? 'selected' : ''}>Fireworks</option>
+                                    <option value="halloween" ${theme === 'halloween' ? 'selected' : ''}>Halloween</option>
+                                    <option value="hearts" ${theme === 'hearts' ? 'selected' : ''}>Hearts</option>
+                                    <option value="christmas" ${theme === 'christmas' ? 'selected' : ''}>Christmas</option>
+                                    <option value="santa" ${theme === 'santa' ? 'selected' : ''}>Santa</option>
+                                    <option value="autumn" ${theme === 'autumn' ? 'selected' : ''}>Autumn</option>
+                                    <option value="easter" ${theme === 'easter' ? 'selected' : ''}>Easter</option>
+                                </select>
+                            </div>
+                         </div>
+                    `;
+
+                    container.appendChild(div);
+
+                    // Bind events
+                    div.querySelector('.btn-remove').addEventListener('click', function() {
+                        div.remove();
+                    });
+                    div.querySelector('.btn-move-up').addEventListener('click', function() {
+                        if (div.previousElementSibling) {
+                            container.insertBefore(div, div.previousElementSibling);
+                        }
+                    });
+                    div.querySelector('.btn-move-down').addEventListener('click', function() {
+                        if (div.nextElementSibling) {
+                            container.insertBefore(div.nextElementSibling, div);
+                        }
+                    });
+                },
+
+                renderRules: function(rules) {
+                    var container = document.querySelector('#seasonalRulesList');
+                    container.innerHTML = '';
+                    if (Array.isArray(rules)) {
+                        rules.forEach(rule => this.addRule(rule));
+                    }
+                },
+
+                getRulesFromUI: function() {
+                    var rules = [];
+                    document.querySelectorAll('.seasonal-rule').forEach(div => {
+                        rules.push({
+                            Name: div.querySelector('.rule-name').value,
+                            StartDay: parseInt(div.querySelector('.rule-start-day').value),
+                            StartMonth: parseInt(div.querySelector('.rule-start-month').value),
+                            EndDay: parseInt(div.querySelector('.rule-end-day').value),
+                            EndMonth: parseInt(div.querySelector('.rule-end-month').value),
+                            Theme: div.querySelector('.rule-theme').value
+                        });
+                    });
+                    return rules;
+                }
             };
 
             document.querySelector('#SeasonalsConfigPage')
                 .addEventListener('pageshow', function() {
                     Dashboard.showLoadingMsg();
-                    ApiClient.getPluginConfiguration(SeasonalsConfig.pluginUniqueId).then(function (config) {
+                    ApiClient.getPluginConfiguration(SeasonalsConfigPage.pluginUniqueId).then(function (config) {
                         document.querySelector('#IsEnabled').checked = config.IsEnabled;
                         document.querySelector('#SelectedSeason').value = config.SelectedSeason;
                         document.querySelector('#AutomateSeasonSelection').checked = config.AutomateSeasonSelection;
                         document.querySelector('#EnableClientSideToggle').checked = config.EnableClientSideToggle !== undefined ? config.EnableClientSideToggle : true;
 
+                        // Load Rules
+                        try {
+                            var rules = JSON.parse(config.SeasonalRules || "[]");
+                            SeasonalsConfigPage.renderRules(rules);
+                        } catch (e) {
+                            console.error("Failed to parse SeasonalRules", e);
+                        }
+
+
                         // Advanced Config
                         // Autumn
                         document.querySelector('#EnableAutumn').checked = config.Autumn.EnableAutumn;
@@ -631,12 +842,14 @@
             document.querySelector('#SeasonalsConfigForm')
                 .addEventListener('submit', function(e) {
                     Dashboard.showLoadingMsg();
-                    ApiClient.getPluginConfiguration(SeasonalsConfig.pluginUniqueId).then(function (config) {
+                    ApiClient.getPluginConfiguration(SeasonalsConfigPage.pluginUniqueId).then(function (config) {
                         config.IsEnabled = document.querySelector('#IsEnabled').checked;
                         config.SelectedSeason = document.querySelector('#SelectedSeason').value;
                         config.AutomateSeasonSelection = document.querySelector('#AutomateSeasonSelection').checked;
                         config.EnableClientSideToggle = document.querySelector('#EnableClientSideToggle').checked;
 
+                        // Save Rules
+                        config.SeasonalRules = JSON.stringify(SeasonalsConfigPage.getRulesFromUI());
 
                         // Advanced Config
                         // Autumn
@@ -722,7 +935,7 @@
                         config.Easter.MinBunnyRestTime = parseInt(document.querySelector('#MinBunnyRestTime').value);
                         config.Easter.MaxBunnyRestTime = parseInt(document.querySelector('#MaxBunnyRestTime').value);
 
-                        ApiClient.updatePluginConfiguration(SeasonalsConfig.pluginUniqueId, config).then(function (result) {
+                        ApiClient.updatePluginConfiguration(SeasonalsConfigPage.pluginUniqueId, config).then(function (result) {
                             Dashboard.processPluginConfigurationUpdateResult(result);
                     });
                 });
