diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index 60b72259f2..c61f36d5d1 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -89,9 +89,6 @@ const ResponseContainer = styled.div`
   .react-tabs__tab-panel {
     overflow: hidden;
   }
-  .CodeMirror-code {
-    font-size: 12px;
-  }
 `;
 const ResponseMetaInfo = styled.div`
   display: flex;
@@ -332,7 +329,6 @@ export const responseTabComponent = (
         input={{
           value: isString(output) ? output : JSON.stringify(output, null, 2),
         }}
-        isReadOnly
       />
     ),
     [API_RESPONSE_TYPE_OPTIONS.TABLE]: (
@@ -347,7 +343,6 @@ export const responseTabComponent = (
           value: isString(output) ? output : JSON.stringify(output, null, 2),
         }}
         isRawView
-        isReadOnly
       />
     ),
   }[responseType];
@@ -562,7 +557,6 @@ function ApiResponseView(props: Props) {
                       input={{
                         value: response?.body,
                       }}
-                      isReadOnly
                     />
                   ) : responseTabs &&
                     responseTabs.length > 0 &&
@@ -627,7 +621,6 @@ function ApiResponseView(props: Props) {
                     ? JSON.stringify(responseHeaders, null, 2)
                     : "",
                 }}
-                isReadOnly
               />
             )}
           </ResponseDataContainer>
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index 9c70acdcdf..465302224a 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx
@@ -278,8 +278,8 @@ class CodeEditor extends Component<Props, State> {
   annotations: Annotation[] = [];
   updateLintingCallback: UpdateLintingCallback | undefined;
   private editorWrapperRef = React.createRef<HTMLDivElement>();
+  currentLineNumber: number | null = null;
   AIEnabled = false;
-  lineRef: React.MutableRefObject<number | null> = React.createRef();
 
   constructor(props: Props) {
     super(props);
@@ -902,15 +902,15 @@ class CodeEditor extends Component<Props, State> {
       cm.setOption("matchBrackets", false);
     }
     if (!this.props.borderLess) return;
-    if (this.lineRef.current !== null) {
+    if (this.currentLineNumber !== null) {
       cm.removeLineClass(
-        this.lineRef.current,
+        this.currentLineNumber,
         "background",
         "CodeMirror-activeline-background",
       );
     }
     cm.addLineClass(line, "background", "CodeMirror-activeline-background");
-    this.lineRef.current = line;
+    this.currentLineNumber = line;
   };
 
   handleEditorFocus = (cm: CodeMirror.Editor) => {
@@ -981,13 +981,13 @@ class CodeEditor extends Component<Props, State> {
         line: cursor.line,
       },
     });
-    if (this.lineRef.current !== null) {
+    if (this.currentLineNumber !== null) {
       cm.removeLineClass(
-        this.lineRef.current,
+        this.currentLineNumber,
         "background",
         "CodeMirror-activeline-background",
       );
-      this.lineRef.current = null;
+      this.currentLineNumber = null;
     }
     if (this.props.onEditorBlur) {
       this.props.onEditorBlur();
diff --git a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
index d306ec8e9f..ef427285fd 100644
--- a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
@@ -43,7 +43,7 @@ const editorBackground = (theme?: EditorTheme) => {
   return bg;
 };
 
-const codeMirrorColors = {
+export const CodeEditorColors = {
   KEYWORD: "#304eaa",
   FOLD_MARKER: "#442334",
   STRING: "#1659df",
@@ -128,7 +128,7 @@ export const EditorWrapper = styled.div<{
     .cm-s-duotone-light.CodeMirror {
       border-radius: 0px;
       font-family: ${(props) => props.theme.fonts.code};
-      font-size: 13px;
+      font-size: ${(props) => (props.isReadOnly ? "12px" : "13px")};
       border: 1px solid
         ${(props) => {
           switch (true) {
@@ -149,14 +149,14 @@ export const EditorWrapper = styled.div<{
       color: ${Colors.CHARCOAL};
       & {
         span.cm-operator {
-          color: ${codeMirrorColors.OPERATOR};
+          color: ${CodeEditorColors.OPERATOR};
         }
       }
       .cm-property {
         color: hsl(21, 70%, 53%);
       }
       .cm-keyword {
-        color: #304eaa;
+        color: ${CodeEditorColors.KEYWORD};
       }
 
       .CodeMirror-foldgutter {
@@ -179,7 +179,7 @@ export const EditorWrapper = styled.div<{
       }
       .cm-string,
       .token.string {
-        color: ${codeMirrorColors.STRING};
+        color: ${CodeEditorColors.STRING};
       }
 
       /* json response in the debugger */
@@ -206,7 +206,7 @@ export const EditorWrapper = styled.div<{
       .cm-def,
       .cm-property + span + .cm-def,
       .cm-def + span + .cm-def {
-        color: ${codeMirrorColors.FUNCTION_ARGS};
+        color: ${CodeEditorColors.FUNCTION_ARGS};
       }
 
       .cm-atom + span + .cm-property,
@@ -225,7 +225,7 @@ export const EditorWrapper = styled.div<{
       }
 
       span.cm-number {
-        color: ${codeMirrorColors.NUMBER};
+        color: ${CodeEditorColors.NUMBER};
       }
 
       .cm-s-duotone-light span.cm-variable-2,
@@ -368,8 +368,18 @@ export const EditorWrapper = styled.div<{
       padding: ${(props) => props.theme.spaces[2]}px 0px;
       background-color: ${(props) => props.disabled && "#eef2f5"};
       cursor: ${(props) => (props.disabled ? "not-allowed" : "text")};
+      pre.CodeMirror-line,
+      pre.CodeMirror-line-like {
+        padding: 0 ${(props) => props.theme.spaces[2]}px;
+      }
     }
   }
+
+  pre.CodeMirror-line,
+  pre.CodeMirror-line-like {
+    padding: 0 ${(props) => props.theme.spaces[3]}px;
+  }
+
   ${(props) =>
     props.className === "js-editor" &&
     `
diff --git a/app/client/src/components/editorComponents/LazyCodeEditor/CodeEditorFallback.tsx b/app/client/src/components/editorComponents/LazyCodeEditor/CodeEditorFallback.tsx
index efa9f0e020..29490ed231 100644
--- a/app/client/src/components/editorComponents/LazyCodeEditor/CodeEditorFallback.tsx
+++ b/app/client/src/components/editorComponents/LazyCodeEditor/CodeEditorFallback.tsx
@@ -9,13 +9,19 @@ import {
 } from "./styles";
 import { ContentKind } from "./types";
 import type { EditorProps } from "components/editorComponents/CodeEditor";
+import { JS_OBJECT_START_STATEMENT } from "workers/Linting/constants";
 
 export default function CodeEditorFallback({
   input,
+  isReadOnly,
   onInteracted,
   placeholder,
+  showLineNumbers,
   showLoadingProgress,
-}: Pick<EditorProps, "input" | "placeholder"> & {
+}: Pick<
+  EditorProps,
+  "input" | "placeholder" | "showLineNumbers" | "isReadOnly"
+> & {
   onInteracted: () => void;
   showLoadingProgress: boolean;
 }) {
@@ -26,7 +32,11 @@ export default function CodeEditorFallback({
   if (!parsedValue) {
     contentKind = ContentKind.PLACEHOLDER;
     fallbackToRender = placeholder || "";
-  } else if (typeof parsedValue === "string" && parsedValue.includes("{{")) {
+  } else if (
+    typeof parsedValue === "string" &&
+    (parsedValue.includes("{{") ||
+      parsedValue.startsWith(JS_OBJECT_START_STATEMENT))
+  ) {
     contentKind = ContentKind.CODE;
     fallbackToRender = parsedValue;
   } else if (Array.isArray(parsedValue) || typeof parsedValue === "object") {
@@ -48,7 +58,7 @@ export default function CodeEditorFallback({
   }
 
   return (
-    <ContentWrapper contentKind={contentKind}>
+    <ContentWrapper contentKind={contentKind} showLineNumbers={showLineNumbers}>
       {showLoadingProgress && (
         <ProgressContainer>
           <SpinnerContainer>
@@ -60,8 +70,10 @@ export default function CodeEditorFallback({
       <HighlighedCodeContainer
         className="LazyCodeEditor"
         contentKind={contentKind}
+        isReadOnly={isReadOnly}
         onFocus={onInteracted}
         onMouseEnter={onInteracted}
+        showLineNumbers={showLineNumbers}
         tabIndex={0}
       >
         <pre>{fallbackToRender}</pre>
diff --git a/app/client/src/components/editorComponents/LazyCodeEditor/index.tsx b/app/client/src/components/editorComponents/LazyCodeEditor/index.tsx
index 5f745297f4..05f64f57c6 100644
--- a/app/client/src/components/editorComponents/LazyCodeEditor/index.tsx
+++ b/app/client/src/components/editorComponents/LazyCodeEditor/index.tsx
@@ -227,10 +227,12 @@ function LazyCodeEditor({ input, placeholder, ...otherProps }: EditorProps) {
       <LazyEditorWrapper className="t--lazyCodeEditor-fallback">
         <CodeEditorFallback
           input={input}
+          isReadOnly={otherProps.isReadOnly}
           onInteracted={() => {
             stateMachine.current.transition("PLACEHOLDER_INTERACTED");
           }}
           placeholder={placeholder}
+          showLineNumbers={otherProps.showLineNumbers}
           showLoadingProgress={showLoadingProgress}
         />
       </LazyEditorWrapper>
diff --git a/app/client/src/components/editorComponents/LazyCodeEditor/styles.tsx b/app/client/src/components/editorComponents/LazyCodeEditor/styles.tsx
index ce26275487..f519a3da8b 100644
--- a/app/client/src/components/editorComponents/LazyCodeEditor/styles.tsx
+++ b/app/client/src/components/editorComponents/LazyCodeEditor/styles.tsx
@@ -1,28 +1,36 @@
 import styled, { keyframes } from "styled-components";
 import { ContentKind } from "./types";
+import { CodeEditorColors } from "../CodeEditor/styledComponents";
 
 export const HighlighedCodeContainer = styled("div")<{
   contentKind: ContentKind;
+  showLineNumbers?: boolean;
+  isReadOnly?: boolean;
 }>`
   width: 100%;
   background-color: #fff !important;
-  font-family: monospace !important;
   font-weight: 400 !important;
   line-height: 21px !important;
 
   min-height: inherit;
-  padding-top: 6px !important;
-  padding-left: 10px !important;
-  padding-right: 10px !important;
-  padding-bottom: 6px !important;
+  padding: 6px;
 
   pre {
+    font-family: ${(props) => props.theme.fonts.code};
     margin: 0 !important;
     overflow: hidden !important;
-    font-size: 14px !important;
-    font-family: monospace !important;
+    font-size: ${(props) => (props.isReadOnly ? "12px" : "13px")} !important;
     padding: 0 !important;
+    tab-size: 2 !important;
     background: white !important;
+    ${(props) => {
+      if (props.isReadOnly) {
+        return "padding-left: 35px !important";
+      }
+      if (props.showLineNumbers) {
+        return "padding-left: 47px !important";
+      }
+    }};
 
     word-wrap: break-word !important;
     white-space: pre-wrap !important;
@@ -30,7 +38,7 @@ export const HighlighedCodeContainer = styled("div")<{
 
     color: ${({ contentKind }) =>
       contentKind === ContentKind.CODE
-        ? "#063289"
+        ? CodeEditorColors.KEYWORD
         : contentKind === ContentKind.PLACEHOLDER
         ? "#858282"
         : "inherit"} !important;
@@ -43,6 +51,8 @@ export const LazyEditorWrapper = styled("div")`
 
 export const ContentWrapper = styled("div")<{
   contentKind: ContentKind;
+  showLineNumbers?: boolean;
+  folding?: boolean;
 }>`
   overflow: hidden;
   width: 100%;
@@ -51,6 +61,7 @@ export const ContentWrapper = styled("div")<{
   min-height: 34px;
   border: 1px solid;
   border-color: inherit;
+  ${(props) => props.showLineNumbers && "border: none"}
 `;
 
 const opacityAnimation = keyframes`
diff --git a/app/client/src/components/editorComponents/ReadOnlyEditor.tsx b/app/client/src/components/editorComponents/ReadOnlyEditor.tsx
index 3b386bdd26..9b2de9346f 100644
--- a/app/client/src/components/editorComponents/ReadOnlyEditor.tsx
+++ b/app/client/src/components/editorComponents/ReadOnlyEditor.tsx
@@ -18,7 +18,6 @@ interface Props {
   height: string;
   folding: boolean;
   showLineNumbers?: boolean;
-  isReadOnly?: boolean;
   isRawView?: boolean;
   containerHeight?: number;
 }
@@ -39,7 +38,7 @@ function ReadOnlyEditor(props: Props) {
       : true,
     borderLess: true,
     folding: props.folding,
-    isReadOnly: props.isReadOnly,
+    isReadOnly: true,
     isRawView: props.isRawView,
     containerHeight: props.containerHeight,
     border: CodeEditorBorder.NONE,
diff --git a/app/client/src/globalStyles/CodemirrorHintStyles.ts b/app/client/src/globalStyles/CodemirrorHintStyles.ts
index 435a4280fc..9e403546e9 100644
--- a/app/client/src/globalStyles/CodemirrorHintStyles.ts
+++ b/app/client/src/globalStyles/CodemirrorHintStyles.ts
@@ -237,55 +237,6 @@ export const CodemirrorHintStyles = createGlobalStyle<{
         }
       }
     }
-    .CodeMirror-Tern-hint-doc {
-      display: none;
-      &.visible {
-        display: block;
-        background-color: ${(props) =>
-          props.editorTheme === EditorTheme.DARK
-            ? "#23292e"
-            : "#fff"} !important;
-        color: ${(props) =>
-          props.editorTheme === EditorTheme.DARK
-            ? "#F4F4F4"
-            : "#1E242B"} !important;
-        max-height: 150px;
-        width: 250px;
-        font-size: 12px;
-        padding: 5px !important;
-        border: 1px solid !important;
-        border-color: ${(props) =>
-          props.editorTheme === EditorTheme.DARK
-            ? "#23292e"
-            : "#DEDEDE"} !important;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12) !important;
-        overflow: scroll;
-      }
-    }
-    .CodeMirror-lint-tooltip {
-      border: none;
-      background: ${(props) =>
-        props.editorTheme === EditorTheme.DARK ? "#23292e" : "#fff"};
-      box-shadow: 0px 12px 28px -6px rgba(0, 0, 0, 0.32);
-      padding: 7px 12px;
-      border-radius: 0;
-
-      &.${LINT_TOOLTIP_JUSTIFIED_LEFT_CLASS}{
-      transform: translate(-100%);
-    }
-
-    }
-    .CodeMirror-lint-message {
-      margin-top: 5px;
-      margin-bottom: 5px;
-      font-family: ${(props) => props.theme.fonts.text};
-      color: #4B4848;
-      background-position: 0 2.8px;
-      padding-left: 20px;
-    }
-    .CodeMirror-lint-mark-warning{
-      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAB1JREFUGFdjZICC/3sY/jO6MDAygvgwDpiGcWAqASvpC745SEL8AAAAAElFTkSuQmCC");
-    }
   }
   .sql-hint-label{
     color: #6D6D6D;
@@ -306,4 +257,56 @@ export const CodemirrorHintStyles = createGlobalStyle<{
       color: #fff
     }
   }
+  .CodeMirror-Tern-hint-doc {
+    display: none;
+    &.visible {
+      display: block;
+      background-color: ${(props) =>
+        props.editorTheme === EditorTheme.DARK ? "#23292e" : "#fff"} !important;
+      color: ${(props) =>
+        props.editorTheme === EditorTheme.DARK
+          ? "#F4F4F4"
+          : "#1E242B"} !important;
+      max-height: 150px;
+      width: 250px;
+      font-size: 12px;
+      padding: 5px !important;
+      border: 1px solid !important;
+      border-color: ${(props) =>
+        props.editorTheme === EditorTheme.DARK
+          ? "#23292e"
+          : "#DEDEDE"} !important;
+      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12) !important;
+      overflow: scroll;
+    }
+  }
+  .CodeMirror-lint-tooltip {
+    && {
+      border: none;
+      background: ${(props) =>
+        props.editorTheme === EditorTheme.DARK ? "#23292e" : "#fff"};
+      box-shadow: 0px 12px 28px -6px rgba(0, 0, 0, 0.32);
+      padding: 7px 12px;
+      border-radius: 0;
+
+      &.${LINT_TOOLTIP_JUSTIFIED_LEFT_CLASS}{
+        transform: translate(-100%);
+      }
+    }
+  }
+  .CodeMirror-lint-message {
+    && {
+      margin-top: 5px;
+      margin-bottom: 5px;
+      font-family: ${(props) => props.theme.fonts.text};
+      color: #4B4848;
+      background-position: 0 2.8px;
+      padding-left: 20px;
+    }
+  }
+  .CodeMirror-lint-mark-warning {
+    && {
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAB1JREFUGFdjZICC/3sY/jO6MDAygvgwDpiGcWAqASvpC745SEL8AAAAAElFTkSuQmCC");
+    }
+  }
 `;