diff --git a/modules/frontend/src/main/frontend/package-lock.json b/modules/frontend/src/main/frontend/package-lock.json
index aef5f96..0b89d7e 100644
--- a/modules/frontend/src/main/frontend/package-lock.json
+++ b/modules/frontend/src/main/frontend/package-lock.json
@@ -10829,15 +10829,6 @@
       "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.5.tgz",
       "integrity": "sha512-0CSftHY0bDTD+4FbYkuFf6+iKDjZ4h2in2YYJDRMk5daZIjrgT9LjFHvP7Rzqy9/s1pij3zDtTSLRUjsPWMwqg=="
     },
-    "vue-console-interactive": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/vue-console-interactive/-/vue-console-interactive-0.4.2.tgz",
-      "integrity": "sha512-wZrPhN/1Hw7DNewJxJa8O2O9JRz+19QVGWlpBzfyCLyZNoP2de8u3x23bjxa7pevTAz2BXqMGrO45q2tJ3Ad+Q==",
-      "requires": {
-        "vue": "^2.5.2",
-        "vue-router": "^3.0.1"
-      }
-    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
diff --git a/modules/frontend/src/main/frontend/src/App.vue b/modules/frontend/src/main/frontend/src/App.vue
index 3318799..76ee723 100644
--- a/modules/frontend/src/main/frontend/src/App.vue
+++ b/modules/frontend/src/main/frontend/src/App.vue
@@ -10,7 +10,6 @@
     
     <b-container fluid  style="padding-top:20px;">
         <b-img left src="@/assets/images/addictlab-logo.png"></b-img>
-        
     </b-container>
   </div>
 </template>
@@ -35,7 +34,7 @@ export default {
   name: 'app',
   title: 'SDG Stadium',
   components: {
-      "nav-bar": NavBar
+      NavBar
   },
   data(){
     return {
diff --git a/modules/frontend/src/main/frontend/src/components/CodeExecutor.vue b/modules/frontend/src/main/frontend/src/components/CodeExecutor.vue
new file mode 100644
index 0000000..ef4b363
--- /dev/null
+++ b/modules/frontend/src/main/frontend/src/components/CodeExecutor.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div>
+    <span><b-icon @click="executeEvent" :icon="statusIcon" :variant="statusVariant"></b-icon></span>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import Interpreter from 'js-interpreter';
+
+
+export default {
+    data(){
+       return {
+           "status" : "IDLE",
+           "statusIcon": "exclamation-circle-fill",
+           "statusVariant": "secondary",
+           "running" : false
+       }
+    },
+    methods: {
+        executeEvent: function(event) {
+            console.log("execute event ..."+event);
+            var myInterpreter = new Interpreter('log(codeExecutor)', this.initContext);
+            myInterpreter.run();
+            
+            this.statusVariant = "success";
+
+        },
+        initContext: function(interpreter, globalObject) {
+              var wrapper = function(text) {
+                return alert(arguments.length ? text : '');
+              };
+              var logWrapper = function(text) {
+                return console.log(arguments.length ? text : '');
+              };
+              interpreter.setProperty(globalObject, 'alert', interpreter.createNativeFunction(wrapper));
+              interpreter.setProperty(globalObject, 'codeExecutor', this);
+              interpreter.setProperty(globalObject, 'log', interpreter.createNativeFunction(logWrapper));
+        }
+    },
+    mounted() {
+    }
+}
+</script>
\ No newline at end of file
diff --git a/modules/frontend/src/main/frontend/src/components/PythonExecutor.vue b/modules/frontend/src/main/frontend/src/components/PythonExecutor.vue
deleted file mode 100644
index acce1cb..0000000
--- a/modules/frontend/src/main/frontend/src/components/PythonExecutor.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div>
-    <div>
-    <span><b-icon @click="executeEvent" :icon="statusIcon" :variant="statusVariant"></b-icon></span>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-    data(){
-       return {
-           "status" : "IDLE",
-           "statusIcon": "exclamation-circle-fill",
-           "statusVariant": "secondary",
-           "running" : false
-       }
-    },
-    methods: {
-        executeEvent: function(event) {
-            console.log("execute event ..."+event);
-            this.statusVariant = "success";
-
-            const iframe = window.frames['pythonExecFrame']
-            iframe.postMessage('{"code":"Message from parent"}', '*')
-        },
-        onIframeLoad: function(event) {
-            console.log("executor ready ..."+event);
-        }
-    },
-    mounted() {
-    }
-}
-</script>
\ No newline at end of file
diff --git a/modules/frontend/src/main/frontend/src/views/Edit.vue b/modules/frontend/src/main/frontend/src/views/Edit.vue
index e0c484c..26c93d6 100644
--- a/modules/frontend/src/main/frontend/src/views/Edit.vue
+++ b/modules/frontend/src/main/frontend/src/views/Edit.vue
@@ -8,7 +8,7 @@
               </gl-component>
               <gl-stack :closable="false">
               <gl-component width="20"  :closable="false" title="Console">
-                <div ref="console"> </div>
+                <code-executor></code-executor>
               </gl-component>
               <gl-component width="20" :closable="false" title="Code">
                 
@@ -38,10 +38,12 @@ import vgl from 'vue-golden-layout'
 Vue.use(vgl);
 import 'golden-layout/src/css/goldenlayout-light-theme.css'
 
+import CodeExecutor from '@/components/CodeExecutor'
+
 export default {
   name: 'Edit',
   components: {
-
+      CodeExecutor
     },
   data(){
     return {
@@ -95,7 +97,7 @@ export default {
   },
   methods: {
     showCode() {
-      this.code = this.blocklyInstance.Python.workspaceToCode(this.blocklyWorkspace);
+      this.code = this.blocklyInstance.JavaScript.workspaceToCode(this.blocklyWorkspace);
     },
     goldenLayoutResizeHandler(e) {
          if(e) console.log(e,  this.blocklyWorkspace, this.blocklyInstance);
@@ -117,21 +119,32 @@ export default {
          blocklyDiv.style.height = ((blocklyArea.offsetHeight?blocklyArea.offsetHeight:blocklyArea.height)-20) + 'px';
          this.blocklyInstance.svgResize(this.blocklyWorkspace);
      },
-     onWorkspaceChange(e) {
-       var workspace = this.blocklyInstance.Workspace.getById(e.workspaceId);
-       this.code = this.blocklyInstance.JavaScript.workspaceToCode(workspace);
+     onWorkspaceEvent(e) {
+       if(e.type == this.blocklyInstance.Events.UI){
+        //  if(e.element == 'click'){
+           console.log("execute block", e.element);
+        //  }
+
+       }
+       else
+       {
+         var workspace = this.blocklyInstance.Workspace.getById(e.workspaceId);
+         this.code = this.blocklyInstance.JavaScript.workspaceToCode(workspace);
           // chiby.currentApp.generatedContents = code;
           // var xml = Blockly.Xml.workspaceToDom(workspace);
           // var xml_text = Blockly.Xml.domToText(xml);
           // chiby.currentApp.contents = xml_text;
+       }
+     },
+     runBlock(e){
+       console.log("running block ",e);
+       e.stopPropagation();
      }
   },
   mounted() {
-    console.log('mounting Blockly editor')
     this.blocklyWorkspace = Blockly.inject(this.$refs['editor'],this.options);
     this.blocklyInstance = Blockly;
-    console.log('mounted Blockly editor')
-    this.blocklyInstance.mainWorkspace.addChangeListener(this.onWorkspaceChange);
+    this.blocklyInstance.mainWorkspace.addChangeListener(this.onWorkspaceEvent);
     this.goldenLayoutResizeHandler();
   }
 }