diff --git a/main/static/js/basic.js b/main/static/js/basic.js
index 61b860b..602c5a7 100644
--- a/main/static/js/basic.js
+++ b/main/static/js/basic.js
@@ -1,14 +1,20 @@
 /*
 drawMode = 10,
-addNOdes = 11,
+addNodes = 11,
 addEdges = 12,
 postModel = 13,
 analysisMode = 20,
+hideDrawMode = 15,
+show analysisModeState = 1,
+hide analysisModeState = 2,
+deleteNode_start = 3 
+deleteNode_stop = 4
 */
+var deleteNode = 3;
 var currentState = null;
 var edgeSource = null;
 var edgeTarget = null;
-
+var analysisModeState = null;
 // Initialize cytoscape.js
 $(loadCy=function() {
     options ={
@@ -28,23 +34,78 @@ function getMousePos(canvas, event) {
     y: mouseY
   };
 }
+var buttons1 = 
+        "<button type='button' id='addNodesMode' onclick='initAddNodesMode();'> Start Adding Nodes </button> \
+        <button type='button' id='addEdgesMode' onclick='initAddEdgesMode();'> Start Adding Edges </button> \
+        <button type='button' id='postModel'> Post Model </button> \
+        <button type='button' id='deleteElement' onclick='initdeleteElementMode();'>Delete Element</button>";
+var buttons2 =
+		"<button type='button' id='addNodesMode' onclick='initAddNodesMode();'> button 1 </button> \
+        <button type='button' id='addEdgesMode' onclick='initAddEdgesMode();'>  button 2 </button> \
+        <button type='button' id='postModel' onclick='postModel();'> button 3 </button>";
 
 $("#drawMode").click(function(event) {
+	if(currentState== null && analysisModeState!=1)
+	{
     currentState = 10;
-    var buttons = 
-        "<button type='button' id='addNodesMode' onclick='initAddNodesMode();'> Start Adding Nodes </button> \
-        <button type='button' id='addEdgesMode' onclick='initAddEdgesMode();'> Start Adding Edges </button> \
-        <button type='button' id='postModel'> Post Model </button>";
-    $('#modeButtons').html (buttons);
+    $('#modeButtons').html(buttons1);
+}
+else if(currentState== null && analysisModeState==1)
+	{
+    currentState = 10;
+    analysisModeState = 2;
+    $('#analysisModeButtons').hide();
+    $('#modeButtons').html(buttons1);
+}
+else if(currentState == 10)
+{
+	currentState = 15;
+	$('#modeButtons').hide();
+}
+else if(currentState == 15 && analysisModeState!=1)
+{
+	currentState = 10;
+	$('#modeButtons').show();
+}
+else if(currentState == 15 && analysisModeState == 1)
+{
+	analysisModeState = 2;
+	currentState = 10;
+	$('#analysisModeButtons').hide();
+	$('#modeButtons').show();
+}	
 });
-
 $("#analysisMode").click(function(event) {
-    currentState = 20;
-    var buttons =
-        "<button type='button' id='addNodesMode' onclick='initAddNodesMode();'> button 1 </button> \
-        <button type='button' id='addEdgesMode' onclick='initAddEdgesMode();'>  button 2 </button> \
-        <button type='button' id='postModel' onclick='postModel();'> button 3 </button>";
-    $('#modeButtons').html(buttons);
+	if(analysisModeState == null && currentState!=10)
+	{
+    analysisModeState = 1;
+    $('#analysisModeButtons').html(buttons2);
+}
+else if(analysisModeState == null && currentState == 10)
+{
+	analysisModeState = 1;
+	$('#modeButtons').hide();
+	currentState = 15;
+    $('#analysisModeButtons').html(buttons2);
+}	
+else if(analysisModeState == 1)
+{
+	analysisModeState = 2;
+	$('#analysisModeButtons').hide();
+}
+else if(analysisModeState == 2 && currentState == 10)
+{
+	analysisModeState = 1;
+	currentState = 15;
+	$('#modeButtons').hide();
+	$('#analysisModeButtons').show();
+}
+else if(analysisModeState == 2 && currentState!=10)
+{
+	analysisModeState = 1;
+	$('#modeButtons').hide();
+	$('#analysisModeButtons').show();
+}
 });
 
 $('#postModel').click(function(event) {
@@ -130,7 +191,7 @@ $("#cy").click(function(event) {
                 cy.style().selector('node').resetToDefault().update();
                 cy.style().selector('edge').css('target-arrow-shape','triangle').update();
             }
-        }
+        }	
         return false;
     }
 });
diff --git a/main/templates/index.html b/main/templates/index.html
index 8f61f0b..71644e8 100644
--- a/main/templates/index.html
+++ b/main/templates/index.html
@@ -9,24 +9,25 @@
         <link rel="stylesheet" type="text/css" href="../static/css/jquery-ui.css">        
     </head>
     <body>
-        <button type="button" id="drawMode">
-            Draw Mode
+        <button id="drawMode">
+        Draw Mode
         </button>
-        <button type="button" id="analysisMode">
-            Analysis Mode
+        <button id = "analysisMode">
+        Analysis Mode
         </button>
         <div id="modeButtons"></div>
+        <div id="analysisModeButtons"></div>
         <div id="cy" style="height: 400px; width: 1100px;">
             <div id="customDialog" title="Alert">
             </div>
         </div> 
-<!--TODO: add style for whole doc -->
+<!--TO DO: add style for whole doc -->
         <script src="../static/js/lib/jquery.js"></script>
         <script src="../static/js/lib/jquery-ui.js"></script>
         <script src="../static/js/lib/cytoscape.min.js"></script>
         
         <script src="../static/js/basic.js"></script>
-        
+        <script src="../static/js/deleteElement.js"></script>
         <script src="../static/js/addNodes.js"></script>
         <script src="../static/js/addEdges.js"></script>
         <script src="../static/js/customAlert.js"></script>