diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html
index 25a1f9b..626b1c2 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.html
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.html
@@ -14,7 +14,8 @@
       <input #fileInput type="file" accept=".json" style="display: none" (change)="onFileSelected($event)"/>
     </div>
   </div>
-  <ejs-contextmenu #contextmenu id='contextmenu' [items]= 'menuItems'></ejs-contextmenu>
+  <ejs-contextmenu #contextmenu id='contextmenu' [items]= 'listdata' showItemOnClick="true"
+  (beforeClose)="onCloseContextMenu($event)" (select)="itemSelect($event)"></ejs-contextmenu>
 
   <div>
     <ejs-diagram class="diagram-container" #diagram 
@@ -148,11 +149,13 @@
                   <div class="button-item">
                     <button ejs-button cssClass="e-primary" style="width: 75%;">{{$index+1}}.{{option.label}}</button>
                     @if(checkBranchAdd(data.data.branchDetails, option.value)){
-                      <div class="dropDown-container{{$index}}">
+                      <!-- <div class="dropDown-container{{$index}}">
                         <button #dropdownbutton id="dropdownbutton-{{$index}}" ejs-dropdownbutton target="#listview"
                         (open)="onOpenDropDownButton($event, option, $index)" iconCss='e-icons e-plus' cssClass='e-caret-hide'
                         (beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button>
-                      </div>                      
+                      </div>-->
+                      <button #addbtn ejs-button id="addbtn{{$index}}" iconCss='e-icons e-plus' cssClass='e-caret-hide' 
+                      (click)="onClickAddBtn(option, $index)"></button>
                     }
                   </div>
                 }
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts
index 318356c..5ae3e12 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.ts
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.ts
@@ -9,7 +9,7 @@ import { BeforeOpenCloseMenuEventArgs, DropDownButtonComponent, DropDownButtonMo
 import { CommonModule } from '@angular/common';
 import { ListViewComponent, ListViewModule, SelectEventArgs } from '@syncfusion/ej2-angular-lists';
 import { LIST_DATA } from '../../data/list-data';
-import { ClickEventArgs, ContextMenuComponent, ContextMenuModule, MenuComponent, MenuItemModel, MenuModule, ToolbarModule } from '@syncfusion/ej2-angular-navigations';
+import { ClickEventArgs, ContextMenuComponent, ContextMenuModule, MenuComponent, MenuEventArgs, MenuItemModel, MenuModule, ToolbarModule } from '@syncfusion/ej2-angular-navigations';
 import { DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
 import { NumericTextBoxModule, TextAreaModule, TextBoxModule, UploaderModule } from '@syncfusion/ej2-angular-inputs';
 import { DatePickerModule, DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';
@@ -243,14 +243,9 @@ export class WorkflowDiagramComponent implements AfterViewInit {
   }
 
   // Method to add a new node and connect it
-  // public onDiagramRefresh(): void {
-  //   this.diagram.setProperties({ nodes: [], connectors: [] }, true);
-  //   this.diagram.refresh();
-  // }
-
   public onDiagramRefresh(): void {
     this.diagram.setProperties({ nodes: [], connectors: [] }, true);
-      this.diagram.refresh();
+    this.diagram.refresh();
   }
 
   // on node delete 
@@ -268,6 +263,15 @@ export class WorkflowDiagramComponent implements AfterViewInit {
     });
   }
 
+  public onClickAddBtn(option : any, index : string){
+    console.log(option + "  \n" + index)
+    var addbtn=document.getElementById('addbtn');
+    var addPos = addbtn.getBoundingClientRect();
+    this.contextmenu.open(addPos.top + window.scrollY, addPos.left+window.scrollX);
+    this.diagram.selectedItems.userHandles[1].visible = false;
+    this.diagram.selectedItems.userHandles[2].visible = false;
+  }
+
   public onUserHandleMouseDown(event: UserHandleEventsArgs) {
     if(event.element.name === 'addBlock') {
       if(this.diagram.selectedItems.userHandles){
@@ -298,55 +302,24 @@ export class WorkflowDiagramComponent implements AfterViewInit {
     }
   }
 
-  public onOpenDropDownButton(args: OpenCloseMenuEventArgs, option: any | null, index: number | null) {
-    console.log("Drop :" + args.element);
-    if (index != null) {
-      this.dropdownbutton.toggle();
-      if (this.diagram.selectedItems.userHandles) {
-        this.diagram.selectedItems.userHandles[1].visible = false;
-        this.diagram.selectedItems.userHandles[2].visible = false;
-      }
-    }
-    else {
-      let dropDownContainer = document.querySelector('.dropDown-container') as HTMLElement;
-      args.element.parentElement!.style.top = dropDownContainer.getBoundingClientRect().top + dropDownContainer.offsetHeight + 'px';
-
-      let ulElement = document.querySelector('ul') as HTMLElement;
-      args.element.parentElement!.style.left = dropDownContainer.getBoundingClientRect().left - (ulElement.getBoundingClientRect().width / 2) + (dropDownContainer.getBoundingClientRect().width / 2) + 'px';
+  public onCloseContextMenu(args: BeforeOpenCloseMenuEventArgs) {
+    if(!this.isParentListItem && !((args.event.target as HTMLElement).closest(".e-menu-item")==null)) {
+        this.sidebarComponent?.sidebar?.show();
     }
   }
 
-  public onBeforeCloseDropDownButton(args: BeforeOpenCloseMenuEventArgs) {
-    args.cancel = this.isParentListItem;
-    if (!(this.isParentListItem || ((args.event.target as HTMLElement).closest(".bc-block-option.e-listview")==null))) {
-      this.sidebarComponent?.sidebar?.show();
-    }
-  }
-
-  public onSelectListView(args: SelectEventArgs) {
-    this.isParentListItem = args.item.classList.contains("e-has-child");
-    const selectedItem = args.item;
-    const selectedItemId = selectedItem.getAttribute('data-uid');
-    const selectedItemText = args.item ? args.item.textContent : null;
-    if (selectedItemId && /^0[1-3]$/.test(selectedItemId)) { // Check if the ID is '01', '02', or '03'
+  public itemSelect(args: MenuEventArgs): void {
+    this.isParentListItem = args.item.items.length != 0;
+    if (args.item.id && /^0[1-3]$/.test(args.item.id)) { // Check if the ID is '01', '02', or '03'
+      const selectedItemText = args.item ? args.item.text : null;
       this.sidebarHeader = selectedItemText ? selectedItemText.trim() + ' Block' : '';
     }
-    if(!this.isParentListItem && typeof args?.data === 'object' && 'editerTypeId' in args.data) {
-      this.nodeBlockType = (args.data as { blockid: number })['blockid'];
-      this.nodeEditType = (args.data as { editerTypeId: number })['editerTypeId'];
+    if(args.item.items.length == 0){
+      this.nodeBlockType = (args.item as { blockid: number })['blockid'];
+      this.nodeEditType = (args.item as { editerTypeId: number })['editerTypeId'];
     }
   }
-
-  public onBeforeOpenDropDownButton() {
-    this.isParentListItem = false; // The value is reset here, to handle document click case of dropdown
-    // Reset ListView to its initial state before opening
-    if (this.listView) {
-      while ((this.listView as any).curDSLevel.length > 0) {
-        this.listView.back();
-      }
-    }
-  }
-
+  
   public onClicked(args: ClickEventArgs) {
     if (args.item.id === 'save') {
       this.download(this.diagram.saveDiagram());
diff --git a/src/app/data/list-data.ts b/src/app/data/list-data.ts
index 9bbf9c0..ab76a92 100644
--- a/src/app/data/list-data.ts
+++ b/src/app/data/list-data.ts
@@ -3,7 +3,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
       'text': 'Action',
       'id': '01',
       'category': 'Block Type',
-      'child': [
+      'items': [
         {
             'text': 'Customer Block',
             'id': '1',
@@ -22,7 +22,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
             'text': 'Button Input',
             'id': '3',
             'category': 'Action',
-            'child': [{
+            'items': [{
                 'text': 'Buttons',
                 'id': '3001',
                 'blockid': 4,
@@ -41,7 +41,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
             'text': 'Input',
             'id': '4',
             'category': 'Action',
-            'child': [{
+            'items': [{
                 'text': 'Date',
                 'id': '4001',
                 'blockid': 5,
@@ -95,7 +95,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
             'text': 'DropDowns',
             'id': '5',
             'category': 'Action',
-            'child': [{
+            'items': [{
                 'text': 'DropDown',
                 'id': '5001',
                 'blockid': 4,
@@ -143,7 +143,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
       'text': 'Branching',
       'id': '02',
       'category': 'Block Type',
-      'child': [{
+      'items': [{
           'text': 'QB',
           'id': '10',
           'category': 'Branching',
@@ -152,7 +152,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
           'text': 'Selection',
           'id': '11',
           'category': 'Branching',
-          'child': [{
+          'items': [{
                 'text': 'ButtonsBranch',
                 'id': '11001',
                 'blockid': 10,
@@ -187,7 +187,7 @@ export const LIST_DATA: { [key: string]: any }[] = [
       'text': 'Exit',
       'id': '03',
       'category': 'Block Type',
-      'child': [{
+      'items': [{
           'text': 'Call Workflow',
           'id': '3001',
           'category': 'Exit',