diff --git a/user_config/usr/share/newton/context_path/index.html b/user_config/usr/share/newton/context_path/index.html
index 24c201b..40fa03e 100644
--- a/user_config/usr/share/newton/context_path/index.html
+++ b/user_config/usr/share/newton/context_path/index.html
@@ -27,8 +27,7 @@
 
     <!-- Buffers modal -->
     <div class="modal" id="buffers-modal" tabindex="-1" role="dialog"
-        data-bs-theme="dark" data-bs-keyboard="false" data-bs-backdrop="static"
-        >
+        data-bs-theme="dark" data-bs-keyboard="false" data-bs-backdrop="static">
         <div class="modal-dialog modal-xl" role="document">
             <div class="modal-content">
                 <div class="modal-header">
@@ -75,7 +74,7 @@
                 </div>
 
                 <div class="modal-footer">
-                            <button onclick="loadPythonLSPFromBlobURLs()">Load LSP Client</button>
+                    <button onclick="loadPythonLSPFromBlobURLs()">Load LSP Client</button>
                 </div>
             </div>
         </div>
@@ -85,6 +84,16 @@
 
 
     <!-- Template Tags... -->
+    <template id="lsp-config-template">
+        <style>
+        </style>
+        <section>
+            <div id="lsp-config" class="row">
+                <hr/>
+                <h2 id="title"></h2>
+            </div>
+        </section>
+    </template>
     <template id="input-list-template">
         <style>
             ul, li {
@@ -100,15 +109,15 @@
             }
         </style>
         <section>
-            <hr/>
-            <h2 id="title"></h2>
+            <h1 id="title"></h1>
             <ul id="input-list">
             </ul>
         </section>
     </template>
     <template id="input-list-item-template">
         <style>
-            li {
+            ul, li {
+                list-style: none;
             }
         </style>
         <li id="input-list-item">
diff --git a/user_config/usr/share/newton/context_path/resources/js/newton/components.js b/user_config/usr/share/newton/context_path/resources/js/newton/components.js
index a05c2b2..8373259 100644
--- a/user_config/usr/share/newton/context_path/resources/js/newton/components.js
+++ b/user_config/usr/share/newton/context_path/resources/js/newton/components.js
@@ -1,3 +1,38 @@
+class LspConfigContainer extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    loadShaddowRoot(tag = "lsp-config-template") {
+        let template = document.getElementById(tag);
+        let templateContent = template.content;
+
+        const shadowRoot = this.attachShadow({ mode: "open" });
+        shadowRoot.appendChild( templateContent.cloneNode(true) );
+    }
+
+    setTitle(title = "[NO TITLE]") {
+        this.shadowRoot.getElementById("title").innerText = title;
+    }
+
+    append(elm = null) {
+        if (!elm) return;
+        this.shadowRoot.getElementById("lsp-config").appendChild(elm);
+    }
+
+    remove(elm = null) {
+        if (!elm) return;
+        this.shadowRoot.getElementById("lsp-config").remove(elm);
+    }
+
+    serialize() {
+        let tags = this.shadowRoot.children;
+        for (var i = 0; i < tags.length; i++) {
+            data = tags[i].serialize();
+        }
+    }
+}
+
 class InputListContainer extends HTMLElement {
     constructor() {
         super();
@@ -10,11 +45,11 @@ class InputListContainer extends HTMLElement {
         const shadowRoot = this.attachShadow({ mode: "open" });
         shadowRoot.appendChild( templateContent.cloneNode(true) );
     }
-    
+
     setTitle(title = "[NO TITLE]") {
         this.shadowRoot.getElementById("title").innerText = title;
     }
-    
+
     append(elm = null) {
         if (!elm) return;
         this.shadowRoot.getElementById("input-list").appendChild(elm);
@@ -33,6 +68,7 @@ class InputListContainer extends HTMLElement {
     }
 }
 
+
 class InputListItemContainer extends HTMLElement {
     constructor() {
         super();
@@ -72,6 +108,13 @@ class InputListItemContainer extends HTMLElement {
 }
 
 
+class LspConfig extends LspConfigContainer {
+    constructor() {
+        super();
+        this.loadShaddowRoot();
+    }
+}
+
 class InputList extends InputListContainer {
     constructor() {
         super();
@@ -84,4 +127,4 @@ class InputListItem extends InputListItemContainer {
         super();
         this.loadShaddowRoot();
     }
-}
+}
\ No newline at end of file
diff --git a/user_config/usr/share/newton/context_path/resources/js/newton/events.js b/user_config/usr/share/newton/context_path/resources/js/newton/events.js
index 14a9f9b..e14f6da 100644
--- a/user_config/usr/share/newton/context_path/resources/js/newton/events.js
+++ b/user_config/usr/share/newton/context_path/resources/js/newton/events.js
@@ -16,6 +16,7 @@ window.onload = (eve) => {
 
 
 const defineCustomElements = () => {
+    customElements.define("lsp-config", LspConfig, { extends: 'div' });
     customElements.define("input-list", InputList, { extends: 'ul' });
     customElements.define("input-list-item", InputListItem, { extends: 'li' });
 }
diff --git a/user_config/usr/share/newton/context_path/resources/js/newton/lsp-manager.js b/user_config/usr/share/newton/context_path/resources/js/newton/lsp-manager.js
index 8ccf412..bc5dd60 100644
--- a/user_config/usr/share/newton/context_path/resources/js/newton/lsp-manager.js
+++ b/user_config/usr/share/newton/context_path/resources/js/newton/lsp-manager.js
@@ -89,17 +89,20 @@ const loadPythonLSPFromNetwork = () => {
 
 
 const loadSettingsFileToUI = async () => {
-    let languages = Object.keys(lspServersConfig);
+    generateElement(lspServersConfig);
 
-    for (let i = 0; i < languages.length; i++) {
-        let lang = languages[i];
-        let elm  = document.createElement("input-list");
+    // let config = lspServersConfig;
+    // let keys = Object.keys(lspServersConfig);
 
-        elm.setTitle(lang);
-        lspSettingsUI.appendChild( elm );
+    // for (let i = 0; i < languages.length; i++) {
+    //     let elm  = document.createElement("lsp-config");
+    //     let lang = languages[i];
 
-        generateElement(lang, elm, lspServersConfig[lang]);
-    }
+    //     elm.setTitle(lang);
+    //     lspSettingsUI.appendChild( elm );
+
+    //     generateElement(lang, elm, lspServersConfig[lang]);
+    // }
 
 }
 
@@ -109,25 +112,21 @@ const saveSettingsFileFromUI = () => {
 }
 
 
-const generateElement = (parent, elm, config) => {
+const generateElement = (config = {}, parent = "", elm = null) => {
     const proto = Object.getPrototypeOf(config)
+    console.log(config, parent, elm);
 
     switch (proto) {
         case String.prototype:
-            let inputElm = document.createElement("input-list-item");
-            inputElm.setTitle(parent);
-            inputElm.setText(config);
-            elm.append(inputElm);
+            handleString(config, elm);
+
+            // lspSettingsUI.appendChild( target );
 
             break;
         case Array.prototype:
-            let inputListElm = document.createElement("input-list");
-            for (var i = 0; i < config.length; i++) {
-                let inputElm = document.createElement("input-list-item");
-                inputElm.setText( config[i] );
-                inputListElm.append(inputElm);
-            }
-            elm.append(inputListElm);
+            handleList(config, elm);
+
+            // lspSettingsUI.appendChild( target );
 
             break;
         case Boolean.prototype:
@@ -138,13 +137,21 @@ const generateElement = (parent, elm, config) => {
             break;
         default:
             if ( isDict(config) ) {
-                let keys = Object.keys(config);
+                if (parent === "" && elm === null) {
+                    handleRoot(config);
+                    // let elm  = document.createElement("lsp-config");
+                    // let lang = languages[i];
 
-                for (let i = 0; i < keys.length; i++) {
-                    let key = keys[i];
-                    generateElement(key, elm, config[key] );
+                    break;
                 }
 
+                handleDictionary(config, elm);
+
+                // target = handleDictionary(config, elm);
+                // lspSettingsUI.appendChild( target );
+                // let elm  = document.createElement("lsp-config");
+                // let lang = languages[i];
+
                 break;
             }
 
@@ -153,6 +160,54 @@ const generateElement = (parent, elm, config) => {
 
 }
 
-const isDict = (dict) => {
-    return typeof dict === "object" && !Array.isArray(dict);
-};
\ No newline at end of file
+
+
+
+const handleRoot = (config) => {
+    let keys = Object.keys(config);
+
+    for (let i = 0; i < keys.length; i++) {
+        let elm = document.createElement("lsp-config");
+        let key = keys[i];
+
+        elm.setTitle(key);
+        lspSettingsUI.appendChild( elm );
+
+        generateElement(config[key], key, elm);
+    }
+
+}
+
+
+const handleDictionary = (config, elm) => {
+    let keys = Object.keys(config);
+
+    for (let i = 0; i < keys.length; i++) {
+        let key = keys[i];
+
+        generateElement(config[key], key, elm);
+    }
+}
+
+const handleList = (config, elm) => {
+    let listElm = document.createElement("input-list");
+
+    for (var i = 0; i < config.length; i++) {
+        let inputElm = document.createElement("input-list-item");
+        inputElm.setText( config[i] );
+        listElm.append(inputElm);
+    }
+
+    elm.append(listElm);
+
+    return elm;
+}
+
+const handleString = (config, elm) => {
+    console.log(config, elm);
+    let inputElm = document.createElement("input-list-item");
+
+    inputElm.setTitle(parent);
+    inputElm.setText(config);
+    elm.append(inputElm);
+}
\ No newline at end of file
diff --git a/user_config/usr/share/newton/context_path/resources/js/newton/utils.js b/user_config/usr/share/newton/context_path/resources/js/newton/utils.js
index 11232b0..de81aa4 100644
--- a/user_config/usr/share/newton/context_path/resources/js/newton/utils.js
+++ b/user_config/usr/share/newton/context_path/resources/js/newton/utils.js
@@ -45,7 +45,9 @@ const sendMessage = (topic = null, ftype = "", fhash = "", fpath = "", content =
     messenger.backend.postMessage( JSON.stringify(messageBody) );
 }
 
-const sleep = ms => new Promise(r => setTimeout(r, ms));
+const sleep  = ms => new Promise(r => setTimeout(r, ms));
+const isDict = (dict) => { return typeof dict === "object" && !Array.isArray(dict); };
+
 
 const getSHA256Hash = async (input) => {
     let textAsBuffer = new TextEncoder().encode(input);