diff --git a/src/app/main/dropdown/dropdown.component.html b/src/app/main/dropdown/dropdown.component.html
index a18b36a..c0ebf09 100644
--- a/src/app/main/dropdown/dropdown.component.html
+++ b/src/app/main/dropdown/dropdown.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex align-items-center p-2">
+<div class="d-flex align-items-center p-2" style="height: 3.2rem">
     <h3 class="mr-2">End Item: </h3>
     <p-dropdown [options]="xaList" [(ngModel)]="selectedEndItem" (onChange)="onChange($event)"></p-dropdown>
 </div>
\ No newline at end of file
diff --git a/src/app/main/dropdown/dropdown.component.ts b/src/app/main/dropdown/dropdown.component.ts
index bc99b6d..868ab42 100644
--- a/src/app/main/dropdown/dropdown.component.ts
+++ b/src/app/main/dropdown/dropdown.component.ts
@@ -17,11 +17,11 @@ export class DropdownComponent implements OnInit {
 
   xaList: SelectItem[];
 
-  selectedEndItem;
+  selectedEndItem: any;
 
   async ngOnInit() {
     const xas = await this.geiaService.getXAs().toPromise();
-    this.xaList = xas.map(xa => ({ label: xa.endItemAcronymCode, value: xa.endItemAcronymCode }));
+    this.xaList = xas.map(xa => ({ label: xa.endItemAcronymCode, value: xa }));
     this.xaList.unshift({ label: 'None selected', value: null });
   }
 
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 9f15d2c..07cf928 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -1,7 +1,7 @@
 <div class="bg-secondary">
     <app-dropdown></app-dropdown>
 </div>
-<div *ngIf="endItemService.endItem$ | async" class="d-flex h-100 w-100" >
+<div *ngIf="endItemService.endItem$ | async" class="d-flex w-100" style="height: calc(100% - 3.2rem)">
     <app-tree></app-tree>
     <app-main-center class="w-100"></app-main-center>
 </div>
\ No newline at end of file
diff --git a/src/app/main/tree/tree.component.html b/src/app/main/tree/tree.component.html
index 1246370..22f712b 100644
--- a/src/app/main/tree/tree.component.html
+++ b/src/app/main/tree/tree.component.html
@@ -1,4 +1,4 @@
-<p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)">
+<p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)" (onNodeExpand)="loadNode($event)">
     <ng-template let-node pTemplate="default">
         <div class="tree">
             <div class="flex-fill">{{ node.label }}</div>
diff --git a/src/app/main/tree/tree.component.ts b/src/app/main/tree/tree.component.ts
index 5419316..52897f3 100644
--- a/src/app/main/tree/tree.component.ts
+++ b/src/app/main/tree/tree.component.ts
@@ -4,6 +4,7 @@ import { Subscription } from 'rxjs';
 import { NodeService } from 'src/app/services/node.service';
 import { TreeService } from 'src/app/services/tree.service';
 import { EndItemService } from 'src/app/services/enditem.service';
+import { GeiaService } from 'src/app/services/api/geia.service';
 
 @Component({
   selector: 'app-tree',
@@ -20,20 +21,81 @@ export class TreeComponent implements OnInit, OnDestroy {
   constructor(
     private treeService: TreeService,
     private nodeService: NodeService,
-    private endItemService: EndItemService
+    private endItemService: EndItemService,
+    private geiaService: GeiaService
   ) { }
 
   ngOnInit() {
-    this.dropdownSubscription = this.endItemService.endItem$.subscribe(xa =>  this.selectedEndItem = xa);
-    this.nodeService.getFiles().then(files => (this.filesTree = files));
+    this.dropdownSubscription = this.endItemService.endItem$.subscribe(async xa => {
+      this.selectedEndItem = xa;
+      const xbs = await this.geiaService.getTopLevelXBs(xa).toPromise();
+      this.filesTree = this.mapXBsToTree(xbs);
+    });
+    // this.nodeService.getFiles().then(files => (this.filesTree = files));
   }
 
   nodeSelect(event: { node: TreeNode }) {
     this.treeService.changeNode(event.node);
   }
 
+  async loadNode(event: { node: TreeNode }) {
+    const data = event.node.data.geia;
+    let ret = [];
+    if (data.xbChildren != null) {
+      const xbs = await this.geiaService.getXBs(this.endItemService.getFullEndItem().endItemAcronymCode, data.lcn).toPromise();
+      ret = this.mapXBsToTree(xbs);
+    }
+    if (data.caChildren != null) {
+      const cas = await this.geiaService.getCAs(this.endItemService.getFullEndItem().endItemAcronymCode, data.lcn).toPromise();
+      ret = ret.concat(this.mapCAsToTree(cas));
+    }
+    event.node.children = ret;
+  }
+
   ngOnDestroy() {
     this.dropdownSubscription.unsubscribe();
   }
 
+  mapXBsToTree(xbs: any[]): TreeNode[] {
+    const lcnStructure = this.endItemService.getFullEndItem().lcnStructure;
+    return xbs.map(xb => ({
+      label: `${this.lcnToString(xb.lcn, lcnStructure)} ${xb.lcnNomenclature}`,
+      leaf: this.isXBLeaf(xb),
+      data: {
+        geia: xb,
+        pdfName: 'radar.pdf'
+      }
+    }));
+  }
+
+  mapCAsToTree(cas: any[]): TreeNode[] {
+    return cas.map(ca => ({
+      label: `${ca.taskCode} ${ca.taskIdentification}`,
+      leaf: true,
+      data: {
+        geia: ca,
+        pdfName: 'radar2.pdf'
+      }
+    }));
+  }
+
+  isXBLeaf(xb: any): boolean {
+    return xb.xbChildren == null && xb.caChildren == null;
+  }
+
+  lcnToString(lcn: string, lcnStructure: string) {
+    const acc = [];
+    let processed = 0;
+    for (let i = 0; i < lcnStructure.length; i++) {
+      const len = Number(lcnStructure.charAt(i));
+      if (processed < lcn.length) {
+        acc.push(lcn.substr(processed, processed + len));
+        processed += len;
+      } else {
+        break;
+      }
+    }
+    return acc.join('-');
+  }
+
 }
diff --git a/src/app/services/enditem.service.ts b/src/app/services/enditem.service.ts
index bead0cf..4d6633a 100644
--- a/src/app/services/enditem.service.ts
+++ b/src/app/services/enditem.service.ts
@@ -9,8 +9,15 @@ export class EndItemService {
     private selectedEndItem = new BehaviorSubject<string>(null);
     endItem$ = this.selectedEndItem.asObservable();
 
-    setEndItem(endItem: string) {
-        this.selectedEndItem.next(endItem);
+    private fullEndItem: any;
+
+    setEndItem(endItem: any) {
+        this.fullEndItem = endItem;
+        this.selectedEndItem.next(endItem.endItemAcronymCode);
+    }
+
+    getFullEndItem(): any {
+        return this.fullEndItem;
     }
 
 }
diff --git a/src/styles.css b/src/styles.css
index 0d458dd..8b92776 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -7,5 +7,6 @@ html, body, app-root {
 
 app-tree .ui-tree {
     height: 100%;
-    width: 100%;
+    width: 25rem;
+    max-width: 25rem;
 }
\ No newline at end of file