diff --git a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
index 104a65a..e227b26 100644
--- a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
+++ b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
@@ -99,7 +99,8 @@
                             <!-- Rules will be injected here via JS -->
                         </div>
 
-                        <button is="emby-button" type="button" class="raised button-accent block" onclick="SeasonalsConfigPage.addRule();" style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
+                        <button is="emby-button" type="button" class="raised emby-button" onclick="SeasonalsConfigPage.addRule();"
+                            style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
                             <i class="material-icons" style="font-size: 24px;">add</i>
                             <span>Add Rule</span>
                         </button>
@@ -629,7 +630,8 @@
                 align-items: flex-end;
                 justify-content: space-between;
             }
-            .date-range-group > .inputContainer {
+            .date-range-group > .inputContainer,
+            .date-range-group > .selectContainer {
                  flex: 1;
             }
 
@@ -671,6 +673,39 @@
             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;
+                },
+
+                getMonthsOptions: function(selectedMonth) {
+                    var months = [
+                        { val: 1, name: 'Jan' },
+                        { val: 2, name: 'Feb' },
+                        { val: 3, name: 'Mar' },
+                        { val: 4, name: 'Apr' },
+                        { val: 5, name: 'May' },
+                        { val: 6, name: 'Jun' },
+                        { val: 7, name: 'Jul' },
+                        { val: 8, name: 'Aug' },
+                        { val: 9, name: 'Sep' },
+                        { val: 10, name: 'Oct' },
+                        { 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');
@@ -698,24 +733,32 @@
                                 <input is="emby-input" class="rule-name" onchange="SeasonalsConfigPage.updateRuleTitles();" />
                             </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" min="1" max="31" />
+                                <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%;">
+                                        ${this.getDaysOptions(startDay)}
+                                    </select>
                                 </div>
-                                <div class="inputContainer" style="margin:0;">
-                                    <label class="inputLabel">Month</label>
-                                    <input is="emby-input" type="number" class="rule-start-month" min="1" max="12" />
+                                <div class="selectContainer" style="margin:0; flex: 1;">
+                                    <label class="selectLabel">Month</label>
+                                    <select is="emby-select" class="rule-start-month" style="width: 100%;">
+                                        ${this.getMonthsOptions(startMonth)}
+                                    </select>
                                 </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" min="1" max="31" />
+                                <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%;">
+                                        ${this.getDaysOptions(endDay)}
+                                    </select>
                                 </div>
-                                <div class="inputContainer" style="margin:0;">
-                                    <label class="inputLabel">Month</label>
-                                    <input is="emby-input" type="number" class="rule-end-month" min="1" max="12" />
+                                <div class="selectContainer" style="margin:0; flex: 1;">
+                                    <label class="selectLabel">Month</label>
+                                    <select is="emby-select" class="rule-end-month" style="width: 100%;">
+                                        ${this.getMonthsOptions(endMonth)}
+                                    </select>
                                 </div>
                             </div>