diff --git a/ifthenelse.libraries.yml b/ifthenelse.libraries.yml
index 6894bdb..7da3a37 100644
--- a/ifthenelse.libraries.yml
+++ b/ifthenelse.libraries.yml
@@ -17,7 +17,7 @@ external:
     https://cdn.jsdelivr.net/npm/rete-history-plugin@0.1.0/build/history-plugin.min.js: {type: external, minified: true}
     https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js: {type: external, minified: true}
     https://unpkg.com/vue-multiselect@2.1.0: {type: external}
-    js/internal.js: {}
+    js/ifthenelse.js: {}
   dependencies:
     - core/jquery
     
diff --git a/ifthenelse.routing.yml b/ifthenelse.routing.yml
index 6793da4..1735de3 100644
--- a/ifthenelse.routing.yml
+++ b/ifthenelse.routing.yml
@@ -29,7 +29,7 @@ entity.ifthenelserule.delete_form:
     _permission: 'administer site configuration'
 
 example.content:
-  path: 'ifthenelse/fetch-fields/{form_id}' 
+  path: 'ifthenelse/fetch-fields' 
   defaults: 
     _controller: '\Drupal\ifthenelse\Controller\ReteIntegration::fetchFields' 
     _title: 'Entity bundle fields'
diff --git a/js/ifthenelse.js b/js/ifthenelse.js
new file mode 100644
index 0000000..7da89f5
--- /dev/null
+++ b/js/ifthenelse.js
@@ -0,0 +1,312 @@
+// This js handles the front end for ifthenelse ui
+	var formIdSocket = new Rete.Socket('Form Id');
+	var fieldsSocket = new Rete.Socket('Fields');
+	var eventSocket = new Rete.Socket('Event');
+
+	formIdSocket.combineWith(fieldsSocket);
+	eventSocket.combineWith(formIdSocket);
+
+	var VueEventTriggerControl = {
+	  props: ['getData', 'putData'],
+	  template: '',
+	}
+
+	var VueFormIdControl = {
+		components: {
+			Multiselect: window.VueMultiselect.default
+		},
+	  props: ['readonly', 'emitter', 'ikey', 'getData', 'putData'],
+	  template: '<div class="fields-container"><div class="entity-select"><label class="typo__label">Select an Entity</label><multiselect v-model="selected_entity" :options="entities" placeholder="Select an Entity" @input="entitySelected" label="label" track-by="value"></multiselect></div><div class="bundle-select"><label class="typo__label">Select a bundle</label><multiselect v-model="selected_bundle" :options="bundles" placeholder="Select a bundle" @input="bundleSelected" label="label" track-by="value"></multiselect></div></div>',
+	  data() {
+	    return {
+				value: 0,
+				entities: [],
+				bundles: [],
+				selected_entity: [],
+				selected_bundle: [],
+	    }
+	  },
+	  methods: {
+	    change(e){
+				this.value = e.target.value;
+				this.update();
+	    },
+	    update() {
+	      if (this.ikey)
+	        this.putData(this.ikey, this.value)
+	      this.emitter.trigger('process');
+			},
+			entitySelected(value){
+				var entity_id = value.value;
+				var bundle_list = JSON.parse(drupalSettings.ifthenelserule.entity_info)[entity_id]['bundles'];
+				this.bundles = [];
+				Object.keys(bundle_list).forEach(itemKey => {
+					this.bundles.push({label: bundle_list[itemKey].label, value: bundle_list[itemKey].bundle_id});
+				});
+			},
+			bundleSelected(value){
+				this.showLoadingSpinner = false;
+				
+				var action_node = editor.nodes.find(n => (n.data.type == 'action' && typeof n.data.form_fields !== 'undefined'));
+				if(typeof action_node !== undefined){
+					action_node = action_node.controls.get('fields1');
+					action_node.setOptions([]);
+					action_node.setValue([]);
+					this.showLoadingSpinner = true;
+					
+					if(typeof this.selected_entity !== 'undefined' && typeof this.selected_bundle !== 'undefined'){
+						var postData = [];
+						postData = {type:'entity_bundle', entity: this.selected_entity.value, bundle: this.selected_bundle.value};
+					}
+					Vue.http.post(drupalSettings.path.baseUrl+'ifthenelse/fetch-fields',postData).then((response) => {
+						// get body data
+						// action_node.setOptions(JSON.parse(response.bodyText));
+						// this.showLoadingSpinner = false
+					}, (response) => {
+						// error callback
+					});
+				}
+				
+			}
+	  },
+	  mounted() {
+	    this.value = this.getData(this.ikey);
+	  },
+		created() {
+			if(drupalSettings.ifthenelserule.entity_info){
+				var entities_list = JSON.parse(drupalSettings.ifthenelserule.entity_info);
+				Object.keys(entities_list).forEach(itemKey => {
+					this.entities.push({label: entities_list[itemKey].label, value: entities_list[itemKey].entity_id});
+				});
+			}
+		}
+	}
+
+	var VueFieldsControl = {
+		props: ['emitter', 'ikey', 'getData', 'putData'],
+		components: {
+			Multiselect: window.VueMultiselect.default
+		},
+	  template: '<div class="fields-container"><div class="field-selection"><input type="radio" name="num-bool" value="all" v-on:change="radioChanged($event)" :checked="single_field==false" /><label>Make All fields Required</lable></div><div class="field-selection"><input type="radio" name="num-bool" value="single" v-on:change="radioChanged($event)" :checked="single_field==true" /><label>Select fields to Make Required</lable></div><div class="add-more-container" v-if="single_field"><multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" @input="updateSelected" @tag="addTag"></multiselect></div></div>',
+	  data() {
+	    return {
+	      single_field: false,
+	      value: [],
+				options: []
+	    }
+	  },
+	  methods: {
+	    change(e){
+	      this.value = e.target.value;
+	      this.update();
+	    },
+	    radioChanged(e){
+	    	var val = e.target.value;
+	    	if(val=='all'){
+	    		this.single_field = false;
+	    	}else{
+	    		this.single_field = true;
+	    	}
+	    	this.putData('single_field', this.single_field)
+	    	this.emitter.trigger('process');
+			},
+			addTag (newTag) {
+				const tag = {
+					name: newTag,
+					code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
+				}
+				this.options.push(tag)
+				this.value.push(tag)				
+			},
+			updateSelected(value){
+				var selectedOptions = [];
+				value.forEach((resource) => {
+					selectedOptions.push({name: resource.name, code: resource.code});
+				})
+				this.putData('form_fields',selectedOptions);
+				this.emitter.trigger('process');
+			}
+	  },
+	  mounted() {
+			this.single_field = this.getData('single_field');
+			this.value = this.getData('form_fields');	
+		},
+		created() {
+			if(drupalSettings.ifthenelserule.form_fields){
+				this.options = JSON.parse(drupalSettings.ifthenelserule.form_fields);
+			}
+		}
+	}
+
+	class EventTriggerControl extends Rete.Control {
+
+	  constructor(emitter, key, readonly) {
+	    super(key);
+	    this.component = VueEventTriggerControl;
+	  }
+
+	}
+
+	class FormIdControl extends Rete.Control {
+
+	  constructor(emitter, key, readonly) {
+	    super(key);
+	    this.component = VueFormIdControl;
+	    this.props = { emitter, ikey: key, readonly };
+	  }
+
+	  setValue(val) {
+	    this.vueContext.value = val;
+	  }
+	}
+
+	class FieldsControl extends Rete.Control {
+	  constructor(emitter, key) {
+	    super(key);
+	    this.component = VueFieldsControl;
+	    this.props = { emitter, ikey: key };
+	  }
+
+	  setOptions(options) {
+			this.vueContext.options = options;
+		}
+		
+		setValue(value){
+			this.vueContext.value = value;
+		}
+	}
+
+	class EventComponent extends Rete.Component {
+
+	    constructor(){
+	        super("Form Alter");
+	    }
+
+	    builder(node) {
+	        var out1 = new Rete.Output('event', "", formIdSocket);
+
+	        return node.addControl(new EventTriggerControl(this.editor, 'event')).addOutput(out1);
+	    }
+
+	    worker(node, inputs, outputs) {
+	        outputs['event'] = node.data.event;
+	    }
+	}
+
+	class FormIdComponent extends Rete.Component {
+
+	    constructor(){
+	        super("Form Id");
+	    }
+
+	    builder(node) {
+	        var out1 = new Rete.Output('formId', "", formIdSocket);
+	        var input = new Rete.Input('formId',"",formIdSocket);
+
+	        return node.addControl(new FormIdControl(this.editor, 'formId')).addOutput(out1).addInput(input);
+	    }
+
+	    worker(node, inputs, outputs) {
+	        outputs['formId'] = node.data.formId;
+	    }
+	}
+
+	class FieldsComponent extends Rete.Component {
+
+	    constructor(){
+	        super("Form Fields");
+	    }
+
+	    builder(node) {
+	        //var out1 = new Rete.Output('formId', "", formIdSocket);
+	        var input1 = new Rete.Input('fields', "", fieldsSocket);
+
+	        node.addControl(new FieldsControl(this.editor, 'fields1'));
+
+	        return node
+            .addInput(input1);
+            //.addOutput(out1);
+	    }
+
+	    worker(node, inputs, outputs) {
+	        outputs['single_field'] = node.data.single_field;
+					outputs['form_fields'] = node.data.value;
+	    }
+	}
+
+	var container = document.querySelector('#rete');
+	var components = [new FormIdComponent(),new FieldsComponent(), new EventComponent()];
+	
+	var editor = new Rete.NodeEditor('demo@0.1.0', container);
+	editor.use(ConnectionPlugin.default);
+	editor.use(VueRenderPlugin);
+	editor.use(ContextMenuPlugin);
+	editor.use(AreaPlugin);
+	editor.use(CommentPlugin);
+	editor.use(HistoryPlugin);
+
+	var engine = new Rete.Engine('demo@0.1.0');
+	
+	components.map(c => {
+			editor.register(c);
+			engine.register(c);
+	});
+
+(function ($, Drupal, drupalSettings) {
+	if(!drupalSettings.ifthenelserule.data){
+		(async () => {
+			var event = await components[2].createNode({type: "event"});
+			var n1 = await components[0].createNode({formId: "",type: "condition"});    
+			var fields = await components[1].createNode({single_field:"", type: "action", form_fields: []});
+	
+			n1.position = [-300, 100];
+			fields.position = [200, 100];
+			event.position = [-700,100];
+	 
+	
+			editor.addNode(event);
+			editor.addNode(n1);
+			editor.addNode(fields);
+	
+			editor.connect(event.outputs.get('event'),n1.inputs.get('formId'));
+			editor.connect(n1.outputs.get('formId'), fields.inputs.get('fields'));
+	
+			editor.on('process nodecreated noderemoved connectioncreated connectionremoved', async () => {
+					await engine.abort();
+					await engine.process(editor.toJSON());
+					jQuery('#ifthenelse-data').val(JSON.stringify(editor.toJSON()));
+					jQuery('#ifthenelse-event').val('form_alter');
+			});
+	
+			setTimeout(function(){ editor.view.resize(); }, 500);
+			editor.view.resize();
+			AreaPlugin.zoomAt(editor);
+			editor.trigger('process');
+	
+		})();
+	}else{
+		editor.fromJSON(JSON.parse(drupalSettings.ifthenelserule.data))
+		.then(() => {
+			editor.on("error", err => {
+				alertify.error(err.message);
+			});
+	
+			editor.on(
+				"process connectioncreated connectionremoved nodecreated",
+				async function() {
+					if (engine.silent) return;
+					onMessageTask = [];
+					await engine.abort();
+					await engine.process(editor.toJSON());
+					jQuery('#ifthenelse-data').val(JSON.stringify(editor.toJSON()));
+					jQuery('#ifthenelse-event').val('form_alter');
+				}
+			);
+	
+			editor.trigger("process");
+			editor.view.resize();
+			AreaPlugin.zoomAt(editor);
+		});
+	}
+	
+})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
diff --git a/src/Controller/ReteIntegration.php b/src/Controller/ReteIntegration.php
index 44d68c6..6dab0a9 100644
--- a/src/Controller/ReteIntegration.php
+++ b/src/Controller/ReteIntegration.php
@@ -7,31 +7,10 @@ use Symfony\Component\Serializer\Encoder\JsonEncode;
 
 class ReteIntegration {
 
-  public function demo() {
-  	$build['#markup'] = '<div id="rete"></div>
-      <div class="export"><a href="#" id="export-json">Export</a></div>';
-      
-    $build['#attached']['library'][] = 'ifthenelse/external';
-    
-    return $build;
-  }
-
-  public function json() {
-
-  	header('Content-Type: text/plain');
-  	$json = utf8_encode($_POST['id']); // Don't forget the encoding
-  	$insert = db_insert('json_insert')
-      ->fields(array(
-        'json_data' => $json,   
-      ))->execute();
-
-    echo json_encode(array('status' => 'true'));
-    
-    exit();
-  }
-
-  public function fetchFields($form_id){
+  public function fetchFields(){
     $listFields = array();
+    $_POST = json_decode(file_get_contents('php://input'), true);
+    echo "<pre>"; print_r($_POST);exit;
     if(isset($form_id) && !empty($form_id)){
       $form_id_explode = explode('_', $form_id);
       array_pop($form_id_explode);
diff --git a/src/IfthenelseRuleForm.php b/src/IfthenelseRuleForm.php
index 53ca25c..562d382 100644
--- a/src/IfthenelseRuleForm.php
+++ b/src/IfthenelseRuleForm.php
@@ -2,15 +2,13 @@
 
 namespace Drupal\ifthenelse; 
  
-use Drupal\Component\Utility\Unicode; 
 use Drupal\Core\Entity\EntityForm; 
 use Drupal\Core\Form\FormStateInterface;
-use Drupal\Core\Form\FormState; 
-use Drupal\Core\Language\LanguageInterface;
 use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\Core\Messenger\MessengerInterface;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 use function GuzzleHttp\json_encode;
+use Drupal\Core\Entity\ContentEntityType;
  
 class IfthenelseRuleForm extends EntityForm { 
 
@@ -40,6 +38,38 @@ class IfthenelseRuleForm extends EntityForm {
     $form = parent::form($form, $form_state); 
 
     $entity = $this->entity;
+    $content_entity_types = [];
+    $entity_type_definations = \Drupal::entityTypeManager()->getDefinitions();
+    $bundle_info = \Drupal::service("entity_type.bundle.info")->getAllBundleInfo();
+    /* @var $definition EntityTypeInterface */
+    foreach ($entity_type_definations as $definition) {
+      if ($definition instanceof ContentEntityType) {
+        $entity_id = $definition->id();
+        if($entity_id == 'file' || $entity_id == 'shortcut' || $entity_id == 'menu_link_content'){
+          continue;   //skipping some of the content entities.
+        }
+        
+        $content_entity_types[$entity_id]['entity_id'] = $entity_id;
+        $content_entity_types[$entity_id]['label'] = $definition->getLabel()->__toString();
+        $entity_bundles = $bundle_info[$entity_id];   //fetching all bundles of entity
+
+        //getting label of each bundle of an entity
+        foreach($entity_bundles as $bundle_id => $bundle){
+          if(is_object($bundle['label'])){
+            $content_entity_types[$entity_id]['bundles'][$bundle_id]['label'] = $bundle['label']->__toString();
+          }else if(!is_object($bundle['label']) && !is_array($bundle['label'])){
+            $content_entity_types[$entity_id]['bundles'][$bundle_id]['label'] = $bundle['label'];
+            $content_entity_types[$entity_id]['bundles'][$bundle_id]['bundle_id'] = $bundle_id;
+          }
+        }
+      }
+    }
+
+    if(isset($content_entity_types)){
+      $form['#attached']['drupalSettings']['ifthenelserule']['entity_info'] = json_encode($content_entity_types);
+    }else{
+      $form['#attached']['drupalSettings']['ifthenelserule']['entity_info'] = FALSE;
+    }
 
     //@todo: Need to fix for getting entity type and bundle based on form id
     if(isset($entity->event) && isset($entity->data) && $entity->event == 'form_alter'){