diff --git a/src/components/Pega_Extensions_JsonEditor/demo.stories.tsx b/src/components/Pega_Extensions_JsonEditor/demo.stories.tsx
index 3bff141b..60deb33f 100644
--- a/src/components/Pega_Extensions_JsonEditor/demo.stories.tsx
+++ b/src/components/Pega_Extensions_JsonEditor/demo.stories.tsx
@@ -1,31 +1,12 @@
 import { useState } from 'react';
-import type { Meta, StoryFn } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { configProps, stateProps } from './mock';
-import { PegaExtensionsJsonEditor } from './index';
+import { PegaExtensionsJsonEditor, type PegaExtensionsJsonEditorProps } from './index';
 
-const meta: Meta<typeof PegaExtensionsJsonEditor> = {
-  title: 'Fields/JSON editor',
-  component: PegaExtensionsJsonEditor,
-  excludeStories: /.*Data$/,
-  argTypes: {
-    getPConnect: {
-      table: {
-        disable: true,
-      },
-    },
-    displayMode: {
-      options: ['', 'DISPLAY_ONLY', 'LABELS_LEFT'],
-      control: {
-        type: 'select',
-      },
-    },
-  },
-};
-
-export default meta;
+type StoryArgs = Omit<PegaExtensionsJsonEditorProps, 'getPConnect'>;
 
-export const BaseJsonEditor: StoryFn<typeof PegaExtensionsJsonEditor> = (args) => {
+const JsonEditorStory = (args: StoryArgs) => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -43,17 +24,59 @@ export const BaseJsonEditor: StoryFn<typeof PegaExtensionsJsonEditor> = (args) =
   return <PegaExtensionsJsonEditor {...props} {...args} />;
 };
 
-BaseJsonEditor.args = {
-  label: configProps.label,
-  value: configProps.value,
-  helperText: configProps.helperText,
-  placeholder: configProps.placeholder,
-  testId: configProps.testId,
-  readOnly: configProps.readOnly,
-  disabled: configProps.disabled,
-  required: configProps.required,
-  status: configProps.status,
-  hideLabel: configProps.hideLabel,
-  displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+const meta = {
+  title: 'Fields/JSON editor',
+  component: JsonEditorStory,
+  excludeStories: /.*Data$/,
+  argTypes: {
+    displayMode: {
+      options: ['', 'DISPLAY_ONLY', 'LABELS_LEFT'],
+      control: {
+        type: 'select',
+      },
+    },
+    status: {
+      options: [undefined, 'error', 'success', 'warning', 'pending'],
+      control: {
+        type: 'select',
+      },
+    },
+    indent: {
+      control: {
+        type: 'number',
+        min: 0,
+        step: 1,
+      },
+    },
+  },
+} satisfies Meta<StoryArgs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const BaseJsonEditor: Story = {
+  render: (args) => <JsonEditorStory {...args} />,
+  args: {
+    label: configProps.label,
+    value: configProps.value,
+    helperText: configProps.helperText,
+    placeholder: configProps.placeholder,
+    testId: configProps.testId,
+    readOnly: configProps.readOnly,
+    disabled: configProps.disabled,
+    required: configProps.required,
+    status: configProps.status,
+    hideLabel: configProps.hideLabel,
+    displayMode: configProps.displayMode,
+    validatemessage: configProps.validatemessage,
+    indent: 2,
+    showValidate: true,
+    showFormat: true,
+    showMinify: true,
+    showCopy: true,
+    showClear: true,
+    showCharacterCount: true,
+    showLineCount: true,
+  },
 };
diff --git a/src/components/Pega_Extensions_JsonEditor/demo.test.tsx b/src/components/Pega_Extensions_JsonEditor/demo.test.tsx
index 4d974b67..078ddbbb 100644
--- a/src/components/Pega_Extensions_JsonEditor/demo.test.tsx
+++ b/src/components/Pega_Extensions_JsonEditor/demo.test.tsx
@@ -11,6 +11,7 @@ test('renders JsonEditor', async () => {
   render(<BaseJsonEditor />);
 
   expect(await screen.findByRole('textbox', { name: 'JSON value' })).toHaveValue(configProps.value);
+  expect(screen.getByRole('textbox', { name: 'JSON value' })).toHaveAttribute('spellcheck', 'false');
   expect(screen.getByRole('button', { name: 'Format JSON' })).toBeVisible();
   expect(screen.getByRole('button', { name: 'Validate JSON' })).toContainElement(
     screen.getByTestId('JsonEditor-12345678:action:validate').querySelector('[data-icon-name="check"]'),
diff --git a/src/components/Pega_Extensions_JsonEditor/index.tsx b/src/components/Pega_Extensions_JsonEditor/index.tsx
index 618f748a..7db1100b 100644
--- a/src/components/Pega_Extensions_JsonEditor/index.tsx
+++ b/src/components/Pega_Extensions_JsonEditor/index.tsx
@@ -106,6 +106,7 @@ export function PegaExtensionsJsonEditor(props: PegaExtensionsJsonEditorProps) {
   const [scrollOffset, setScrollOffset] = useState({ top: 0, left: 0 });
   const copyStateTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const lineCount = useMemo(() => getLineCount(draft), [draft]);
+  const lineNumberWidth = Math.max(3.5, String(lineCount).length + 2);
   const highlightedDraft = useMemo(() => highlightJson(draft), [draft]);
   const lineNumbers = useMemo(
     () => Array.from({ length: Math.max(1, lineCount) }, (_, index) => index + 1),
@@ -185,6 +186,7 @@ export function PegaExtensionsJsonEditor(props: PegaExtensionsJsonEditorProps) {
   };
 
   const errorMessage = validation.message ? localize(validation.message) : validatemessage;
+  const hasInfo = Boolean(errorMessage || helperText);
   const errorLocation =
     validation.errorLine && validation.errorColumn
       ? `${localize('Line')} ${validation.errorLine}, ${localize('column')} ${validation.errorColumn}`
@@ -284,14 +286,27 @@ export function PegaExtensionsJsonEditor(props: PegaExtensionsJsonEditorProps) {
           )}
         </StyledJsonEditorToolbar>
       )}
-      <StyledJsonEditorSurface>
-        <StyledJsonEditorHighlight $labelHidden={hideLabel} aria-hidden='true' data-testid={highlightTestId}>
-          <StyledJsonEditorLineNumbers $scrollTop={scrollOffset.top} data-testid={lineNumbersTestId}>
+      <StyledJsonEditorSurface $lineNumberWidth={lineNumberWidth}>
+        <StyledJsonEditorHighlight
+          $hasInfo={hasInfo}
+          $labelHidden={hideLabel}
+          aria-hidden='true'
+          data-testid={highlightTestId}
+        >
+          <StyledJsonEditorLineNumbers
+            $lineNumberWidth={lineNumberWidth}
+            $scrollTop={scrollOffset.top}
+            data-testid={lineNumbersTestId}
+          >
             {lineNumbers.map((lineNumber) => (
               <span key={lineNumber}>{lineNumber}</span>
             ))}
           </StyledJsonEditorLineNumbers>
-          <StyledJsonEditorCode $scrollTop={scrollOffset.top} $scrollLeft={scrollOffset.left}>
+          <StyledJsonEditorCode
+            $lineNumberWidth={lineNumberWidth}
+            $scrollTop={scrollOffset.top}
+            $scrollLeft={scrollOffset.left}
+          >
             {highlightedDraft.map(({ className, key, text }) =>
               className ? (
                 <span className={className} key={key}>
@@ -316,6 +331,7 @@ export function PegaExtensionsJsonEditor(props: PegaExtensionsJsonEditorProps) {
           onChange={handleOnChange}
           onKeyDown={handleEditorKeyDown}
           onScroll={handleEditorScroll}
+          spellCheck={false}
           testId={editorTestId}
         />
       </StyledJsonEditorSurface>
diff --git a/src/components/Pega_Extensions_JsonEditor/styles.ts b/src/components/Pega_Extensions_JsonEditor/styles.ts
index b48d7d7e..805a8be7 100644
--- a/src/components/Pega_Extensions_JsonEditor/styles.ts
+++ b/src/components/Pega_Extensions_JsonEditor/styles.ts
@@ -13,7 +13,7 @@ const StyledJsonEditorWrapper = styled.div(() => {
   `;
 });
 
-export const StyledJsonEditorSurface = styled.div(({ theme }) => {
+export const StyledJsonEditorSurface = styled.div<{ $lineNumberWidth: number }>(({ theme, $lineNumberWidth }) => {
   return css`
     position: relative;
     width: 100%;
@@ -26,7 +26,7 @@ export const StyledJsonEditorSurface = styled.div(({ theme }) => {
       caret-color: ${theme.base.palette.interactive};
       font-family: monospace;
       line-height: 1.5;
-      padding-inline-start: calc(${theme.base.spacing} * 4);
+      padding-inline-start: calc(${theme.base.spacing} * ${$lineNumberWidth});
 
       &::placeholder {
         color: ${theme.base.palette['foreground-color']};
@@ -38,74 +38,83 @@ export const StyledJsonEditorSurface = styled.div(({ theme }) => {
 
 StyledJsonEditorSurface.defaultProps = defaultThemeProp;
 
-export const StyledJsonEditorHighlight = styled.div<{ $labelHidden: boolean }>(({ theme, $labelHidden }) => {
-  return css`
-    position: absolute;
-    z-index: 1;
-    inset-inline: 0;
-    inset-block-end: 0;
-    inset-block-start: ${$labelHidden ? '0' : `calc(${theme.base.spacing} * 3)`};
-    overflow: hidden;
-    pointer-events: none;
-    color: ${theme.base.palette['foreground-color']};
-    font-family: monospace;
-    line-height: 1.5;
-    white-space: pre;
+export const StyledJsonEditorHighlight = styled.div<{ $hasInfo: boolean; $labelHidden: boolean }>(
+  ({ theme, $hasInfo, $labelHidden }) => {
+    return css`
+      position: absolute;
+      z-index: 1;
+      inset-inline: 0;
+      inset-block-end: ${$hasInfo ? `calc(${theme.base.spacing} * 2)` : '0'};
+      inset-block-start: ${$labelHidden ? '0' : `calc(${theme.base.spacing} * 3)`};
+      overflow: hidden;
+      pointer-events: none;
+      color: ${theme.base.palette['foreground-color']};
+      font-family: monospace;
+      line-height: 1.5;
+      white-space: pre;
 
-    .json-string {
-      color: ${theme.base.palette.pending};
-    }
+      .json-string {
+        color: ${theme.base.palette.pending};
+      }
 
-    .json-number {
-      color: ${theme.base.palette.success};
-    }
+      .json-number {
+        color: ${theme.base.palette.success};
+      }
 
-    .json-literal {
-      color: ${theme.base.palette.warn};
-    }
+      .json-literal {
+        color: ${theme.base.palette.warn};
+      }
 
-    .json-punctuation {
-      color: ${theme.base.palette.info};
-    }
-  `;
-});
+      .json-punctuation {
+        color: ${theme.base.palette.info};
+      }
+    `;
+  },
+);
 
 StyledJsonEditorHighlight.defaultProps = defaultThemeProp;
 
-export const StyledJsonEditorLineNumbers = styled.div<{ $scrollTop: number }>(({ theme, $scrollTop }) => {
-  return css`
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    width: calc(${theme.base.spacing} * 3.5);
-    padding: ${theme.components['text-area'].padding};
-    box-sizing: border-box;
-    border-inline-end: 0.0625rem solid ${theme.base.palette['border-line']};
-    color: ${theme.base.palette['foreground-color']};
-    opacity: ${theme.base.transparency['transparent-2']};
-    text-align: end;
-    transform: translateY(-${$scrollTop}px);
-
-    span {
-      display: block;
-      line-height: 1.5;
-    }
-  `;
-});
+export const StyledJsonEditorLineNumbers = styled.div<{ $lineNumberWidth: number; $scrollTop: number }>(
+  ({ theme, $lineNumberWidth, $scrollTop }) => {
+    return css`
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      z-index: 1;
+      width: calc(${theme.base.spacing} * ${$lineNumberWidth});
+      padding: ${theme.components['text-area'].padding};
+      box-sizing: border-box;
+      border-inline-end: 0.0625rem solid ${theme.base.palette['border-line']};
+      background-color: ${theme.base.palette['app-background']};
+      color: ${theme.base.palette['foreground-color']};
+      text-align: end;
+      transform: translateY(-${$scrollTop}px);
+
+      span {
+        display: block;
+        line-height: 1.5;
+        opacity: ${theme.base.transparency['transparent-2']};
+      }
+    `;
+  },
+);
 
 StyledJsonEditorLineNumbers.defaultProps = defaultThemeProp;
 
 export const StyledJsonEditorCode = styled.code<{
+  $lineNumberWidth: number;
   $scrollTop: number;
   $scrollLeft: number;
-}>(({ theme, $scrollTop, $scrollLeft }) => {
+}>(({ theme, $lineNumberWidth, $scrollTop, $scrollLeft }) => {
   return css`
     position: absolute;
     inset-block-start: 0;
     inset-inline-start: 0;
     min-width: 100%;
     padding: ${theme.components['text-area'].padding};
-    padding-inline-start: calc(${theme.base.spacing} * 4);
+    padding-inline-start: calc(
+      ${theme.base.spacing} * ${$lineNumberWidth} + ${theme.components['form-control']['border-width']}
+    );
     box-sizing: border-box;
     transform: translate(-${$scrollLeft}px, -${$scrollTop}px);
   `;
@@ -201,6 +210,10 @@ export const StyledJsonEditorStatus = styled.span(({ theme }) => {
       color: ${theme.components['form-field'].error['status-color']};
     }
 
+    &[data-status='valid'] {
+      color: ${theme.base.colors.green['dark']};
+    }
+
     svg {
       width: 1em;
       height: 1em;