diff --git a/app/client/cypress/support/Pages/JSEditor.ts b/app/client/cypress/support/Pages/JSEditor.ts
index 85bc32fcd3..03dc0ca510 100644
--- a/app/client/cypress/support/Pages/JSEditor.ts
+++ b/app/client/cypress/support/Pages/JSEditor.ts
@@ -51,10 +51,10 @@ export class JSEditor {
     "div.t--js-response-parse-error-call-out";
 
   private _onPageLoadSwitch = (functionName: string) =>
-    `.${functionName}-on-page-load-setting
-    input[role="switch"]`;
+    `.${functionName}-run-behavior
+    input[role="combobox"]`;
   private _onPageLoadSwitchStatus = (functionName: string) =>
-    `//div[contains(@class, '${functionName}-on-page-load-setting')]//label/input`;
+    `//div[contains(@class, '${functionName}-run-behavior-setting')]//label/input`;
 
   private _jsObjName = this.locator._activeEntityTab;
   public _jsObjTxt = this.locator._activeEntityTabInput;
diff --git a/app/client/src/PluginActionEditor/constants/PluginActionConstants.ts b/app/client/src/PluginActionEditor/constants/PluginActionConstants.ts
index ce50c573b8..cb3947afcd 100644
--- a/app/client/src/PluginActionEditor/constants/PluginActionConstants.ts
+++ b/app/client/src/PluginActionEditor/constants/PluginActionConstants.ts
@@ -12,11 +12,13 @@ export const RUN_BEHAVIOR = {
     label: "On page load",
     subText: "Query runs when the page loads or when manually triggered",
     value: ActionRunBehaviour.ON_PAGE_LOAD,
+    children: "On page load",
   },
   MANUAL: {
     label: "Manual",
     subText: "Query only runs when called in an event or JS with .run()",
     value: ActionRunBehaviour.MANUAL,
+    children: "Manual",
   },
 };
 
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.test.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.test.tsx
index 5dff0fde77..a27f813cc8 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.test.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.test.tsx
@@ -2,14 +2,9 @@ import React from "react";
 import "@testing-library/jest-dom";
 import { render, screen } from "test/testUtils";
 import { JSFunctionSettings } from "./JSFunctionSettings";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { JSObjectFactory } from "test/factories/Actions/JSObject";
 import { ActionRunBehaviour } from "PluginActionEditor/constants/PluginActionConstants";
 
-// Mock the useFeatureFlag hook
-jest.mock("utils/hooks/useFeatureFlag");
-const mockUseFeatureFlag = useFeatureFlag as jest.Mock;
-
 const JSObject = JSObjectFactory.build();
 
 const actions = JSObject.actions;
@@ -21,9 +16,7 @@ describe("JSFunctionSettings", () => {
     jest.clearAllMocks();
   });
 
-  it("disables the switch when the component is disabled", () => {
-    mockUseFeatureFlag.mockReturnValue(true);
-
+  it("disables the run behavior when the component is disabled", () => {
     render(
       <JSFunctionSettings
         actions={actions}
@@ -35,9 +28,7 @@ describe("JSFunctionSettings", () => {
     expect(screen.getByLabelText(actions[0].name)).toBeDisabled();
   });
 
-  it("renders the correct number of switches for the actions", () => {
-    mockUseFeatureFlag.mockReturnValue(true);
-
+  it("renders the correct number of dropdowns for the actions", () => {
     render(
       <JSFunctionSettings
         actions={actions}
@@ -46,12 +37,10 @@ describe("JSFunctionSettings", () => {
       />,
     );
 
-    expect(screen.getAllByRole("switch")).toHaveLength(actions.length);
+    expect(screen.getAllByRole(`combobox`)).toHaveLength(actions.length);
   });
 
-  it("renders the switch state correctly", () => {
-    mockUseFeatureFlag.mockReturnValue(true);
-
+  it("renders the run behavior correctly", () => {
     const updatedJSActions = [
       {
         ...actions[0],
@@ -71,10 +60,14 @@ describe("JSFunctionSettings", () => {
       />,
     );
 
-    const switchElement1 = screen.getByLabelText(updatedJSActions[0].name);
-    const switchElement2 = screen.getByLabelText(updatedJSActions[1].name);
+    const selectedItem1 = screen.getByText("On page load", {
+      selector: ".myFun1-run-behavior-setting .rc-select-selection-item",
+    });
+    const selectedItem2 = screen.getByText("Manual", {
+      selector: ".myFun2-run-behavior-setting .rc-select-selection-item",
+    });
 
-    expect(switchElement1).toBeChecked();
-    expect(switchElement2).not.toBeChecked();
+    expect(selectedItem1).toBeInTheDocument();
+    expect(selectedItem2).toBeInTheDocument();
   });
 });
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx
index 169ff0d3ed..8a4aa39593 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx
@@ -45,7 +45,8 @@ interface FunctionSettingsRowProps extends Omit<Props, "actions"> {
 
 const FunctionSettingRow = (props: FunctionSettingsRowProps) => {
   const [runBehavior, setRunBehavior] = useState(props.action.runBehavior);
-  const options = RUN_BEHAVIOR_VALUES as Omit<SelectOptionProps, "children">[];
+  const options = RUN_BEHAVIOR_VALUES as SelectOptionProps[];
+  const selectedValue = options.find((opt) => opt.value === runBehavior);
 
   const onSelectOptions = useCallback(
     (newRunBehavior: ActionRunBehaviour) => {
@@ -67,29 +68,30 @@ const FunctionSettingRow = (props: FunctionSettingsRowProps) => {
   return (
     <Flex
       alignItems="center"
-      className={`t--async-js-function-settings ${props.action.name}-on-page-load-setting`}
+      className={`t--async-js-function-settings ${props.action.name}-run-behavior-setting`}
       gap="spaces-4"
       id={`${props.action.name}-settings`}
       justifyContent="space-between"
       key={props.action.id}
       w="100%"
     >
-      <Text renderAs="label">{props.action.name}</Text>
+      <Text htmlFor={props.action.id} renderAs="label">
+        {props.action.name}
+      </Text>
       <StyledSelect
         data-testid={`execute-on-page-load-${props.action.id}`}
-        defaultValue={runBehavior}
+        defaultValue={selectedValue}
+        id={props.action.id}
         isDisabled={props.disabled}
         listHeight={240}
         onSelect={onSelectOptions}
         size="sm"
-        value={runBehavior}
-        virtual
+        value={selectedValue}
       >
         {options.map((option) => (
           <Option
             aria-label={option.label}
             disabled={option.disabled}
-            isDisabled={option.isDisabled}
             key={option.value}
             label={option.label}
             value={option.value}