diff --git a/descriptorhandler/template/composer.html b/descriptorhandler/template/composer.html
index 2de4ae8..7647151 100644
--- a/descriptorhandler/template/composer.html
+++ b/descriptorhandler/template/composer.html
@@ -15,6 +15,7 @@
 {% endblock %}
 {% block title_header_big %}
     {{ block.super }}
+    {{ type|upper }} Composer
 {% endblock %}
 {% block left_sidebar %}
     {% include 'osm/osm_project_left_sidebar.html' %}
@@ -23,8 +24,8 @@
 
 {% block breadcrumb_body %}
     {{ block.super }}
-    {% comment %}<li><a href="{% url 'projects:descriptors:list_descriptors'  type=type %}">{{ type|upper }} Descriptors</a></li>
-    <li><a href="#"><i class="fa fa-sitemap"></i> {{ type|upper }} Topology</a></li>{% endcomment %}
+    <li><a href="{% url 'projects:descriptors:list_descriptors'  descriptor_type=type %}">{{ type|upper }} Descriptors</a></li>
+    <li><a href="#"><i class="fa fa-sitemap"></i> {{ type|upper }} Composer</a></li>
 {% endblock %}
 
 {% block content_body %}
@@ -38,22 +39,7 @@
                     <span style="font-weight: 500;">Select Element</span>
                 </div>
                 <div id="palette">
-                    <div class="node" draggable="true">
-                        <div class="icon" style="background-color: #cf1c24" ></div>
-                        <div class="name">VDU</div>
-                    </div>
-                    <div class="node" draggable="true">
-                        <div class="icon" style="background-color: #f8a800" ></div>
-                        <div class="name">VL</div>
-                    </div>
-                    <div class="node" draggable="true">
-                        <div class="icon" style="background-color: #e3bfad" ></div>
-                        <div class="name">intCP</div>
-                    </div>
-                    <div class="node" draggable="true">
-                        <div class="icon" style="background-color: #c6b63f" ></div>
-                        <div class="name">extCp</div>
-                    </div>
+
 
                 </div>
 
@@ -63,25 +49,27 @@
                     <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>
+                    <button id="reset_filter" type="button" data-container="body" data-toggle="tooltip" data-placement="top" title="Text view"  class="btn btn btn-default" onclick="openTextedit(this)"><i
+                            class="fa fa-edit"></i></button>
+                    <button id="info_button" type="button" data-container="body" data-toggle="tooltip" data-placement="top" title="Help"  class="btn btn btn-default "onclick="openHelp(this)" ><i class="fa fa-info"></i></button>
                 </div>
                 <div id="legenda">
                 </div>
             </div>
             <div id="side">
-
+                <form id="side_form" method="post" enctype="multipart/form-data" action="">
+                    {% csrf_token %}
+                </form>
             </div>
         </div>
     </div>
 
+    {% include 'modal/modal_keyboard_info_base.html' %}
 {% endblock %}
 
 {% block resource_block %}
     {{ block.super }}
-    <script>
-        var topology_data = {};//{{topology_data|safe }};
-    </script>
+
     <!-- d3.js -->
     <script src="/static/bower_components/d3/d3.js"></script>
     <script src="/static/bower_components/moment/moment.js"></script>
@@ -93,10 +81,9 @@
     <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>
+    <script src="/static/src/descriptorhandler/controller.js"></script>
     <script src="/static/src/descriptorhandler/composer.js"></script>
-{#    <script src="/static/src/instancehandler/instance_topology_view.js"></script>#}
 
 {% endblock %}
 
diff --git a/descriptorhandler/template/descriptorlist.html b/descriptorhandler/template/descriptorlist.html
index df7bda2..5285125 100644
--- a/descriptorhandler/template/descriptorlist.html
+++ b/descriptorhandler/template/descriptorlist.html
@@ -20,7 +20,7 @@
                    role="grid">
                 <thead>
                 <tr role="row">
-                    <th>Name</th>
+                    <th>Short Name</th>
                     <th>Identified</th>
                     <th>Description</th>
                     <th style="width:10%">Vendor</th>
diff --git a/descriptorhandler/template/modal/modal_keyboard_info_base.html b/descriptorhandler/template/modal/modal_keyboard_info_base.html
new file mode 100644
index 0000000..2be28a9
--- /dev/null
+++ b/descriptorhandler/template/modal/modal_keyboard_info_base.html
@@ -0,0 +1,35 @@
+<div id="modalTopologyInfoButton" class="modal fade" tabindex="-1" role="dialog">
+	<div class="modal-dialog ">
+		<div class="modal-content">
+			<div class="modal-header">
+
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+					<span aria-hidden="true">&times;</span>
+				</button>
+				<h4 class="modal-title">Keyboard shortcuts</h4>
+			</div>
+			<div class="modal-body">
+                <ul>
+
+                    <li>
+                        <p>Create edge: Select the first vertex by clicking on it. <span class="help-key">Shift</span> + <span class="help-key">left-click</span> on another vertex (different than the selected one).</p>
+                    </li>
+                    <li>
+                        <p> <span class="help-key">Delete</span> Delete selected nodes or link.</p>
+                    </li>
+
+
+					{% block left_sidebar %}
+
+					{% endblock %}
+                </ul>
+			</div>
+			<div class="modal-footer">
+
+			</div>
+		</div>
+		<!-- /.modal-content -->
+	</div>
+	<!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->
\ No newline at end of file
diff --git a/descriptorhandler/urls.py b/descriptorhandler/urls.py
index c6e987e..b0972d9 100644
--- a/descriptorhandler/urls.py
+++ b/descriptorhandler/urls.py
@@ -20,9 +20,16 @@
 urlpatterns = [
     url(r'(?P<descriptor_type>\w+)/list$', views.show_descriptors, name='list_descriptors'),
     url(r'(?P<descriptor_type>\w+)/(?P<descriptor_id>[-\w]+)(/$)', views.edit_descriptor, name='edit_descriptor'),
-    url(r'(?P<descriptor_type>\w+)/(?P<descriptor_id>[-\w]+)/delete$', views.delete_descriptor, name='delete_descriptor'),
+    url(r'(?P<descriptor_type>\w+)/(?P<descriptor_id>[-\w]+)/delete$', views.delete_descriptor,
+        name='delete_descriptor'),
     url(r'(?P<descriptor_type>\w+)/(?P<descriptor_id>[-\w]+)/clone', views.clone_descriptor, name='clone_descriptor'),
-    url(r'(?P<descriptor_type>\w+)/(?P<descriptor_id>[-\w]+)/action/(?P<action_name>[-\w]+)',views.custom_action,
+    url(r'(?P<descriptor_type>\w+)/(?P<descriptor_id>[-\w]+)/addElement/(?P<element_type>\w+)', views.addElement,
+        name='addElement'),
+    url(r'(?P<descriptor_type>\w+)/(?P<descriptor_id>[-\w]+)/removeElement/(?P<element_type>\w+)', views.removeElement,
+        name='removeElement'),
+    url(r'(?P<descriptor_type>\w+)/(?P<descriptor_id>[-\w]+)/updateElement/(?P<element_type>\w+)', views.updateElement,
+        name='updateElement'),
+    url(r'(?P<descriptor_type>\w+)/(?P<descriptor_id>[-\w]+)/action/(?P<action_name>[-\w]+)', views.custom_action,
         name='custom_action'),
     url(r'(?P<descriptor_type>\w+)/new$', views.new_descriptor, name='new_descriptor'),
     url(r'composer$', views.open_composer, name='open_composer'),
diff --git a/descriptorhandler/views.py b/descriptorhandler/views.py
index c80af8a..1bdb9b4 100644
--- a/descriptorhandler/views.py
+++ b/descriptorhandler/views.py
@@ -26,6 +26,7 @@
 from lib.util import Util
 from lib.osm.osmclient.clientv2 import Client
 from lib.osm.osm_rdcl_parser import OsmParser
+from lib.osm.osm_util import OsmUtil
 import authosm.utils as osmutils
 
 logging.basicConfig(level=logging.DEBUG)
@@ -37,7 +38,6 @@
     user = osmutils.get_user(request)
     project_id = user.project_id
     client = Client()
-    print descriptor_type
     try:
         if descriptor_type == 'nsd':
             descriptors = client.nsd_list(user.get_token())
@@ -115,6 +115,74 @@
     else:
         return __response_handler(request, {}, url=None, status=200)
 
+@login_required
+def addElement(request, descriptor_type=None, descriptor_id=None, element_type=None):
+    user = osmutils.get_user(request)
+    project_id = user.project_id
+    client = Client()
+    if descriptor_type == 'nsd':
+        descriptor_result = client.nsd_get(user.get_token(), descriptor_id)
+        element_id = request.POST.get('id', '')
+        util = OsmUtil()
+        descriptor_updated = util.add_base_node('nsd', descriptor_result, element_type, element_id, request.POST.dict())
+        result = client.nsd_update(user.get_token(), descriptor_id, descriptor_updated)
+        if result['error'] == True:
+            return __response_handler(request, result['data'], url=None,
+                                      status=result['data']['status'] if 'status' in result['data'] else 500)
+        else:
+            parser = OsmParser()
+            # print nsr_object
+            if descriptor_type == 'nsd':
+                result_graph = parser.nsd_to_graph(descriptor_updated)
+
+        return __response_handler(request, result_graph, url=None, status=200)
+
+@login_required
+def removeElement(request, descriptor_type=None, descriptor_id=None, element_type=None):
+    user = osmutils.get_user(request)
+    project_id = user.project_id
+    client = Client()
+    if descriptor_type == 'nsd':
+        descriptor_result = client.nsd_get(user.get_token(), descriptor_id)
+        element_id = request.POST.get('id', '')
+        util = OsmUtil()
+        descriptor_updated = util.remove_node('nsd', descriptor_result, element_type, element_id, request.POST.dict())
+        result = client.nsd_update(user.get_token(), descriptor_id, descriptor_updated)
+        if result['error'] == True:
+            return __response_handler(request, result['data'], url=None,
+                                      status=result['data']['status'] if 'status' in result['data'] else 500)
+        else:
+            parser = OsmParser()
+            # print nsr_object
+            if descriptor_type == 'nsd':
+                result_graph = parser.nsd_to_graph(descriptor_updated)
+
+        return __response_handler(request, result_graph, url=None, status=200)
+
+@login_required
+def updateElement(request, descriptor_type=None, descriptor_id=None, element_type=None):
+    user = osmutils.get_user(request)
+    project_id = user.project_id
+    client = Client()
+    if descriptor_type == 'nsd':
+        descriptor_result = client.nsd_get(user.get_token(), descriptor_id)
+        util = OsmUtil()
+        payload = request.POST.dict()
+        if element_type == 'graph_params':
+            descriptor_updated = util.update_graph_params('nsd', descriptor_result, json.loads(payload['update']))
+        else:
+            descriptor_updated = util.update_node('nsd', descriptor_result, element_type, json.loads(payload['old']), json.loads(payload['update']))
+        result = client.nsd_update(user.get_token(), descriptor_id, descriptor_updated)
+        if result['error'] == True:
+            return __response_handler(request, result['data'], url=None,
+                                      status=result['data']['status'] if 'status' in result['data'] else 500)
+        else:
+            parser = OsmParser()
+            # print nsr_object
+            if descriptor_type == 'nsd':
+                result_graph = parser.nsd_to_graph(descriptor_updated)
+
+        return __response_handler(request, result_graph, url=None, status=200)
 
 @login_required
 def new_descriptor(request, descriptor_type=None):
@@ -266,8 +334,12 @@
     project_id = user.project_id
     descriptor_id = request.GET.get('id')
     descriptor_type = request.GET.get('type')
+    result = {}
     client = Client()
     if descriptor_id:
+        raw_content_types = request.META.get('HTTP_ACCEPT', '*/*').split(',')
+        if 'application/json' not in raw_content_types:
+            return __response_handler(request, {'type': descriptor_type}, 'composer.html')
         try:
             if descriptor_type == 'nsd':
                 descriptor_result = client.nsd_get(user.get_token(), descriptor_id)
@@ -286,185 +358,28 @@
             result = test.nsd_to_graph(descriptor_result)
         elif descriptor_type == 'vnfd':
             result = test.vnfd_to_graph(descriptor_result)
-        return __response_handler(request, result,'composer.html')
+        return __response_handler(request, result, 'composer.html')
 
-    result = {'project_id': project_id,
-              'vertices': [
-                  {"info": {"type": "vnf", "property": {"custom_label": ""},
-                            "group": []}, "id": "vm"},
-                  {"info": {"type": "vnf", "property": {"custom_label": ""},
-                            "group": []}, "id": "vlan"},
-                  {"info": {"type": "vnf", "property": {"custom_label": ""},
-                            "group": []}, "id": "firewall"},
-                  {"info": {"type": "vnf", "property": {"custom_label": ""},
-                            "group": []}, "id": "ping"},
-
-                  {"info": {"type": "ns_vl", "property": {"custom_label": ""},
-                            "group": []}, "id": "vl1"},
-                  {"info": {"type": "ns_vl", "property": {"custom_label": ""},
-                            "group": []}, "id": "vl2"},
-                  {"info": {"type": "ns_vl", "property": {"custom_label": ""},
-                            "group": []}, "id": "vl3"},
-              ],
-              'edges': [
-                  {"source": "vm", "group": [], "target": "vl3", "view": "ns"},
-                  {"source": "vlan", "group": [], "target": "vl3", "view": "ns"},
-                  {"source": "vlan", "group": [], "target": "vl1", "view": "ns"},
-                  {"source": "firewall", "group": [], "target": "vl1", "view": "ns"},
-                  {"source": "firewall", "group": [], "target": "vl2", "view": "ns"},
-                  {"source": "ping", "group": [], "target": "vl2", "view": "ns"},
-              ],
-              'model': {
-                "layer": {
-
-                    "ns": {
-                        "nodes": {
-                            "vnf": {
-                                "addable": {
-                                    "callback": "addNode"
-                                },
-                                "removable": {
-                                    "callback": "removeNode"
-                                },
-                                "expands": "vnf"
-                            },
-                            "ns_vl": {
-                                "addable": {
-                                    "callback": "addNode"
-                                },
-                                "removable": {
-                                    "callback": "removeNode"
-                                }
-                            },
-
-                        },
-                        "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"
-                                }
-                            },
-
-                        },
-                        "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",
-                    "callback": {
-                        "addNode": {
-                            "file": "osm_controller.js",
-                            "class": "OsmController"
-                        },
-                        "removeNode": {
-                            "file": "osm_controller.js",
-                            "class": "OsmController"
-                        },
-                        "addLink": {
-                            "file": "osm_controller.js",
-                            "class": "OsmController"
-                        },
-                        "removeLink": {
-                            "file": "osm_controller.js",
-                            "class": "OsmController"
-                        }
-                    }
-
-                }
-            }}
     return __response_handler(request, result, 'composer.html')
 
 
 def get_available_nodes(request):
-
+    user = osmutils.get_user(request)
     params = request.GET.dict()
-    nodes = {
-        'ns': [{"types": [{"name": "Generic", "id": "vnf"},
-                          {"name": "ping", "id": "vnf"},
-                          {"name": "pong", "id": "vnf"},
-                          {"name": "hackfest1-vm", "id": "vnf"}], "category_name": "Vnf"},
-               {"types": [{"name": "VL", "id": "ns_vl"}], "category_name": "VirtualLink"}],
-        'vnf': [{"types": [{"name": "VDU", "id": "vdu"}], "category_name": "Vdu"},
-                {"types": [{"name": "CP", "id": "cp"}], "category_name": "CP"}]
-    }
+    client = Client()
+    result = []
+    try:
+        if params['layer'] == 'nsd':
+            descriptors = client.vnfd_list(user.get_token())
+    except Exception as e:
+        log.exception(e)
+        descriptors = []
+    if descriptors and descriptors['error'] is False:
+        for desc in descriptors['data']:
+            # print desc
+            result.append({'_id': desc['_id'],'id': desc['id'], 'name': desc['short-name']})
 
-    return __response_handler(request, nodes[params['layer']])
+    return __response_handler(request, {'descriptors': result})
 
 
 @login_required