diff --git a/static/src/instancehandler/instance_list.js b/static/src/instancehandler/instance_list.js
index fa9bef4..a2c2003 100644
--- a/static/src/instancehandler/instance_list.js
+++ b/static/src/instancehandler/instance_list.js
@@ -87,6 +87,11 @@
     $formGroup.remove();
 };
 
+function showTopology(type, instance_id) {
+    var url = '/instances/'+type+'/'+instance_id+'/topology';
+    window.location = url;
+}
+
 function showInstanceDetails(type, instance_id) {
     var url_info = '/instances/'+type+'/'+instance_id;
     var dialog = bootbox.dialog({
diff --git a/static/src/instancehandler/instance_topology_view.js b/static/src/instancehandler/instance_topology_view.js
index f306443..1193b18 100644
--- a/static/src/instancehandler/instance_topology_view.js
+++ b/static/src/instancehandler/instance_topology_view.js
@@ -1,159 +1,69 @@
 //GraphEditor instance
-var graph_editor = new dreamer.ModelGraphEditor();
-var selected_vnffgId = null;
-var show_all = null;
-
-// Enable Drop Action on the Graph
-initDropOnGraph();
+var graph_editor = new TCD3.ModelGraphEditor();
 
 var type_view = {
-    "ns": ["vnf", "ns_vl"],
-    "vnf": ["vdu", "cp"]
+    "nsr": ["vnfr", "ns_vl"],
+    "vnfr": ["vdur", "cp", "vnf_vl"]
 };
 
 var params = {
-        node: {
-            type: type_view['ns'],
-            group: []
-        },
-        link: {
-            group: [],
-            view: ['ns']
-        }
-    };
-$(document).ready(function() {
+    node: {
+        type: type_view['nsr'],
+        group: []
+    },
+    link: {
+        group: [],
+        view: ['nsr']
+    }
+};
+
+$(document).ready(function () {
 
     graph_editor.addListener("filters_changed", changeFilter);
-    graph_editor.addListener("refresh_graph_parameters", refreshGraphParameters);
+    graph_editor.addListener("node:selected", refreshElementInfo);
+    graph_editor.addListener("node:deselected", refreshElementInfo);
 
-    console.log(osm_gui_properties)
     // graph_editor initialization
     graph_editor.init({
-        width: $('#graph_ed_container').width(),
-        height: $('#graph_ed_container').height(),
+        width: $('#graph_editor_container').width(),
+        height: $('#graph_editor_container').height(),
         data_url: window.location.href,
-        desc_id: getUrlParameter('id'),
+        //desc_id: getUrlParameter('id'),
         gui_properties: osm_gui_properties,
         edit_mode: false,
-        behaviorsOnEvents:{
+        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);
-
+    graph_editor.handleForce((el.getAttribute('aria-pressed') === "true"));
 }
 
 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);
-
+    if (c && c.link && c.link.view[0]) {
+        updateLegend(c.link.view[0]);
+    }
+    layerDetails(graph_editor.getCurrentFilters())
 }
 
-function refreshGraphParameters(e, graphParameters) {
-    var self = $(this);
-    if (graphParameters == null) return;
-
-}
-
-function resetFilters(){
+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
-
-    },
+    var contextmenuNodesAction = [
         {
             title: 'Explore',
             action: function (elm, c_node, i) {
-                if (c_node.info.type != undefined) {
+                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) {
@@ -178,10 +88,161 @@
             },
             edit_mode: false
         }];
-    var behavioursOnEvents = {
-        'nodes': contextmenuNodesAction
 
+    return {
+        'nodes': contextmenuNodesAction
     };
 
-    return behavioursOnEvents;
+}
+
+function refreshElementInfo(event, element) {
+    if (event.type === 'node:selected') {
+        switch (element.info.type) {
+            case 'vnfr':
+                vnfrDetails(element.info.osm);
+                break;
+            case 'vdur':
+                vdurDetails(element.info.osm);
+                break;
+            case 'int_cp':
+            case 'cp':
+                cpDetails(element.info.osm);
+                break;
+            case 'vnf_vl':
+            case 'ns_vl':
+                vlDetails(element.info.osm);
+                break;
+        }
+    }
+    else if (event.type === 'node:deselected') {
+        layerDetails(graph_editor.getCurrentFilters())
+    }
+}
+
+function layerDetails(filters) {
+    var side = $('#side');
+    var graph_parameters = graph_editor.getGraphParams();
+    var layer_template = '';
+    if(graph_parameters['view'] && filters.link.view.length >0 && filters.link.view[0]){
+        if(filters.link.view[0] === 'nsr') {
+            layer_template = getMainSection('NS View');
+            layer_template += getChildrenTable(graph_parameters['view']['nsr']);
+        }
+        else if(filters.link.view[0] === 'vnfr') {
+            layer_template = getMainSection('VNF View');
+            var vnfr_id = filters.link.group[0];
+            layer_template += getChildrenTable(graph_parameters['view']['vnfr'][vnfr_id]);
+        }
+    }
+
+    side.empty();
+    side.append(layer_template)
+}
+
+function updateLegend(view) {
+    var legend = $('#legenda');
+    var nodes = type_view[view];
+    var legend_template = '';
+    var nodes_properties = osm_gui_properties['nodes'];
+    for (var n in nodes){
+        var node = nodes[n];
+        if(nodes_properties[node]){
+            legend_template += '<div class="node">' +
+                '<div class="icon" style="background-color:' + nodes_properties[node].color +'"></div>' +
+                '<div class="name">' +nodes_properties[node].name + '</div></div>';
+        }
+    }
+
+    legend.empty();
+    legend.append(legend_template)
+
+}
+
+var map = {
+    'ip-address': 'IP', 'vnfd-id': 'Vnfd Id', 'vnfd-ref': 'Vnfd Ref', 'vim-account-id': 'Vim Id',
+    'member-vnf-index-ref': 'Member index', 'created-time': 'Created', 'id': 'Id', 'mgmt-network': 'Mgmt network',
+    'name': 'Name', 'type': 'Type', 'vim-network-name': 'Vim network name', 'connection-point-id': 'Cp Id',
+    'vdu-id-ref': 'Vdu Id', 'nsr-id-ref': 'Nsr Id'
+};
+
+function vnfrDetails(vnfr) {
+    var side = $('#side');
+    var vnfr_template = getMainSection('VNFR');
+
+    vnfr_template += getChildrenTable(vnfr);
+    side.empty();
+    side.append(vnfr_template)
+}
+
+function vdurDetails(vdur) {
+    var side = $('#side');
+    var vdur_template = getMainSectionWithStatus('VDUR', vdur['status'] === 'ACTIVE');
+    vdur_template += getChildrenTable(vdur);
+
+    if (vdur['interfaces'].length > 0) {
+        vdur_template += getSubSection('Interfaces:');
+        vdur_template += '<table class="children">';
+
+        for (var i = 0; i < vdur['interfaces'].length; ++i) {
+            var interface = vdur['interfaces'][i];
+            var interface_template = '<tr><td>' + interface['name'] + '</td>'
+                + '<td>IP:' + interface['ip-address'] + '</td>'
+                + '<td>MAC:' + interface['mac-address'] + '</td>';
+            vdur_template += interface_template;
+        }
+        vdur_template += '</table>';
+    }
+
+    side.empty();
+    side.append(vdur_template)
+}
+
+function cpDetails(cp) {
+     var side = $('#side');
+    var cp_template = getMainSection('Connection Point');
+
+    cp_template += getChildrenTable(cp);
+    side.empty();
+    side.append(cp_template);
+}
+
+function vlDetails(vl) {
+    var side = $('#side');
+    var vl_template = getMainSection('Virtual Link');
+
+    vl_template += getChildrenTable(vl);
+    side.empty();
+    side.append(vl_template);
+}
+
+
+function getMainSection(title) {
+    return '<div class="section"><span style="font-weight: 500;">' + title + '</span></div>';
+}
+
+function getSubSection(title) {
+    return '<div class="section"><span>' + title + '</span></div>';
+}
+
+function getMainSectionWithStatus(title, status) {
+    var template = '<div class="section"><span style="font-weight: 500;">' + title + '</span>';
+    if (status)
+        template += '<div class="status active"><span class="indicator"></span> ACTIVE</div>';
+    else
+        template += '<div class="status"><span class="indicator"></span>NO ACTIVE</div>';
+    template += '</div>';
+    return template;
+}
+
+function getChildrenTable(data) {
+    var template = '<table class="children">';
+
+    for (var key in data) {
+        if (typeof data[key] === 'string') {
+            var key_map = (map[key]) ? map[key] : key;
+            template += '<tr><td>' + key_map + '</td><td>' + data[key] + '</td></tr>';
+        }
+    }
+    template += '</table>';
+    return template;
 }
\ No newline at end of file