diff --git a/enclave-manager/web/src/components/CodeEditor.tsx b/enclave-manager/web/src/components/CodeEditor.tsx
index 408937086b..50c6319a3c 100644
--- a/enclave-manager/web/src/components/CodeEditor.tsx
+++ b/enclave-manager/web/src/components/CodeEditor.tsx
@@ -1,7 +1,7 @@
 import { Box } from "@chakra-ui/react";
 import { Editor, OnChange, OnMount } from "@monaco-editor/react";
 import { editor } from "monaco-editor";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { isDefined } from "../utils";
 
 type CodeEditorProps = {
@@ -14,8 +14,12 @@ export const CodeEditor = ({ text, onTextChange, showLineNumbers }: CodeEditorPr
   const isReadOnly = !isDefined(onTextChange);
   const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
 
-  const handleContentSizeChange = (e: editor.IContentSizeChangedEvent) => {
-    editor?.layout({ width: 500, height: e.contentHeight });
+  const resizeEditorBasedOnContent = () => {
+    if (isDefined(editor)) {
+      const contentHeight = Math.min(750, editor.getContentHeight() || 10);
+      editor.layout({ width: 500, height: contentHeight });
+      editor.layout();
+    }
   };
 
   const handleMount: OnMount = (editor, monaco) => {
@@ -27,19 +31,19 @@ export const CodeEditor = ({ text, onTextChange, showLineNumbers }: CodeEditorPr
       colors: {},
     });
     monaco.editor.setTheme("kurtosis-theme");
-    if (!isReadOnly) {
-      editor.onDidContentSizeChange(handleContentSizeChange);
-    }
   };
 
+  useEffect(() => resizeEditorBasedOnContent(), [editor]);
+
   const handleChange: OnChange = (value, ev) => {
     if (isDefined(value) && onTextChange) {
       onTextChange(value);
+      resizeEditorBasedOnContent();
     }
   };
 
   return (
-    <Box width={"100%"} minHeight={`${editor?.getContentHeight() || 10}px`}>
+    <Box width={"100%"} minHeight={`${editor?.getLayoutInfo().height || 10}px`}>
       <Editor
         onMount={handleMount}
         value={text}
diff --git a/enclave-manager/web/src/components/enclaves/configuration/inputs/JSONArgumentInput.tsx b/enclave-manager/web/src/components/enclaves/configuration/inputs/JSONArgumentInput.tsx
index 05c4a2642e..7c9e519482 100644
--- a/enclave-manager/web/src/components/enclaves/configuration/inputs/JSONArgumentInput.tsx
+++ b/enclave-manager/web/src/components/enclaves/configuration/inputs/JSONArgumentInput.tsx
@@ -1,17 +1,19 @@
-import { Textarea } from "@chakra-ui/react";
+import { Controller } from "react-hook-form";
 import { stringifyError } from "../../../../utils";
+import { CodeEditor } from "../../../CodeEditor";
 import { useEnclaveConfigurationFormContext } from "../EnclaveConfigurationForm";
 import { KurtosisArgumentTypeInputProps } from "./KurtosisArgumentTypeInput";
 
 export const JSONArgumentInput = (props: Omit<KurtosisArgumentTypeInputProps, "type">) => {
-  const { register } = useEnclaveConfigurationFormContext();
+  const { control } = useEnclaveConfigurationFormContext();
 
   return (
-    <Textarea
-      {...register(props.name, {
-        disabled: props.disabled,
+    <Controller
+      render={({ field }) => <CodeEditor text={field.value} onTextChange={field.onChange} />}
+      name={props.name}
+      defaultValue={"{}"}
+      rules={{
         required: props.isRequired,
-        value: "{}",
         validate: (value: string) => {
           try {
             JSON.parse(value);
@@ -19,7 +21,8 @@ export const JSONArgumentInput = (props: Omit<KurtosisArgumentTypeInputProps, "t
             return `This is not valid JSON. ${stringifyError(err)}`;
           }
         },
-      })}
+      }}
+      disabled={props.disabled}
     />
   );
 };