diff --git a/instancehandler/template/instance_list.html b/instancehandler/template/instance_list.html
index de47e62..97eac57 100644
--- a/instancehandler/template/instance_list.html
+++ b/instancehandler/template/instance_list.html
@@ -131,41 +131,54 @@
                     },
                     "targets": 5
                 },{
-                   //  "width": "10%",
+                     "width": "20%",
                     "render": function (data, type, row) {
-                        return '<div class="btn-group">\n' +
-                            ' <button type="button" class="btn btn-default"\n' +
-                            '         onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"\n' +
-                            '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">\n' +
-                            '     <i class="fa fa-info"></i>\n' +
-                            ' </button>\n' +
-                            ' <button type="button" class="btn btn-default"\n' +
-                            '         onclick="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\')"\n' +
-                            '         data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i\n' +
-                            '         class="far fa-trash-alt"></i></button>\n' +
-                            ' <button type="button" class="btn btn-default dropdown-toggle"\n' +
-                            '         data-toggle="dropdown" aria-expanded="false">Actions\n' +
-                            '     <span class="fa fa-caret-down"></span></button>\n' +
-                            ' <ul class="dropdown-menu">\n' +
-                            '     <li><a href="#"\n' +
-                            '            onclick="javascript:performAction(\''+ row["short-name"] +'\', \''+row["_id"]+'\')">\n' +
-                            '         <i class="fa fa-magic"></i> Exec NS Primitive</a></li>\n' +
-                            '     <li>\n' +
-                            '         <a href="/instances/ns/' +row["_id"] +'/operation">\n' +
-                            '             <i class="fa fa-list"></i> Active operations</a></li>\n' +
-                            '     <li class="divider"></li>\n' +
-                            '     <li><a href="#"\n' +
-                            '            onclick="javascript:newAlarmNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\')">\n' +
-                            '         <i class="far fa-bell"></i> New Alarm</a></li>\n' +
-                            '     <li><a href="#"\n' +
-                            '            onclick="javascript:exportMetricNs(\''+ row["short-name"] +'\', \''+row["_id"]+ '\')">\n' +
-                            '         <i class="far fa-chart-bar"></i> Export metric</a></li>\n' +
-                            '     <li class="divider"></li>\n' +
-                            '     <li>\n' +
-                            '         <a href="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\', true)">\n' +
-                            '             <i class="far fa-trash-alt" style="color:red" ></i> Force delete</a></li>\n' +
-                            ' </ul>\n' +
+                          var template = '<div class="btn-group">' +
+                            ' <button type="button" class="btn btn-default"' +
+                            '         onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"' +
+                            '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
+                            '     <i class="fa fa-info"></i>';
+                            if (row["operational-status"] === "running") {
+                                template += ' <button type="button" class="btn btn-default"' +
+                                '         onclick="javascript:showTopology(\'' + instance_type + '\', \'' + row["_id"] + '\')"' +
+                                '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Graph">' +
+                                '     <i class="fa fa-sitemap"></i>' +
+                                ' </button>';
+                            }else{
+                                template += ' <button type="button" disabled class="btn btn-default"' +
+                                '         onclick="javascript:showTopology(\'' + instance_type + '\', \'' + row["_id"] + '\')"' +
+                                '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Graph">' +
+                                '     <i class="fa fa-sitemap"></i>' +
+                                ' </button>';
+                            }
+                            template += ' <button type="button" class="btn btn-default"' +
+                            '         onclick="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\')"' +
+                            '         data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i' +
+                            '         class="far fa-trash-alt"></i></button>' +
+                            ' <button type="button" class="btn btn-default dropdown-toggle"' +
+                            '         data-toggle="dropdown" aria-expanded="false">Actions' +
+                            '     <span class="fa fa-caret-down"></span></button>' +
+                            ' <ul class="dropdown-menu">' +
+                            '     <li><a href="#"' +
+                            '            onclick="javascript:performAction(\''+ row["short-name"] +'\', \''+row["_id"]+'\')">' +
+                            '         <i class="fa fa-magic"></i> Exec NS Primitive</a></li>' +
+                            '     <li>' +
+                            '         <a href="/instances/ns/' +row["_id"] +'/operation">' +
+                            '             <i class="fa fa-list"></i> Active operations</a></li>' +
+                            '     <li class="divider"></li>' +
+                            '     <li><a href="#"' +
+                            '            onclick="javascript:newAlarmNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\')">' +
+                            '         <i class="far fa-bell"></i> New Alarm</a></li>' +
+                            '     <li><a href="#"' +
+                            '            onclick="javascript:exportMetricNs(\''+ row["short-name"] +'\', \''+row["_id"]+ '\')">' +
+                            '         <i class="far fa-chart-bar"></i> Export metric</a></li>' +
+                            '     <li class="divider"></li>' +
+                            '     <li>' +
+                            '         <a href="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\', true)">' +
+                            '             <i class="far fa-trash-alt" style="color:red" ></i> Force delete</a></li>' +
+                            ' </ul>' +
                             '</div>';
+                          return template;
                     },
                     "targets": 5
                 },
@@ -203,12 +216,12 @@
                 }, 
                 {
                     "render": function (data, type, row) {
-                        return '<div class="btn-group">\n' +
-                            '     <button type="button" class="btn btn-default"\n' +
-                            '             onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"\n' +
-                            '             data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">\n' +
-                            '         <i class="fa fa-info"></i>\n' +
-                            '     </button>\n' +
+                        return '<div class="btn-group">' +
+                            '     <button type="button" class="btn btn-default"' +
+                            '             onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"' +
+                            '             data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
+                            '         <i class="fa fa-info"></i>' +
+                            '     </button>' +
                             ' </div>';
                     },
                     "targets": 5
diff --git a/instancehandler/template/instance_topology_view.html b/instancehandler/template/instance_topology_view.html
index fb67fbc..d1183f5 100644
--- a/instancehandler/template/instance_topology_view.html
+++ b/instancehandler/template/instance_topology_view.html
@@ -6,12 +6,11 @@
 
 {% block head_block %}
     {{ block.super }}
-    <link rel="stylesheet" href="/static/bower_components/select2/dist/css/select2.min.css">
-    <link rel="stylesheet" href="/static/css/lwuitable.css">
 
-    <!-- Topology3D core CSS -->
-    <link rel="stylesheet" href="/static/topology3D/css/graph_editor_d3js.css">
-    <link rel="stylesheet" href="/static/topology3D/css/d3-context-menu.css">
+<!-- TopologyComposer D3 -->
+    <link rel="stylesheet" href="/static/TopologyComposer/css/composer.css">
+    <link rel="stylesheet" href="/static/TopologyComposer/css/d3-context-menu.css">
+
 
 {% endblock %}
 {% block title_header_big %}
@@ -31,21 +30,25 @@
 {% block content_body %}
     {{ block.super }}
     {% csrf_token %}
-
-    <div class="row" >
-        <div class="col-md-12">
-            {% block topology_toolbar %}
-                {{ block.super }}
-                 {% include 'topology_toolbar_instance.html' %}
-            {% endblock %}
-            <div id="graph_ed_container" style="width: 100%; height:100%; background-color: white; border: 2px #3c8dbc solid;">
+    <div class="container-fluid">
+        <div id="main" class="row">
+            <div id="graph_editor_container" class="col">
+                <div class="btn-group left-tool-bar-monitoring">
+                    <button id="topology_force" type="button" class="btn btn btn-default" onclick="handleForce(this)"
+                            data-toggle="button" aria-pressed="false" autocomplete="off"><i
+                            class="fas fa-thumbtack"></i></button>
+                    <button id="reset_filter" type="button" class="btn btn btn-default" onclick="resetFilters(this)"><i
+                            class="fa fa-backward"></i></button>
+                </div>
+                <div id="legenda">
+                </div>
+            </div>
+            <div id="side">
 
             </div>
         </div>
     </div>
 
-
-
 {% endblock %}
 
 {% block resource_block %}
@@ -53,20 +56,15 @@
     <script>
         var topology_data = {};//{{topology_data|safe }};
     </script>
-    <!-- Utility JS -->
-    <script src="/static/bower_components/select2/dist/js/select2.js"></script>
-
     <!-- d3.js -->
-    <script src="https://d3js.org/d3.v4.js"></script>
-<!--
-    <script src="/static/bower_components/d3/d3.js"></script>-->
+    <script src="/static/bower_components/d3/d3.js"></script>
 
-    <!-- topology3D -->
-    <script src="/static/topology3D/js/d3-context-menu.js"></script>
-    <script src="/static/topology3D/js/event.js"></script>
-    <script src="/static/topology3D/js/graph_editor.js"></script>
-    <script src="/static/topology3D/js/graph_request.js"></script>
-    <script src="/static/topology3D/js/model_graph_editor.js"></script>
+    <!-- TopologyComposer D3 -->
+    <script src="/static/TopologyComposer/js/event.js"></script>
+    <script src="/static/TopologyComposer/js/settings.js"></script>
+    <script src="/static/TopologyComposer/js/graph_editor.js"></script>
+    <script src="/static/TopologyComposer/js/model_graph_editor.js"></script>
+    <script src="/static/TopologyComposer/js/d3-context-menu.js"></script>
 
 
     <script src="/static/src/osm_gui_properties.js"></script>
diff --git a/instancehandler/views.py b/instancehandler/views.py
index 45120e2..e38e586 100644
--- a/instancehandler/views.py
+++ b/instancehandler/views.py
@@ -21,6 +21,7 @@
 import json
 import logging
 from lib.osm.osmclient.clientv2 import Client
+from lib.osm.osm_rdcl_parser import OsmParser
 import authosm.utils as osmutils
 from sf_t3d.decorators import login_required
 
@@ -154,156 +155,33 @@
     print result
     return __response_handler(request, result, 'instances:list', to_redirect=True, type='ns')
 
-
+@login_required
 def show_topology(request, instance_id=None, type=None):
     user = osmutils.get_user(request)
     project_id = user.project_id
     raw_content_types = request.META.get('HTTP_ACCEPT', '*/*').split(',')
     if 'application/json' in raw_content_types:
-        result = {'vertices': [
-            {"info": {"type": "vnf", "property": {"custom_label": ""},
-                      "group": []}, "id": "ping"},
-            {"info": {"type": "vnf", "property": {"custom_label": ""},
-                      "group": []}, "id": "pong"},
-            {"info": {"type": "vdu", "property": {"custom_label": ""},
-                      "group": ['pong']}, "id": "pong/ubuntu"},
-            {"info": {"type": "vdu", "property": {"custom_label": ""},
-                      "group": ['ping']}, "id": "ping/ubuntu"},
-            {"info": {"type": "cp", "property": {"custom_label": ""},
-                      "group": ['ping']}, "id": "ping/cp0"},
-            {"info": {"type": "cp", "property": {"custom_label": ""},
-                      "group": ['ping']}, "id": "ping/cp1"},
-            {"info": {"type": "cp", "property": {"custom_label": ""},
-                      "group": ['pong']}, "id": "pong/cp0"},
-            {"info": {"type": "cp", "property": {"custom_label": ""},
-                      "group": ['pong']}, "id": "pong/cp1"},
-            {"info": {"type": "ns_vl", "property": {"custom_label": ""},
-                      "group": []}, "id": "mgmt_vl"},
-        ],
-            'edges': [
-                # {"source": "ping", "group": [], "target": "ping/cp0", "view": "Data"},
-                {"source": "pong/ubuntu", "group": ['pong'], "target": "pong/cp0", "view": "vnf"},
-                {"source": "ping/ubuntu", "group": ['ping'], "target": "ping/cp0", "view": "vnf"},
-                {"source": "pong/ubuntu", "group": ['pong'], "target": "pong/cp1", "view": "vnf"},
-                {"source": "ping/ubuntu", "group": ['ping'], "target": "ping/cp1", "view": "vnf"},
-                {"source": "pong", "group": [], "target": "mgmt_vl", "view": "ns"},
-                {"source": "ping", "group": [], "target": "mgmt_vl", "view": "ns"},
-            ], 'graph_parameters': [],
-            'model': {
-                "layer": {
+        client = Client()
+        nsr_object = {'nsr': {}, 'vnfr': {}, 'vnfd': {}}
+        if type == 'ns':
 
-                    "ns": {
-                        "nodes": {
-                            "vnf": {
-                                "addable": {
-                                    "callback": "addNode"
-                                },
-                                "removable": {
-                                    "callback": "removeNode"
-                                },
-                                "expands": "vnf"
-                            },
-                            "ns_vl": {
-                                "addable": {
-                                    "callback": "addNode"
-                                },
-                                "removable": {
-                                    "callback": "removeNode"
-                                }
-                            },
+            nsr_resp = client.ns_get(user.get_token(), instance_id)
+            nsr_object['nsr'] = nsr_resp['data']
+            if 'constituent-vnfr-ref' in nsr_object['nsr'] :
+                for vnfr_id in nsr_object['nsr']['constituent-vnfr-ref']:
+                    vnfr_resp = client.vnf_get(user.get_token(), vnfr_id)
+                    vnfr = vnfr_resp['data']
+                    nsr_object['vnfr'][vnfr['id']] = vnfr
+                    if vnfr['vnfd-id'] not in nsr_object['vnfd']:
+                        vnfd_resp = client.vnfd_get(user.get_token(), vnfr['vnfd-id'])
+                        nsr_object['vnfd'][vnfr['vnfd-id']] = vnfd_resp['vnfd:vnfd-catalog']['vnfd'][0]
 
-                        },
-                        "allowed_edges": {
-                            "ns_vl": {
-                                "destination": {
-                                    "vnf": {
-                                        "callback": "addLink",
-                                        "direct_edge": False,
-                                        "removable": {
-                                            "callback": "removeLink"
-                                        }
-                                    }
-                                }
-                            },
-                            "vnf": {
-                                "destination": {
-                                    "ns_vl": {
-                                        "callback": "addLink",
-                                        "direct_edge": False,
-                                        "removable": {
-                                            "callback": "removeLink"
-                                        }
-                                    },
 
-                                }
-                            }
 
-                        }
-                    },
-                    "vnf": {
-                        "nodes": {
-                            "vdu": {
-                                "addable": {
-                                    "callback": "addNode"
-                                },
-                                "removable": {
-                                    "callback": "removeNode"
-                                }
-                            },
-                            "cp": {
-                                "addable": {
-                                    "callback": "addNode"
-                                },
-                                "removable": {
-                                    "callback": "removeNode"
-                                }
-                            },
+        test = OsmParser()
+        #print nsr_object
 
-                        },
-                        "allowed_edges": {
-                            "vdu": {
-                                "destination": {
-                                    "cp": {
-                                        "callback": "addLink",
-                                        "direct_edge": False,
-                                        "removable": {
-                                            "callback": "removeLink"
-                                        }
-                                    }
-                                }
-                            },
-                            "cp": {
-                                "destination": {
-                                    "vdu": {
-                                        "callback": "addLink",
-                                        "direct_edge": False,
-                                        "removable": {
-                                            "callback": "removeLink"
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    },
-                    "name": "OSM",
-                    "version": 1,
-                    "nodes": {
-                        "vnf": {
-                            "label": "vnf"
-                        },
-                        "ns_vl": {
-                            "label": "vl"
-                        },
-                        "cp": {
-                            "label": "cp"
-                        },
-                        "vdu": {
-                            "label": "vdu"
-                        }
-                    },
-                    "description": "osm"
-                }
-            }}
+        result = test.nsr_to_graph(nsr_object)
         return __response_handler(request, result)
     else:
         result = {'type': type, 'project_id': project_id, 'instance_id': instance_id}