diff --git a/static/js/widget.js b/static/js/widget.js
index 264272f..12d3527 100644
--- a/static/js/widget.js
+++ b/static/js/widget.js
@@ -1,6 +1,4 @@
 const ComboBoxWidget = (() => {
-    let tempIdCounter = -1;
-
     function initComboBox(ns, config = {}) {
         const input = document.querySelector(`#${ns}-input`);
         const list = document.querySelector(`#${ns}-list`);
diff --git a/templates/fragments/_combobox_fragment.html b/templates/fragments/_combobox_fragment.html
index 3ffc0d9..a65f943 100644
--- a/templates/fragments/_combobox_fragment.html
+++ b/templates/fragments/_combobox_fragment.html
@@ -24,9 +24,9 @@
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             ComboBoxWidget.initComboBox("{{ id }}", {
-                {% if onAdd %}onAdd: {{ onAdd }},{% endif %}
-                {% if onRemove %}onRemove: {{ onRemove }},{% endif %}
-                {% if onEdit %}onEdit: {{ onEdit }}{% endif %}
+                {% if onAdd %}onAdd: function(option) { {{ onAdd | safe }} },{% endif %}
+                {% if onRemove %}onRemove: function(option) { {{ onRemove | safe }} },{% endif %}
+                {% if onEdit %}onEdit: function(option) { {{ onEdit | safe }} }{% endif %}
             });
         });
     </script>
diff --git a/templates/settings.html b/templates/settings.html
index 66b7703..9e91bde 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -19,18 +19,18 @@
                 <div class="row">
                     <div class="col">
                         {{ combos.render_combobox(
-                            id='brand',
-                            options=brands,
-                            label='Brands',
-                            placeholder='Add a new brand'
+                        id='brand',
+                        options=brands,
+                        label='Brands',
+                        placeholder='Add a new brand'
                         ) }}
                     </div>
                     <div class="col">
                         {{ combos.render_combobox(
-                            id='type',
-                            options=types,
-                            label='Inventory Types',
-                            placeholder='Add a new type'
+                        id='type',
+                        options=types,
+                        label='Inventory Types',
+                        placeholder='Add a new type'
                         ) }}
                     </div>
                 </div>
@@ -42,33 +42,80 @@
                 <div class="row">
                     <div class="col">
                         {{ combos.render_combobox(
-                            id='section',
-                            options=sections,
-                            label='Sections',
-                            placeholder='Add a new section'
+                        id='section',
+                        options=sections,
+                        label='Sections',
+                        placeholder='Add a new section'
                         ) }}
                     </div>
                     <div class="col">
                         {{ combos.render_combobox(
-                            id='function',
-                            options=functions,
-                            label='Functions',
-                            placeholder='Add a new function'
+                        id='function',
+                        options=functions,
+                        label='Functions',
+                        placeholder='Add a new function'
                         ) }}
                     </div>
                 </div>
                 <div class="row">
+                    {% set room_editor %}
+                    const roomEditor = new bootstrap.Modal(document.getElementById('roomEditor'));
+                    roomEditor.show();
+                    {% endset %}
                     <div class="col">
                         {{ combos.render_combobox(
-                            id='room',
-                            options=rooms,
-                            label='Rooms',
-                            placeholder='Add a new room'
+                        id='room',
+                        options=rooms,
+                        label='Rooms',
+                        placeholder='Add a new room',
+                        onAdd=room_editor
                         ) }}
                     </div>
                 </div>
             </div>
         </div>
     </div>
+    <div class="modal fade" id="roomEditor" data-bs-backdrop="static" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="roomEditorLabel">Room Editor</h1>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col">
+                            <label for="roomName" class="form-label">Room Name</label>
+                            <input type="text" class="form-input" name="roomName" id="roomName"
+                                placeholder="Enter room name">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <label for="roomSection" class="form-label">Section</label>
+                            <select name="roomSection" id="roomSection" class="form-select">
+                                <option>Select a section</option>
+                                {% for section in sections %}
+                                <option value="{{ section.id }}">{{ section.name }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                        <div class="col">
+                            <label for="roomFunction" class="form-label">Function</label>
+                            <select name="roomFunction" id="roomFunction" class="form-select">
+                                <option>Select a function</option>
+                                {% for function in functions %}
+                                <option value="{{ function.id }}">{{ function.name }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-primary">Save</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </form>
-{% endblock %}
+{% endblock %}
\ No newline at end of file