diff --git a/templates/settings.html b/templates/settings.html
index 73692c1..024daa9 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -57,23 +57,23 @@ submit_button=True
             </div>
             <div class="row">
                 {% set room_editor %}
-                const roomEditor = new bootstrap.Modal(document.getElementById('roomEditor'));
-                const roomNameInput = document.getElementById('roomName');
+                const roomEditorModal = new bootstrap.Modal(document.getElementById('roomEditor'));
                 const input = document.getElementById('room-input');
                 const name = input.value.trim();
                 const existingOption = Array.from(document.getElementById('room-list').options)
                     .find(opt => opt.textContent.trim() === name);
 
-                roomNameInput.value = name;
-                document.getElementById('roomId').value = existingOption?.value ?? '';  // this will be the ID or temp ID
+                const event = new CustomEvent('roomEditor:prepare', {
+                    detail: {
+                        id: existingOption?.value ?? '',
+                        name: name,
+                        sectionId: existingOption?.dataset.sectionId ?? '',
+                        functionId: existingOption?.dataset.functionId ?? ''
+                    }
+                });
 
-                if (existingOption?.dataset.sectionId)
-                    document.getElementById('roomSection').value = existingOption.dataset.sectionId;
-
-                if (existingOption?.dataset.functionId)
-                    document.getElementById('roomFunction').value = existingOption.dataset.functionId;
-
-                roomEditor.show();
+                document.getElementById('roomEditor').dispatchEvent(event);
+                roomEditorModal.show();
 
                 document.getElementById('room-input').value = '';
                 {% endset %}
@@ -187,6 +187,38 @@ submit_button=True
         const cancelButton = document.getElementById('roomEditorCancelButton');
         const form = document.getElementById('settingsForm');
 
+    
+        modal.addEventListener('roomEditor:prepare', (event) => {
+            const { id, name, sectionId, functionId } = event.detail;
+            document.getElementById('roomId').value = id;
+            document.getElementById('roomName').value = name;
+        
+            // Populate dropdowns before assigning selection
+            const modalSections = document.getElementById('roomSection');
+            const modalFunctions = document.getElementById('roomFunction');
+            const pageSections = document.getElementById('section-list');
+            const pageFunctions = document.getElementById('function-list');
+        
+            modalSections.innerHTML = '<option value="">Select a section</option>';
+            modalFunctions.innerHTML = '<option value="">Select a function</option>';
+        
+            Array.from(pageSections.options).forEach(opt => {
+                const option = new Option(opt.textContent, opt.value);
+                if (opt.value === sectionId) {
+                    option.selected = true;
+                }
+                modalSections.appendChild(option);
+            });
+        
+            Array.from(pageFunctions.options).forEach(opt => {
+                const option = new Option(opt.textContent, opt.value);
+                if (opt.value === functionId) {
+                    option.selected = true;
+                }
+                modalFunctions.appendChild(option);
+            });
+        });
+
         // Replace the whole submission logic with just JSON
         form.addEventListener('submit', (event) => {
             event.preventDefault(); // 🚨 Stop form from leaving the building
@@ -200,27 +232,6 @@ submit_button=True
             }
         });
 
-        // Modal populates dropdowns fresh from the page every time it opens
-        modal.addEventListener('show.bs.modal', () => {
-            const modalSections = document.getElementById('roomSection');
-            const modalFunctions = document.getElementById('roomFunction');
-            const pageSections = document.getElementById('section-list');
-            const pageFunctions = document.getElementById('function-list');
-
-            modalSections.innerHTML = '';
-            modalFunctions.innerHTML = '';
-
-            modalSections.appendChild(new Option("Select a section", ""));
-            modalFunctions.appendChild(new Option("Select a function", ""));
-
-            Array.from(pageSections.options).forEach(opt =>
-                modalSections.appendChild(new Option(opt.textContent, opt.value))
-            );
-            Array.from(pageFunctions.options).forEach(opt =>
-                modalFunctions.appendChild(new Option(opt.textContent, opt.value))
-            );
-        });
-
         saveButton.addEventListener('click', () => {
             const name = document.getElementById('roomName').value.trim();
             const sectionVal = document.getElementById('roomSection').value;