diff --git a/static/src/descriptorhandler/composer.js b/static/src/descriptorhandler/composer.js
index a21c14f..175f46b 100644
--- a/static/src/descriptorhandler/composer.js
+++ b/static/src/descriptorhandler/composer.js
@@ -22,6 +22,13 @@
     "vnfd": ["vdu", "cp", "vnf_vl", "int_cp"]
 };
 
+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'
+};
+
 var params = {
     node: {
         type: type_view[getUrlParameter('type')],
@@ -47,17 +54,108 @@
         data_url: window.location.href,
         //desc_id: getUrlParameter('id'),
         gui_properties: osm_gui_properties,
-        edit_mode: false,
+        edit_mode: true,
         behaviorsOnEvents: {
             viewBased: false,
             behaviors: buildBehaviorsOnEvents()
         }
     });
     graph_editor.handleFiltersParams(params);
+    initDropOnGraph();
 
+
+    $("#side_form").submit(function (event) {
+        event.preventDefault(); //prevent default action
+        console.log("ON submit")
+        var form_data = new FormData(this); //Encode form elements for submission
+        var formDataJson = {};
+        form_data.forEach(function (value, key) {
+            formDataJson[key] = value;
+        });
+        if (graph_editor._selected_node) {
+            graph_editor.updateDataNode(graph_editor._selected_node, formDataJson, function () {
+
+            }, function (result) {
+                var data = result.responseJSON;
+                var title = "Error " + (data && data.code ? data.code : 'unknown');
+                var message = data && data.detail ? data.detail : 'No detail available.';
+                bootbox.alert({
+                    title: title,
+                    message: message
+                });
+            })
+        } else {
+            graph_editor.updateGraphParams(formDataJson, function () {
+
+            }, function (result) {
+                var data = result.responseJSON;
+                var title = "Error " + (data && data.code ? data.code : 'unknown');
+                var message = data && data.detail ? data.detail : 'No detail available.';
+                bootbox.alert({
+                    title: title,
+                    message: message
+                });
+            })
+        }
+
+    });
 });
 
 
+function initDropOnGraph() {
+
+    var dropZone = document.getElementById('graph_editor_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');
+        var random_name = nodetype + "_" + generateUID();
+
+        var node_information = {
+            'id': random_name,
+            'info': {
+                'type': nodetype,
+                'property': {
+                    'custom_label': random_name
+                },
+                'group': null,
+                'desc_id': getUrlParameter('id'),
+                'desc_type': getUrlParameter('type'),
+                'osm': {}
+            },
+            'x': e.layerX,
+            'y': e.layerY
+        };
+        if (nodetype === 'ns_vl') {
+
+            graph_editor.addNode(node_information, function () {
+                console.log("OK")
+            }, function (error) {
+                showAlert(error)
+            })
+        } else if (nodetype === 'vnf') {
+            node_information['id'] = $('#' + elemet_id).attr('desc_id');
+            graph_editor.addNode(node_information, function () {
+                console.log("OK")
+            }, function (error) {
+                showAlert(error)
+            })
+        }
+    };
+
+    dropZone.ondragover = function (ev) {
+        console.log("ondragover");
+        return false;
+    };
+
+    dropZone.ondragleave = function () {
+        console.log("ondragleave");
+        return false;
+    };
+}
+
 
 function handleForce(el) {
     graph_editor.handleForce((el.getAttribute('aria-pressed') === "true"));
@@ -66,8 +164,9 @@
 function changeFilter(e, c) {
     if (c && c.link && c.link.view[0]) {
         updateLegend(c.link.view[0]);
+        updatePalette(c.link.view[0]);
     }
-    //layerDetails(graph_editor.getCurrentFilters())
+    layerDetails(graph_editor.getCurrentFilters())
 }
 
 function resetFilters() {
@@ -75,37 +174,7 @@
 }
 
 function buildBehaviorsOnEvents() {
-    var self = this;
-    var contextmenuNodesAction = [
-        {
-            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 contextmenuNodesAction = [];
     return {
         'nodes': contextmenuNodesAction
     };
@@ -115,7 +184,7 @@
 function refreshElementInfo(event, element) {
     if (event.type === 'node:selected') {
         switch (element.info.type) {
-            case 'vnfd':
+            case 'vnf':
                 vnfDetails(element.info.osm);
                 break;
             case 'vdu':
@@ -137,19 +206,18 @@
 }
 
 function layerDetails(filters) {
-    var side = $('#side');
+    var side = $('#side_form');
     var graph_parameters = graph_editor.getGraphParams();
     var layer_template = '';
-    console.log(graph_parameters)
-    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']);
+    if (graph_parameters['view'] && filters.link.view.length > 0 && filters.link.view[0]) {
+        if (filters.link.view[0] === 'nsd') {
+            layer_template = getMainSectionWithSubmitButton('NSD');
+            layer_template += getChildrenTable(graph_parameters['view']['nsd']);
         }
-        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]);
+        else if (filters.link.view[0] === 'vnfd') {
+            layer_template = getMainSectionWithSubmitButton('VNFD');
+
+            layer_template += getChildrenTable(graph_parameters['view']['vnfd']);
         }
     }
 
@@ -162,12 +230,12 @@
     var nodes = type_view[view];
     var legend_template = '';
     var nodes_properties = osm_gui_properties['nodes'];
-    for (var n in nodes){
+    for (var n in nodes) {
         var node = nodes[n];
-        if(nodes_properties[node]){
+        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>';
+                '<div class="icon" style="background-color:' + nodes_properties[node].color + '"></div>' +
+                '<div class="name">' + nodes_properties[node].name + '</div></div>';
         }
     }
 
@@ -176,48 +244,74 @@
 
 }
 
-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 updatePalette(view) {
+    var palette = $('#palette');
+    var palette_template = '';
+    palette.empty();
+    if (view === 'vnfd') {
+        var nodes = type_view[view];
+        var nodes_properties = osm_gui_properties['nodes'];
+        for (var n in nodes) {
+            var node = nodes[n];
+            if (nodes_properties[node]) {
+                palette_template += '<div id="drag_' + n + '" class="node ui-draggable"' +
+                    'type-name="' + n + '" draggable="true" ondragstart="nodeDragStart(event)">' +
+                    '<div class="icon" style="background-color:' + nodes_properties[node].color + '"></div>' +
+                    '<div class="name">' + nodes_properties[node].name + '</div></div>';
+            }
+        }
+
+        palette.append(palette_template)
+    } else if (view === 'nsd') {
+        $.ajax({
+            url: '/projects/descriptors/composer/availablenodes?layer=nsd',
+            type: 'GET',
+            cache: false,
+            success: function (result) {
+                palette_template += '<div id="drag_ns_vl" class="node ui-draggable"' +
+                    'type-name="ns_vl" draggable="true" ondragstart="nodeDragStart(event)">' +
+                    '<div class="icon" style="background-color:' + osm_gui_properties['nodes']['ns_vl'].color + '"></div>' +
+                    '<div class="name">' + osm_gui_properties['nodes']['ns_vl'].name + '</div></div>';
+                palette_template += getSubSection('VNFD');
+                for (var d in result['descriptors']) {
+                    var desc = result['descriptors'][d];
+                    palette_template += '<div id="drag_' + desc.id + '" class="node ui-draggable"' +
+                        'type-name="vnf" desc_id="' + desc.id + '" draggable="true" ondragstart="nodeDragStart(event)">' +
+                        '<div class="icon" style="background-color:#605ca8"></div>' +
+                        '<div class="name">' + desc.name + '</div></div>';
+                }
+                palette.append(palette_template)
+            },
+            error: function (result) {
+                showAlert(result);
+            }
+        });
+    }
+
+}
+
 
 function vnfDetails(vnfr) {
-    var side = $('#side');
+    var side = $('#side_form');
     var vnfr_template = getMainSection('VNF');
 
-    vnfr_template += getChildrenTable(vnfr);
+    vnfr_template += getChildrenTable(vnfr, true);
     side.empty();
     side.append(vnfr_template)
 }
 
 function vduDetails(vdur) {
-    var side = $('#side');
-    var vdur_template = getMainSectionWithStatus('VDU', vdur['status'] === 'ACTIVE');
+    var side = $('#side_form');
+    var vdur_template = getMainSectionWithSubmitButton('VDU');
     vdur_template += getChildrenTable(vdur);
 
-    if (vdur['interface'] && vdur['interface'].length > 0) {
-        vdur_template += getSubSection('Interfaces:');
-        vdur_template += '<table class="children">';
-
-        for (var i = 0; i < vdur['interface'].length; ++i) {
-            var interface = vdur['interface'][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');
+    var side = $('#side_form');
+    var cp_template = getMainSectionWithSubmitButton('Connection Point');
 
     cp_template += getChildrenTable(cp);
     side.empty();
@@ -225,8 +319,8 @@
 }
 
 function vlDetails(vl) {
-    var side = $('#side');
-    var vl_template = getMainSection('Virtual Link');
+    var side = $('#side_form');
+    var vl_template = getMainSectionWithSubmitButton('Virtual Link');
 
     vl_template += getChildrenTable(vl);
     side.empty();
@@ -238,6 +332,11 @@
     return '<div class="section"><span style="font-weight: 500;">' + title + '</span></div>';
 }
 
+function getMainSectionWithSubmitButton(title) {
+    return '<div class="section"><span style="font-weight: 500;">' + title + '</span>' +
+        '<div class="status"><button id="update_button" class="btn btn-xs btn-default" ><i class="fa fa-save"></i> SAVE</button></div></div>';
+}
+
 function getSubSection(title) {
     return '<div class="section"><span>' + title + '</span></div>';
 }
@@ -252,15 +351,27 @@
     return template;
 }
 
-function getChildrenTable(data) {
+function getChildrenTable(data, ro) {
     var template = '<table class="children">';
 
     for (var key in data) {
-        if (typeof data[key] === 'string') {
+        if (typeof data[key] !== 'object') {
             var key_map = (map[key]) ? map[key] : key;
-            template += '<tr><td>' + key_map + '</td><td><input name="'+key+'" class="form-control input-sm" type="text"  value="' + data[key] + '"></td></tr>';
+            if (ro)
+                template += '<tr><td>' + key_map + '</td><td>' + data[key] + '</td></tr>';
+            else
+                template += '<tr><td>' + key_map + '</td><td><input name="' + key + '" class="form-control input-sm" type="text"  value="' + data[key] + '"></td></tr>';
+
         }
     }
     template += '</table>';
     return template;
+}
+
+function openHelp() {
+    $('#modalTopologyInfoButton').modal('show');
+}
+
+function openTextedit() {
+    window.location.href = '/projects/descriptors/' + getUrlParameter('type') + '/' + getUrlParameter('id')
 }
\ No newline at end of file
diff --git a/static/src/descriptorhandler/controller.js b/static/src/descriptorhandler/controller.js
new file mode 100644
index 0000000..3a96ea2
--- /dev/null
+++ b/static/src/descriptorhandler/controller.js
@@ -0,0 +1,209 @@
+if (typeof TCD3 === 'undefined') {
+    var TCD3 = {};
+}
+
+TCD3.OsmController = (function (global) {
+    'use strict';
+
+    var DEBUG = true;
+
+    OsmController.prototype.constructor = OsmController;
+
+    /**
+     * Constructor
+     */
+    function OsmController() {
+
+
+    }
+
+
+    OsmController.prototype.addNode = function (graph_editor, node, success, error) {
+        log('addNode');
+        var element_type = node.info.type;
+        var desc_id = node.info.desc_id;
+        var desc_type = node.info.desc_type;
+        var data_form = new FormData();
+        data_form.append('csrfmiddlewaretoken', getCookie('csrftoken'));
+        for (var key in node) {
+            data_form.append(key, node[key]);
+        }
+        $.ajax({
+            url: '/projects/descriptors/' + desc_type + '/' + desc_id + '/addElement/' + element_type,
+            type: 'POST',
+            data: data_form,
+            cache: false,
+            contentType: false,
+            processData: false,
+            success: success,
+            error: error
+        });
+    };
+
+    OsmController.prototype.addLink = function (graph_editor, link, success, error) {
+        log('addLink');
+
+        var data_to_send = {
+            'desc_id': link.desc_id,
+            'source': link.source.id,
+            'source_type': link.source.info.type,
+            'target': link.target.id,
+            'target_type': link.target.info.type,
+            'view': link.view,
+            'group': link.group
+        };
+
+        var desc_id = getUrlParameter('id');
+        var desc_type = getUrlParameter('type');
+        if (desc_type === 'nsd') {
+            var element_type = 'cp';
+            var data_form = new FormData();
+
+            var vnfd_node = (link.source.info.type === 'vnf') ? link.source : link.target;
+            var vld_node = (link.source.info.type === 'ns_vl') ? link.source : link.target;
+
+            data_form.append('csrfmiddlewaretoken', getCookie('csrftoken'));
+            data_form.append('vnfd-connection-point-ref', 'cp_temp');
+            data_form.append('member-vnf-index-ref', vnfd_node.info.osm['member-vnf-index']);
+            data_form.append('vnfd-id-ref', vnfd_node.info.osm['vnfd-id-ref']);
+            data_form.append('vld_id', vld_node.info.osm['id']);
+
+            $.ajax({
+                url: '/projects/descriptors/' + desc_type + '/' + desc_id + '/addElement/' + element_type,
+                type: 'POST',
+                data: data_form,
+                cache: false,
+                contentType: false,
+                processData: false,
+                success: success,
+                error: error
+            });
+        }
+
+    };
+
+    OsmController.prototype.removeNode = function (graph_editor, node, success, error) {
+        log('removeNode');
+        var desc_id = getUrlParameter('id');
+        var desc_type = getUrlParameter('type');
+        var element_type = node['info']['type'];
+        var data_form = new FormData();
+        data_form.append('csrfmiddlewaretoken', getCookie('csrftoken'));
+        for (var key in node.info.osm) {
+            data_form.append(key, node.info.osm[key]);
+        }
+
+        $.ajax({
+            url: '/projects/descriptors/' + desc_type + '/' + desc_id + '/removeElement/' + element_type,
+            type: 'POST',
+            data: data_form,
+            cache: false,
+            contentType: false,
+            processData: false,
+            success: success,
+            error: error
+        });
+
+    };
+
+    OsmController.prototype.updateNode = function (graph_editor, node, args, success, error) {
+        log('updateNode');
+        var desc_id = getUrlParameter('id');
+        var desc_type = getUrlParameter('type');
+        var element_type = node['info']['type'];
+        console.log(args)
+        var data_form = new FormData();
+        data_form.append('csrfmiddlewaretoken', getCookie('csrftoken'));
+        data_form.append('old', JSON.stringify( node.info.osm));
+        data_form.append('update', JSON.stringify(args));
+        /*for (var key in node.info.osm) {
+            data_form.append(key, node.info.osm[key]);
+        }
+        */
+
+        $.ajax({
+            url: '/projects/descriptors/' + desc_type + '/' + desc_id + '/updateElement/' + element_type,
+            type: 'POST',
+            data: data_form,
+            cache: false,
+            contentType: false,
+            processData: false,
+            success: success,
+            error: error
+        });
+
+    };
+
+    OsmController.prototype.updateGraphParams = function(args, success, error){
+        var desc_id = getUrlParameter('id');
+        var desc_type = getUrlParameter('type');
+        var data_form = new FormData();
+        data_form.append('csrfmiddlewaretoken', getCookie('csrftoken'));
+        data_form.append('update', JSON.stringify(args));
+        $.ajax({
+            url: '/projects/descriptors/' + desc_type + '/' + desc_id + '/updateElement/graph_params',
+            type: 'POST',
+            data: data_form,
+            cache: false,
+            contentType: false,
+            processData: false,
+            success: success,
+            error: error
+        });
+    };
+
+    OsmController.prototype.removeLink = function (graph_editor, link, success, error) {
+        log('removeLink');
+        var data_to_send = {
+            'desc_id': link.desc_id,
+            'source': link.source.id,
+            'source_type': link.source.info.type,
+            'target': link.target.id,
+            'target_type': link.target.info.type,
+            'view': link.view,
+            'group': link.group
+        };
+
+        var desc_id = getUrlParameter('id');
+        var desc_type = getUrlParameter('type');
+
+        if (desc_type === 'nsd') {
+            var element_type = 'cp';
+            var data_form = new FormData();
+
+            var vnfd_node = (link.source.info.type === 'vnf') ? link.source : link.target;
+            var vld_node = (link.source.info.type === 'ns_vl') ? link.source : link.target;
+
+            data_form.append('csrfmiddlewaretoken', getCookie('csrftoken'));
+            data_form.append('vnfd-connection-point-ref', 'cp_temp');
+            data_form.append('member-vnf-index-ref', vnfd_node.info.osm['member-vnf-index']);
+            data_form.append('vnfd-id-ref', vnfd_node.info.osm['vnfd-id-ref']);
+            data_form.append('vld_id', vld_node.info.osm['id']);
+
+            $.ajax({
+                url: '/projects/descriptors/' + desc_type + '/' + desc_id + '/removeElement/' + element_type,
+                type: 'POST',
+                data: data_form,
+                cache: false,
+                contentType: false,
+                processData: false,
+                success: success,
+                error: error
+            });
+        }
+    };
+
+    /**
+     * Log utility
+     */
+    function log(text) {
+        if (DEBUG)
+            console.log("::OsmController::", text);
+    }
+
+    return OsmController;
+}(this));
+
+if (typeof module === 'object') {
+    module.exports = TCD3.OsmController;
+}
\ No newline at end of file