diff --git a/CHANGELOG.md b/CHANGELOG.md
index c048a1d..52935be 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Show deletion progress for buckets/entries with non-blocking deletion, [PR-156](https://github.com/reductstore/web-console/pull/156)
+- Use Monaco Editor for JSON query editor with syntax highlighting auto-completion, [PR-158](https://github.com/reductstore/web-console/issues/158)
 - Support for changing replication mode (enabled, paused, disabled), [PR-157](https://github.com/reductstore/web-console/pull/157)
 
 ## 1.12.1 - 2025-11-17
diff --git a/package-lock.json b/package-lock.json
index 2182159..eaa9a05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,14 +8,15 @@
       "name": "web-console",
       "version": "1.12.1",
       "dependencies": {
+        "@monaco-editor/react": "^4.7.0",
+        "@reductstore/reduct-query-monaco": "^1.0.1",
         "chart.js": "^4.5.0",
         "chartjs-adapter-dayjs-4": "^1.0.4",
         "chartjs-plugin-zoom": "^2.2.0",
-        "codemirror": "^5.65.18",
         "json5": "^2.2.3",
         "mime-types": "^3.0.1",
+        "monaco-editor": "^0.55.1",
         "react-chartjs-2": "^5.3.0",
-        "react-codemirror2": "^8.0.1",
         "zustand": "^4.5.6"
       },
       "devDependencies": {
@@ -3464,6 +3465,29 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz",
+      "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -3812,6 +3836,15 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@reductstore/reduct-query-monaco": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@reductstore/reduct-query-monaco/-/reduct-query-monaco-1.0.1.tgz",
+      "integrity": "sha512-f8bklEbuKuJJrS55v6Jh/gsprz6YiAd0lnjff/+yeeyJaGD64RMN0wYeMpt2dtp/BV4jINI647SoyzXfJP9iMA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "monaco-editor": ">=0.40.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4939,7 +4972,7 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/ws": {
       "version": "8.5.10",
@@ -7140,12 +7173,6 @@
         "node": ">= 4.0"
       }
     },
-    "node_modules/codemirror": {
-      "version": "5.65.18",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.18.tgz",
-      "integrity": "sha512-Gaz4gHnkbHMGgahNt3CA5HBk5lLQBqmD/pBgeB4kQU6OedZmqMBjlRF0LSrp2tJ4wlLNPm2FfaUd1pDy0mdlpA==",
-      "peer": true
-    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
@@ -8305,6 +8332,15 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/domutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
@@ -14472,6 +14508,18 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -14703,6 +14751,17 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
     "node_modules/moo": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
@@ -17856,15 +17915,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/react-codemirror2": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-8.0.1.tgz",
-      "integrity": "sha512-ZALowE5sGK1t66i0Fm1hoJLWT/iZHNjaAmcjwgYl9gyl2v1sqWwxzWHLmgq6K9KCk7p5+I+U3jMF1vsLaIkrmA==",
-      "peerDependencies": {
-        "codemirror": "5.x",
-        "react": ">=15.5 <=18.x"
-      }
-    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -18056,7 +18106,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
       "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
-      "dev": true,
       "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
@@ -18994,7 +19043,6 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
       "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -19488,6 +19536,12 @@
       "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
       "dev": true
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/static-eval": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
diff --git a/package.json b/package.json
index 448ff14..9345222 100644
--- a/package.json
+++ b/package.json
@@ -69,14 +69,15 @@
     ]
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "@reductstore/reduct-query-monaco": "^1.0.1",
     "chart.js": "^4.5.0",
     "chartjs-adapter-dayjs-4": "^1.0.4",
     "chartjs-plugin-zoom": "^2.2.0",
-    "codemirror": "^5.65.18",
     "json5": "^2.2.3",
     "mime-types": "^3.0.1",
+    "monaco-editor": "^0.55.1",
     "react-chartjs-2": "^5.3.0",
-    "react-codemirror2": "^8.0.1",
     "zustand": "^4.5.6"
   }
 }
diff --git a/src/App.css b/src/App.css
index 08c7f09..23a4ca0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,6 +3,11 @@
   --primary-bg: #231b49;
   --primary-fg: #cccccc;
   --primary-hover: #ffffff;
+
+  /* Input colors (Ant Design defaults) */
+  --input-border: #d9d9d9;
+  --input-focus: #231b49;
+  --input-error: #ff4d4f;
 }
 
 /* --- Menu Styles --- */
diff --git a/src/Components/JsonEditor/JsonQueryEditor.css b/src/Components/JsonEditor/JsonQueryEditor.css
new file mode 100644
index 0000000..810c693
--- /dev/null
+++ b/src/Components/JsonEditor/JsonQueryEditor.css
@@ -0,0 +1,114 @@
+.jsonQueryEditor {
+  border: 1px solid var(--input-border);
+  border-radius: 6px;
+  padding-top: 8px;
+  background: #ffffff;
+  overflow: visible;
+}
+
+.jsonQueryEditorContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.jsonQueryEditorToolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 8px;
+  border-top: 1px solid var(--input-border);
+  background: #fafafa;
+  border-radius: 0 0 6px 6px;
+}
+
+.jsonQueryEditorValidation {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #595959;
+  font-weight: 500;
+  flex: 1;
+  min-width: 0;
+  line-height: 1.3;
+}
+
+.jsonQueryEditorValidationMuted {
+  color: #8c8c8c;
+}
+
+.jsonQueryEditorValidationOk {
+  font-weight: 600;
+  color: #52c41a;
+}
+
+.jsonQueryEditorValidationWarning {
+  font-weight: 600;
+  color: #faad14;
+}
+
+.jsonQueryEditorValidationError {
+  font-weight: 600;
+  color: var(--input-error);
+}
+
+.jsonQueryEditorToolbarActions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.jsonQueryEditorBody {
+  flex: 1;
+  min-height: 0;
+}
+
+.jsonQueryEditorBody .monaco-editor {
+  border-radius: 6px;
+}
+
+.jsonQueryEditorBody .monaco-editor .margin {
+  border-radius: 6px;
+}
+
+.jsonQueryEditorBody .monaco-editor .overflow-guard {
+  border-radius: 6px;
+}
+
+.jsonQueryEditorPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  background: #fafafa;
+  color: #8c8c8c;
+  font-size: 12px;
+  text-align: center;
+  padding: 8px;
+}
+
+.jsonQueryEditorModal .ant-modal-content {
+  display: flex;
+  flex-direction: column;
+  height: 90vh;
+}
+
+.jsonQueryEditorModal .ant-modal-body {
+  flex: 1;
+  min-height: 0;
+  padding: 0;
+}
+
+.jsonQueryEditorModalContent {
+  height: 100%;
+}
+
+.jsonQueryEditor:focus-within {
+  border-color: var(--input-focus);
+}
+
+.jsonQueryEditor.hasError {
+  border-color: var(--input-error);
+}
diff --git a/src/Components/JsonEditor/JsonQueryEditor.test.tsx b/src/Components/JsonEditor/JsonQueryEditor.test.tsx
new file mode 100644
index 0000000..8f6caa0
--- /dev/null
+++ b/src/Components/JsonEditor/JsonQueryEditor.test.tsx
@@ -0,0 +1,105 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import type { Client } from "reduct-js";
+import { JsonQueryEditor } from "./JsonQueryEditor";
+import { mockJSDOM } from "../../Helpers/TestHelpers";
+
+jest.mock("@monaco-editor/react", () => ({
+  __esModule: true,
+  default: ({
+    value,
+    onChange,
+  }: {
+    value?: string;
+    onChange?: (value: string) => void;
+  }) => (
+    <textarea
+      data-testid="monaco-editor"
+      value={value}
+      onChange={(event) => onChange?.(event.target.value)}
+    />
+  ),
+}));
+
+jest.mock("monaco-editor", () => ({}));
+jest.mock("@reductstore/reduct-query-monaco", () => ({
+  getCompletionProvider: () => ({}),
+}));
+
+describe("JsonQueryEditor", () => {
+  beforeEach(() => {
+    mockJSDOM();
+  });
+
+  it("shows validation unavailable without validation context", () => {
+    render(
+      <JsonQueryEditor
+        value="{}"
+        onChange={() => {
+          /* */
+        }}
+      />,
+    );
+
+    expect(screen.getByText("Validation unavailable")).toBeInTheDocument();
+  });
+
+  it("forwards changes from the editor", () => {
+    const onChange = jest.fn();
+    render(<JsonQueryEditor value="{}" onChange={onChange} />);
+
+    fireEvent.change(screen.getByTestId("monaco-editor"), {
+      target: { value: '{"a":1}' },
+    });
+
+    expect(onChange).toHaveBeenCalledWith('{"a":1}');
+  });
+
+  it("disables format button when readOnly", () => {
+    render(
+      <JsonQueryEditor
+        value="{}"
+        onChange={() => {
+          /* */
+        }}
+        readOnly
+      />,
+    );
+
+    expect(screen.getByLabelText("Format JSON")).toBeDisabled();
+  });
+
+  it("prompts for bucket when validation context has no bucket", () => {
+    const client = {} as Client;
+    render(
+      <JsonQueryEditor
+        value="{}"
+        onChange={() => {
+          /* */
+        }}
+        validationContext={{ client, bucket: "" }}
+      />,
+    );
+
+    expect(
+      screen.getByText("Select bucket to validate condition"),
+    ).toBeInTheDocument();
+  });
+
+  it("shows the expanded placeholder after clicking expand", () => {
+    render(
+      <JsonQueryEditor
+        value="{}"
+        onChange={() => {
+          /* */
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("Expand editor"));
+
+    expect(
+      screen.getByText("Editing in expanded JSON editor"),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/Components/JsonEditor/JsonQueryEditor.tsx b/src/Components/JsonEditor/JsonQueryEditor.tsx
new file mode 100644
index 0000000..a979751
--- /dev/null
+++ b/src/Components/JsonEditor/JsonQueryEditor.tsx
@@ -0,0 +1,400 @@
+import React, { useEffect, useRef, useState } from "react";
+import Editor, { OnMount, Monaco } from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+import { getCompletionProvider } from "@reductstore/reduct-query-monaco";
+import { Button, Modal, Tooltip } from "antd";
+import { APIError, Client, QueryOptions } from "reduct-js";
+import {
+  CompressOutlined,
+  ExpandOutlined,
+  FormatPainterOutlined,
+} from "@ant-design/icons";
+import { processWhenCondition } from "../../Helpers/json5Utils";
+import "./JsonQueryEditor.css";
+
+enum ValidationStatus {
+  Idle = "idle",
+  Loading = "loading",
+  Valid = "valid",
+  Warning = "warning",
+  Invalid = "invalid",
+}
+
+interface ValidationContext {
+  client: Client;
+  bucket?: string;
+  entry?: string;
+  entries?: string[];
+  intervalValue?: string | null;
+}
+
+interface JsonQueryEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  height?: number | string;
+  error?: string;
+  readOnly?: boolean;
+  validationContext?: ValidationContext;
+}
+
+// Global flag to track if completion provider has been registered
+let isCompletionProviderRegistered = false;
+
+type JsonDefaults = {
+  setDiagnosticsOptions: (options: { validate?: boolean }) => void;
+  setModeConfiguration: (modeConfiguration: {
+    completionItems?: boolean;
+    hovers?: boolean;
+    documentSymbols?: boolean;
+    documentFormattingEdits?: boolean;
+    documentRangeFormattingEdits?: boolean;
+    tokens?: boolean;
+    colors?: boolean;
+    foldingRanges?: boolean;
+    diagnostics?: boolean;
+    selectionRanges?: boolean;
+  }) => void;
+};
+
+export function JsonQueryEditor({
+  value,
+  onChange,
+  height = 120,
+  error,
+  readOnly = false,
+  validationContext,
+}: JsonQueryEditorProps) {
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [validationStatus, setValidationStatus] = useState<ValidationStatus>(
+    ValidationStatus.Idle,
+  );
+  const [validationError, setValidationError] = useState<string | undefined>(
+    undefined,
+  );
+  const validationRequestIdRef = useRef(0);
+
+  const validationClient = validationContext?.client;
+  const validationBucket = validationContext?.bucket?.trim() || "";
+  const validationEntry = validationContext?.entry?.trim() || "";
+  const validationEntries = (validationContext?.entries ?? [])
+    .map((entry) => entry.trim())
+    .filter((entry) => entry.length > 0);
+  const validationEntriesKey = validationEntries.join("|");
+  const validationIntervalValue = validationContext?.intervalValue ?? undefined;
+
+  const handleEditorMount: OnMount = (editor, monacoInstance) => {
+    editorRef.current = editor;
+  };
+
+  const handleBeforeMount = (monacoInstance: Monaco) => {
+    if (!isCompletionProviderRegistered) {
+      const jsonDefaults =
+        (
+          monacoInstance as unknown as {
+            json?: { jsonDefaults?: JsonDefaults };
+          }
+        ).json?.jsonDefaults ??
+        (
+          monacoInstance as unknown as {
+            languages?: { json?: { jsonDefaults?: JsonDefaults } };
+          }
+        ).languages?.json?.jsonDefaults;
+      jsonDefaults?.setDiagnosticsOptions({ validate: false });
+      jsonDefaults?.setModeConfiguration({
+        completionItems: false,
+        hovers: false,
+        documentSymbols: false,
+        documentFormattingEdits: true,
+        documentRangeFormattingEdits: true,
+        tokens: true, // keep syntax highlighting
+        colors: true,
+        foldingRanges: false,
+        diagnostics: false,
+        selectionRanges: false,
+      });
+      monacoInstance.languages.registerCompletionItemProvider(
+        "json",
+        getCompletionProvider(),
+      );
+      isCompletionProviderRegistered = true;
+    }
+  };
+
+  const handleChange = (newValue: string | undefined) => {
+    onChange(newValue ?? "");
+  };
+
+  const handleFormat = () => {
+    editorRef.current?.getAction("editor.action.formatDocument")?.run();
+  };
+
+  const handleToggleExpand = () => {
+    setIsExpanded((prev) => !prev);
+  };
+
+  const containerHeight = typeof height === "number" ? `${height}px` : height;
+
+  useEffect(() => {
+    if (!validationClient || !validationBucket) {
+      setValidationStatus(ValidationStatus.Idle);
+      setValidationError(undefined);
+      return;
+    }
+
+    const requestId = (validationRequestIdRef.current += 1);
+
+    let isActive = true;
+    const timeoutId = window.setTimeout(async () => {
+      if (!isActive || validationRequestIdRef.current !== requestId) {
+        return;
+      }
+      setValidationStatus(ValidationStatus.Loading);
+      setValidationError(undefined);
+
+      const parseResult = processWhenCondition(value, validationIntervalValue);
+      if (!parseResult.success) {
+        if (!isActive || validationRequestIdRef.current !== requestId) {
+          return;
+        }
+        setValidationStatus(ValidationStatus.Invalid);
+        setValidationError(parseResult.error || "Invalid condition");
+        return;
+      }
+
+      try {
+        let entryToValidate = validationEntries[0] || validationEntry;
+        const bucketInstance =
+          await validationClient.getBucket(validationBucket);
+        if (!entryToValidate) {
+          const entriesList = await bucketInstance.getEntryList();
+          entryToValidate = entriesList[0]?.name ?? "";
+        }
+        if (!entryToValidate) {
+          if (!isActive || validationRequestIdRef.current !== requestId) {
+            return;
+          }
+          setValidationStatus(ValidationStatus.Warning);
+          setValidationError("No entries available to validate condition");
+          return;
+        }
+
+        const whenCondition = {
+          ...(parseResult.value ?? {}),
+          $limit: 1,
+        };
+        const options = new QueryOptions();
+        options.head = true;
+        options.strict = true;
+        options.when = whenCondition;
+
+        const it = bucketInstance.query(
+          entryToValidate,
+          undefined,
+          undefined,
+          options,
+        );
+        await it.next();
+
+        if (!isActive || validationRequestIdRef.current !== requestId) {
+          return;
+        }
+        setValidationStatus(ValidationStatus.Valid);
+        setValidationError(undefined);
+      } catch (err) {
+        if (!isActive || validationRequestIdRef.current !== requestId) {
+          return;
+        }
+        const message =
+          err instanceof APIError
+            ? err.message
+            : err instanceof Error
+              ? err.message
+              : "Invalid condition";
+        setValidationStatus(ValidationStatus.Invalid);
+        setValidationError(message || "Invalid condition");
+      }
+    }, 1000);
+
+    return () => {
+      isActive = false;
+      window.clearTimeout(timeoutId);
+    };
+  }, [
+    value,
+    validationClient,
+    validationBucket,
+    validationEntry,
+    validationEntriesKey,
+    validationIntervalValue,
+  ]);
+
+  const editorOptions = {
+    minimap: { enabled: false },
+    lineNumbers: "on" as const,
+    scrollBeyondLastLine: false,
+    wordWrap: "on" as const,
+    wrappingStrategy: "advanced" as const,
+    automaticLayout: true,
+    suggestOnTriggerCharacters: !readOnly,
+    quickSuggestions: !readOnly,
+    formatOnPaste: false,
+    formatOnType: false,
+    folding: false,
+    glyphMargin: false,
+    lineDecorationsWidth: 15,
+    lineNumbersMinChars: 3,
+    renderLineHighlight: "none" as const,
+    scrollbar: {
+      vertical: "auto" as const,
+      horizontal: "hidden" as const,
+      verticalScrollbarSize: 8,
+    },
+    overviewRulerLanes: 0,
+    hideCursorInOverviewRuler: true,
+    overviewRulerBorder: false,
+    contextmenu: !readOnly,
+    tabSize: 2,
+    readOnly: readOnly,
+  };
+
+  const renderValidationStatus = (readOnly: boolean) => {
+    if (readOnly) {
+      return (
+        <span className="jsonQueryEditorValidationMuted">Read-only mode</span>
+      );
+    }
+    if (!validationClient) {
+      return (
+        <span className="jsonQueryEditorValidationMuted">
+          Validation unavailable
+        </span>
+      );
+    }
+
+    if (!validationBucket) {
+      return (
+        <span className="jsonQueryEditorValidationMuted">
+          Select bucket to validate condition
+        </span>
+      );
+    }
+
+    if (validationStatus === ValidationStatus.Loading) {
+      return <span>Validating...</span>;
+    }
+
+    if (validationStatus === ValidationStatus.Valid) {
+      return (
+        <>
+          <span className="jsonQueryEditorValidationOk">✓</span>
+          <span>Valid condition</span>
+        </>
+      );
+    }
+
+    if (validationStatus === ValidationStatus.Warning) {
+      return (
+        <>
+          <span className="jsonQueryEditorValidationWarning">!</span>
+          <span>{validationError || "Validation skipped"}</span>
+        </>
+      );
+    }
+
+    if (validationStatus === ValidationStatus.Invalid) {
+      return (
+        <>
+          <span className="jsonQueryEditorValidationError">✗</span>
+          <span>{validationError || "Invalid condition"}</span>
+        </>
+      );
+    }
+
+    return null;
+  };
+
+  const renderEditorShell = (style?: React.CSSProperties) => (
+    <div className="jsonQueryEditorContainer" style={style}>
+      <div className="jsonQueryEditorBody">
+        <Editor
+          height="100%"
+          language="json"
+          value={value}
+          onChange={handleChange}
+          onMount={handleEditorMount}
+          beforeMount={handleBeforeMount}
+          options={editorOptions}
+        />
+      </div>
+      <div className="jsonQueryEditorToolbar">
+        <div className="jsonQueryEditorValidation">
+          {renderValidationStatus(readOnly)}
+        </div>
+        <div className="jsonQueryEditorToolbarActions">
+          <Tooltip
+            title={readOnly ? "Cannot format in read-only mode" : "Format JSON"}
+          >
+            <Button
+              aria-label="Format JSON"
+              type="text"
+              size="small"
+              icon={<FormatPainterOutlined />}
+              onClick={handleFormat}
+              disabled={readOnly}
+            />
+          </Tooltip>
+          <Tooltip title={isExpanded ? "Collapse editor" : "Expand editor"}>
+            <Button
+              aria-label={isExpanded ? "Collapse editor" : "Expand editor"}
+              type="text"
+              size="small"
+              icon={isExpanded ? <CompressOutlined /> : <ExpandOutlined />}
+              onClick={handleToggleExpand}
+            />
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={`jsonQueryEditor ${error ? "hasError" : ""}`}>
+      {isExpanded ? (
+        <div
+          className="jsonQueryEditorPlaceholder"
+          style={{ height: containerHeight }}
+        >
+          Editing in expanded JSON editor
+        </div>
+      ) : (
+        renderEditorShell({ height: containerHeight })
+      )}
+      {isExpanded && (
+        <Modal
+          open={isExpanded}
+          onCancel={() => setIsExpanded(false)}
+          footer={null}
+          closable
+          title="Conditional Query Editor"
+          maskClosable={false}
+          keyboard={false}
+          className="jsonQueryEditorModal"
+          width="90vw"
+          centered
+        >
+          <div className="jsonQueryEditorModalContent">
+            <div
+              className={`jsonQueryEditor ${error ? "hasError" : ""}`}
+              style={{ height: "100%" }}
+            >
+              {renderEditorShell({ height: "100%" })}
+            </div>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+export default JsonQueryEditor;
diff --git a/src/Components/JsonEditor/index.ts b/src/Components/JsonEditor/index.ts
new file mode 100644
index 0000000..3423af2
--- /dev/null
+++ b/src/Components/JsonEditor/index.ts
@@ -0,0 +1,2 @@
+export { JsonQueryEditor } from "./JsonQueryEditor";
+export { default } from "./JsonQueryEditor";
diff --git a/src/Components/Replication/ReplicationSettingsForm.test.tsx b/src/Components/Replication/ReplicationSettingsForm.test.tsx
index 3083aef..b26f36e 100644
--- a/src/Components/Replication/ReplicationSettingsForm.test.tsx
+++ b/src/Components/Replication/ReplicationSettingsForm.test.tsx
@@ -199,7 +199,7 @@ describe("Replication::ReplicationSettingsForm", () => {
     expect(button.prop("disabled")).toBe(true);
   });
 
-  it("verifies CodeMirror is non-editable in read-only mode", () => {
+  it("verifies Monaco editor is non-editable in read-only mode", () => {
     wrapper = mount(
       <MemoryRouter>
         <ReplicationSettingsForm
diff --git a/src/Components/Replication/ReplicationSettingsForm.tsx b/src/Components/Replication/ReplicationSettingsForm.tsx
index 078f14b..a3d725e 100644
--- a/src/Components/Replication/ReplicationSettingsForm.tsx
+++ b/src/Components/Replication/ReplicationSettingsForm.tsx
@@ -6,7 +6,6 @@ import {
   ReplicationSettings,
 } from "reduct-js"; // Adjust import paths as necessary
 import {
-  Alert,
   Button,
   Col,
   Form,
@@ -20,9 +19,7 @@ import {
 } from "antd";
 import { DeleteOutlined, InfoCircleOutlined } from "@ant-design/icons";
 import "./ReplicationSettingsForm.css";
-import { Controlled as CodeMirror } from "react-codemirror2";
-import "codemirror/lib/codemirror.css";
-import "codemirror/mode/javascript/javascript";
+import { JsonQueryEditor } from "../JsonEditor";
 import { parseAndFormat, processWhenCondition } from "../../Helpers/json5Utils";
 
 const isTestEnvironment = process.env.NODE_ENV === "test";
@@ -40,6 +37,8 @@ interface State {
   formattedWhen: string;
   entries: string[];
   error?: string;
+  selectedBucket?: string;
+  selectedEntries: string[];
 }
 
 enum FilterType {
@@ -79,6 +78,8 @@ export default class ReplicationSettingsForm extends React.Component<
     settings: undefined,
     formattedWhen: "{}\n",
     entries: [],
+    selectedBucket: undefined,
+    selectedEntries: [],
   };
 
   /**
@@ -154,11 +155,20 @@ export default class ReplicationSettingsForm extends React.Component<
         const formatResult = parseAndFormat(whenString);
         whenString = formatResult.error ? whenString : formatResult.formatted;
 
-        this.setState({
-          settings,
-          formattedWhen: whenString,
-          entries: settings.entries || [],
-        });
+        this.setState(
+          {
+            settings,
+            formattedWhen: whenString,
+            entries: settings.entries || [],
+            selectedBucket: settings.srcBucket,
+            selectedEntries: settings.entries || [],
+          },
+          () => {
+            if (settings.srcBucket) {
+              this.handleSourceBucketChange(settings.srcBucket);
+            }
+          },
+        );
       } catch (err) {
         this.handleError(err);
       }
@@ -188,6 +198,16 @@ export default class ReplicationSettingsForm extends React.Component<
     }
   };
 
+  handleFormValuesChange = (
+    _changed: Partial<FormValues>,
+    values: FormValues,
+  ) => {
+    this.setState({
+      selectedBucket: values.srcBucket,
+      selectedEntries: Array.isArray(values.entries) ? values.entries : [],
+    });
+  };
+
   handleError = (err: unknown) => {
     if (err instanceof APIError) {
       this.setState({ error: err.message });
@@ -274,10 +294,9 @@ export default class ReplicationSettingsForm extends React.Component<
         <Form
           name="replicationForm"
           onFinish={this.onFinish}
+          onValuesChange={this.handleFormValuesChange}
           layout="vertical"
           initialValues={this.getInitialFormValues()}
-          labelCol={{ span: 22 }}
-          wrapperCol={{ span: 22 }}
         >
           <Form.Item
             label="Replication Name"
@@ -291,7 +310,7 @@ export default class ReplicationSettingsForm extends React.Component<
             />
           </Form.Item>
 
-          <Row>
+          <Row gutter={16}>
             <Col span={12}>
               <b>Source</b>
               <Form.Item
@@ -366,7 +385,7 @@ export default class ReplicationSettingsForm extends React.Component<
                 rules={[
                   {
                     required: true,
-                    message: "Please input the destination bucket name!",
+                    message: "Please input the destination bucket name",
                   },
                 ]}
                 className="ReplicationField"
@@ -386,7 +405,7 @@ export default class ReplicationSettingsForm extends React.Component<
                 rules={[
                   {
                     required: true,
-                    message: "Please input the destination host URL!",
+                    message: "Please input the destination host URL.",
                   },
                 ]}
                 className="ReplicationField"
@@ -465,34 +484,21 @@ export default class ReplicationSettingsForm extends React.Component<
             }
           >
             {!isTestEnvironment && (
-              <CodeMirror
-                className="jsonEditor"
+              <JsonQueryEditor
                 value={this.state.formattedWhen}
-                options={{
-                  mode: { name: "javascript", json: true },
-                  theme: "default",
-                  lineNumbers: true,
-                  lineWrapping: true,
-                  matchBrackets: true,
-                  readOnly: readOnly ? "nocursor" : false,
-                }}
-                onBeforeChange={(_, __, value: string) =>
+                onChange={(value: string) =>
                   this.handleWhenConditionChange(value)
                 }
-                onBlur={(editor: any) => {
-                  const value = editor.getValue() || "";
-                  const result = parseAndFormat(value);
-                  this.setState({
-                    formattedWhen: result.error ? value : result.formatted,
-                    error: result.error || undefined,
-                  });
+                height={200}
+                error={error}
+                readOnly={readOnly}
+                validationContext={{
+                  client: this.props.client,
+                  bucket: this.state.selectedBucket,
+                  entries: this.state.selectedEntries,
                 }}
-                onViewportChange={(editor) => editor.refresh()}
               />
             )}
-            {error && (
-              <Alert message={error} type="error" style={{ marginTop: 8 }} />
-            )}
             <Typography.Text type="secondary" className="jsonExample">
               Example: <code>{'{"&anomaly": { "$eq": 1 }}'}</code>
               <br />
diff --git a/src/Views/BucketPanel/EntryDetail.css b/src/Views/BucketPanel/EntryDetail.css
index 6b38634..c322406 100644
--- a/src/Views/BucketPanel/EntryDetail.css
+++ b/src/Views/BucketPanel/EntryDetail.css
@@ -41,6 +41,27 @@
   gap: var(--entry-detail-inner-spacing);
 }
 
+/* INPUT with prefix/suffix */
+.timeInputs .ant-input-affix-wrapper:focus,
+.timeInputs .ant-input-affix-wrapper-focused {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* INPUT */
+.timeInputs .ant-input:focus,
+.timeInputs .ant-input-focused {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* SELECT */
+.selectGroup .ant-select-selector:focus,
+.selectGroup .ant-select-focused .ant-select-selector {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
 @media (max-width: 826px) {
   .timeSelectSection {
     flex-direction: column;
diff --git a/src/Views/BucketPanel/EntryDetail.test.tsx b/src/Views/BucketPanel/EntryDetail.test.tsx
index d43e861..0437c50 100644
--- a/src/Views/BucketPanel/EntryDetail.test.tsx
+++ b/src/Views/BucketPanel/EntryDetail.test.tsx
@@ -18,22 +18,27 @@ type MockedRemoveRecord = RemoveRecordFn & {
   mockRejectedValueOnce: (value: Error) => void;
 };
 
-jest.mock("react-codemirror2", () => ({
-  Controlled: (props: any) => {
+jest.mock("@monaco-editor/react", () => ({
+  __esModule: true,
+  default: (props: any) => {
     return (
-      <div className="react-codemirror2" data-testid="codemirror-mock">
+      <div className="monaco-editor-mock" data-testid="monaco-editor-mock">
         <textarea
           value={props.value}
-          onChange={(e) => props.onBeforeChange(null, null, e.target.value)}
-          onBlur={(e) =>
-            props.onBlur && props.onBlur({ getValue: () => e.target.value })
-          }
+          onChange={(e) => props.onChange && props.onChange(e.target.value)}
+          onBlur={() => props.onBlur && props.onBlur()}
         />
       </div>
     );
   },
 }));
 
+jest.mock("@reductstore/reduct-query-monaco", () => ({
+  getCompletionProvider: jest.fn(() => ({
+    provideCompletionItems: jest.fn(() => ({ suggestions: [] })),
+  })),
+}));
+
 jest.mock("react-chartjs-2", () => ({
   Line: ({ data, options, ...props }: any) => (
     <div
@@ -70,9 +75,6 @@ jest.mock("prettier-bytes", () => {
   };
 });
 
-import "codemirror/lib/codemirror.css";
-import "codemirror/mode/javascript/javascript";
-
 const mockParams = {
   bucketName: "testBucket",
   entryName: "testEntry",
@@ -243,19 +245,12 @@ describe("EntryDetail", () => {
       expect(limitInput.exists()).toBe(false);
     });
 
-    it("should show the CodeMirror editor with empty JSON by default", () => {
-      const codeMirror = wrapper.find(".react-codemirror2");
-      expect(codeMirror.exists()).toBe(true);
-      const cmInstance = wrapper.find("Controlled").prop("options");
-      expect(cmInstance).toEqual(
-        expect.objectContaining({
-          mode: { name: "javascript", json: true },
-          lineNumbers: true,
-        }),
-      );
+    it("should show the Monaco editor with default JSON", () => {
+      const monacoEditor = wrapper.find(".monaco-editor-mock");
+      expect(monacoEditor.exists()).toBe(true);
 
-      const cmValue = wrapper.find("Controlled").prop("value");
-      expect(cmValue).toBe('{\n  "$each_t": "$__interval"\n}\n');
+      const editorValue = wrapper.find("JsonQueryEditor").prop("value");
+      expect(editorValue).toBe('{\n  "$each_t": "$__interval"\n}\n');
 
       const exampleText = wrapper.find(".jsonExample").first().text();
       expect(exampleText).toContain("Example:");
@@ -590,11 +585,11 @@ describe("EntryDetail", () => {
 
   describe("When Condition", () => {
     it("should initialize with default $each_t macro", () => {
-      // Check the CodeMirror component value
-      const codeMirror = wrapper.find(".react-codemirror2");
-      expect(codeMirror.exists()).toBe(true);
+      // Check the Monaco editor component value
+      const monacoEditor = wrapper.find(".monaco-editor-mock");
+      expect(monacoEditor.exists()).toBe(true);
 
-      const textArea = codeMirror.find("textarea");
+      const textArea = monacoEditor.find("textarea");
       expect(textArea.exists()).toBe(true);
 
       const conditionValue = textArea.prop("value") as string;
@@ -623,8 +618,8 @@ describe("EntryDetail", () => {
 
         wrapper.update();
 
-        const updatedCodeMirror = wrapper.find(".react-codemirror2");
-        const updatedTextArea = updatedCodeMirror.find("textarea");
+        const updatedMonacoEditor = wrapper.find(".monaco-editor-mock");
+        const updatedTextArea = updatedMonacoEditor.find("textarea");
         const updatedConditionValue = updatedTextArea.prop("value") as string;
 
         expect(updatedConditionValue.trim()).toBe(
@@ -640,8 +635,8 @@ describe("EntryDetail", () => {
         "&label": { $eq: "test" },
       };
 
-      const codeMirror = wrapper.find(".react-codemirror2");
-      const textArea = codeMirror.find("textarea");
+      const monacoEditor = wrapper.find(".monaco-editor-mock");
+      const textArea = monacoEditor.find("textarea");
 
       act(() => {
         const onChange = textArea.prop("onChange") as any;
@@ -668,8 +663,8 @@ describe("EntryDetail", () => {
       wrapper.update();
 
       // The condition should remain unchanged
-      const finalCodeMirror = wrapper.find(".react-codemirror2");
-      const finalTextArea = finalCodeMirror.find("textarea");
+      const finalMonacoEditor = wrapper.find(".monaco-editor-mock");
+      const finalTextArea = finalMonacoEditor.find("textarea");
       const finalCondition = JSON.parse(finalTextArea.prop("value") as string);
 
       expect(finalCondition).toEqual(customCondition);
diff --git a/src/Views/BucketPanel/EntryDetail.tsx b/src/Views/BucketPanel/EntryDetail.tsx
index 6e131f8..4a8dd4f 100644
--- a/src/Views/BucketPanel/EntryDetail.tsx
+++ b/src/Views/BucketPanel/EntryDetail.tsx
@@ -13,7 +13,6 @@ import {
   Button,
   Input,
   Select,
-  Alert,
   Modal,
   Space,
   message,
@@ -26,12 +25,10 @@ import {
   DeleteOutlined,
   ReloadOutlined,
 } from "@ant-design/icons";
-import { Controlled as CodeMirror } from "react-codemirror2";
 import EntryCard from "../../Components/Entry/EntryCard";
 import "./EntryDetail.css";
-import "codemirror/lib/codemirror.css";
-import "codemirror/mode/javascript/javascript";
 import UploadFileForm from "../../Components/Entry/UploadFileForm";
+import { JsonQueryEditor } from "../../Components/JsonEditor";
 
 import { getExtensionFromContentType } from "../../Helpers/contentType";
 
@@ -731,34 +728,23 @@ export default function EntryDetail(props: Readonly<Props>) {
         </div>
 
         <div className="jsonFilterSection">
-          <CodeMirror
-            className="jsonEditor"
+          <JsonQueryEditor
             value={whenCondition}
-            options={{
-              mode: { name: "javascript", json: true },
-              theme: "default",
-              lineNumbers: true,
-              lineWrapping: true,
-              viewportMargin: Infinity,
-              matchBrackets: true,
-            }}
-            onBeforeChange={(editor: any, data: any, value: string) => {
+            onChange={(value: string) => {
               setWhenCondition(value);
               if (whenError) {
                 setWhenError("");
               }
             }}
-            onBlur={(editor: any) => {
-              const value = editor.getValue() || "";
-              const formatted = formatJSON(value);
-              if (formatted !== value) {
-                setWhenCondition(formatted);
-              }
+            height={200}
+            error={whenError}
+            validationContext={{
+              client: props.client,
+              bucket: bucketName,
+              entry: entryName,
+              intervalValue: timeRange.interval ?? undefined,
             }}
           />
-          {whenError && (
-            <Alert type="error" message={whenError} style={{ marginTop: 8 }} />
-          )}
           <Typography.Text type="secondary" className="jsonExample">
             Example: <code>{'{"&anomaly": { "$eq": 1 }}'}</code>
             Use <code>&label</code> for standard labels and <code>@label</code>{" "}