diff --git a/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts b/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
index 4bbe96454509..1c31557f9a2a 100644
--- a/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/EditorConfig.ts
@@ -54,6 +54,11 @@ export const EditorThemes: Record<EditorTheme, string> = {
   [EditorTheme.DARK]: "duotone-dark",
 };
 
+export interface BlockCompletion {
+  parentPath: string;
+  subPath: string;
+}
+
 export interface FieldEntityInformation {
   entityName?: string;
   expectedType?: AutocompleteDataType;
@@ -61,7 +66,7 @@ export interface FieldEntityInformation {
   entityId?: string;
   propertyPath?: string;
   isTriggerPath?: boolean;
-  blockCompletions?: Array<{ parentPath: string; subPath: string }>;
+  blockCompletions?: Array<BlockCompletion>;
   example?: ExpectedValueExample;
   mode?: TEditorModes;
   token?: CodeMirror.Token;
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index 2e67b7514e57..bd236a5e3d21 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx
@@ -47,6 +47,7 @@ import type {
   Hinter,
   HintHelper,
   MarkHelper,
+  BlockCompletion,
 } from "components/editorComponents/CodeEditor/EditorConfig";
 import {
   EditorModes,
@@ -199,7 +200,7 @@ export interface EditorStyleProps {
   evaluationSubstitutionType?: EvaluationSubstitutionType;
   popperPlacement?: Placement;
   popperZIndex?: Indices;
-  blockCompletions?: FieldEntityInformation["blockCompletions"];
+  blockCompletions?: Array<BlockCompletion>;
 }
 /**
  *  line => Line to which the gutter is added
diff --git a/app/client/src/pages/Editor/JSEditor/Form.tsx b/app/client/src/pages/Editor/JSEditor/Form.tsx
index 5121ac1164d6..1d7d07db652a 100644
--- a/app/client/src/pages/Editor/JSEditor/Form.tsx
+++ b/app/client/src/pages/Editor/JSEditor/Form.tsx
@@ -2,13 +2,7 @@ import type { ChangeEvent } from "react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import type { JSAction } from "entities/JSCollection";
 import type { DropdownOnSelect } from "@appsmith/ads-old";
-import {
-  CodeEditorBorder,
-  EditorModes,
-  EditorSize,
-  EditorTheme,
-  TabBehaviour,
-} from "components/editorComponents/CodeEditor/EditorConfig";
+import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import type { JSObjectNameEditorProps } from "./JSObjectNameEditor";
 import JSObjectNameEditor from "./JSObjectNameEditor";
 import {
@@ -40,7 +34,6 @@ import {
   getJSFunctionLineGutter,
   getJSPropertyLineFromName,
 } from "./utils";
-import JSFunctionSettingsView from "./JSFunctionSettings";
 import type { JSFunctionSettingsProps } from "./JSFunctionSettings";
 import JSObjectHotKeys from "./JSObjectHotKeys";
 import {
@@ -49,7 +42,6 @@ import {
   FormWrapper,
   NameWrapper,
   StyledFormRow,
-  TabbedViewContainer,
 } from "./styledComponents";
 import { getJSPaneConfigSelectedTab } from "selectors/jsPaneSelectors";
 import type { EventLocation } from "ee/utils/analyticsUtilTypes";
@@ -59,10 +51,8 @@ import {
 } from "actions/editorContextActions";
 import history from "utils/history";
 import { CursorPositionOrigin } from "ee/reducers/uiReducers/editorContextReducer";
-import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
 import styled from "styled-components";
-import { Tab, TabPanel, Tabs, TabsList } from "@appsmith/ads";
-import { JSEditorTab } from "reducers/uiReducers/jsPaneReducer";
+import type { JSEditorTab } from "reducers/uiReducers/jsPaneReducer";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import {
@@ -72,6 +62,7 @@ import {
 import type { JSCollectionData } from "ee/reducers/entityReducers/jsActionsReducer";
 import { DEBUGGER_TAB_KEYS } from "components/editorComponents/Debugger/constants";
 import RunHistory from "ee/components/RunHistory";
+import { JSEditorForm as EditorForm } from "./JSEditorForm";
 
 interface JSFormProps {
   jsCollectionData: JSCollectionData;
@@ -384,73 +375,22 @@ function JSEditorForm({
           <Wrapper>
             <div className="flex flex-1 w-full">
               <SecondaryWrapper>
-                <TabbedViewContainer isExecuting={isExecutingCurrentJSAction}>
-                  <Tabs
-                    defaultValue={JSEditorTab.CODE}
-                    onValueChange={(string) =>
-                      setSelectedConfigTab(string as JSEditorTab)
-                    }
-                    value={selectedConfigTab}
-                  >
-                    <TabsList>
-                      <Tab
-                        data-testid={`t--js-editor-` + JSEditorTab.CODE}
-                        value={JSEditorTab.CODE}
-                      >
-                        Code
-                      </Tab>
-                      {showSettings && (
-                        <Tab
-                          data-testid={`t--js-editor-` + JSEditorTab.SETTINGS}
-                          value={JSEditorTab.SETTINGS}
-                        >
-                          Settings
-                        </Tab>
-                      )}
-                    </TabsList>
-                    <TabPanel value={JSEditorTab.CODE}>
-                      <div className="js-editor-tab">
-                        <LazyCodeEditor
-                          AIAssisted
-                          blockCompletions={blockCompletions}
-                          border={CodeEditorBorder.NONE}
-                          borderLess
-                          className={"js-editor"}
-                          customGutter={JSGutters}
-                          dataTreePath={`${currentJSCollection.name}.body`}
-                          disabled={!isChangePermitted}
-                          folding
-                          height={"100%"}
-                          hideEvaluatedValue
-                          input={{
-                            value: currentJSCollection.body,
-                            onChange: handleEditorChange,
-                          }}
-                          isJSObject
-                          jsObjectName={currentJSCollection.name}
-                          mode={EditorModes.JAVASCRIPT}
-                          placeholder="Let's write some code!"
-                          showLightningMenu={false}
-                          showLineNumbers
-                          size={EditorSize.EXTENDED}
-                          tabBehaviour={TabBehaviour.INDENT}
-                          theme={theme}
-                        />
-                      </div>
-                    </TabPanel>
-                    {showSettings && (
-                      <TabPanel value={JSEditorTab.SETTINGS}>
-                        <div className="js-editor-tab">
-                          <JSFunctionSettingsView
-                            actions={jsActions}
-                            disabled={!isChangePermitted}
-                            onUpdateSettings={onUpdateSettings}
-                          />
-                        </div>
-                      </TabPanel>
-                    )}
-                  </Tabs>
-                </TabbedViewContainer>
+                <EditorForm
+                  actions={jsActions}
+                  blockCompletions={blockCompletions}
+                  changePermitted={isChangePermitted}
+                  currentJSCollection={currentJSCollection}
+                  customGutter={JSGutters}
+                  executing={isExecutingCurrentJSAction}
+                  onChange={handleEditorChange}
+                  onUpdateSettings={onUpdateSettings}
+                  onValueChange={(string) =>
+                    setSelectedConfigTab(string as JSEditorTab)
+                  }
+                  showSettings={showSettings}
+                  theme={theme}
+                  value={selectedConfigTab}
+                />
                 <JSResponseView
                   currentFunction={activeResponse}
                   disabled={disableRunFunctionality || !isExecutePermitted}
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx
new file mode 100644
index 000000000000..24a375f234d2
--- /dev/null
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+import type { JSEditorTab } from "reducers/uiReducers/jsPaneReducer";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import {
+  type BlockCompletion,
+  CodeEditorBorder,
+  EditorModes,
+  EditorSize,
+  type EditorTheme,
+  TabBehaviour,
+} from "components/editorComponents/CodeEditor/EditorConfig";
+import type { CodeEditorGutter } from "components/editorComponents/CodeEditor";
+import type { JSAction, JSCollection } from "entities/JSCollection";
+import { OldJSEditorForm } from "./old/JSEditorForm";
+import type { OnUpdateSettingsProps } from "../JSFunctionSettings";
+import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
+import { Flex } from "@appsmith/ads";
+
+interface Props {
+  executing: boolean;
+  onValueChange: (value: string) => void;
+  value: JSEditorTab;
+  showSettings: undefined | boolean;
+  blockCompletions: Array<BlockCompletion>;
+  customGutter: CodeEditorGutter;
+  currentJSCollection: JSCollection;
+  changePermitted: boolean;
+  onChange: (valueOrEvent: React.ChangeEvent | string) => void;
+  theme: EditorTheme.LIGHT;
+  actions: JSAction[];
+  onUpdateSettings?: (props: OnUpdateSettingsProps) => void;
+}
+
+export const JSEditorForm = (props: Props) => {
+  const isActionRedesignEnabled = useFeatureFlag(
+    FEATURE_FLAG.release_actions_redesign_enabled,
+  );
+
+  if (!isActionRedesignEnabled) {
+    return (
+      <OldJSEditorForm
+        actions={props.actions}
+        blockCompletions={props.blockCompletions}
+        changePermitted={props.changePermitted}
+        currentJSCollection={props.currentJSCollection}
+        customGutter={props.customGutter}
+        executing={props.executing}
+        onChange={props.onChange}
+        onUpdateSettings={props.onUpdateSettings}
+        onValueChange={props.onValueChange}
+        showSettings={props.showSettings}
+        theme={props.theme}
+        value={props.value}
+      />
+    );
+  }
+
+  return (
+    <Flex flex="1" overflow="scroll">
+      <LazyCodeEditor
+        AIAssisted
+        blockCompletions={props.blockCompletions}
+        border={CodeEditorBorder.NONE}
+        borderLess
+        className={"js-editor"}
+        customGutter={props.customGutter}
+        dataTreePath={`${props.currentJSCollection.name}.body`}
+        disabled={!props.changePermitted}
+        folding
+        height={"100%"}
+        hideEvaluatedValue
+        input={{
+          value: props.currentJSCollection.body,
+          onChange: props.onChange,
+        }}
+        isJSObject
+        jsObjectName={props.currentJSCollection.name}
+        mode={EditorModes.JAVASCRIPT}
+        placeholder="Let's write some code!"
+        showLightningMenu={false}
+        showLineNumbers
+        size={EditorSize.EXTENDED}
+        tabBehaviour={TabBehaviour.INDENT}
+        theme={props.theme}
+      />
+    </Flex>
+  );
+};
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorForm/index.ts b/app/client/src/pages/Editor/JSEditor/JSEditorForm/index.ts
new file mode 100644
index 000000000000..cd9030a6b5b7
--- /dev/null
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorForm/index.ts
@@ -0,0 +1 @@
+export { JSEditorForm } from "./JSEditorForm";
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorForm/old/JSEditorForm.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorForm/old/JSEditorForm.tsx
new file mode 100644
index 000000000000..cc5cb680fb1c
--- /dev/null
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorForm/old/JSEditorForm.tsx
@@ -0,0 +1,105 @@
+import { JSEditorTab } from "reducers/uiReducers/jsPaneReducer";
+import React from "react";
+import type {
+  BlockCompletion,
+  EditorTheme,
+} from "components/editorComponents/CodeEditor/EditorConfig";
+import {
+  CodeEditorBorder,
+  EditorModes,
+  EditorSize,
+  TabBehaviour,
+} from "components/editorComponents/CodeEditor/EditorConfig";
+import { TabbedViewContainer } from "../../styledComponents";
+import { Tab, TabPanel, Tabs, TabsList } from "@appsmith/ads";
+import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
+import JSFunctionSettingsView, {
+  type OnUpdateSettingsProps,
+} from "../../JSFunctionSettings";
+import type { CodeEditorGutter } from "components/editorComponents/CodeEditor";
+import type { JSAction, JSCollection } from "entities/JSCollection";
+
+interface Props {
+  executing: boolean;
+  onValueChange: (value: string) => void;
+  value: JSEditorTab;
+  showSettings: undefined | boolean;
+  blockCompletions: Array<BlockCompletion>;
+  customGutter: CodeEditorGutter;
+  currentJSCollection: JSCollection;
+  changePermitted: boolean;
+  onChange: (valueOrEvent: React.ChangeEvent | string) => void;
+  theme: EditorTheme.LIGHT;
+  actions: JSAction[];
+  onUpdateSettings?: (props: OnUpdateSettingsProps) => void;
+}
+
+export function OldJSEditorForm(props: Props) {
+  return (
+    <TabbedViewContainer isExecuting={props.executing}>
+      <Tabs
+        defaultValue={JSEditorTab.CODE}
+        onValueChange={props.onValueChange}
+        value={props.value}
+      >
+        <TabsList>
+          <Tab
+            data-testid={`t--js-editor-` + JSEditorTab.CODE}
+            value={JSEditorTab.CODE}
+          >
+            Code
+          </Tab>
+          {props.showSettings && (
+            <Tab
+              data-testid={`t--js-editor-` + JSEditorTab.SETTINGS}
+              value={JSEditorTab.SETTINGS}
+            >
+              Settings
+            </Tab>
+          )}
+        </TabsList>
+        <TabPanel value={JSEditorTab.CODE}>
+          <div className="js-editor-tab">
+            <LazyCodeEditor
+              AIAssisted
+              blockCompletions={props.blockCompletions}
+              border={CodeEditorBorder.NONE}
+              borderLess
+              className={"js-editor"}
+              customGutter={props.customGutter}
+              dataTreePath={`${props.currentJSCollection.name}.body`}
+              disabled={!props.changePermitted}
+              folding
+              height={"100%"}
+              hideEvaluatedValue
+              input={{
+                value: props.currentJSCollection.body,
+                onChange: props.onChange,
+              }}
+              isJSObject
+              jsObjectName={props.currentJSCollection.name}
+              mode={EditorModes.JAVASCRIPT}
+              placeholder="Let's write some code!"
+              showLightningMenu={false}
+              showLineNumbers
+              size={EditorSize.EXTENDED}
+              tabBehaviour={TabBehaviour.INDENT}
+              theme={props.theme}
+            />
+          </div>
+        </TabPanel>
+        {props.showSettings && (
+          <TabPanel value={JSEditorTab.SETTINGS}>
+            <div className="js-editor-tab">
+              <JSFunctionSettingsView
+                actions={props.actions}
+                disabled={!props.changePermitted}
+                onUpdateSettings={props.onUpdateSettings}
+              />
+            </div>
+          </TabPanel>
+        )}
+      </Tabs>
+    </TabbedViewContainer>
+  );
+}