diff --git a/static/src/projecthandler/descriptorslist.js b/static/src/projecthandler/descriptorslist.js
new file mode 100644
index 0000000..4a5975a
--- /dev/null
+++ b/static/src/projecthandler/descriptorslist.js
@@ -0,0 +1,69 @@
+
+function startFromAgent(start) {
+
+
+    if (start == 'exist'){
+        $('#div_new_agent').hide();
+        $('#div_available_agent').show();
+    }
+    else if (start == 'new'){
+        $('#div_available_agent').hide();
+        $('#div_new_agent').show();
+    }
+
+    $('.required').prop('required', function(){
+        return  $(this).is(':visible');
+    });
+
+}
+/*
+function InvalidGitUrl(textbox) {
+    console.log('InvalidGitUrl', textbox,textbox.value == '' ,textbox.validity.typeMismatch)
+    if (textbox.value === '') {
+        textbox.setCustomValidity('Required git URL');
+    }
+    else if (textbox.validity.typeMismatch){
+        textbox.setCustomValidity('please enter a valid git URL');
+
+    }
+    else {
+        textbox.setCustomValidity('please enter a valid git URL');
+    }
+    return true;
+}
+*/
+function startFromRepo(start) {
+
+
+    if (start == 'exist'){
+        $('#div_new_repo').hide();
+        $('#div_available_repo').show();
+    }
+    else if (start == 'new'){
+        $('#div_available_repo').hide();
+        $('#div_new_repo').show();
+    }
+
+    $('.required').prop('required', function(){
+        return  $(this).is(':visible');
+    });
+
+}
+
+$(document).ready(function () {
+    $("#startButtonsSelect :input").change(function () {
+        console.log("select")
+        startFromAgent(this.value);
+    });
+    $("#push_start_buttons_select :input").change(function () {
+        console.log("select")
+        startFromRepo(this.value);
+    });
+
+    // Bind events
+    $("form").submit(function(e) {
+        console.log("on submit form")
+        $("#start_new_deployment").button('loading');
+    });
+
+});
\ No newline at end of file
diff --git a/static/src/projecthandler/new_project.js b/static/src/projecthandler/new_project.js
new file mode 100644
index 0000000..9ca4c9e
--- /dev/null
+++ b/static/src/projecthandler/new_project.js
@@ -0,0 +1,84 @@
+/**
+ *      New Project page
+ **/
+function handleTypeChoose(type) {
+    resetStartFromInputs()
+    $('#projectType').val(type);
+    $('#startGroup').show();
+    $('input[id="scratch"]').prop('checked', true);
+    $('#startButtonsSelect label').removeClass("active");
+    $('#s-scratch').addClass("active");
+    $('#createButton').prop('disabled', false);
+    //$('#projectName').val('New_'+type+'_project')
+}
+
+function startFromChoose(start) {
+    resetStartFromInputs()
+    //resetSelectors();
+    var type = $('#select_type').val();
+
+    if (start == 'files')
+        $('#div-file-upload-' + type).show();
+    else if (start == 'example')
+        //document.getElementById['#div-example-' + type].style.display = "block";
+       $('#div-example-' + type).css("display", "inline");
+
+}
+
+function resetStartFromInputs() {
+    $('div[class="start-selector"]').hide();
+    $('input[type="file"]').val('');
+    $('select[class="example-selector"]').val(null).trigger("change");
+}
+
+$(document).ready(function () {
+
+    // init selector
+    $(".start-selector").css("display", "inline");
+    $('#select_type').select2({
+        placeholder: {
+            id: '-1',
+            text: 'Select an option'
+        },
+        data: data_type_selector
+    });
+
+
+    $('#select_type').on("select2:select", function (evt) {
+        if (evt) {
+            var args = evt.params;
+            handleTypeChoose(args.data.value)
+        }
+    });
+
+    if (type_example_files) {
+        for (var key in type_example_files) {
+            $('select[id="example-' + key + '"]').select2({
+                placeholder: {
+                    id: '-1',
+                    text: 'Select an option'
+                },
+                data: type_example_files[key]
+            });
+        }
+
+
+    }
+
+
+
+    $("#startButtonsSelect :input").change(function () {
+        startFromChoose(this.value);
+    });
+
+
+
+    $("body").bind("ajaxSend", function (elm, xhr, s) {
+        if (s.type == "POST") {
+            xhr.setRequestHeader('csrftoken', $('#csrfmiddlewaretoken').val());
+        }
+    });
+
+    $(".start-selector").css("display", "none");
+
+});
\ No newline at end of file
diff --git a/static/src/projecthandler/osm/controller.js b/static/src/projecthandler/osm/controller.js
new file mode 100644
index 0000000..e39e332
--- /dev/null
+++ b/static/src/projecthandler/osm/controller.js
@@ -0,0 +1,107 @@
+if (typeof dreamer === 'undefined') {
+    var dreamer = {};
+}
+var level = {}
+
+dreamer.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 data_to_send = {
+            'group_id': node.info.group[0],
+            'element_id': node.id,
+            'element_type': node.info.type,
+            'element_desc_id': node.info.desc_id,
+            'x': node.x,
+            'y': node.y
+         };
+        new dreamer.GraphRequests().addNode(data_to_send, null, function() {
+            if (success)
+                success();
+        },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
+        };
+        new dreamer.GraphRequests().addLink(link, null, function() {
+            graph_editor._deselectAllNodes();
+
+            if (typeof old_link !== 'undefined' && old_link.length > 0 && old_link[0].index !== 'undefined') {
+                graph_editor.parent.removeLink.call(graph_editor, old_link[0].index);
+            }
+            if (success) {
+                success();
+            }
+        },error);
+    };
+
+    OsmController.prototype.removeNode = function(graph_editor, node, success, error) {
+        log('removeNode');
+        var data_to_send = {
+            'group_id': node.info.group[0],
+            'element_id': node.id,
+            'element_type': node.info.type,
+            'element_desc_id': node.info.desc_id,
+            };
+        new dreamer.GraphRequests().removeNode(data_to_send, null, function() {
+            if (success) {
+                success();
+            }
+        },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
+        };
+        new dreamer.GraphRequests().removeLink(data_to_send, function() {
+            if (success) {
+                success();
+            }
+        },error);
+    };
+
+    /**
+     * Log utility
+     */
+    function log(text) {
+        if (DEBUG)
+            console.log("::OsmController::", text);
+    }
+
+    return OsmController;
+}(this));
+
+if (typeof module === 'object') {
+    module.exports = dreamer.OsmController;
+}
\ No newline at end of file
diff --git a/static/src/projecthandler/osm/gui_properties.js b/static/src/projecthandler/osm/gui_properties.js
new file mode 100644
index 0000000..1af3ef4
--- /dev/null
+++ b/static/src/projecthandler/osm/gui_properties.js
@@ -0,0 +1,128 @@
+//***STEFANO
+var example_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"
+      },
+      "ns_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"
+      },
+      "vnf_ext_cp": {
+        "shape": "circle",
+        //"#00CC66",
+        "color": "#F27220",
+        "size": 15,
+        "name": "ExtCP"
+      },
+      "vnf_vdu_cp": {
+        "shape": "circle",
+        //"color": "#E74C35",
+        "color": "#fce0cf",
+        "size": 15,
+        "name": "VduCP"
+      },
+      "vnf_vdu": {
+        "shape": "square",
+        //"color": "#50A7CC",
+        "color": "#54A698",
+        "size": 18,
+        "name": "VDU"
+      }
+    },
+    "graphs": null
+
+  },
+  "v0" : {
+    "default": {
+      "shape": "cross",
+      "color": "#42f44e",
+      "label_color": "black",
+      "size": 15
+    },
+    "nodes": {
+      "pippo": {
+        "image": "image.png",
+        "size": 25
+      },
+      "ns_vl": {
+        "shape": "triangle",
+        "color": "#196B90",
+        "size": 11,
+        "name": "VL"
+      },
+      "ns_cp": {
+        "shape": "circle",
+        "color": "#F27220",
+        "size": 15,
+        "name": "CP"
+      },
+      "vnf": {
+        "shape": "square",
+        "color": "#54A698",
+        "image": "router.png",
+        "size": 40,
+        "name": "VNF"
+      },
+      "vnf_vl": {
+        "shape": "triangle",
+        //"color": "#5FC9DB",
+        "color": "#196B90",
+        "size": 11,
+        "name": "IntVL"
+      },
+      "vnf_ext_cp": {
+        "shape": "circle",
+        //"#00CC66",
+        "color": "#F27220",
+        "size": 15,
+        "name": "ExtCP"
+      },
+      "vnf_vdu_cp": {
+        "shape": "circle",
+        //"color": "#E74C35",
+        "color": "#fce0cf",
+        "size": 15,
+        "name": "VduCP"
+      },
+      "vnf_vdu": {
+        "shape": "square",
+        //"color": "#50A7CC",
+        "color": "#54A698",
+        "size": 18,
+        "name": "VDU"
+      }
+    },
+    "graphs": null
+
+  },
+
+}
\ No newline at end of file
diff --git a/static/src/projecthandler/osm/project_graph.js b/static/src/projecthandler/osm/project_graph.js
new file mode 100644
index 0000000..072129f
--- /dev/null
+++ b/static/src/projecthandler/osm/project_graph.js
@@ -0,0 +1,354 @@
+//GraphEditor instance
+var graph_editor = new dreamer.ModelGraphEditor();
+var selected_vnffgId = null;
+var show_all = null;
+
+// Enable Drop Action on the Graph
+initDropOnGraph();
+
+
+
+$(document).ready(function() {
+    var descriptor_type = getUrlParameter('type') == 'ns' || getUrlParameter('type') == 'nsd' ? 'ns' : 'vnf'
+    var allowed_types = descriptor_type == 'ns' ? ['vnf', 'ns_cp', 'ns_vl'] : ['vnf_vl', 'vnf_ext_cp', 'vnf_vdu_cp', 'vnf_vdu'];
+    var params = {
+        node: {
+            type: allowed_types,
+            group: [getUrlParameter('id')]
+        },
+        link: {
+            group: [getUrlParameter('id')],
+            view: [descriptor_type]
+        }
+    }
+
+    graph_editor.addListener("refresh_graph_parameters", refreshGraphParameters);
+
+
+    // graph_editor initialization
+    graph_editor.init({
+        width: $('#graph_ed_container').width(),
+        height: $('#graph_ed_container').height(),
+        gui_properties: example_gui_properties,
+        filter_base: params,
+        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);
+    graph_editor.addListener("filters_changed", changeFilter);
+    graph_editor.addListener("edit_descriptor", openEditorEvent);
+
+});
+
+
+function initDropOnGraph() {
+
+    var dropZone = document.getElementById('graph_ed_container');
+    dropZone.ondrop = function(e) {
+        var group = graph_editor.getCurrentGroup()
+        e.preventDefault();
+        var nodetype = e.dataTransfer.getData("text/plain");
+        if (nodetype) {
+            var type_name = graph_editor.getTypeProperty()[nodetype].name;
+            if (nodetype == 'vnf') {
+                new dreamer.GraphRequests().getUnusedVnf(group, function(vnfs) {
+                    $('#div_chose_id').hide();
+                    $('#div_chose_vnf').show();
+                    $('#input_choose_node_id').val(nodetype + "_" + generateUID());
+                    $('#selection_chooser_vnf').empty();
+                    $('#selection_chooser_vnf').append('<option >None</option>');
+                    $('#modal_chooser_title_add_node').text('Add ' + type_name);
+                    for (var i in vnfs) {
+                        $('#selection_chooser_vnf').append('<option id="' + vnfs[i] + '">' + vnfs[i] + '</option>');
+                    }
+                    $('#save_choose_node_id').off('click').on('click', function() {
+                        var choice = $("#selection_chooser_vnf option:selected").text();
+                        var name = $('#input_choose_node_id').val();
+                        if (choice == 'None') {
+                            var node_information = {
+                                'id': name,
+                                'info': {
+                                    'type': nodetype,
+                                    'group': [group]
+                                },
+                                'x': e.layerX,
+                                'y': e.layerY
+                            }
+                            graph_editor.addNode(node_information, function() {
+                                $('#modal_choose_node_id').modal('hide');
+                            }, function(error){
+                        showAlert(error)
+                    });
+                        } else {
+                            var node_information = {
+                                'existing_element': true,
+                                'id': choice,
+                                'info': {
+                                    'type': nodetype,
+                                    'group': [group]
+                                },
+                                'x': e.layerX,
+                                'y': e.layerY
+                            }
+                            graph_editor.addNode(node_information, function() {
+                                $('#modal_choose_node_id').modal('hide');
+                            }, function(error){
+                        showAlert(error)
+                    });
+                        }
+
+                    });
+
+                    $('#modal_choose_node_id').modal('show');
+                });
+
+            } else {
+                $('#div_chose_id').show();
+                $('#div_chose_vnf').hide();
+                $('#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]
+                        },
+                        'x': e.layerX,
+                        'y': e.layerY
+                    }
+                    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) {
+    var type_property = graph_editor.getTypeProperty();
+    if (c.link.view == 'ns') {
+        $("#title_header").text("NS Graph Editor")
+        $("#vnffg_options").prop("disabled", false);
+        graph_editor.refreshGraphParameters();
+    } else {
+
+        $("#title_header").text("VNF Graph Editor");
+        $("#vnffg_box").hide();
+        $("#vnffg_options").prop("disabled", true);
+    }
+
+   new dreamer.GraphRequests().getAvailableNodes({layer: c.link.view[0]}, buildPalette, showAlert);
+   updateBredCrumb(c);
+}
+
+var filters = function(e, params) {
+    graph_editor.handleFiltersParams(params);
+    $('#' + e).nextAll('li').remove();
+}
+
+function updateBredCrumb(filter_parameters){
+     var newLi = $("<li id=" + JSON.stringify(graph_editor.getCurrentGroup()) + "><a href='javascript:filters(" + JSON.stringify(graph_editor.getCurrentGroup()) + "," + JSON.stringify(filter_parameters) + ")'>" + graph_editor.getCurrentGroup() + "</a></li>");
+     $('#breadcrumb').append(newLi);
+}
+
+
+function openEditor(project_id) {
+    window.location.href = '/projects/' + project_id + '/descriptors/' + graph_editor.getCurrentView() + 'd/' + graph_editor.getCurrentGroup();
+}
+
+
+function showChooserModal(title, chooses, callback) {
+    console.log('showchooser')
+    $('#selection_chooser').empty();
+    for (var i in chooses) {
+        $('#selection_chooser').append('<option id="' + chooses[i].id + '">' + chooses[i].id + '</option>');
+    }
+    $('#modal_chooser_title').text(title)
+    var self = this;
+    $('#save_chooser').off('click').on('click', function() {
+        var choice = $("#selection_chooser option:selected").text();
+        callback(choice);
+
+    });
+    $('#modal_create_link_chooser').modal('show');
+
+}
+
+function refreshGraphParameters(e, graphParameters) {
+
+    var self = $(this);
+    if (graphParameters == null) return;
+    var vnffgIds = graphParameters.vnffgIds;
+    if (vnffgIds == null) return;
+
+    $("#selection_vnffg").empty();
+    $("#selection_vnffg").append('<option value="Global">Global</option>')
+    for (var i in vnffgIds) {
+        var vnffgId = vnffgIds[i]
+        var child = $('<option value="' + vnffgId + '">' + vnffgId + '</option>');
+        $("#selection_vnffg").append(child)
+    }
+}
+
+function changeVnffg(e) {
+    var vnffgId = e.value;
+    selected_vnffgId = vnffgId;
+    show_all_change();
+}
+
+function newVnffg() {
+    var group = graph_editor.getCurrentGroup()
+    $('#div_chose_id').show();
+    $('#div_chose_vnf').hide();
+    $('#input_choose_node_id').val("vnffg_" + generateUID());
+    $('#modal_chooser_title_add_node').text('Add VNFFG');
+    $('#save_choose_node_id').off('click').on('click', function() {
+        var name = $('#input_choose_node_id').val();
+        var node_information = {
+            'element_id': name,
+            'element_type': "vnffg",
+            'group_id': group,
+        }
+        console.log(JSON.stringify(node_information))
+        new dreamer.GraphRequests().addVnffg(node_information, function(result) {
+
+            $('#modal_choose_node_id').modal('hide');
+            graph_editor.d3_graph.graph_parameters.vnffgIds.push(node_information.id)
+            refreshGraphParameters(null, graph_editor.d3_graph.graph_parameters)
+        });
+
+
+
+    });
+    $('#modal_choose_node_id').modal('show');
+}
+
+function show_all_change(e) {
+    if (!selected_vnffgId) return;
+    var vnffgId = selected_vnffgId;
+    if (e) show_all = e.checked;
+    if (show_all) {
+        handleVnffgParameter("Global", "invisible");
+        handleVnffgParameter(vnffgId, "matted");
+    } else {
+        handleVnffgParameter("Global", "matted");
+        handleVnffgParameter(vnffgId, "invisible");
+    }
+}
+
+function clickVnffg() {
+    if ($("#vnffg_box").is(':visible'))
+        $("#vnffg_box").hide();
+    else
+        $("#vnffg_box").show();
+
+}
+
+function handleVnffgParameter(vnffgId, class_name) {
+
+    if (vnffgId != "Global") {
+        selected_vnffgId = vnffgId;
+        graph_editor.setNodeClass(class_name, function(d) {
+            var result = false;
+            if (d.info.group.indexOf(vnffgId) < 0) {
+                result = true;
+            }
+            console.log(result);
+            return result;
+        });
+
+        graph_editor.setLinkClass(class_name, function(d) {
+            var result = false;
+            if (d.group.indexOf(vnffgId) < 0) {
+                result = true;
+            }
+            console.log(result);
+            return result;
+        });
+
+    } else {
+        selected_vnffgId = null;
+        graph_editor.setNodeClass(class_name, function(d) {
+            var result = false;
+            return result;
+        });
+
+        graph_editor.setLinkClass(class_name, function(d) {
+            var result = false;
+            return result;
+        });
+    }
+}
+
+function buildBehaviorsOnEvents(){
+    var contextmenuNodesAction = [
+        {
+                title: 'Show graph',
+                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