diff --git a/go.work.sum b/go.work.sum
index b1e83f8a3a..81952df676 100644
--- a/go.work.sum
+++ b/go.work.sum
@@ -1665,7 +1665,6 @@ github.com/prometheus/common v0.30.0/go.mod h1:vu+V0TpY+O6vW9J44gczi3Ap/oXXR10b+
 github.com/prometheus/common v0.37.0/go.mod h1:phzohg0JFMnBEFGxTDbfu3QyL5GI8gTQJFhYO5B3mfA=
 github.com/prometheus/common v0.48.0/go.mod h1:0/KsvlIEfPQCQ5I2iNSAWKPZziNCvRs5EC6ILDTlAPc=
 github.com/prometheus/common v0.55.0/go.mod h1:2SECS4xJG1kd8XF9IcM1gMX6510RAEL65zxzNImwdc8=
-github.com/prometheus/common v0.60.1/go.mod h1:h0LYf1R1deLSKtD4Vdg8gy4RuOvENW2J/h19V5NADQw=
 github.com/prometheus/procfs v0.0.0-20180125133057-cb4147076ac7/go.mod h1:c3At6R/oaqEKCNdg8wHV1ftS6bRYblBhIjjI8uT2IGk=
 github.com/prometheus/procfs v0.0.0-20190507164030-5867b95ac084/go.mod h1:TjEm7ze935MbeOT/UhFTIMYKhuLP4wbCsTZCD3I8kEA=
 github.com/prometheus/procfs v0.0.0-20190522114515-bc1a522cf7b1/go.mod h1:TjEm7ze935MbeOT/UhFTIMYKhuLP4wbCsTZCD3I8kEA=
diff --git a/ui/.gitignore b/ui/.gitignore
index 7918d58908..707144fc62 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -27,4 +27,5 @@ dist-ssr
 /playwright/.cache/
 .packagehash
 /screenshots/
-.env
\ No newline at end of file
+.env
+coverage
diff --git a/ui/src/app/console/Console.tsx b/ui/src/app/console/Console.tsx
index d37aee76e4..7ecc4560c4 100644
--- a/ui/src/app/console/Console.tsx
+++ b/ui/src/app/console/Console.tsx
@@ -12,7 +12,7 @@ import { useListAuthProvidersQuery } from '~/app/auth/authApi';
 import { useListFlagsQuery } from '~/app/flags/flagsApi';
 import { selectCurrentNamespace } from '~/app/namespaces/namespacesSlice';
 import { selectCurrentRef } from '~/app/refs/refsSlice';
-import { ContextEditor } from '~/components/console/ContextEditor';
+import { JsonEditor } from '~/components/json/JsonEditor';
 import EmptyState from '~/components/EmptyState';
 import { Button } from '~/components/Button';
 import Combobox from '~/components/Combobox';
@@ -285,8 +285,9 @@ export default function Console() {
                             Request Context
                           </label>
                           <div className="mt-1 text-sm">
-                            <ContextEditor
+                            <JsonEditor
                               id="context"
+                              value={formik.values.context}
                               setValue={(v) => {
                                 formik.setFieldValue('context', v);
                               }}
diff --git a/ui/src/app/flags/flagsApi.ts b/ui/src/app/flags/flagsApi.ts
index 891d08d1de..ae9e775d83 100644
--- a/ui/src/app/flags/flagsApi.ts
+++ b/ui/src/app/flags/flagsApi.ts
@@ -91,9 +91,9 @@ export const flagsApi = createApi({
       { namespaceKey: string; flagKey: string; values: IFlagBase }
     >({
       query({ namespaceKey, flagKey, values }) {
-        // create new object 'values' to remap defaultVariant to defaultVariantId
         const update = {
           defaultVariantId: values.defaultVariant?.id || null,
+          metadata: values.metadata || [],
           ...values
         };
         delete update.defaultVariant;
diff --git a/ui/src/components/console/lint.ts b/ui/src/components/console/lint.ts
deleted file mode 100644
index fc72b22e06..0000000000
--- a/ui/src/components/console/lint.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Diagnostic } from '@codemirror/lint';
-import { EditorView } from '@codemirror/view';
-import { Text } from '@codemirror/state';
-import { SearchCursor } from '@codemirror/search';
-
-function getJsonErrorPosition(error: SyntaxError, doc: Text): number {
-  let m;
-  if ((m = error.message.match(/at position (\d+)/)))
-    return Math.min(+m[1], doc.length);
-  if ((m = error.message.match(/at line (\d+) column (\d+)/)))
-    return Math.min(doc.line(+m[1]).from + +m[2] - 1, doc.length);
-  return 0;
-}
-
-export const parseLinter =
-  () =>
-  (view: EditorView): Diagnostic[] => {
-    const doc = view.state.doc;
-    try {
-      const data = JSON.parse(doc.toString());
-      if (Array.isArray(data) || typeof data !== 'object') {
-        return [
-          {
-            from: 0,
-            message: 'Request Context: unexpected array',
-            severity: 'error',
-            to: doc.length
-          }
-        ];
-      }
-      for (const [key, value] of Object.entries(data)) {
-        if (typeof value !== 'string') {
-          const keyCursor = new SearchCursor(doc, `"${key}"`);
-          const keyPosition = keyCursor.next().value;
-          const valueCursor = new SearchCursor(
-            doc,
-            JSON.stringify(value),
-            keyPosition.to
-          );
-          const pos = valueCursor.next().value;
-          return [
-            {
-              from: pos.from,
-              message: 'Request Context: expected string value',
-              severity: 'error',
-              to: pos.to
-            }
-          ];
-        }
-      }
-    } catch (e) {
-      if (!(e instanceof SyntaxError)) throw e;
-      const pos = getJsonErrorPosition(e, doc);
-      return [
-        {
-          from: pos,
-          message: 'JSON: unexpected keyword',
-          severity: 'error',
-          to: pos
-        }
-      ];
-    }
-    return [];
-  };
diff --git a/ui/src/components/flags/forms/FlagForm.tsx b/ui/src/components/flags/forms/FlagForm.tsx
index 75792cd48a..ccd27cbc2c 100644
--- a/ui/src/components/flags/forms/FlagForm.tsx
+++ b/ui/src/components/flags/forms/FlagForm.tsx
@@ -14,11 +14,13 @@ import { Button } from '~/components/Button';
 import Input from '~/components/forms/Input';
 import Toggle from '~/components/forms/Toggle';
 import Loading from '~/components/Loading';
+import { MetadataForm } from '~/components/flags/forms/MetadataForm';
 import { useError } from '~/data/hooks/error';
 import { useSuccess } from '~/data/hooks/success';
 import { keyValidation, requiredValidation } from '~/data/validations';
 import { FlagType, IFlag, IFlagBase } from '~/types/Flag';
 import { cls, copyTextToClipboard, stringAsKey } from '~/utils/helpers';
+import MetadataFormErrorBoundary from './MetadataFormErrorBoundary';
 
 const flagTypes = [
   {
@@ -37,7 +39,8 @@ const flagTypes = [
 
 const flagValidationSchema = Yup.object({
   key: keyValidation,
-  name: requiredValidation
+  name: requiredValidation,
+  metadata: Yup.object()
 });
 
 export default function FlagForm(props: { flag?: IFlag }) {
@@ -61,14 +64,14 @@ export default function FlagForm(props: { flag?: IFlag }) {
     if (isNew) {
       return createFlag({
         namespaceKey: namespace.key,
-        values: values
+        values
       }).unwrap();
     }
 
     return updateFlag({
       namespaceKey: namespace.key,
       flagKey: flag?.key,
-      values: values
+      values
     }).unwrap();
   };
 
@@ -78,10 +81,12 @@ export default function FlagForm(props: { flag?: IFlag }) {
     description: flag?.description || '',
     type: flag?.type || FlagType.VARIANT,
     enabled: flag?.enabled || false,
-    defaultVariant: flag?.defaultVariant
+    defaultVariant: flag?.defaultVariant,
+    metadata: flag?.metadata || {}
   };
 
   const [keyCopied, setKeyCopied] = useState(false);
+  const [hasMetadataErrors, setHasMetadataErrors] = useState(false);
 
   return (
     <Formik
@@ -285,6 +290,40 @@ export default function FlagForm(props: { flag?: IFlag }) {
                     disabled={readOnly}
                   />
                 </div>
+                <div className="col-span-3">
+                  <div className="flex justify-between">
+                    <label
+                      htmlFor="metadata"
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      Metadata
+                    </label>
+                    <span
+                      className="text-xs text-gray-500"
+                      id="metadata-optional"
+                    >
+                      Optional
+                    </span>
+                  </div>
+                  <div className="mt-1">
+                    <MetadataFormErrorBoundary
+                      metadata={formik.values.metadata}
+                      onChange={(metadata) =>
+                        formik.setFieldValue('metadata', metadata)
+                      }
+                      disabled={readOnly}
+                    >
+                      <MetadataForm
+                        metadata={formik.values.metadata}
+                        onChange={(metadata) =>
+                          formik.setFieldValue('metadata', metadata)
+                        }
+                        disabled={readOnly}
+                        onErrorChange={setHasMetadataErrors}
+                      />
+                    </MetadataFormErrorBoundary>
+                  </div>
+                </div>
               </div>
               <div className="flex justify-end">
                 <Button type="button" onClick={() => navigate(-1)}>
@@ -297,7 +336,8 @@ export default function FlagForm(props: { flag?: IFlag }) {
                   title={readOnly ? 'Not allowed in Read-Only mode' : undefined}
                   disabled={
                     !(formik.dirty && formik.isValid && !formik.isSubmitting) ||
-                    readOnly
+                    readOnly ||
+                    hasMetadataErrors
                   }
                 >
                   {formik.isSubmitting ? <Loading isPrimary /> : submitPhrase}
diff --git a/ui/src/components/flags/forms/MetadataForm.tsx b/ui/src/components/flags/forms/MetadataForm.tsx
new file mode 100644
index 0000000000..0db52129f2
--- /dev/null
+++ b/ui/src/components/flags/forms/MetadataForm.tsx
@@ -0,0 +1,516 @@
+/* eslint-disable no-case-declarations */
+
+import { useState, useEffect } from 'react';
+import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
+import * as Yup from 'yup';
+import type { IFlagMetadata } from '~/types/Flag';
+import { Button } from '~/components/Button';
+import Input from '~/components/forms/Input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '~/components/ui/select';
+import { cls, stringAsKey } from '~/utils/helpers';
+import { JsonEditor } from '~/components/json/JsonEditor';
+
+const metadataValidationSchema = Yup.object({
+  key: Yup.string().required('Key is required'),
+  value: Yup.mixed().required('Value is required'),
+  type: Yup.string().oneOf(['primitive', 'object', 'array']).required()
+});
+
+function objectToMetadataArray(obj: Record<string, any>): IFlagMetadata[] {
+  return Object.entries(obj).map(([key, value]) => {
+    if (value === null || value === undefined) {
+      return {
+        key,
+        type: 'primitive',
+        subtype: 'string',
+        value: '',
+        isNew: false
+      };
+    }
+
+    if (Array.isArray(value)) {
+      return {
+        key,
+        type: 'array',
+        value,
+        isNew: false
+      };
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      return {
+        key,
+        type: 'object',
+        value,
+        isNew: false
+      };
+    }
+
+    let subtype: 'string' | 'number' | 'boolean' = 'string';
+
+    if (typeof value === 'string') {
+      // Try parsing as number first
+      if (!isNaN(Number(value)) && value.trim() !== '') {
+        subtype = 'number';
+      } else if (
+        // Try parsing as boolean if it's exactly 'true' or 'false'
+        value.toLowerCase() === 'true' ||
+        value.toLowerCase() === 'false'
+      ) {
+        subtype = 'boolean';
+      }
+    } else if (typeof value === 'number') {
+      subtype = 'number';
+    } else if (typeof value === 'boolean') {
+      subtype = 'boolean';
+    }
+
+    return {
+      key,
+      type: 'primitive',
+      subtype,
+      value,
+      isNew: false
+    };
+  });
+}
+
+function metadataArrayToObject(metadata: IFlagMetadata[]): Record<string, any> {
+  return metadata.reduce(
+    (acc, { key, value }) => {
+      if (key) {
+        // Only include entries with non-empty keys
+        acc[key] = value;
+      }
+      return acc;
+    },
+    {} as Record<string, any>
+  );
+}
+
+export interface MetadataFormProps {
+  metadata?: Record<string, any>;
+  onChange: (metadata: Record<string, any>) => void;
+  disabled?: boolean;
+  onErrorChange?: (hasErrors: boolean) => void;
+}
+
+export function MetadataForm({
+  metadata = {},
+  onChange,
+  disabled = false,
+  onErrorChange
+}: MetadataFormProps): JSX.Element {
+  const [entries, setEntries] = useState<IFlagMetadata[]>(
+    objectToMetadataArray(metadata)
+  );
+  const [errors, setErrors] = useState<Record<number, Record<string, string>>>(
+    {}
+  );
+
+  useEffect(() => {
+    const hasErrors = Object.keys(errors).length > 0;
+    onErrorChange?.(hasErrors);
+  }, [errors, onErrorChange]);
+
+  const validateEntry = async (
+    entry: IFlagMetadata,
+    index: number,
+    allEntries: IFlagMetadata[]
+  ): Promise<boolean> => {
+    try {
+      // First check for duplicate keys
+      const duplicateKey = allEntries.some(
+        (e, i) => i !== index && e.key === entry.key && entry.key !== ''
+      );
+
+      if (duplicateKey) {
+        const newErrors = { ...errors };
+        newErrors[index] = {
+          ...newErrors[index],
+          key: 'Key must be unique'
+        };
+        setErrors(newErrors);
+        return false;
+      }
+
+      // Then proceed with the existing validation
+      await metadataValidationSchema.validate(entry, { abortEarly: false });
+      const newErrors = { ...errors };
+      delete newErrors[index];
+      setErrors(newErrors);
+      return true;
+    } catch (err) {
+      if (err instanceof Yup.ValidationError) {
+        const newErrors = { ...errors };
+        newErrors[index] = err.inner.reduce(
+          (acc, curr) => {
+            if (curr.path) {
+              acc[curr.path] = curr.message;
+            }
+            return acc;
+          },
+          {} as Record<string, string>
+        );
+        setErrors(newErrors);
+      }
+      return false;
+    }
+  };
+
+  const getPrimitiveType = (value: any): 'string' | 'number' | 'boolean' =>
+    typeof value === 'number'
+      ? 'number'
+      : typeof value === 'boolean'
+        ? 'boolean'
+        : 'string';
+
+  const handleMetadataChange = (newEntries: IFlagMetadata[]) => {
+    setEntries(newEntries);
+    onChange(metadataArrayToObject(newEntries));
+  };
+
+  const handlePrimitiveTypeChange = (
+    index: number,
+    type: 'string' | 'number' | 'boolean'
+  ) => {
+    const entry = entries[index];
+    let newValue: any;
+
+    switch (type) {
+      case 'number':
+        newValue = !isNaN(Number(entry.value)) ? Number(entry.value) : 0;
+        break;
+      case 'boolean':
+        newValue = Boolean(entry.value);
+        break;
+      case 'string':
+        newValue = String(entry.value);
+        break;
+      default:
+        newValue = entry.value;
+    }
+
+    const newEntries = [...entries];
+    newEntries[index] = {
+      ...entry,
+      subtype: type,
+      value: newValue
+    };
+
+    setEntries(newEntries);
+    handleMetadataChange(newEntries);
+  };
+
+  const handleAdd = () => {
+    const newEntries = [
+      ...entries,
+      {
+        key: '',
+        value: '',
+        type: 'primitive',
+        subtype: 'string',
+        isNew: true
+      } as IFlagMetadata
+    ];
+    setEntries(newEntries);
+    handleMetadataChange(newEntries);
+  };
+
+  const handleRemove = (index: number) => {
+    const newEntries = entries.filter((_, i) => i !== index);
+    const newErrors = { ...errors };
+    delete newErrors[index];
+    setErrors(newErrors);
+    setEntries(newEntries);
+    handleMetadataChange(newEntries);
+  };
+
+  const handleChange = async (
+    index: number,
+    field: keyof IFlagMetadata,
+    value: unknown
+  ): Promise<void> => {
+    const newEntries = [...entries];
+    const entry = newEntries[index];
+
+    if (field === 'key' && typeof value === 'string') {
+      const formattedKey = stringAsKey(value);
+      newEntries[index] = {
+        ...entry,
+        key: formattedKey
+      };
+    } else if (field === 'type' && typeof value === 'string') {
+      const currentValue = entry.value;
+      let newValue: any = null;
+
+      if (value === 'object') {
+        newValue =
+          typeof currentValue === 'object' && !Array.isArray(currentValue)
+            ? currentValue
+            : {};
+      } else if (value === 'array') {
+        newValue = Array.isArray(currentValue) ? currentValue : [];
+      } else {
+        newValue =
+          Array.isArray(currentValue) || typeof currentValue === 'object'
+            ? ''
+            : currentValue;
+      }
+
+      newEntries[index] = {
+        ...entry,
+        type: value as 'primitive' | 'object' | 'array',
+        value: newValue
+      };
+    } else if (field === 'value') {
+      let validValue: any;
+      if (entry.type === 'primitive') {
+        const primitiveType = getPrimitiveType(entry.value);
+        if (typeof value === 'string') {
+          if (primitiveType === 'string') {
+            validValue = value;
+          } else if (primitiveType === 'boolean') {
+            validValue = value.toLowerCase() === 'true';
+          } else if (primitiveType === 'number') {
+            validValue = !isNaN(Number(value)) ? Number(value) : 0;
+          }
+        } else {
+          validValue = value;
+        }
+      } else {
+        validValue = typeof value === 'object' ? value : null;
+      }
+
+      newEntries[index] = {
+        ...entry,
+        value: validValue
+      };
+    }
+
+    setEntries(newEntries);
+    await validateEntry(newEntries[index], index, newEntries);
+    handleMetadataChange(newEntries);
+  };
+
+  const renderValueInput = (entry: IFlagMetadata, index: number) => {
+    const error = errors[index]?.value;
+
+    switch (entry.type) {
+      case 'array':
+        const arrayValue = Array.isArray(entry.value)
+          ? JSON.stringify(entry.value)
+          : '[]';
+        return (
+          <JsonEditor
+            id={`metadata-value-${index}`}
+            value={arrayValue}
+            setValue={(v) => {
+              try {
+                const parsed = JSON.parse(v);
+                if (Array.isArray(parsed)) {
+                  handleChange(index, 'value', parsed);
+                } else {
+                  console.warn('Invalid array format:', parsed);
+                }
+              } catch (e) {
+                console.warn('Invalid JSON:', e);
+              }
+            }}
+            disabled={disabled || !entry.isNew}
+            strict={false}
+            height="20vh"
+          />
+        );
+      case 'object':
+        const value =
+          typeof entry.value === 'object'
+            ? JSON.stringify(entry.value)
+            : entry.value;
+        return (
+          <JsonEditor
+            id={`metadata-value-${index}`}
+            value={value}
+            setValue={(v) => {
+              try {
+                const parsed = JSON.parse(v);
+                if (typeof parsed === 'object' && !Array.isArray(parsed)) {
+                  handleChange(index, 'value', parsed);
+                } else {
+                  console.warn('Invalid object format:', parsed);
+                }
+              } catch (e) {
+                console.warn('Invalid JSON:', e);
+              }
+            }}
+            disabled={disabled || !entry.isNew}
+            height="20vh"
+            data-testid={`metadata-value-${index}`}
+            strict={false}
+          />
+        );
+      case 'primitive':
+        return (
+          <div className="flex gap-2">
+            {entry.isNew && (
+              <Select
+                value={entry.subtype || 'string'}
+                onValueChange={(type) =>
+                  handlePrimitiveTypeChange(
+                    index,
+                    type as 'string' | 'number' | 'boolean'
+                  )
+                }
+                disabled={disabled}
+                data-testid={`metadata-subtype-${index}`}
+              >
+                <SelectTrigger className="w-24">
+                  <SelectValue placeholder="Type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="string">String</SelectItem>
+                  <SelectItem value="number">Number</SelectItem>
+                  <SelectItem value="boolean">Boolean</SelectItem>
+                </SelectContent>
+              </Select>
+            )}
+            {entry.subtype === 'boolean' ? (
+              <Select
+                value={String(entry.value)}
+                onValueChange={(v) =>
+                  handleChange(index, 'value', v === 'true')
+                }
+                disabled={disabled || !entry.isNew}
+                data-testid={`metadata-value-${index}`}
+              >
+                <SelectTrigger className="flex-1 disabled:opacity-75">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="true">True</SelectItem>
+                  <SelectItem value="false">False</SelectItem>
+                </SelectContent>
+              </Select>
+            ) : (
+              <Input
+                id={`metadata-value-${index}`}
+                name={`metadata-value-${index}`}
+                type={entry.subtype === 'number' ? 'number' : 'text'}
+                value={entry.value?.toString() ?? ''}
+                onChange={(e) => handleChange(index, 'value', e.target.value)}
+                className={cls(
+                  'flex-1 disabled:opacity-75',
+                  error ? 'border-red-500' : ''
+                )}
+                aria-invalid={!!error}
+                aria-errormessage={`value-error-${index}`}
+                disabled={disabled || !entry.isNew}
+                data-testid={`metadata-value-${index}`}
+              />
+            )}
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {entries.map((entry, index) => {
+        const keyError = errors[index]?.key;
+        const typeError = errors[index]?.type;
+
+        return (
+          <div key={index} className="flex items-start gap-4">
+            <div>
+              <Input
+                id={`metadata-key-${index}`}
+                name={`metadata-key-${index}`}
+                type="text"
+                value={entry.key}
+                onChange={(e) => handleChange(index, 'key', e.target.value)}
+                placeholder="Key"
+                className={cls(
+                  'w-48 disabled:opacity-75',
+                  keyError ? 'border-red-500' : ''
+                )}
+                aria-invalid={!!keyError}
+                aria-errormessage={`key-error-${index}`}
+                disabled={disabled || !entry.isNew}
+                data-testid={`metadata-key-${index}`}
+              />
+              {keyError && (
+                <p
+                  className="mt-1 text-sm text-red-500"
+                  id={`key-error-${index}`}
+                >
+                  {keyError}
+                </p>
+              )}
+            </div>
+
+            {entry.isNew && (
+              <div className="w-32">
+                <Select
+                  value={entry.type}
+                  onValueChange={(value) => handleChange(index, 'type', value)}
+                  disabled={disabled}
+                >
+                  <SelectTrigger
+                    className={cls('w-full', typeError ? 'border-red-500' : '')}
+                    aria-invalid={!!typeError}
+                    aria-errormessage={`type-error-${index}`}
+                    data-testid={`metadata-type-${index}`}
+                  >
+                    <SelectValue placeholder="Type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="primitive">Primitive</SelectItem>
+                    <SelectItem value="object">Object</SelectItem>
+                    <SelectItem value="array">Array</SelectItem>
+                  </SelectContent>
+                </Select>
+                {typeError && (
+                  <p
+                    className="mt-1 text-sm text-red-500"
+                    id={`type-error-${index}`}
+                  >
+                    {typeError}
+                  </p>
+                )}
+              </div>
+            )}
+
+            <div className="flex-1">{renderValueInput(entry, index)}</div>
+
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => handleRemove(index)}
+              disabled={disabled}
+              aria-label="Remove metadata entry"
+            >
+              <TrashIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
+            </Button>
+          </div>
+        );
+      })}
+
+      <Button
+        type="button"
+        variant="ghost"
+        onClick={handleAdd}
+        disabled={disabled}
+        className="w-full"
+      >
+        <PlusIcon className="mr-2 h-5 w-5" />
+        Add Metadata
+      </Button>
+    </div>
+  );
+}
diff --git a/ui/src/components/flags/forms/MetadataFormErrorBoundary.tsx b/ui/src/components/flags/forms/MetadataFormErrorBoundary.tsx
new file mode 100644
index 0000000000..ea7de4dd8d
--- /dev/null
+++ b/ui/src/components/flags/forms/MetadataFormErrorBoundary.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { JsonEditor } from '~/components/json/JsonEditor';
+
+interface MetadataFormErrorBoundaryProps {
+  children: React.ReactNode;
+  metadata?: Record<string, any>;
+  onChange: (metadata: Record<string, any>) => void;
+  disabled?: boolean;
+}
+
+class MetadataFormErrorBoundary extends React.Component<
+  MetadataFormErrorBoundaryProps,
+  { hasError: boolean }
+> {
+  constructor(props: MetadataFormErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(_: Error) {
+    return { hasError: true };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <JsonEditor
+          id="metadata-fallback"
+          value={JSON.stringify(this.props.metadata, null, 2)}
+          setValue={(value) => {
+            try {
+              const parsed = JSON.parse(value);
+              this.props.onChange(parsed);
+            } catch (e) {
+              console.warn('Invalid JSON:', e);
+            }
+          }}
+          disabled={this.props.disabled}
+          strict={false}
+          height="20vh"
+          data-testid="metadata-fallback"
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default MetadataFormErrorBoundary;
diff --git a/ui/src/components/console/ContextEditor.module.css b/ui/src/components/json/JsonEditor.module.css
similarity index 75%
rename from ui/src/components/console/ContextEditor.module.css
rename to ui/src/components/json/JsonEditor.module.css
index fcfbbd6d83..28821704c7 100644
--- a/ui/src/components/console/ContextEditor.module.css
+++ b/ui/src/components/json/JsonEditor.module.css
@@ -1,4 +1,4 @@
-.ContextEditor {
+.JsonEditor {
   width: 100%;
   min-height: 50vh;
   height: 100%;
diff --git a/ui/src/components/console/ContextEditor.tsx b/ui/src/components/json/JsonEditor.tsx
similarity index 54%
rename from ui/src/components/console/ContextEditor.tsx
rename to ui/src/components/json/JsonEditor.tsx
index a05da89f80..1668eeaae2 100644
--- a/ui/src/components/console/ContextEditor.tsx
+++ b/ui/src/components/json/JsonEditor.tsx
@@ -1,19 +1,31 @@
 import { json } from '@codemirror/lang-json';
-import { linter, lintGutter } from '@codemirror/lint';
+import { linter } from '@codemirror/lint';
 import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
 import CodeMirror from '@uiw/react-codemirror';
 import React from 'react';
 import { parseLinter } from './lint';
 
-type ContextEditorProps = {
+type JsonEditorProps = {
   id: string;
+  value: string;
   setValue(value: string): void;
+  disabled?: boolean;
+  strict?: boolean;
+  height?: string;
+  'data-testid'?: string;
 };
 
-export const ContextEditor: React.FC<ContextEditorProps> = (
-  props: ContextEditorProps
+export const JsonEditor: React.FC<JsonEditorProps> = (
+  props: JsonEditorProps
 ) => {
-  const { setValue } = props;
+  const {
+    value = '{}',
+    setValue,
+    disabled = false,
+    strict = true,
+    height = '50vh',
+    'data-testid': dataTestId
+  } = props;
   const onChange = React.useCallback(
     (val: any, _: any) => {
       setValue(val);
@@ -22,10 +34,11 @@ export const ContextEditor: React.FC<ContextEditorProps> = (
   );
   return (
     <CodeMirror
-      value="{}"
-      height="50vh"
-      extensions={[json(), lintGutter(), linter(parseLinter())]}
+      value={value}
+      height={height}
+      extensions={[json(), linter(parseLinter(strict))]}
       onChange={onChange}
+      readOnly={disabled}
       basicSetup={{
         lineNumbers: false,
         foldGutter: false,
@@ -34,6 +47,7 @@ export const ContextEditor: React.FC<ContextEditorProps> = (
         highlightActiveLine: true
       }}
       theme={tokyoNight}
+      data-testid={dataTestId}
     />
   );
 };
diff --git a/ui/src/components/json/lint.ts b/ui/src/components/json/lint.ts
new file mode 100644
index 0000000000..c717caa35c
--- /dev/null
+++ b/ui/src/components/json/lint.ts
@@ -0,0 +1,80 @@
+import { Diagnostic } from '@codemirror/lint';
+import { EditorView } from '@codemirror/view';
+import { Text } from '@codemirror/state';
+import { SearchCursor } from '@codemirror/search';
+
+function getJsonErrorPosition(error: SyntaxError, doc: Text): number {
+  let m;
+  if ((m = error.message.match(/at position (\d+)/)))
+    return Math.min(+m[1], doc.length);
+  if ((m = error.message.match(/at line (\d+) column (\d+)/)))
+    return Math.min(doc.line(+m[1]).from + +m[2] - 1, doc.length);
+  return 0;
+}
+
+export const parseLinter =
+  (strict: boolean = true) =>
+  (view: EditorView): Diagnostic[] => {
+    const doc = view.state.doc;
+    try {
+      const data = JSON.parse(doc.toString());
+      if (strict && Array.isArray(data)) {
+        return [
+          {
+            from: 0,
+            message: 'JSON: unexpected array',
+            severity: 'error',
+            to: doc.length
+          }
+        ];
+      }
+      if (!Array.isArray(data) && typeof data !== 'object') {
+        return [
+          {
+            from: 0,
+            message: 'JSON: unexpected type',
+            severity: 'error',
+            to: doc.length
+          }
+        ];
+      }
+      if (!Array.isArray(data)) {
+        for (const [key, value] of Object.entries(data)) {
+          if (strict && typeof value !== 'string') {
+            const keyCursor = new SearchCursor(doc, `"${key}"`);
+            const keyMatch = keyCursor.next();
+            if (!keyMatch?.value) continue;
+
+            const valueCursor = new SearchCursor(
+              doc,
+              JSON.stringify(value),
+              keyMatch.value.to
+            );
+            const valueMatch = valueCursor.next();
+            if (!valueMatch?.value) continue;
+
+            return [
+              {
+                from: valueMatch.value.from,
+                message: 'JSON: expected string value',
+                severity: 'error',
+                to: valueMatch.value.to
+              }
+            ];
+          }
+        }
+      }
+    } catch (e) {
+      if (!(e instanceof SyntaxError)) throw e;
+      const pos = getJsonErrorPosition(e, doc);
+      return [
+        {
+          from: pos,
+          message: 'JSON: unexpected keyword',
+          severity: 'error',
+          to: pos
+        }
+      ];
+    }
+    return [];
+  };
diff --git a/ui/src/types/Flag.ts b/ui/src/types/Flag.ts
index a14d671ca3..492c835aa0 100644
--- a/ui/src/types/Flag.ts
+++ b/ui/src/types/Flag.ts
@@ -17,6 +17,15 @@ export function flagTypeToLabel(flagType: FlagType): string {
       return 'Unknown';
   }
 }
+
+export interface IFlagMetadata {
+  key: string;
+  value: any;
+  type: 'primitive' | 'object' | 'array';
+  subtype?: 'string' | 'number' | 'boolean';
+  isNew?: boolean;
+}
+
 export interface IFlagBase {
   key: string;
   type: FlagType;
@@ -24,6 +33,7 @@ export interface IFlagBase {
   enabled: boolean;
   description: string;
   defaultVariant?: IVariant;
+  metadata?: Record<string, any>;
 }
 
 export interface IFlag extends IFlagBase {
diff --git a/ui/tests/flags.spec.ts b/ui/tests/flags.spec.ts
index 6090a2f84b..f22180cdff 100644
--- a/ui/tests/flags.spec.ts
+++ b/ui/tests/flags.spec.ts
@@ -121,7 +121,6 @@ test.describe('Flags', () => {
 
     // verify flag was copied
     await page.getByRole('link', { name: 'test-flag' }).click();
-    await expect(page.getByText('Test Flag')).toBeVisible();
 
     // verify variants were copied
     await expect(
@@ -131,6 +130,45 @@ test.describe('Flags', () => {
       page.getByRole('cell', { name: 'firefox', exact: true })
     ).toBeVisible();
   });
+
+  test('can create flag with metadata', async ({ page }) => {
+    await page.getByRole('button', { name: 'New Flag' }).click();
+    await page.getByLabel('Name').fill('Metadata Flag');
+    await page.getByRole('button', { name: 'Add Metadata' }).click();
+    await page.getByTestId('metadata-key-0').fill('foo');
+    await page.getByTestId('metadata-value-0').fill('bar');
+    await page.getByRole('button', { name: 'Add Metadata' }).click();
+    await page.getByTestId('metadata-key-1').fill('baz');
+    await page.getByTestId('metadata-type-1').click();
+    await page.getByLabel('Object').getByText('Object').click();
+    await page
+      .getByTestId('metadata-value-1')
+      .getByRole('textbox')
+      .fill('{"foo":"bar","baz":{"boz":"1"}}');
+    await page.getByRole('button', { name: 'Create' }).click();
+    await expect(page.getByText('Successfully created flag')).toBeVisible();
+    await expect(
+      page.getByTestId('metadata-value-0').getByRole('textbox')
+    ).toHaveText('{"baz":{"boz":"1"},"foo":"bar"}');
+    await expect(page.getByTestId('metadata-value-1')).toBeDisabled();
+  });
+
+  test('can delete flag metadata', async ({ page }) => {
+    await page.getByRole('link', { name: 'metadata-flag' }).click();
+    await page.getByLabel('Remove metadata entry').first().click();
+    await page.getByRole('button', { name: 'Update' }).click();
+    await expect(page.getByText('Successfully updated flag')).toBeVisible();
+    await expect(page.getByTestId('metadata-value-0')).toBeDisabled();
+  });
+
+  test('can not update flag with duplicate metadata keys', async ({ page }) => {
+    await page.getByRole('link', { name: 'metadata-flag' }).click();
+    await page.getByRole('button', { name: 'Add Metadata' }).click();
+    await page.getByTestId('metadata-key-1').fill('foo');
+    await page.getByTestId('metadata-value-1').fill('bar');
+    await expect(page.getByText('Key must be unique')).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Update' })).toBeDisabled();
+  });
 });
 
 test.describe('Flags - Read Only', () => {
@@ -187,4 +225,11 @@ test.describe('Flags - Read Only', () => {
       page.getByRole('menuitem', { name: 'Copy to Namespace' })
     ).toBeDisabled();
   });
+
+  test('can not edit metadata', async ({ page }) => {
+    await page.getByRole('link', { name: 'metadata-flag' }).click();
+    await expect(
+      page.getByRole('button', { name: 'Add Metadata' })
+    ).toBeDisabled();
+  });
 });