diff --git a/ui/package-lock.json b/ui/package-lock.json
index ef9303c380..e1092c81d6 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -26,6 +26,8 @@
         "highlight.js": "^11.8.0",
         "lodash": "^4.17.21",
         "moment": "^2.29.4",
+        "monaco-editor": "^0.40.0",
+        "monaco-themes": "^0.4.4",
         "nightwind": "^1.1.13",
         "playwright": "^1.37.1",
         "react": "^18.2.0",
@@ -7108,6 +7110,11 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fast-plist": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/fast-plist/-/fast-plist-0.1.3.tgz",
+      "integrity": "sha512-d9cEfo/WcOezgPLAC/8t8wGb6YOD6JTCPMw2QcG2nAdFmyY+9rTUizCTaGjIZAloWENTEUMAPpkUAIJJJ0i96A=="
+    },
     "node_modules/fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -10151,6 +10158,19 @@
         "node": "*"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.40.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.40.0.tgz",
+      "integrity": "sha512-1wymccLEuFSMBvCk/jT1YDW/GuxMLYwnFwF9CDyYCxoTw2Pt379J3FUhwy9c43j51JdcxVPjwk0jm0EVDsBS2g=="
+    },
+    "node_modules/monaco-themes": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/monaco-themes/-/monaco-themes-0.4.4.tgz",
+      "integrity": "sha512-Hbb9pvRrpSi0rZezcB/IOdQnpx10o55Lx4zFdRAAVpFMa1HP7FgaqEZdKffb4ovd90fETCixeFO9JPYFMAq+TQ==",
+      "dependencies": {
+        "fast-plist": "^0.1.3"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -17954,6 +17974,11 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "fast-plist": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/fast-plist/-/fast-plist-0.1.3.tgz",
+      "integrity": "sha512-d9cEfo/WcOezgPLAC/8t8wGb6YOD6JTCPMw2QcG2nAdFmyY+9rTUizCTaGjIZAloWENTEUMAPpkUAIJJJ0i96A=="
+    },
     "fastq": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
@@ -20162,6 +20187,19 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
       "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
     },
+    "monaco-editor": {
+      "version": "0.40.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.40.0.tgz",
+      "integrity": "sha512-1wymccLEuFSMBvCk/jT1YDW/GuxMLYwnFwF9CDyYCxoTw2Pt379J3FUhwy9c43j51JdcxVPjwk0jm0EVDsBS2g=="
+    },
+    "monaco-themes": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/monaco-themes/-/monaco-themes-0.4.4.tgz",
+      "integrity": "sha512-Hbb9pvRrpSi0rZezcB/IOdQnpx10o55Lx4zFdRAAVpFMa1HP7FgaqEZdKffb4ovd90fETCixeFO9JPYFMAq+TQ==",
+      "requires": {
+        "fast-plist": "^0.1.3"
+      }
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/ui/package.json b/ui/package.json
index 292c1f535c..036258e50a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -30,6 +30,8 @@
     "highlight.js": "^11.8.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
+    "monaco-editor": "^0.40.0",
+    "monaco-themes": "^0.4.4",
     "nightwind": "^1.1.13",
     "playwright": "^1.37.1",
     "react": "^18.2.0",
diff --git a/ui/src/app/console/Console.tsx b/ui/src/app/console/Console.tsx
index 4d88a56eb4..a003e99cd1 100644
--- a/ui/src/app/console/Console.tsx
+++ b/ui/src/app/console/Console.tsx
@@ -1,18 +1,19 @@
+import { ArrowPathIcon } from '@heroicons/react/20/solid';
 import { Form, Formik, useFormikContext } from 'formik';
 import hljs from 'highlight.js';
 import javascript from 'highlight.js/lib/languages/json';
-import 'highlight.js/styles/tokyo-night-dark.css';
+import 'highlight.js/styles/tomorrow-night-bright.css';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
 import * as Yup from 'yup';
 import { selectCurrentNamespace } from '~/app/namespaces/namespacesSlice';
+import { ContextEditor } from '~/components/console/ContextEditor';
 import EmptyState from '~/components/EmptyState';
 import Button from '~/components/forms/buttons/Button';
 import Combobox from '~/components/forms/Combobox';
 import Input from '~/components/forms/Input';
-import TextArea from '~/components/forms/TextArea';
 import { evaluateV2, listFlags } from '~/data/api';
 import { useError } from '~/data/hooks/error';
 import {
@@ -27,7 +28,7 @@ import {
   IFlagList
 } from '~/types/Flag';
 import { INamespace } from '~/types/Namespace';
-import { classNames } from '~/utils/helpers';
+import { classNames, getErrorMessage } from '~/utils/helpers';
 
 hljs.registerLanguage('json', javascript);
 
@@ -44,12 +45,12 @@ function ResetOnNamespaceChange({ namespace }: { namespace: INamespace }) {
 interface ConsoleFormValues {
   flagKey: string;
   entityId: string;
-  context: string | undefined;
 }
 
 export default function Console() {
   const [flags, setFlags] = useState<FilterableFlag[]>([]);
   const [selectedFlag, setSelectedFlag] = useState<FilterableFlag | null>(null);
+  const [context, setContext] = useState<string | null>(null);
   const [response, setResponse] = useState<string | null>(null);
   const [hasEvaluationError, setHasEvaluationError] = useState<boolean>(false);
 
@@ -77,14 +78,21 @@ export default function Console() {
   }, [namespace.key]);
 
   const handleSubmit = (flag: IFlag | null, values: ConsoleFormValues) => {
-    const { entityId, context } = values;
+    const { entityId } = values;
 
     if (!flag) {
       return;
     }
 
-    // need to unescape the context string
-    const parsed = context ? JSON.parse(context) : undefined;
+    let parsed = null;
+    try {
+      // need to unescape the context string
+      parsed = context ? JSON.parse(context) : undefined;
+    } catch (err) {
+      setHasEvaluationError(true);
+      setResponse('error: ' + getErrorMessage(err));
+      return;
+    }
 
     const rest = {
       entityId,
@@ -116,8 +124,7 @@ export default function Console() {
 
   const initialvalues: ConsoleFormValues = {
     flagKey: selectedFlag?.key || '',
-    entityId: uuidv4(),
-    context: undefined
+    entityId: uuidv4()
   };
 
   return (
@@ -144,11 +151,6 @@ export default function Console() {
                 onSubmit={(values) => {
                   handleSubmit(selectedFlag, values);
                 }}
-                onReset={() => {
-                  setResponse(null);
-                  setHasEvaluationError(false);
-                  setSelectedFlag(null);
-                }}
               >
                 {(formik) => (
                   <Form className="px-1 sm:overflow-hidden sm:rounded-md">
@@ -178,12 +180,29 @@ export default function Console() {
                           >
                             Entity ID
                           </label>
-                          <Input
-                            className="mt-1"
-                            name="entityId"
-                            id="entityId"
-                            type="text"
-                          />
+                          <div className="flex items-center justify-between">
+                            <Input
+                              className="mr-2 mt-1"
+                              name="entityId"
+                              id="entityId"
+                              type="text"
+                            />
+                            <button
+                              aria-label="New Entity ID"
+                              title="New Entity ID"
+                              className="hidden md:block"
+                              onClick={(e) => {
+                                e.preventDefault();
+                                formik.setFieldValue('entityId', uuidv4());
+                              }}
+                            >
+                              <ArrowPathIcon
+                                className={classNames(
+                                  'text-gray-400 m-auto h-5 w-5 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white dark:hover:text-gray-500'
+                                )}
+                              />
+                            </button>
+                          </div>
                         </div>
                         <div className="col-span-3">
                           <label
@@ -192,27 +211,12 @@ export default function Console() {
                           >
                             Request Context
                           </label>
-                          <TextArea
-                            rows={10}
-                            name="context"
-                            id="context"
-                            className="mt-1"
-                            placeholder="{}"
-                          />
+                          <div className="nightwind-prevent mt-1">
+                            <ContextEditor id="context" setValue={setContext} />
+                          </div>
                         </div>
                       </div>
                       <div className="flex justify-end">
-                        <Button
-                          type="reset"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            formik.resetForm();
-                            formik.setFieldValue('entityId', uuidv4());
-                            formik.setFieldValue('context', '');
-                          }}
-                        >
-                          Reset
-                        </Button>
                         <Button
                           primary
                           className="ml-3"
diff --git a/ui/src/components/console/ContextEditor.module.css b/ui/src/components/console/ContextEditor.module.css
new file mode 100644
index 0000000000..a3c5735237
--- /dev/null
+++ b/ui/src/components/console/ContextEditor.module.css
@@ -0,0 +1,4 @@
+.ContextEditor {
+  width: 100vw;
+  height: 50vh;
+}
diff --git a/ui/src/components/console/ContextEditor.tsx b/ui/src/components/console/ContextEditor.tsx
new file mode 100644
index 0000000000..e167ead8b7
--- /dev/null
+++ b/ui/src/components/console/ContextEditor.tsx
@@ -0,0 +1,53 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import tmrw from 'monaco-themes/themes/Tomorrow-Night-Bright.json';
+import { useEffect, useRef } from 'react';
+import styles from './ContextEditor.module.css';
+import './worker';
+
+type ContextEditorProps = {
+  id: string;
+  setValue(value: string): void;
+};
+
+export const ContextEditor: React.FC<ContextEditorProps> = (
+  props: ContextEditorProps
+) => {
+  const { id, setValue } = props;
+
+  const editor = useRef<undefined | monaco.editor.IStandaloneCodeEditor>();
+  const monacoEl = useRef(null);
+  const subscription = useRef<monaco.IDisposable | null>(null);
+
+  monaco.editor.defineTheme('tmrw', tmrw as monaco.editor.IStandaloneThemeData);
+
+  useEffect(() => {
+    if (monacoEl.current) {
+      editor.current = monaco.editor.create(monacoEl.current!, {
+        value: '{}',
+        language: 'json',
+        fontSize: 14,
+        lineNumbers: 'off',
+        renderLineHighlight: 'none',
+        minimap: {
+          enabled: false
+        },
+        folding: false,
+        autoDetectHighContrast: false,
+        autoClosingBrackets: 'always',
+        scrollBeyondLastLine: false,
+        theme: 'tmrw'
+      });
+
+      // After initializing monaco editor
+      if (editor?.current) {
+        subscription.current = editor.current.onDidChangeModelContent(() => {
+          if (editor?.current) setValue(editor.current.getValue());
+        });
+      }
+
+      return () => editor.current && editor.current.dispose();
+    }
+  }, []);
+
+  return <div id={id} className={styles.ContextEditor} ref={monacoEl}></div>;
+};
diff --git a/ui/src/components/console/worker.ts b/ui/src/components/console/worker.ts
new file mode 100644
index 0000000000..5913ebd910
--- /dev/null
+++ b/ui/src/components/console/worker.ts
@@ -0,0 +1,21 @@
+// @ts-ignore
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    switch (label) {
+      case 'json':
+        return new Worker(
+          new URL(
+            'monaco-editor/esm/vs/language/json/json.worker.js',
+            import.meta.url
+          )
+        );
+      default:
+        return new Worker(
+          new URL(
+            'monaco-editor/esm/vs/editor/editor.worker.js',
+            import.meta.url
+          )
+        );
+    }
+  }
+};
diff --git a/ui/src/components/flags/FlagForm.tsx b/ui/src/components/flags/FlagForm.tsx
index a616b57898..aa63db0282 100644
--- a/ui/src/components/flags/FlagForm.tsx
+++ b/ui/src/components/flags/FlagForm.tsx
@@ -166,6 +166,7 @@ export default function FlagForm(props: FlagFormProps) {
                     {!isNew && (
                       <button
                         aria-label="Copy"
+                        title="Copy to Clipboard"
                         className="hidden md:block"
                         onClick={(e) => {
                           e.preventDefault();
@@ -178,7 +179,7 @@ export default function FlagForm(props: FlagFormProps) {
                       >
                         <CheckIcon
                           className={classNames(
-                            'nightwind-prevent text-green-400 absolute m-auto h-6 w-6 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white',
+                            'nightwind-prevent text-green-400 absolute m-auto h-5 w-5 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white',
                             keyCopied
                               ? 'visible opacity-100'
                               : 'invisible opacity-0'
@@ -186,7 +187,7 @@ export default function FlagForm(props: FlagFormProps) {
                         />
                         <ClipboardDocumentIcon
                           className={classNames(
-                            'text-gray-400 m-auto h-6 w-6 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white dark:hover:text-gray-500',
+                            'text-gray-400 m-auto h-5 w-5 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white dark:hover:text-gray-500',
                             keyCopied
                               ? 'invisible opacity-0'
                               : 'visible opacity-100'
diff --git a/ui/src/components/segments/SegmentForm.tsx b/ui/src/components/segments/SegmentForm.tsx
index 85556ff900..b9d5f45875 100644
--- a/ui/src/components/segments/SegmentForm.tsx
+++ b/ui/src/components/segments/SegmentForm.tsx
@@ -148,6 +148,7 @@ export default function SegmentForm(props: SegmentFormProps) {
                   {!isNew && (
                     <button
                       aria-label="Copy"
+                      title="Copy to Clipboard"
                       className="hidden md:block"
                       onClick={(e) => {
                         e.preventDefault();
@@ -160,7 +161,7 @@ export default function SegmentForm(props: SegmentFormProps) {
                     >
                       <CheckIcon
                         className={classNames(
-                          'nightwind-prevent text-green-400 absolute m-auto h-6 w-6 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white',
+                          'nightwind-prevent text-green-400 absolute m-auto h-5 w-5 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white',
                           keyCopied
                             ? 'visible opacity-100'
                             : 'invisible opacity-0'
@@ -168,7 +169,7 @@ export default function SegmentForm(props: SegmentFormProps) {
                       />
                       <ClipboardDocumentIcon
                         className={classNames(
-                          'text-gray-400 m-auto h-6 w-6 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white dark:hover:text-gray-500',
+                          'text-gray-400 m-auto h-5 w-5 justify-center align-middle transition-opacity duration-300 ease-in-out hover:text-white dark:hover:text-gray-500',
                           keyCopied
                             ? 'invisible opacity-0'
                             : 'visible opacity-100'
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index 5fcd06d4fe..4200dc67a5 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -21,5 +21,9 @@
     }
   },
   "include": ["src", "tests"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }