diff --git a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
index de2a35f..9d8168a 100644
--- a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
+++ b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
@@ -673,16 +673,33 @@
             var SeasonalsConfigPage = {
                 pluginUniqueId: 'ef1e863f-cbb0-4e47-9f23-f0cbb1826ad4',
 
-                getDaysOptions: function(selectedDay) {
-                    var options = '';
-                    for (var i = 1; i <= 31; i++) {
-                        var isSelected = i === selectedDay ? 'selected' : '';
-                        options += '<option value="' + i + '" ' + isSelected + '>' + i + '</option>';
-                    }
-                    return options;
-                },
+                addRule: function(data = null) {
+                    var container = document.querySelector('#seasonalRulesList');
+                    var div = document.createElement('div');
+                    div.className = 'seasonal-rule';
+                    
+                    var name = data ? (data.Name || data.name || 'New Rule') : 'New Rule';
+                    var startDay = data ? (data.StartDay !== undefined ? data.StartDay : (data.startDay !== undefined ? data.startDay : 1)) : 1;
+                    var startMonth = data ? (data.StartMonth !== undefined ? data.StartMonth : (data.startMonth !== undefined ? data.startMonth : 1)) : 1;
+                    var endDay = data ? (data.EndDay !== undefined ? data.EndDay : (data.endDay !== undefined ? data.endDay : 1)) : 1;
+                    var endMonth = data ? (data.EndMonth !== undefined ? data.EndMonth : (data.endMonth !== undefined ? data.endMonth : 1)) : 1;
+                    var theme = data ? (data.Theme || data.theme || 'none') : 'none';
+
+                    // Helper to generate options
+                    function getOptions(items, selected) {
+                        var html = '';
+                        items.forEach(function(item) {
+                            var val = item.val || item;
+                            var txt = item.name || item;
+                            var isSelected = val == selected ? 'selected' : '';
+                            html += '<option value="' + val + '" ' + isSelected + '>' + txt + '</option>';
+                        });
+                        return html;
+                    }
+
+                    var days = [];
+                    for (var i = 1; i <= 31; i++) days.push(i);
 
-                getMonthsOptions: function(selectedMonth) {
                     var months = [
                         { val: 1, name: 'Jan' },
                         { val: 2, name: 'Feb' },
@@ -697,26 +714,6 @@
                         { val: 11, name: 'Nov' },
                         { val: 12, name: 'Dec' }
                     ];
-                    var options = '';
-                    for (var i = 0; i < months.length; i++) {
-                        var m = months[i];
-                        var isSelected = m.val === selectedMonth ? 'selected' : '';
-                        options += '<option value="' + m.val + '" ' + isSelected + '>' + m.name + '</option>';
-                    }
-                    return options;
-                },
-
-                addRule: function(data = null) {
-                    var container = document.querySelector('#seasonalRulesList');
-                    var div = document.createElement('div');
-                    div.className = 'seasonal-rule';
-                    
-                    var name = data ? (data.Name || data.name || 'New Rule') : 'New Rule';
-                    var startDay = data ? (data.StartDay !== undefined ? data.StartDay : (data.startDay !== undefined ? data.startDay : 1)) : 1;
-                    var startMonth = data ? (data.StartMonth !== undefined ? data.StartMonth : (data.startMonth !== undefined ? data.startMonth : 1)) : 1;
-                    var endDay = data ? (data.EndDay !== undefined ? data.EndDay : (data.endDay !== undefined ? data.endDay : 1)) : 1;
-                    var endMonth = data ? (data.EndMonth !== undefined ? data.EndMonth : (data.endMonth !== undefined ? data.endMonth : 1)) : 1;
-                    var theme = data ? (data.Theme || data.theme || 'none') : 'none';
 
                     div.innerHTML = `
                          <div class="seasonal-rule-header">
@@ -736,13 +733,13 @@
                                 <div class="selectContainer" style="margin:0; flex: 1;">
                                     <label class="selectLabel">Start Day</label>
                                     <select is="emby-select" class="rule-start-day" style="width: 100%;">
-                                        ${SeasonalsConfigPage.getDaysOptions(startDay)}
+                                        ${getOptions(days, startDay)}
                                     </select>
                                 </div>
                                 <div class="selectContainer" style="margin:0; flex: 1;">
                                     <label class="selectLabel">Month</label>
                                     <select is="emby-select" class="rule-start-month" style="width: 100%;">
-                                        ${SeasonalsConfigPage.getMonthsOptions(startMonth)}
+                                        ${getOptions(months, startMonth)}
                                     </select>
                                 </div>
                             </div>
@@ -751,13 +748,13 @@
                                 <div class="selectContainer" style="margin:0; flex: 1;">
                                     <label class="selectLabel">End Day</label>
                                     <select is="emby-select" class="rule-end-day" style="width: 100%;">
-                                        ${SeasonalsConfigPage.getDaysOptions(endDay)}
+                                        ${getOptions(days, endDay)}
                                     </select>
                                 </div>
                                 <div class="selectContainer" style="margin:0; flex: 1;">
                                     <label class="selectLabel">Month</label>
                                     <select is="emby-select" class="rule-end-month" style="width: 100%;">
-                                        ${SeasonalsConfigPage.getMonthsOptions(endMonth)}
+                                        ${getOptions(months, endMonth)}
                                     </select>
                                 </div>
                             </div>