diff --git a/packages/modules/order/src/lib/components/order-edit.component.ts b/packages/modules/order/src/lib/components/order-edit.component.ts
index c46fd7d..609f05b 100644
--- a/packages/modules/order/src/lib/components/order-edit.component.ts
+++ b/packages/modules/order/src/lib/components/order-edit.component.ts
@@ -34,7 +34,7 @@ import { transformOrderToInput } from '../utils';
           [schema]="schema"
           [update]="update"
         /> -->
-        <form class="col flex">
+        <div class="col flex">
           <rc-json-editor
             #jsonEditor
             [value]="getOrderSource(vm.order)"
@@ -43,14 +43,9 @@ import { transformOrderToInput } from '../utils';
 
           <div class="py-2 row justify-content-end">
             <div class="loose-button-group">
+              <button class="button transparent">Cancel</button>
               <button
-                vcl-button
-                class="transparent"
-              >
-                Cancel
-              </button>
-              <button
-                vcl-button
+                class="button"
                 (click)="onSave()"
                 [disabled]="jsonError"
               >
@@ -58,7 +53,7 @@ import { transformOrderToInput } from '../utils';
               </button>
             </div>
           </div>
-        </form>
+        </div>
       </div>
     </ng-container>
   `,
@@ -105,7 +100,7 @@ export class OrderEditComponent {
 
   getOrderSource(order: IOrder): string {
     const orderInput = transformOrderToInput(order);
-    // console.log(order);
+    console.log('sHOW ANYTHIME WE HOVER...');
     // The above log always shows up whenever we hover on the cancel and save button.
     // Investigate this by first removing the vcl-button directive to see if this is the
     // issue.
diff --git a/packages/modules/ui/src/lib/components/organisms/json-editor/json-editor.component.ts b/packages/modules/ui/src/lib/components/organisms/json-editor/json-editor.component.ts
index f2b3b0e..e4d069f 100644
--- a/packages/modules/ui/src/lib/components/organisms/json-editor/json-editor.component.ts
+++ b/packages/modules/ui/src/lib/components/organisms/json-editor/json-editor.component.ts
@@ -16,10 +16,10 @@ import 'ace-builds/src-noconflict/theme-github_light_default';
 })
 export class JSONEditorComponent implements AfterViewInit, OnDestroy {
   @HostBinding('class') classNames = 'col w-100p';
-
   private editor!: ace.Ace.Editor;
 
   @Input() value = '';
+  jsonError = '';
 
   constructor(private elRef: ElementRef) {}
 
@@ -36,8 +36,26 @@ export class JSONEditorComponent implements AfterViewInit, OnDestroy {
       value: this.value,
     });
 
+    const innerTextArea = containerElement.querySelector(
+      'textarea'
+    ) as HTMLTextAreaElement;
+
     this.editor.setTheme('ace/theme/github_light_default');
     this.editor.session.setMode('ace/mode/json');
+    this.editor.session.on('change', () => {
+      try {
+        JSON.stringify(JSON.parse(this.getValue()));
+        this.jsonError = '';
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (err: any) {
+        this.jsonError = err.message;
+      }
+
+      innerTextArea.setCustomValidity(
+        this.jsonError ? 'Invalid JSON: ' + this.jsonError : ''
+      );
+      innerTextArea.reportValidity();
+    });
   }
 
   ngOnDestroy(): void {