diff --git a/graphexp.html b/graphexp.html
index 89abba0..de1ce1e 100644
--- a/graphexp.html
+++ b/graphexp.html
@@ -21,6 +21,7 @@
 <script src="scripts/infobox.js"></script>
 <script src="scripts/graph_viz.js"></script>
 <script src="scripts/graphioGremlin.js"></script>
+<script src="scripts/editGraph.js"></script>
 
 <script type="text/javascript">
 
@@ -154,6 +155,83 @@ <h1 class="header-heading">Graph Explorer v 0.6</h1>
 							<option value="GraphSON2">3.2.*</option>
 						</select>
 					</div>
+					<div class="nav input_unit_container">
+						<button onclick="editGraph()" > Edit Graph </button>
+					</div>
+
+					<div class="nav input_unit_container", id="editGraph" style="display:none;">
+					     <button onclick="addVertexForm()"   style="height:25px; width:150px" > Add Vertex </button><br>
+					     <button onclick="editVertexForm()"  style="height:25px; width:150px" > Edit Vertex </button><br>
+					     <button onclick="addEditEdgeForm()"     style="height:25px; width:150px" > Add/Edit Edge </button><br>
+					</div>
+					
+					<div class="nav input_unit_container", id="addVertexForm" style="display:none;">
+						<table>
+					     <tr>
+						 <td><label for="vertexLabel" style="height:18px; width:200px"> Vertex Label: </label> </td>
+					     <td><input type="text" name="vertexLabel" id="vertexLabel" style="height:18px; width:500px" placeholder="Enter Vertex Label"></td>
+ 					     </tr>
+						 <tr>
+						 <td><label for="vertexPropertyName" style="height:18px; width:200px"> Vertex Property: </label> </td>
+					     <td><input type="text" name="vertexPropertyName" id="vertexPropertyName" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Name (e.g. name,age,gender)"> </td>
+					     </tr>
+						 <tr>
+						 <td><label for="vertexPropertyValue" style="height:18px; width:200px"> Property Value: </label> </td>
+					     <td><input type="text" name="vertexPropertyValue" id="vertexPropertyValue" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Value (e.g. Sandeep,27,male)"> </td>
+					     </tr>
+						 </table>
+						 <button class=Center" style="margin-top:1%" onclick="addVertex()"> Add Vertex </button>						 
+					</div>
+					
+					<div class="nav input_unit_container", id="editVertexForm" style="display:none;">
+						<table>
+						<tr>
+					     <td><label for="vertexId" style="height:18px; width:500px" "display: inline-block"> Vertex ID: </label> </td>
+					     <td><input type="text" name="vertexId" id="vertexId" style="height:18px; width:500px" placeholder="Enter Vertex ID (e.g. 123)"> </td>
+ 					    </tr>
+						<tr>
+						 <td><label for="vertexPropertyName" style="height:18px; width:500px" "display: inline-block"> Vertex Property: </label> </td>
+					     <td><input type="text" name="vertexPropertyName_1" id="vertexPropertyName_1" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Name (e.g. name,age)"> </td>
+ 					    </tr>
+						<tr>
+						 <td><label for="vertexPropertyValue" style="height:18px; width:200px" "display: inline-block"> Property Value: </label> </td>
+					     <td><input type="text" name="vertexPropertyValue_1" id="vertexPropertyValue_1" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Value (e.g. Sandeep,25)"> </td>
+ 					    </tr>
+						</table>
+						 <button class=Center" style="margin-top:1%" onclick="editVertex()"> Edit Vertex </button>
+						
+					</div>					
+
+					
+					<div class="nav input_unit_container", id="addEditEdgeForm" style="display:none;">
+					    <table>
+						<tr>
+						 <td><label for="edgeLabel" style="height:18px; width:350px" > Edge Label: </label> </td>
+					     <td><input type="text" name="edgeLabel" id="edgeLabel" style="height:18px; width:500px" placeholder="Enter Edge Label"> </td>
+					     </tr>
+						 <tr>
+						 <td><label for="sourceVertexId" style="height:18px; width:350px"> Source Vertex ID: </label> </td>
+						 <td><input type="text" name="sourceVertexId" id="sourceVertexId" style="height:18px; width:500px" placeholder="Enter Source Vertex ID"> </td>
+					     </tr>
+						 <tr>
+ 					     <td><label for="targetVertexId" style="height:18px; width:350px"> Target Vertex ID: </label> </td>
+						 <td><input type="text" name="targetVertexId" id="targetVertexId" style="height:18px; width:500px" placeholder="Enter Target Vertex ID"> </td>
+					     </tr>
+						 <tr>
+					     <td><label for="edgePropertyName" style="height:18px; width:350px"> Property Name: </label> </td>
+						 <td><input type="text" name="edgePropertyName" id="edgePropertyName" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Name"> </td>
+					     </tr>
+						 <tr>
+					     <td><label for="edgePropertyValue" style="height:18px; width:350px"> Property Value: </label> </td>
+						 <td><input type="text" name="edgePropertyValue" id="edgePropertyValue" style="height:18px; width:500px" placeholder="Enter Comma Seperated Property Value"> </td>
+						 </tr>
+						 </table>
+					     <button class=Center" style="margin-top:1%" onclick="addEditEdge()"> Add/Edit Edge </button>
+					</div>
+					
+					
+
+
 			</div>
 				<a href="http://www.github.com/bricaud/graphexp">Graph Explorer V 0.8.0</a>
 			</div>
diff --git a/scripts/editGraph.js b/scripts/editGraph.js
new file mode 100644
index 0000000..fba11f4
--- /dev/null
+++ b/scripts/editGraph.js
@@ -0,0 +1,217 @@
+	function editGraph() {
+		var x = document.getElementById("editGraph")
+		if(x.style.display == "none"){
+			x.style.display = "block";
+		}
+		else{
+			x.style.display ="none" ;
+		}
+		document.getElementById("addVertexForm").style.display='none';
+		document.getElementById("editVertexForm").style.display='none';
+		document.getElementById("addEditEdgeForm").style.display='none';
+
+	}
+	
+	function addVertexForm() {
+		document.getElementById("addVertexForm").style.display='block';
+		document.getElementById("editVertexForm").style.display='none';
+		document.getElementById("addEditEdgeForm").style.display='none';
+	}
+		
+	function editVertexForm() {
+		document.getElementById("addVertexForm").style.display='none';
+		document.getElementById("editVertexForm").style.display='block';
+		document.getElementById("addEditEdgeForm").style.display='none';
+	}
+
+	
+	function addEditEdgeForm() {
+		document.getElementById("addVertexForm").style.display='none';
+		document.getElementById("editVertexForm").style.display='none';
+		document.getElementById("addEditEdgeForm").style.display='block';
+
+	}
+		
+	function addVertex()  {
+		
+		let vertexLabel = $('#vertexLabel').val();
+		let vertexPropertyName = $('#vertexPropertyName').val();
+		//vertexPropertyName = vertexPropertyName.replace(/\s/g,'');
+		let vertexPropertyValue = $('#vertexPropertyValue').val();
+		//vertexPropertyValue = vertexPropertyValue.replace(/\s/g,'');
+		propertyName = vertexPropertyName.split(",");
+		propertyValue = vertexPropertyValue.split(",");
+		var valueLen = propertyValue.length;
+		var nameLen = propertyName.length;
+		if(nameLen != valueLen){
+			alert("Please enter same number of property name and property value")
+		}
+		else{
+			document.getElementById('vertexLabel').value='';
+			document.getElementById('vertexPropertyName').value='';
+			document.getElementById('vertexPropertyValue').value='';
+			var gremlin_query = "g.addV('"+vertexLabel+"')"
+			for(count =0; count<nameLen; count++){
+				gremlin_query=gremlin_query+".property('"+propertyName[count]+"' , '" + propertyValue[count]+ "')"
+			}
+		var message=""
+		send_to_server(gremlin_query, 'editGraph', null, message);
+		console.log(gremlin_query)
+		console.log("Add Vertex")
+		window.alert("Vertex Added Succesfully")
+		editGraph();
+		}
+	}
+	
+	function editVertex()  {
+		
+		let vertexId = $('#vertexId').val();
+		let vertexPropertyName_1 = $('#vertexPropertyName_1').val();
+	//	vertexPropertyName_1 = vertexPropertyName_1.replace(/\s/g,'');
+		let vertexPropertyValue_1 = $('#vertexPropertyValue_1').val();
+	//	vertexPropertyValue_1 = vertexPropertyValue_1.replace(/\s/g,'');
+		propertyName = vertexPropertyName_1.split(",");
+		propertyValue = vertexPropertyValue_1.split(",");
+		var valueLen = propertyValue.length;
+		var nameLen = propertyName.length;
+		if(nameLen != valueLen){
+			alert("Please enter same number of property name and property value")
+		}
+		else{
+			document.getElementById('vertexId').value='';
+			document.getElementById('vertexPropertyName_1').value='';
+			document.getElementById('vertexPropertyValue_1').value='';
+			var gremlin_query = "g.V('"+vertexId+"')"
+			for(count =0; count<nameLen; count++){
+				gremlin_query=gremlin_query+".property('"+propertyName[count]+"' , '" + propertyValue[count]+ "')"
+		}
+		console.log(gremlin_query)
+		var message=""
+		send_to_server(gremlin_query, 'editGraph', null, message);
+		console.log("Edit Vertex")
+		window.alert("Vertex Edited Succesfully")
+		editGraph();
+		}
+	}
+	
+	function addEditEdge()  {
+		
+		let edgeLabel = $('#edgeLabel').val();
+		let sourceVertexId = $('#sourceVertexId').val();
+		let targetVertexId = $('#targetVertexId').val();		
+		let edgePropertyName = $('#edgePropertyName').val();
+		//edgePropertyName = edgePropertyName.replace(/\s/g,'');
+		let edgePropertyValue = $('#edgePropertyValue').val();
+		//edgePropertyValue = edgePropertyValue.replace(/\s/g,'');
+		propertyName = edgePropertyName.split(",");
+		propertyValue = edgePropertyValue.split(",");
+		var valueLen = propertyValue.length;
+		var nameLen = propertyName.length;
+		if(nameLen != valueLen){
+			alert("Please enter same number of property name and property value")
+		}
+		else{
+			document.getElementById('edgeLabel').value='';
+			document.getElementById('edgePropertyName').value='';
+			document.getElementById('edgePropertyValue').value='';
+			var gremlin_query = "g.V('"+sourceVertexId+"').addE('"+edgeLabel+"').to(V('" +targetVertexId+"'))"
+			for(count =0; count<nameLen; count++){
+				gremlin_query=gremlin_query+".property('"+propertyName[count]+"' , '" + propertyValue[count]+ "')"
+			}
+		gremlin_query=gremlin_query+".iterate()";
+		var message="";
+		send_to_server(gremlin_query, 'editGraph', null, message);console.log(gremlin_query)
+		console.log("Add Edge")
+		window.alert("Edge Added Succesfully")
+		editGraph();
+		}
+	}
+	
+	
+	
+	function send_to_server(gremlin_query,query_type,active_node,message, callback){
+
+	let server_address = $('#server_address').val();
+		let server_port = $('#server_port').val();
+		let COMMUNICATION_PROTOCOL = $('#server_protocol').val();
+			if (COMMUNICATION_PROTOCOL == 'REST'){
+				let server_url = "http://"+server_address+":"+server_port;
+				run_ajax_request(gremlin_query,server_url,query_type,active_node,message,callback);
+			}
+			else if (COMMUNICATION_PROTOCOL == 'websocket'){
+				let server_url = "ws://"+server_address+":"+server_port+"/gremlin"
+				run_websocket_request(gremlin_query,server_url,query_type,active_node,message,callback);
+			}
+			else {
+				console.log('Bad communication protocol. Check configuration file. Accept "REST" or "websocket" .')
+			}
+				
+	}
+	
+	function run_ajax_request(gremlin_query,server_url,query_type,active_node,message, callback){
+		// while busy, show we're doing something in the messageArea.
+		$('#messageArea').html('<h3>(loading)</h3>');
+
+		// Get the data from the server
+		$.ajax({
+			type: "POST",
+			accept: "application/json",
+			//contentType:"application/json; charset=utf-8",
+			url: server_url,
+			//headers: GRAPH_DATABASE_AUTH,
+			timeout: REST_TIMEOUT,
+			data: JSON.stringify({"gremlin" : gremlin_query}),
+			success: function(data, textStatus, jqXHR){
+							var Data = data.result.data;
+			},
+			error: function(result, status, error){
+				console.log("Connection failed. "+status);
+				$('#outputArea').html("<p> Can't access database using REST at "+server_url+"</p>"+
+					"<p> Message: "+status+ ", "+error+" </p>"+
+					"<p> Check the server configuration "+
+					"or try increasing the REST_TIMEOUT value in the config file.</p>");
+				$('#messageArea').html('');
+			}
+		});
+	}
+	
+	
+	function run_websocket_request(gremlin_query,server_url,query_type,active_node,message,callback){
+		$('#messageArea').html('<h3>(loading)</h3>');
+
+		var msg = { "requestId": uuidv4(),
+			"op":"eval",
+			"processor":"",
+			"args":{"gremlin": gremlin_query,
+				"bindings":{},
+				"language":"gremlin-groovy"}}
+
+		var data = JSON.stringify(msg);
+
+		var ws = new WebSocket(server_url);
+		ws.onopen = function (event){
+			ws.send(data,{ mask: true});	
+		};
+		ws.onerror = function (err){
+			console.log('Connection error using websocket');
+			console.log(err);
+			$('#outputArea').html("<p> Connection error using websocket</p>"
+				+"<p> Cannot connect to "+server_url+ " </p>");
+			$('#messageArea').html('');
+
+		};
+		ws.onmessage = function (event){
+			var response = JSON.parse(event.data);
+			var data = response.result.data;
+			if (data == null){
+				$('#outputArea').html(response.status.message);
+				$('#messageArea').html('Server error. No data.');
+				return 1;}
+			//console.log(data)
+			if(callback){
+				callback(data);
+			} else {
+				handle_server_answer(data,query_type,active_node,message);
+			}
+		};		
+	}
\ No newline at end of file