diff --git a/src/assets/app.scss b/src/assets/app.scss
index dd941ed..947fcd4 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -36,9 +36,6 @@ input:disabled, textarea:disabled {
 textarea[id=data] {
 	height: 200px;
 }
-textarea[id=result] {
-	height: 350px;
-}
 div[id=result] {
 	height: 350px;
 }
\ No newline at end of file
diff --git a/src/components/MonacoEditor.vue b/src/components/MonacoEditor.vue
index 4f9f74a..022826f 100644
--- a/src/components/MonacoEditor.vue
+++ b/src/components/MonacoEditor.vue
@@ -28,16 +28,22 @@ export default {
     },
   },
   mounted() {
+    console.log(monacoResultInst);
     loader.init().then((monaco) => {
       monacoResultInst = monaco;
 
       monaco.editor.create(document.querySelector(`#${this.name}`), {
-        value: '',
+        value: this.value,
         language: this.language,
         readOnly: this.readonly,
       });
     });
   },
+  unmounted() {
+    if (monacoResultInst) {
+      monacoResultInst.editor.getModels().forEach(model => model.dispose());
+    }
+  },
   watch: {
     value: {
       // the callback will be called immediately after the start of the observation
diff --git a/src/views/PHPArrayToJson.vue b/src/views/PHPArrayToJson.vue
index 21117a7..e40c295 100644
--- a/src/views/PHPArrayToJson.vue
+++ b/src/views/PHPArrayToJson.vue
@@ -17,15 +17,19 @@
 
   <div class="input-group">
     <label for="result">Result</label>
-    <textarea id="result" v-model="toolResult"></textarea>
+    <MonacoEditor name="result" language="json" :value="toolResult"></MonacoEditor>
   </div>
 </template>
 
 <script>
 import axios from 'axios'
 import { config } from '../../config';
+import MonacoEditor from "@/components/MonacoEditor.vue";
 
 export default {
+  components: {
+    MonacoEditor
+  },
   data() {
     return {
       toolData: {