diff --git a/src/assets/stylesheets/components/all-components.scss b/src/assets/stylesheets/components/all-components.scss
index 939be4bb..477f6094 100644
--- a/src/assets/stylesheets/components/all-components.scss
+++ b/src/assets/stylesheets/components/all-components.scss
@@ -26,6 +26,7 @@
 @use './widget/EndClassWidgetValue.scss';
 @use './widget/WidgetWrapper.scss';
 @use './widget/MapWidget.scss';
+@use './widget/TreeWidget.scss';
 // link components
 @use './link-and-component.scss';
 @use './link-where-child.scss';
diff --git a/src/assets/stylesheets/components/widget/TreeWidget.scss b/src/assets/stylesheets/components/widget/TreeWidget.scss
new file mode 100644
index 00000000..04e13554
--- /dev/null
+++ b/src/assets/stylesheets/components/widget/TreeWidget.scss
@@ -0,0 +1,92 @@
+@use '../../mixins';
+@use '../../base';
+@use '../../themes';
+
+.tree-widget {
+    height: 100%;
+    .treeBtnDisplay {
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        transform: translate(0, -50%);
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        background: #fff;
+        box-shadow: 0px 2px 3px 0px #cfcfcf;
+        padding: 5px;
+        line-height: 1;
+        z-index: 1;
+        cursor: pointer;
+        img {
+            height: 26px;
+        }
+    }
+    .treeLayer {
+        display: none;
+        position: absolute;
+        top: 50%;
+        margin-top: -19px;
+        left: 95%;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        background: #fff;
+        box-shadow: 0px 2px 3px 0px #cfcfcf;
+        z-index: 2;
+
+        .treeClose {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            width: 22px;
+            height: 22px;
+            vertical-align: top;
+            line-height: 22px;
+            cursor: pointer;
+            i {
+                text-align: center;
+                color: themes.$custom-red-bold;
+                background: #fff !important;
+                font-size: 18px;
+            }
+        }
+
+        .treeNotice {
+            padding: 5px;
+            display: none;
+            line-height: 20px;
+        }
+        .treeDisplay {
+            overflow: auto;
+            max-height: 500px;
+            min-width: 275px;
+            padding: 25px 10px 5px;
+
+            &.jstree-default .jstree-disabled {
+                opacity: 0.5;
+            }
+            &.jstree-default .jstree-checkbox-disabled {
+                opacity: 0.5;
+            }
+        }
+        .treeActions {
+            border-top: 2px solid #ddd;
+            padding: 5px 10px;
+            text-align: right;
+            a {
+                border-radius: 5px;
+                color: #fff;
+                display: inline-block;
+                margin-left: 10px;
+                padding: 15px 5px;
+                line-height: 1;
+                cursor: pointer;
+            }
+            a.treeCancel {
+                background: #EE8D67;
+            }
+            a.treeSubmit {
+                background: #84C99E;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/stylesheets/components/widget/WidgetWrapper.scss b/src/assets/stylesheets/components/widget/WidgetWrapper.scss
index 7a75ffa1..d6baa088 100644
--- a/src/assets/stylesheets/components/widget/WidgetWrapper.scss
+++ b/src/assets/stylesheets/components/widget/WidgetWrapper.scss
@@ -232,93 +232,4 @@
         }
     }
 
-    .tree-widget {
-        height: 100%;
-        .treeBtnDisplay {
-            position: absolute;
-            left: 100%;
-            top: 50%;
-            transform: translate(0, -50%);
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            background: #fff;
-            box-shadow: 0px 2px 3px 0px #cfcfcf;
-            padding: 5px;
-            line-height: 1;
-            z-index: 2;
-            cursor: pointer;
-            img {
-                height: 26px;
-            }
-        }
-        .treeLayer {
-            display: none;
-            position: absolute;
-            top: 50%;
-            margin-top: -19px;
-            left: 95%;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            background: #fff;
-            box-shadow: 0px 2px 3px 0px #cfcfcf;
-            z-index: 1;
-
-            .treeClose {
-                position: absolute;
-                top: 5px;
-                right: 5px;
-                width: 22px;
-                height: 22px;
-                vertical-align: top;
-                line-height: 22px;
-                cursor: pointer;
-                i {
-                    text-align: center;
-                    color: themes.$custom-red-bold;
-                    background: #fff !important;
-                    font-size: 18px;
-                }
-            }
-
-            .treeNotice {
-                padding: 5px;
-                display: none;
-                line-height: 20px;
-            }
-            .treeDisplay {
-                overflow: auto;
-                max-height: 500px;
-                min-width: 275px;
-                padding: 25px 10px 5px;
-                
-                &.jstree-default .jstree-disabled {
-                    opacity: 0.5;
-                }
-                &.jstree-default .jstree-checkbox-disabled {
-                    opacity: 0.5;
-                }
-            }
-            .treeActions {
-                border-top: 2px solid #ddd;
-                padding: 5px 10px;
-                text-align: right;
-                a {
-                    border-radius: 5px;
-                    color: #fff;
-                    display: inline-block;
-                    margin-left: 10px;
-                    padding: 15px 5px;
-                    line-height: 1;
-                    cursor: pointer;
-                }
-                a.treeCancel {
-                    background: #EE8D67;
-                }
-                a.treeSubmit {
-                    background: #84C99E;
-                }
-            }
-        }
-    }
-
 }
\ No newline at end of file
diff --git a/src/sparnatural/components/builder-section/groupwrapper/criteriagroup/edit-components/widgets/TreeWidget.ts b/src/sparnatural/components/builder-section/groupwrapper/criteriagroup/edit-components/widgets/TreeWidget.ts
index cc931e4a..32df7434 100644
--- a/src/sparnatural/components/builder-section/groupwrapper/criteriagroup/edit-components/widgets/TreeWidget.ts
+++ b/src/sparnatural/components/builder-section/groupwrapper/criteriagroup/edit-components/widgets/TreeWidget.ts
@@ -1,8 +1,10 @@
 import { Pattern } from "sparqljs";
 import UiuxConfig from "../../../../../../../configs/fixed-configs/UiuxConfig";
 import { SelectedVal } from "../../../../../../sparql/ISparJson";
-import HTMLComponent from "../../../../../HtmlComponent";
 import { AbstractWidget, ValueType, WidgetValue } from "./AbstractWidget";
+import "jstree"
+import ISettings from "../../../../../../../configs/client-configs/ISettings";
+import WidgetWrapper from "../WidgetWrapper";
 
 require("jstree/dist/themes/default/style.min.css");
 
@@ -19,25 +21,22 @@ export class TreeWidget extends AbstractWidget {
   loaderHandler: any;
   langSearch: any;
   IdCriteriaGroupe: any;
-
-  itc_obj: any;
   jsTree: any;
   value: TreeWidgetValue;
-
   // html content
   button: any;
-  displayLayer: any;
   hiddenInput: any;
-
   startClassVal: SelectedVal;
   objectPropVal: SelectedVal;
   endClassVal: SelectedVal;
+  settings:ISettings
+  displayLayer: JQuery<HTMLElement>
 
   constructor(
-    parentComponent: any,
+    parentComponent: WidgetWrapper,
     loaderHandler: any,
-    settings: any,
-    langSearch: any,
+    settings: ISettings,
+    langSearch: string,
     startClassVal: SelectedVal,
     objectPropVal: SelectedVal,
     endClassVal: SelectedVal
@@ -52,7 +51,6 @@ export class TreeWidget extends AbstractWidget {
     );
     this.loaderHandler = loaderHandler;
     this.langSearch = langSearch;
-    // TODO : remove
     this.IdCriteriaGroupe = "id";
 
     this.startClassVal = startClassVal;
@@ -99,9 +97,6 @@ export class TreeWidget extends AbstractWidget {
     var endClassGroup_value = this.endClassVal.type;
     var ObjectPropertyGroup_value = this.objectPropVal.type;
 
-    var id_inputs = this.IdCriteriaGroupe;
-    this.itc_obj = this.ParentComponent;
-
     var self = this;
     var loaderHandler = this.loaderHandler;
     var options = {
@@ -202,7 +197,7 @@ export class TreeWidget extends AbstractWidget {
     };
 
     // this.jsTree = $("#ecgrw-" + id_inputs + "-display").jstree(options);
-    this.jsTree = this.displayLayer.jstree(options);
+    this.jsTree = this.displayLayer.find("#ecgrw-"+this.IdCriteriaGroupe+"-display").jstree(options);
 
     this.button.on("click", { arg1: this }, this.onClickDisplay);
     //disable/enable on max selction
@@ -297,22 +292,24 @@ export class TreeWidget extends AbstractWidget {
   };
 
   onClickDisplay = function (e: any) {
-    this.displayLayer.show();
+    let this_ = e.data.arg1;
+    this_.displayLayer.show();
   };
 
   onClickCancel = function (e: any) {
     let this_ = e.data.arg1;
-    this_.jsTree.jstree().deselect_all();
+    this_.displayLayer.hide();
   };
 
   onClickSelect = function (e: any) {
     let this_ = e.data.arg1;
     this.displayLayer.hide();
-    $(this_.itc_obj).trigger("change");
   };
 
   onClickClose = function (e: any) {
+    let this_ = e.data.arg1;
     this.displayLayer.hide();
+    $(this_.ParentComponent).trigger("change");
   };
 
   getValue = function () {