diff --git a/webapp/static/clients/codemirror/grail.html b/webapp/static/clients/codemirror/grail.html
index a174fb9..8b6581a 100644
--- a/webapp/static/clients/codemirror/grail.html
+++ b/webapp/static/clients/codemirror/grail.html
@@ -166,6 +166,21 @@
         </form>
     </dialog>
 
+ <dialog id="popHelp" popover>
+        <form>
+            <header>Help
+                <button type="button" class="btn-close"  aria-label="Close"
+                 onclick="$('popHelp').hidePopover(); "></button>
+            </header>
+            <div id=popHelpInfo" class="modal-body">
+                TODO
+            </div>
+            <div class="modal-footer">
+                
+            </div>
+        </form>
+    </dialog>
+
     <!--  <popup-info id="popHelp">hhhh</popup-info> -->
 
     <dialog id="popSettings" popover>
diff --git a/webapp/static/clients/codemirror/list.js b/webapp/static/clients/codemirror/list.js
index 8bafc46..62936ae 100644
--- a/webapp/static/clients/codemirror/list.js
+++ b/webapp/static/clients/codemirror/list.js
@@ -30,29 +30,45 @@ class ListComponent extends HTMLElement {
     get data() {
         return this.#data;
     }
+    select(e) {
+        this.#shadow.querySelectorAll('li.selected').forEach(item => { item.className = ''; });
+        e.currentTarget.className = 'selected';
+        console.log('Item clicked:', item, listItem);
+        // You can dispatch a custom event here if needed.
+        this.dispatchEvent(new CustomEvent('itemSelected', {
+            detail: item,
+            bubbles: true,
+            composed: true
+        }));
 
+    }
     /* Render the list items #data */
     render() {
         const list = document.createElement('ul');
         list.style = "max-height:80cqh;overflow: auto;";
-        const shad = this.#shadow;
+
+        const select = e => {
+            if(e.type ==="keyup" && !(e.key==="Enter" )) return;
+            this.#shadow.querySelectorAll('li.selected').forEach(item => { item.className = ''; });
+            e.currentTarget.className = 'selected';
+            const i=e.currentTarget.getAttribute("data-index")
+            console.log('Item index clicked:', i);
+            // You can dispatch a custom event here if needed.
+            this.dispatchEvent(new CustomEvent('itemSelected', {
+                detail: i,
+                bubbles: true,
+                composed: true
+            }));
+        };
         this.#data.forEach((item, index) => {
             const listItem = document.createElement('li');
-            listItem.innerHTML = `<a href="#"><i  class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
-            <span>${item.name} - ${item.detail}</span></a>`;
+            listItem.setAttribute("tabindex", "0")
+            listItem.setAttribute("data-index", index)
+            listItem.innerHTML = `<i  class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
+            <span >${item.name} - ${item.detail}</span>`;
 
-            listItem.addEventListener('click', function (e) {
-                shad.querySelectorAll('li.selected').forEach(item => { item.className = ''; });
-                e.currentTarget.className = 'selected';
-
-                console.log('Item clicked:', item, listItem);
-                // You can dispatch a custom event here if needed.
-                this.dispatchEvent(new CustomEvent('itemSelected', {
-                    detail: item,
-                    bubbles: true,
-                    composed: true
-                }));
-            });
+            listItem.addEventListener('click', select);
+             listItem.addEventListener('keyup', select);
             list.appendChild(listItem);
         });
 
@@ -60,10 +76,10 @@ class ListComponent extends HTMLElement {
         const style = document.createElement('style');
         style.textContent = `
       @import url("../codicon@0.0.40/codicon.css");  
-      ul { list-style-type: none; padding: 0; margin: 0; }
-      li { padding: 1px; border-bottom: 1px solid #ccc; cursor: pointer; }
-      li :not(.selected) :hover { background:  #ccc; }
-      .selected {  background: lightgreen;}
+      ul { list-style-type: none; padding:0;margin:0; }
+      li { padding: 0 0 0 2px; border-bottom: 1px solid #ccc; cursor: pointer; width:100%; }
+      li:hover { background-color:  #ccc; }
+      .selected {  background-color: #0d6efd;color: #ffff;}
       i {vertical-align: middle;}
     `;
         this.#shadow.appendChild(style);