diff --git a/.gitignore b/.gitignore
index 6769e21..7b59aa8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,10 @@ __pycache__/
 *.py[cod]
 *$py.class
 
+# vscode
+*.code-workspace
+.vscode/*
+
 # C extensions
 *.so
 
diff --git a/js/sidebar_node.js b/js/sidebar_node.js
index 3d7f9ef..77c6a4f 100644
--- a/js/sidebar_node.js
+++ b/js/sidebar_node.js
@@ -3,6 +3,17 @@ import { api } from "../../../scripts/api.js"
 import { app } from "../../../scripts/app.js";
 import { $el } from "../../../scripts/ui.js";
 
+async function api_get(url) {
+    var response = await api.fetchApi(url, { cache: "no-store" })
+    return await response.json()
+}
+
+let CUSTOM_COLORS;
+try {
+    const CONFIG_CORE = await api_get("/jovimetrix/config")
+    CUSTOM_COLORS = CONFIG_CORE?.user?.default?.color?.theme;
+} catch {}
+
 
 console.time('execution time');
 async function api_get(url) {
@@ -27,6 +38,7 @@ function addSidebarStyles() {
             position: absolute;
             top: 0;
             left: -250px;
+            left: -250px;
             width: fit-content;
             height: calc(100% - 19px);
             color: white;
@@ -34,27 +46,27 @@ function addSidebarStyles() {
 			z-index: 2;
 			padding-top: 19px;
             left: 0;
-            user-select: none; 
-	
+            user-select: none;
+
         }
-       
+
         .sidebar ul {
             list-style-type: none;
-      
+
             border-bottom: 6px solid #252525;
-            background: #222;    
+            background: #222;
             padding-left: 5px;
             padding-right: 5px;
         }
         .sidebar li {
 			padding: 10px;
 			cursor: pointer;
-			user-select: none; 
+			user-select: none;
 		}
-		
+
         .content_sidebar {
             background-color: #353535; /*#3333337d;*/
-            overflow-y: auto; 
+            overflow-y: auto;
             overflow-x: hidden;
             height: 100%;
             float:left;
@@ -67,8 +79,8 @@ function addSidebarStyles() {
             right: 0;
             top: 0;
             height: 100%;
-            width: 10px; 
-            cursor: ew-resize; 
+            width: 10px;
+            cursor: ew-resize;
             background: rgb(62,62,62);
         background: linear-gradient(90deg, rgb(62 62 62 / 46%) 0%, rgb(39 39 39 / 47%) 50%, rgb(28 28 28 / 31%) 100%);
         }
@@ -78,7 +90,7 @@ function addSidebarStyles() {
             border-radius: 5px;
             padding: 10px;
             border: none;
-            user-select: none; 
+            user-select: none;
             background: #222;
             color: #fff;
             line-height: 1.4;
@@ -88,10 +100,10 @@ function addSidebarStyles() {
             width: calc(100% - 49px);
             margin-top: 5px;
             margin-bottom: 10px;
-            margin-left: 10px;  
-        
+            margin-left: 10px;
+
             z-index: 400;
-            
+
         }
         .clearIcon,.searchCategoryIcon{
             position: absolute;
@@ -120,7 +132,7 @@ function addSidebarStyles() {
             width: 18px;
             text-align: center;
             top: 0;
-            
+
 
         }
 
@@ -210,7 +222,7 @@ function addSidebarStyles() {
             display: none;
         }
         #content_sidebar.closed {
-            width: 0 !important; 
+            width: 0 !important;
         }
         .searchCategoryIcon.closed {
             display: none;
@@ -265,7 +277,7 @@ function addSidebarStyles() {
         }
         .svg_class:hover{
             fill: #4e4e4e;
-            
+
         }
 
 
@@ -279,7 +291,7 @@ function addSidebarStyles() {
             position: relative;
             margin: 5px;
             font-weight: bold;
-        
+
             background: #1e1e1e;
             /* border: 2px solid; */
             border-radius: 3px;
@@ -296,10 +308,10 @@ function addSidebarStyles() {
             right: 5px;
             background: transparent;
             border: 0;
-            
+
         }
         .expand_node svg ,  .pin_node svg {
-            
+
             width: 20px;
             height: 20px;
             background: transparent;
@@ -459,15 +471,15 @@ function setCookie(name, value, days) {
 function getSidebarItemIds() {
     const sidebarItems = document.querySelectorAll("#sidebarBookmarks .sidebarItem");
     const itemIds = [];
-    
+
     sidebarItems.forEach(function(item) {
         itemIds.push(item.id);
     });
-    
+
     return itemIds;
 }
 function postPinned() {
-    
+
 
     var dragItem = null;
     const pinnedElement= document.getElementById("sidebarBookmarks");
@@ -620,7 +632,7 @@ function sdExpandAll() {
     if (side_bar_status === "true") {
 
         display_value = "none";
-        expand_node.innerHTML = `<svg  xmlns="http://www.w3.org/2000/svg" 
+        expand_node.innerHTML = `<svg  xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve">
                     <path d="M48,9.5C48,8.7,47.3,8,46.5,8h-41C4.7,8,4,8.7,4,9.5v3C4,13.3,4.7,14,5.5,14h41c0.8,0,1.5-0.7,1.5-1.5V9.5z"
                         />
@@ -642,7 +654,7 @@ function sdExpandAll() {
                         V39.5z"></path>
                     <path d="M34.5,29c0.8,0,1.5-0.7,1.5-1.5v-3c0-0.8-0.7-1.5-1.5-1.5h-17c-0.8,0-1.5,0.7-1.5,1.5v3
                         c0,0.8,0.7,1.5,1.5,1.5H34.5z"></path>
-                       
+
                         <rect class="expand_node" style="opacity:0" x="0" y="0" width="52" height="52"  />
                     </svg>`;
         document.querySelector(".content_sidebar").dataset.expanded = "true";
@@ -1041,13 +1053,13 @@ function addSidebar() {
     <span class="searchCategoryIcon">C</span>
     </div>
 	<div class="content_sidebar" id ="content_sidebar" data-expanded="false" style="width:${sidebar_width};">
-    
-	
+
+
     <div id="spacer"></div>
     <label class="sb_label">PINNED</label>
 	<ul id="sidebarBookmarks"></ul>
     <label class="sb_label">CUSTOM NODES<button class="expand_node" >
-    <svg  xmlns="http://www.w3.org/2000/svg" 
+    <svg  xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve">
                     <path d="M48,9.5C48,8.7,47.3,8,46.5,8h-41C4.7,8,4,8.7,4,9.5v3C4,13.3,4.7,14,5.5,14h41c0.8,0,1.5-0.7,1.5-1.5V9.5z"
                         />
@@ -1083,39 +1095,39 @@ function addSidebar() {
 
     clearIcon.addEventListener("click", async function () {
         try {
-            
+
             searchInput.value = "";
 
-            
+
             const searchTerm = await handleSearch();
 
-            
+
             //console.log("Search term cleared:", searchTerm);
 
-            
+
         } catch (error) {
-            
+
             console.error("Error occurred during search:", error);
         }
     });
 
     searchCategoryIcon.addEventListener("click", async function () {
         try {
-            
+
             categorySearchToggle = !categorySearchToggle;
 
-            
+
             searchCategoryIcon.style.opacity = categorySearchToggle ? "1" : "0.5";
 
-            
+
             const searchTerm = await handleSearch();
 
-            
+
             //console.log("Search term:", searchTerm);
 
-            
+
         } catch (error) {
-            
+
             console.error("Error occurred during search:", error);
         }
     });
@@ -1189,9 +1201,9 @@ function addSidebar() {
 
     function handleDrop(event) {
         event.preventDefault();
-  
+
         if (event.srcElement.tagName.toLowerCase() != "canvas") {
-            return; 
+            return;
         }
         const coord = convertCanvasToOffset(app.canvasEl.data.ds, [event.clientX, event.clientY]);
         const x = coord[0];
@@ -1242,7 +1254,7 @@ function addSidebar() {
             const categoryItems = document.querySelectorAll(".sidebarCategory li");
             const categories = document.querySelectorAll(".sidebarCategory");
             const listItems = document.querySelectorAll(".sidebar li");
-            
+
 
             /*reset*/
             categoryItems.forEach(category => {
@@ -1282,7 +1294,7 @@ function addSidebar() {
                 category.style.display = areAllHidden ? "none" : category.style.display;
             });
 
-            
+
             resolve(searchTerm);
         });
     }
@@ -1290,11 +1302,11 @@ function addSidebar() {
     
     search_bar.addEventListener("input", async (event) => {
         try {
-            
+
             const searchTerm = await handleSearch(event);
             
         } catch (error) {
-            
+
             console.error("Error occurred during search:", error);
         }
     });