diff --git a/addons/cetmix_tower_server/static/src/components/ace_variables/autocomplete_popup.xml b/addons/cetmix_tower_server/static/src/components/ace_variables/autocomplete_popup.xml
new file mode 100644
index 0000000..ecff260
--- /dev/null
+++ b/addons/cetmix_tower_server/static/src/components/ace_variables/autocomplete_popup.xml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="cetmix_tower_server.AutocompletePopup" owl="1">
+        <div
+            class="ace-autocomplete-popup"
+            t-ref="popupRef"
+            tabindex="0"
+            role="combobox"
+            t-att-aria-label="props.type === 'secrets' ? 'Secret search' : 'Variable search'"
+            aria-expanded="true"
+            aria-haspopup="listbox"
+            t-att-aria-owns="props.type === 'secrets' ? 'secrets-list' : 'variables-list'"
+        >
+            <!-- Close button for mobile convenience -->
+            <button
+                class="ace-autocomplete-close-btn"
+                t-on-click="onCloseClick"
+                type="button"
+                title="Close"
+                t-att-aria-label="props.type === 'secrets' ? 'Close secret search' : 'Close variable search'"
+            >
+                ×
+            </button>
+            <!-- Search input field -->
+            <div class="ace-autocomplete-search">
+                <input
+                    type="text"
+                    class="ace-autocomplete-search-input"
+                    t-att-placeholder="props.type === 'secrets' ? 'Search secrets...' : 'Search variables...'"
+                    t-model="state.searchTerm"
+                    t-ref="searchInput"
+                    t-on-input="onSearchInput"
+                    t-on-keydown="onSearchKeyDown"
+                    t-on-focus="onSearchFocus"
+                    t-on-blur="onSearchBlur"
+                    t-att-aria-label="props.type === 'secrets' ? 'Search secrets' : 'Search variables'"
+                    t-att-aria-controls="props.type === 'secrets' ? 'secrets-list' : 'variables-list'"
+                    aria-autocomplete="list"
+                    t-att-aria-activedescendant="`${props.type === 'secrets' ? 'sec' : 'var'}-opt-${props.selectedIndex}`"
+                />
+            </div>
+            <!-- Items list -->
+            <div
+                class="ace-autocomplete-items"
+                t-ref="itemsContainer"
+                t-att-id="props.type === 'secrets' ? 'secrets-list' : 'variables-list'"
+                role="listbox"
+            >
+                <div
+                    t-foreach="filteredCommands"
+                    t-as="command"
+                    t-key="command.name"
+                    t-att-id="`${props.type === 'secrets' ? 'sec' : 'var'}-opt-${command_index}`"
+                    t-att-class="getItemClass(command_index)"
+                    t-on-click="() => this.onItemClick(command)"
+                    role="option"
+                    t-att-aria-selected="command_index === props.selectedIndex ? 'true' : 'false'"
+                >
+                    <span class="command-name" t-esc="command.name" />
+                    <span
+                        class="command-description"
+                        t-esc="props.type === 'secrets' ? `${command.reference}` : `{{ ${command.reference} }}`"
+                    />
+                </div>
+                <div
+                    t-if="!filteredCommands.length"
+                    class="ace-autocomplete-no-results"
+                >
+                    <t t-if="props.type === 'secrets'">No secrets found</t>
+                    <t t-else="">No variables found</t>
+                </div>
+            </div>
+        </div>
+    </t>
+</templates>