diff --git a/internal/webui/package.json b/internal/webui/package.json
index d3f4744cbb..ff7dac4acb 100644
--- a/internal/webui/package.json
+++ b/internal/webui/package.json
@@ -45,11 +45,13 @@
     "axios": "^1.13.5",
     "classnames": "^2.5.1",
     "form-data": "^4.0.0",
+    "prismjs": "^1.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.55.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.28.1",
+    "react-simple-code-editor": "^0.14.1",
     "react-syntax-highlighter": "^16.1.1",
     "react-use-websocket": "^4.5.0",
     "tss-react": "^4.9.6",
@@ -60,6 +62,7 @@
   "devDependencies": {
     "@eslint/js": "^9.27.0",
     "@types/node": "^22.15.0",
+    "@types/prismjs": "^1.26.6",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
     "@types/react-syntax-highlighter": "^15.5.13",
diff --git a/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSQL.tsx b/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSQL.tsx
index cfde2d1c6e..107819aef7 100644
--- a/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSQL.tsx
+++ b/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSQL.tsx
@@ -2,44 +2,58 @@ import { FormControl, FormHelperText, InputLabel, OutlinedInput } from "@mui/mat
 import { useFormContext } from "react-hook-form";
 import { useFormStyles } from "styles/form";
 import { MetricFormValues } from "../MetricForm.types";
+import Editor from "react-simple-code-editor";
+import { highlight, languages } from "prismjs";
+import "prismjs/components/prism-sql";
+import "prismjs/themes/prism.css";
+import { Controller } from "react-hook-form";
+
 
 export const MetricFormStepSQL = () => {
-  const { register, formState: { errors } } = useFormContext<MetricFormValues>();
+  const { control, formState: { errors } } = useFormContext<MetricFormValues>();
   const { classes, cx } = useFormStyles();
 
-  const hasError = (field: keyof MetricFormValues) => !!errors[field];
-
-  const getError = (field: keyof MetricFormValues) => {
-    const error = errors[field];
-    if (error) {
-      return error.message;
-    }
-    return undefined;
-  };
+  const hasError = !!errors.SQLs;
+  const errorMessage = errors.SQLs?.message;
 
   return (
     <div className={classes.form}>
       <FormControl
         className={cx(classes.formControlInput, classes.widthFull)}
-        error={hasError("SQLs")}
+        error={hasError}
         variant="outlined"
       >
-        <InputLabel htmlFor="SQLs">SQLs</InputLabel>
-        <OutlinedInput
-          {...register("SQLs")}
-          id="SQLs"
-          label="SQLs"
-          aria-describedby="SQLs-error"
-          multiline
-          rows={15}
-          inputProps={{
-            style: {
-              font: "revert",
-              fontSize: "0.7rem",
-            }
-          }}
+        <InputLabel
+          shrink
+          htmlFor="SQLs"
+          sx={{ backgroundColor: "white", px: 0.5 }}
+        >
+          SQLs
+        </InputLabel>
+         <Controller
+          name="SQLs"
+          control={control}
+          render={({ field }) => (
+            <Editor
+              value={field.value ?? ""}
+              onValueChange={field.onChange}
+              highlight={(code) => highlight(code, languages.sql, "sql")}
+              padding={12}
+              id="SQLs"
+              style={{
+                fontFamily: "'Fira Code', 'Consolas', monospace",
+                fontSize: "0.75rem",
+                lineHeight: 1.6,
+                minHeight: "240px",
+                border: hasError ? "1px solid #d32f2f" : "1px solid rgba(0,0,0,0.23)",
+                borderRadius: "4px",
+                backgroundColor: "#fafafa",
+                color: "#333",
+              }}
+            />
+          )}
         />
-        <FormHelperText id="SQLs-error">{getError("SQLs")}</FormHelperText>
+        <FormHelperText id="SQLs-error">{errorMessage}</FormHelperText>
       </FormControl>
     </div>
   );
diff --git a/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSettings.tsx b/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSettings.tsx
index f7bb9a6496..5951dfe5d9 100644
--- a/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSettings.tsx
+++ b/internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSettings.tsx
@@ -2,12 +2,17 @@ import { Checkbox, FormControl, FormControlLabel, FormHelperText, InputLabel, Ou
 import { useController, useFormContext } from "react-hook-form";
 import { useFormStyles } from "styles/form";
 import { MetricFormValues } from "../MetricForm.types";
+import Editor from "react-simple-code-editor";
+import { highlight, languages } from "prismjs";
+import "prismjs/components/prism-sql";
+import "prismjs/themes/prism.css";
+import { Controller } from "react-hook-form";
 
 export const MetricFormStepSettings = () => {
   const { register, control } = useFormContext<MetricFormValues>();
   const { classes, cx } = useFormStyles();
 
-  const { field } = useController({ name: "IsInstanceLevel", control });
+  const { field: instanceLevelField } = useController({ name: "IsInstanceLevel", control });
 
   return (
     <div className={classes.form}>
@@ -30,13 +35,35 @@ export const MetricFormStepSettings = () => {
         className={cx(classes.formControlInput, classes.widthFull)}
         variant="outlined"
       >
-        <InputLabel htmlFor="InitSQL">Init SQL</InputLabel>
-        <OutlinedInput
-          {...register("InitSQL")}
-          id="InitSQL"
-          label="Init SQL"
-          multiline
-          maxRows={5}
+         <InputLabel
+          shrink
+          htmlFor="InitSQL"
+          sx={{ backgroundColor: "white", px: 0.5 }}
+        >
+          Init SQL
+        </InputLabel>
+         <Controller
+          name="InitSQL"
+          control={control}
+          render={({ field }) => (
+            <Editor
+              value={field.value ?? ""}
+              onValueChange={field.onChange}
+              highlight={(code) => highlight(code, languages.sql, "sql")}
+              padding={12}
+              id="InitSQL"
+              style={{
+                fontFamily: "'Fira Code', 'Consolas', monospace",
+                fontSize: "0.75rem",
+                lineHeight: 1.6,
+                minHeight: "120px",
+                border: "1px solid rgba(0,0,0,0.23)",
+                borderRadius: "4px",
+                backgroundColor: "#fafafa",
+                color: "#333",
+              }}
+            />
+          )}
         />
       </FormControl>
       <FormControlLabel
@@ -45,9 +72,9 @@ export const MetricFormStepSettings = () => {
         labelPlacement="start"
         control={
           <Checkbox
-            {...field}
+            {...instanceLevelField}
             size="medium"
-            checked={field.value}
+            checked={instanceLevelField.value}
           />
         }
       />
diff --git a/internal/webui/yarn.lock b/internal/webui/yarn.lock
index 7b73fcc7a7..cc7eaf8010 100644
--- a/internal/webui/yarn.lock
+++ b/internal/webui/yarn.lock
@@ -1013,7 +1013,7 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
-"@types/prismjs@^1.0.0":
+"@types/prismjs@^1.0.0", "@types/prismjs@^1.26.6":
   version "1.26.6"
   resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.6.tgz#6ea27c126d645319ae4f7055eda63a9e835c0187"
   integrity sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==
@@ -3428,6 +3428,11 @@ react-router@6.30.3:
   dependencies:
     "@remix-run/router" "1.23.2"
 
+react-simple-code-editor@^0.14.1:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.14.1.tgz#fd37eb3349f5def45900dd46acf296f796d81d2c"
+  integrity sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==
+
 react-syntax-highlighter@^16.1.1:
   version "16.1.1"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz#928459855d375f5cfc8e646071e20d541cebcb52"