diff --git a/static/src/instancehandler/instance_list.js b/static/src/instancehandler/instance_list.js
index b4c0edc..eed9d96 100644
--- a/static/src/instancehandler/instance_list.js
+++ b/static/src/instancehandler/instance_list.js
@@ -25,6 +25,10 @@
     $('#modal_instance_export_metric').modal('show');
 }
 
+function showInstanceTopology(url) {
+    window.location.href = url;
+}
+
 function newAlarmNs(url) {
     $("#formAlarmNS").attr("action", url);
     $('#modal_instance_new_alarm').modal('show');
@@ -72,10 +76,17 @@
         dataType: "json",
         contentType: "application/json;charset=utf-8",
         success: function (result) {
-            editorJSON.setValue(JSON.stringify(result, null, "\t"));
-            editorJSON.setOption("autoRefresh", true);
-            dialog.modal('hide');
-            $('#modal_show_instance').modal('show');
+
+            if(result['data'] !== undefined) {
+                editorJSON.setValue(JSON.stringify(result['data'], null, "\t"));
+                editorJSON.setOption("autoRefresh", true);
+                dialog.modal('hide');
+                $('#modal_show_instance').modal('show');
+            }
+            else{
+                dialog.modal('hide');
+                bootbox.alert("An error occurred while retrieving the information.");
+            }
         },
         error: function (result) {
             dialog.modal('hide');
diff --git a/static/src/instancehandler/instance_topology_view.js b/static/src/instancehandler/instance_topology_view.js
new file mode 100644
index 0000000..f306443
--- /dev/null
+++ b/static/src/instancehandler/instance_topology_view.js
@@ -0,0 +1,187 @@
+//GraphEditor instance
+var graph_editor = new dreamer.ModelGraphEditor();
+var selected_vnffgId = null;
+var show_all = null;
+
+// Enable Drop Action on the Graph
+initDropOnGraph();
+
+var type_view = {
+    "ns": ["vnf", "ns_vl"],
+    "vnf": ["vdu", "cp"]
+};
+
+var params = {
+        node: {
+            type: type_view['ns'],
+            group: []
+        },
+        link: {
+            group: [],
+            view: ['ns']
+        }
+    };
+$(document).ready(function() {
+
+    graph_editor.addListener("filters_changed", changeFilter);
+    graph_editor.addListener("refresh_graph_parameters", refreshGraphParameters);
+
+    console.log(osm_gui_properties)
+    // graph_editor initialization
+    graph_editor.init({
+        width: $('#graph_ed_container').width(),
+        height: $('#graph_ed_container').height(),
+        data_url: window.location.href,
+        desc_id: getUrlParameter('id'),
+        gui_properties: osm_gui_properties,
+        edit_mode: false,
+        behaviorsOnEvents:{
+            viewBased: false,
+            behaviors: buildBehaviorsOnEvents()
+        }
+    });
+    // this will filter in the different views, excluding the node types that are not listed in params
+    graph_editor.handleFiltersParams(params);
+
+});
+
+var filters = function(e, params) {
+    graph_editor.handleFiltersParams(params);
+    $('#' + e).nextAll('li').remove();
+}
+
+
+function initDropOnGraph() {
+
+    var dropZone = document.getElementById('graph_ed_container');
+    dropZone.ondrop = function(e) {
+        var group = graph_editor.getCurrentGroup()
+        e.preventDefault();
+        var elemet_id = e.dataTransfer.getData("text/plain");
+        var nodetype = $('#'+elemet_id).attr('type-name');
+        console.log(nodetype);
+        if (nodetype) {
+            var type_name = graph_editor.getTypeProperty()[nodetype].name;
+                $('#div_chose_id').show();
+                $('#input_choose_node_id').val(nodetype + "_" + generateUID());
+                $('#modal_chooser_title_add_node').text('Add ' + type_name);
+                $('#save_choose_node_id').off('click').on('click', function() {
+                    var name = $('#input_choose_node_id').val();
+                    var node_information = {
+                        'id': name,
+                        'info': {
+                            'type': nodetype,
+                            'group': [group],
+                            'desc_id': getUrlParameter('id'),
+                        },
+                        'x': e.layerX,
+                        'y': e.layerY
+                    }
+                    console.log(JSON.stringify(node_information))
+                    graph_editor.addNode(node_information, function() {
+                        $('#modal_choose_node_id').modal('hide');
+                    }, function(error){
+                        showAlert(error)
+                    });
+                });
+                $('#modal_choose_node_id').modal('show');
+
+
+        }
+
+    }
+
+    dropZone.ondragover = function(ev) {
+        console.log("ondragover");
+        return false;
+    }
+
+    dropZone.ondragleave = function() {
+        console.log("ondragleave");
+        return false;
+    }
+}
+
+function handleForce(el) {
+    if (el.id == "topology_play") {
+        $("#topology_pause").removeClass('active');
+        $("#topology_play").addClass('active');
+    } else {
+        $("#topology_pause").addClass('active');
+        $("#topology_play").removeClass('active');
+    }
+
+    graph_editor.handleForce((el.id == "topology_play") ? true : false);
+
+}
+
+function changeFilter(e, c) {
+
+    console.log("changeFilter", JSON.stringify(c));
+    //$("#title_header").text("OSHI Graph Editor");
+    //updateNodeDraggable({type_property: type_property, nodes_layer: graph_editor.getAvailableNodes()})
+    if(c)
+        new dreamer.GraphRequests().getAvailableNodes({layer: c.link.view[0]}, buildPalette, showAlert);
+
+}
+
+function refreshGraphParameters(e, graphParameters) {
+    var self = $(this);
+    if (graphParameters == null) return;
+
+}
+
+function resetFilters(){
+    graph_editor.handleFiltersParams(params);
+}
+
+function buildBehaviorsOnEvents() {
+    var self = this;
+    var contextmenuNodesAction = [{
+        title: 'Show info',
+        action: function (elm, d, i) {
+           // console.log('Show NodeInfo', elm, d, i);
+            var nodeData = {
+                "node": {
+                    "id": d.id
+                }
+            };
+        },
+        edit_mode: false
+
+    },
+        {
+            title: 'Explore',
+            action: function (elm, c_node, i) {
+                if (c_node.info.type != undefined) {
+                    var current_layer_nodes = Object.keys(graph_editor.model.layer[graph_editor.getCurrentView()].nodes);
+                    if (current_layer_nodes.indexOf(c_node.info.type) >= 0) {
+                        if (graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands) {
+                            var new_layer = graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands;
+                            graph_editor.handleFiltersParams({
+                                node: {
+                                    type: Object.keys(graph_editor.model.layer[new_layer].nodes),
+                                    group: [c_node.id]
+                                },
+                                link: {
+                                    group: [c_node.id],
+                                    view: [new_layer]
+                                }
+                            });
+
+                        }
+                        else {
+                            showAlert('This is not an explorable node.')
+                        }
+                    }
+                }
+            },
+            edit_mode: false
+        }];
+    var behavioursOnEvents = {
+        'nodes': contextmenuNodesAction
+
+    };
+
+    return behavioursOnEvents;
+}
\ No newline at end of file
diff --git a/static/src/osm_gui_properties.js b/static/src/osm_gui_properties.js
new file mode 100644
index 0000000..25a6aba
--- /dev/null
+++ b/static/src/osm_gui_properties.js
@@ -0,0 +1,50 @@
+var osm_gui_properties = {
+  "v1": {
+        "default": {
+            "shape": "cross",
+            "color": "#42f44e",
+            "label_color": "black",
+            "size": 15
+        },
+        "nodes": {
+            "ns_vl": {
+                "image": "vl-80.png",
+                // "shape": "triangle",
+                "color": "#196B90",
+                "size": 20,
+                "name": "VL"
+            },
+            "cp": {
+                "image": "cp-80.png",
+                // "shape": "circle",
+                "color": "#F27220",
+                "size": 20,
+                "name": "CP"
+            },
+            "vnf": {
+                "image": "vnf-100.png",
+                // "shape": "square",
+                "color": "#54A698",
+                "size": 35,
+                "name": "VNF"
+            },
+            "vnf_vl": {
+                "shape": "triangle",
+                //"color": "#5FC9DB",
+                "color": "#196B90",
+                "size": 11,
+                "name": "IntVL"
+            },
+
+            "vdu": {
+                "shape": "square",
+                //"color": "#50A7CC",
+                "color": "#54A698",
+                "size": 30,
+                "name": "VDU"
+            }
+        },
+        "graphs": null
+
+    }
+}
\ No newline at end of file
diff --git a/static/src/projecthandler/composer.js b/static/src/projecthandler/composer.js
new file mode 100644
index 0000000..8e1017a
--- /dev/null
+++ b/static/src/projecthandler/composer.js
@@ -0,0 +1,186 @@
+//GraphEditor instance
+var graph_editor = new dreamer.ModelGraphEditor();
+var selected_vnffgId = null;
+var show_all = null;
+
+// Enable Drop Action on the Graph
+initDropOnGraph();
+
+var type_view = {
+    "ns": ["vnf", "ns_vl"],
+    "vnf": ["vdu", "cp"]
+};
+
+var params = {
+        node: {
+            type: type_view['ns'],
+            group: []
+        },
+        link: {
+            group: [],
+            view: ['ns']
+        }
+    };
+$(document).ready(function() {
+
+    graph_editor.addListener("filters_changed", changeFilter);
+    graph_editor.addListener("refresh_graph_parameters", refreshGraphParameters);
+
+    console.log(osm_gui_properties)
+    // graph_editor initialization
+    graph_editor.init({
+        width: $('#graph_ed_container').width(),
+        height: $('#graph_ed_container').height(),
+        data_url: window.location.href,
+        desc_id: getUrlParameter('id'),
+        gui_properties: osm_gui_properties,
+        behaviorsOnEvents:{
+            viewBased: false,
+            behaviors: buildBehaviorsOnEvents()
+        }
+    });
+    // this will filter in the different views, excluding the node types that are not listed in params
+    graph_editor.handleFiltersParams(params);
+
+});
+
+var filters = function(e, params) {
+    graph_editor.handleFiltersParams(params);
+    $('#' + e).nextAll('li').remove();
+}
+
+
+function initDropOnGraph() {
+
+    var dropZone = document.getElementById('graph_ed_container');
+    dropZone.ondrop = function(e) {
+        var group = graph_editor.getCurrentGroup()
+        e.preventDefault();
+        var elemet_id = e.dataTransfer.getData("text/plain");
+        var nodetype = $('#'+elemet_id).attr('type-name');
+        console.log(nodetype);
+        if (nodetype) {
+            var type_name = graph_editor.getTypeProperty()[nodetype].name;
+                $('#div_chose_id').show();
+                $('#input_choose_node_id').val(nodetype + "_" + generateUID());
+                $('#modal_chooser_title_add_node').text('Add ' + type_name);
+                $('#save_choose_node_id').off('click').on('click', function() {
+                    var name = $('#input_choose_node_id').val();
+                    var node_information = {
+                        'id': name,
+                        'info': {
+                            'type': nodetype,
+                            'group': [group],
+                            'desc_id': getUrlParameter('id'),
+                        },
+                        'x': e.layerX,
+                        'y': e.layerY
+                    }
+                    console.log(JSON.stringify(node_information))
+                    graph_editor.addNode(node_information, function() {
+                        $('#modal_choose_node_id').modal('hide');
+                    }, function(error){
+                        showAlert(error)
+                    });
+                });
+                $('#modal_choose_node_id').modal('show');
+
+
+        }
+
+    }
+
+    dropZone.ondragover = function(ev) {
+        console.log("ondragover");
+        return false;
+    }
+
+    dropZone.ondragleave = function() {
+        console.log("ondragleave");
+        return false;
+    }
+}
+
+function handleForce(el) {
+    if (el.id == "topology_play") {
+        $("#topology_pause").removeClass('active');
+        $("#topology_play").addClass('active');
+    } else {
+        $("#topology_pause").addClass('active');
+        $("#topology_play").removeClass('active');
+    }
+
+    graph_editor.handleForce((el.id == "topology_play") ? true : false);
+
+}
+
+function changeFilter(e, c) {
+
+    console.log("changeFilter", JSON.stringify(c));
+    //$("#title_header").text("OSHI Graph Editor");
+    //updateNodeDraggable({type_property: type_property, nodes_layer: graph_editor.getAvailableNodes()})
+    if(c)
+        new dreamer.GraphRequests().getAvailableNodes({layer: c.link.view[0]}, buildPalette, showAlert);
+
+}
+
+function refreshGraphParameters(e, graphParameters) {
+    var self = $(this);
+    if (graphParameters == null) return;
+
+}
+
+function resetFilters(){
+    graph_editor.handleFiltersParams(params);
+}
+
+function buildBehaviorsOnEvents() {
+    var self = this;
+    var contextmenuNodesAction = [{
+        title: 'Show info',
+        action: function (elm, d, i) {
+           // console.log('Show NodeInfo', elm, d, i);
+            var nodeData = {
+                "node": {
+                    "id": d.id
+                }
+            };
+        },
+        edit_mode: false
+
+    },
+        {
+            title: 'Explore',
+            action: function (elm, c_node, i) {
+                if (c_node.info.type != undefined) {
+                    var current_layer_nodes = Object.keys(graph_editor.model.layer[graph_editor.getCurrentView()].nodes);
+                    if (current_layer_nodes.indexOf(c_node.info.type) >= 0) {
+                        if (graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands) {
+                            var new_layer = graph_editor.model.layer[graph_editor.getCurrentView()].nodes[c_node.info.type].expands;
+                            graph_editor.handleFiltersParams({
+                                node: {
+                                    type: Object.keys(graph_editor.model.layer[new_layer].nodes),
+                                    group: [c_node.id]
+                                },
+                                link: {
+                                    group: [c_node.id],
+                                    view: [new_layer]
+                                }
+                            });
+
+                        }
+                        else {
+                            showAlert('This is not an explorable node.')
+                        }
+                    }
+                }
+            },
+            edit_mode: false
+        }];
+    var behavioursOnEvents = {
+        'nodes': contextmenuNodesAction
+
+    };
+
+    return behavioursOnEvents;
+}
\ No newline at end of file
diff --git a/static/src/projecthandler/descriptorslist.js b/static/src/projecthandler/descriptorslist.js
index 24b7ba5..7fe1966 100644
--- a/static/src/projecthandler/descriptorslist.js
+++ b/static/src/projecthandler/descriptorslist.js
@@ -1,19 +1,19 @@
-function deletePackage(project_id, descriptor_type, package_id) {
+function deletePackage(descriptor_type, package_id) {
     bootbox.confirm("Are you sure want to delete?", function (result) {
         if (result) {
-            location.href = '/projects/' + project_id + '/descriptors/' + descriptor_type + '/' + package_id + '/delete'
+            location.href = '/projects/descriptors/' + descriptor_type + '/' + package_id + '/delete'
         }
     })
 }
 
 
-function openPackageContentList(project_id, type, pkg_id) {
+function openPackageContentList(type, pkg_id) {
     var dialog = bootbox.dialog({
         message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
         closeButton: true
     });
     $.ajax({
-        url: '/projects/' + project_id + '/descriptors/' + type + '/' + pkg_id + '/action/get_package_files_list',
+        url: '/projects/descriptors/' + type + '/' + pkg_id + '/action/get_package_files_list',
         type: 'GET',
         dataType: "json",
         contentType: "application/json;charset=utf-8",
diff --git a/static/src/projecthandler/osm/project_graph.js b/static/src/projecthandler/osm/project_graph.js
index 072129f..5ee3522 100644
--- a/static/src/projecthandler/osm/project_graph.js
+++ b/static/src/projecthandler/osm/project_graph.js
@@ -187,8 +187,8 @@
 }
 
 
-function openEditor(project_id) {
-    window.location.href = '/projects/' + project_id + '/descriptors/' + graph_editor.getCurrentView() + 'd/' + graph_editor.getCurrentGroup();
+function openEditor() {
+    window.location.href = '/projects/descriptors/' + graph_editor.getCurrentView() + 'd/' + graph_editor.getCurrentGroup();
 }
 
 
diff --git a/static/src/sdnctrlhandler/sdn_list.js b/static/src/sdnctrlhandler/sdn_list.js
index 8069474..606da3a 100644
--- a/static/src/sdnctrlhandler/sdn_list.js
+++ b/static/src/sdnctrlhandler/sdn_list.js
@@ -1,19 +1,19 @@
-function deleteSDN(project_id, sdn_uuid) {
+function deleteSDN(sdn_uuid) {
     bootbox.confirm("Are you sure want to delete?", function (result) {
         if (result) {
-            location.href = '/projects/' + project_id + '/sdn/' + sdn_uuid + '/delete'
+            location.href = '/projects/sdn/' + sdn_uuid + '/delete'
         }
     })
 }
 
-function showSDN(project_id, sdn_uuid) {
+function showSDN(sdn_uuid) {
     var dialog = bootbox.dialog({
         message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
         closeButton: true
     });
 
     $.ajax({
-        url: '/projects/' + project_id + '/sdn/' + sdn_uuid ,
+        url: '/projects/sdn/' + sdn_uuid ,
         //url: '/sdn/' + sdn_uuid,
         type: 'GET',
         dataType: "json",
diff --git a/static/src/utils.js b/static/src/utils.js
index 6d5e820..83b580c 100644
--- a/static/src/utils.js
+++ b/static/src/utils.js
@@ -7,9 +7,9 @@
 }
 
 
-function openDescriptorView(project_id, descriptor_type, descriptor_id) {
-    console.log("openDescriptorView", project_id, descriptor_type, descriptor_id);
-    window.location.href = '/projects/' + project_id + '/descriptors/' + descriptor_type + '/' + descriptor_id;
+function openDescriptorView( descriptor_type, descriptor_id) {
+    console.log("openDescriptorView", descriptor_type, descriptor_id);
+    window.location.href = '/projects/descriptors/' + descriptor_type + '/' + descriptor_id;
 
 }