diff --git a/src/main/webapp/app/ctx-tree/ctx-tree.component.html b/src/main/webapp/app/ctx-tree/ctx-tree.component.html
index 30028ee..9a6da39 100644
--- a/src/main/webapp/app/ctx-tree/ctx-tree.component.html
+++ b/src/main/webapp/app/ctx-tree/ctx-tree.component.html
@@ -1,4 +1,4 @@
-  <h2 class="display-8" id="tree-title"><span>Available contexts</span></h2>
+  <h2 class="display-8" id="tree-title"><span>Available Resources</span></h2>
   <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
     <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
 		<button mat-button (click)="loadTable(node)">
diff --git a/src/main/webapp/app/ctx-tree/ctx-tree.component.scss b/src/main/webapp/app/ctx-tree/ctx-tree.component.scss
index bef4037..1d0270f 100644
--- a/src/main/webapp/app/ctx-tree/ctx-tree.component.scss
+++ b/src/main/webapp/app/ctx-tree/ctx-tree.component.scss
@@ -25,7 +25,7 @@
  * This padding sets alignment of the nested nodes.
  */
 .example-tree .mat-nested-tree-node div[role='group'] {
-  padding-left: 40px;
+  padding-left: 25px;
 }
 
 /*
@@ -34,5 +34,5 @@
  * under the same parent.
  */
 .example-tree div[role='group'] > .mat-tree-node {
-  padding-left: 40px;
+  padding-left: 25px;
 }
diff --git a/src/main/webapp/app/ctx-tree/ctx-tree.component.ts b/src/main/webapp/app/ctx-tree/ctx-tree.component.ts
index 978b861..a6681d8 100644
--- a/src/main/webapp/app/ctx-tree/ctx-tree.component.ts
+++ b/src/main/webapp/app/ctx-tree/ctx-tree.component.ts
@@ -1,33 +1,34 @@
 import { Component , OnInit } from '@angular/core';
 import { MatTreeNestedDataSource } from '@angular/material/tree';
 import { NestedTreeControl } from '@angular/cdk/tree';
-import { IContextNode } from 'app/services/i-context-node';
-import { MockCtxloaderService } from 'app/services/mock-ctxloader.service';
+//import { IContextNode } from 'app/services/i-context-node';
+import { IResource } from 'app/services/i-resource';
+import { ResourcesLoaderService } from 'app/services/resources-loader.service';
 
 
 @Component({
   selector: 'jhi-ctx-tree',
   templateUrl: './ctx-tree.component.html',
   styleUrls: ['./ctx-tree.component.scss'],
-  providers: [MockCtxloaderService],
+  providers: [ResourcesLoaderService],
 })
 
 
 export class CtxTreeComponent implements OnInit {
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  nestedTreeControl = new NestedTreeControl<IContextNode>(node => node.children);
-  nestedDataSource = new MatTreeNestedDataSource<IContextNode>();
-  tmp: IContextNode ;
+  nestedTreeControl = new NestedTreeControl<IResource>(node => node.children);
+  nestedDataSource = new MatTreeNestedDataSource<IResource>();
+  tmp: IResource ;
   showTable: boolean;
   
-  constructor(private myService:MockCtxloaderService) {
-	    this.tmp = {} as IContextNode;
+  constructor(private myService:ResourcesLoaderService) {
+	    this.tmp = {} as IResource;
 	    this.showTable = false;
   }
   
   
-  hasNestedChild(_: number, node: IContextNode): boolean {
+  hasNestedChild(_: number, node: IResource): boolean {
     if (node.children == null) {
       return false;
     } else {
@@ -36,12 +37,12 @@ export class CtxTreeComponent implements OnInit {
   }
   
     ngOnInit(): void {
-    this.myService.getData().subscribe(res => {
+    this.myService.getResourcesByContext().subscribe(res => {
       this.nestedDataSource.data = res;
     });
 	}
 	
-	loadTable(choosenContext:IContextNode):boolean{
+	loadTable(choosenContext:IResource):boolean{
 		//TODO: qui va chiamato il componente hnodes-table e conseguentemente visualizzato 
 		this.showTable = true;
 		return this.showTable;
diff --git a/src/main/webapp/app/rawjson-pane/rawjson-pane.component.html b/src/main/webapp/app/rawjson-pane/rawjson-pane.component.html
new file mode 100644
index 0000000..3b97c5c
--- /dev/null
+++ b/src/main/webapp/app/rawjson-pane/rawjson-pane.component.html
@@ -0,0 +1,4 @@
+<h2 *ngIf="chosenId" id="detail-title">Raw JSON for UID: {{ chosenId }}</h2>
+<div class="bg-light">
+  <pre>{{ fetchedRawData | json }}</pre>
+</div>
diff --git a/src/main/webapp/app/rawjson-pane/rawjson-pane.component.scss b/src/main/webapp/app/rawjson-pane/rawjson-pane.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/webapp/app/rawjson-pane/rawjson-pane.component.ts b/src/main/webapp/app/rawjson-pane/rawjson-pane.component.ts
new file mode 100644
index 0000000..31d4b69
--- /dev/null
+++ b/src/main/webapp/app/rawjson-pane/rawjson-pane.component.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { ResourcesLoaderService } from 'app/services/resources-loader.service';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule],
+  selector: 'jhi-rawjson-pane',
+  templateUrl: './rawjson-pane.component.html',
+  styleUrls: ['./rawjson-pane.component.scss'],
+  providers: [ResourcesLoaderService],
+})
+export class RawjsonPaneComponent implements OnInit {
+  @Input() chosenId: string;
+  fetchedRawData: string;
+  constructor(private service: ResourcesLoaderService) {
+    this.fetchedRawData = '';
+    this.chosenId = '';
+  }
+  ngOnInit(): void {
+    //TODO: passare al servizio qui sotto: chosenItem.id come parametro rest
+    this.service.getJsonDetail(this.chosenId).subscribe(res => {
+      this.fetchedRawData = res;
+    });
+  }
+}
diff --git a/src/main/webapp/app/services/resources-loader.service.ts b/src/main/webapp/app/services/resources-loader.service.ts
new file mode 100644
index 0000000..20aa106
--- /dev/null
+++ b/src/main/webapp/app/services/resources-loader.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { IHostingnode } from './i-hostinngnode';
+import { IResource } from './i-resource';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ResourcesLoaderService {
+  httpOptions = {
+    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+  };
+
+  constructor(private http: HttpClient) {}
+
+  //TODO: a regime questo metodo prende un parametro nella get
+  getHostingNodes(): Observable<IHostingnode[]> {
+    //TODO: pipe per gestione errori
+    return this.http.get<IHostingnode[]>('http://localhost:3002/is/hostingnodes/all');
+  }
+
+  getResourcesByContext(): Observable<IResource[]> {
+    //TODO: pipe per gestione errori
+    return this.http.get<IResource[]>('http://localhost:3002/is/ctxresources');
+  }
+
+  //TODO: a regime questo metodo prende un parametro nella get
+  //(e probabilmente anche un tipo per fare uno switch sul tipo di risorsa da prendere)
+  getJsonDetail(uid: string): Observable<string> {
+    //TODO: pipe per gestione errori
+    return this.http.get<string>('http://localhost:3002/is/hostingnodes/detail');
+  }
+
+  getHostingNodeDetail(): Observable<string> {
+    //TODO: pipe per gestione errori
+    return this.http.get<string>('http://localhost:3002/is/hostingnodes/detail');
+  }
+}