diff --git a/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx b/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx
index 964058836cda..62662323becd 100644
--- a/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx
+++ b/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import React from "react";
 import { importRemixIcon, importSvg } from "./loadables";
+
 const AddMoreIcon = importRemixIcon(
   async () => import("remixicon-react/AddCircleLineIcon"),
 );
@@ -1063,6 +1064,10 @@ const MaximizeV3Icon = importSvg(
   async () => import("../__assets__/icons/ads/maximize-v3-icon.svg"),
 );
 
+const ExternalLinkIcon = importRemixIcon(
+  async () => import("remixicon-react/ExternalLinkLineIcon"),
+);
+
 import PlayIconPNG from "../__assets__/icons/control/play-icon.png";
 
 function PlayIconPNGWrapper() {
@@ -1211,6 +1216,7 @@ const ICON_LOOKUP = {
   "link-2": Link2,
   "link-unlink": LinkUnlinkIcon,
   "links-line": LinksLineIcon,
+  "external-link-line": ExternalLinkIcon,
   "lock-2-line": Lock2LineIcon,
   "lock-password-line": LockPasswordLineIcon,
   "lock-unlock-line": LockUnlockLineIcon,
diff --git a/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx b/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx
index 4783e6c1f3ee..859839018f80 100644
--- a/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx
+++ b/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx
@@ -15,6 +15,7 @@ interface Props {
   title: string;
   children: React.ReactNode;
   dataTestId?: string;
+  disabled?: boolean;
 }
 
 const Variables = css`
@@ -43,6 +44,7 @@ export const ToolbarSettingsPopover = (props: Props) => {
       <PopoverTrigger>
         <ToggleButton
           data-testId={props.dataTestId}
+          disabled={props.disabled}
           icon="settings-2-line"
           isSelected={isOpen}
           onClick={handleButtonClick}
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx
index 4a85da9d0ee4..e5be9eb367ec 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx
@@ -12,7 +12,7 @@ const PluginActionForm = () => {
   const { plugin } = usePluginActionContext();
 
   return (
-    <Flex flex="1" overflow="hidden" p="spaces-2" w="100%">
+    <Flex flex="1" overflow="hidden" p="spaces-4" w="100%">
       {plugin.uiComponent === UIComponentTypes.ApiEditorForm && (
         <APIEditorForm />
       )}
diff --git a/app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx b/app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx
index 77edc839d8cf..f5a3f0395d81 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx
@@ -88,7 +88,7 @@ const PluginActionSettingsPopover = (props: SettingsProps) => {
         {props.docsLink && (
           <LearnMoreLink
             className="t--action-settings-documentation-link"
-            endIcon="share-box-line"
+            endIcon="external-link-line"
             kind="secondary"
             onClick={handleLearnMoreClick}
           >
diff --git a/app/client/src/assets/icons/menu/js-function.svg b/app/client/src/assets/icons/menu/js-function.svg
index 765ab10a37c7..692d9b426c7f 100644
--- a/app/client/src/assets/icons/menu/js-function.svg
+++ b/app/client/src/assets/icons/menu/js-function.svg
@@ -1 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path fill="#858282" d="M0 11.6667V10.8227H1.21754C1.6746 10.8227 2.02923 10.6977 2.2814 10.4476C2.53358 10.1976 2.65967 9.84591 2.65967 9.39267V4.65714H0.744707V3.81319H2.65967V2.58242C2.65967 2.0823 2.81334 1.69548 3.12067 1.42198C3.42801 1.14066 3.8575 1 4.40914 1H6.28863V1.83223H4.40914C3.87326 1.83223 3.60533 2.0862 3.60533 2.59414V3.81319H6.28863V4.65714H3.60533V9.42784C3.60533 10.1077 3.38861 10.6508 2.95518 11.0571C2.52176 11.4635 1.94254 11.6667 1.21754 11.6667H0Z"/><path fill="#858282" d="M6.32604 9.55678L8.59563 6.23956L6.46789 3.10989H7.57904L8.90297 5.19634C8.98965 5.337 9.08028 5.5011 9.17484 5.68864C9.26941 5.5011 9.36003 5.337 9.44672 5.19634L10.7706 3.10989H11.87L9.74224 6.25128L12 9.55678H10.8888L9.47036 7.35311C9.38368 7.21245 9.28517 7.03272 9.17484 6.81392L8.85568 7.35311L7.42537 9.55678H6.32604Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M8.14645 6.14645C8.34171 5.95118 8.65829 5.95118 8.85355 6.14645L10.5 7.79289L12.1464 6.14645C12.3417 5.95118 12.6583 5.95118 12.8536 6.14645C13.0488 6.34171 13.0488 6.65829 12.8536 6.85355L11.2071 8.5L12.8536 10.1464C13.0488 10.3417 13.0488 10.6583 12.8536 10.8536C12.6583 11.0488 12.3417 11.0488 12.1464 10.8536L10.5 9.20711L8.85355 10.8536C8.65829 11.0488 8.34171 11.0488 8.14645 10.8536C7.95118 10.6583 7.95118 10.3417 8.14645 10.1464L9.79289 8.5L8.14645 6.85355C7.95118 6.65829 7.95118 6.34171 8.14645 6.14645Z"
+        fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M8.5 3C7.11929 3 6 4.11929 6 5.5V9.5C6 11.433 4.433 13 2.5 13H1.5C1.22386 13 1 12.7761 1 12.5C1 12.2239 1.22386 12 1.5 12H2.5C3.88071 12 5 10.8807 5 9.5V5.5C5 3.567 6.567 2 8.5 2C8.77614 2 9 2.22386 9 2.5C9 2.77614 8.77614 3 8.5 3Z"
+        fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M2 6.5C2 6.22386 2.22386 6 2.5 6H8.5C8.77614 6 9 6.22386 9 6.5C9 6.77614 8.77614 7 8.5 7H2.5C2.22386 7 2 6.77614 2 6.5Z"
+        fill="currentColor"/>
+</svg>
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx
index f4455a59cad9..06f3df58cd2f 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { IDEToolbar } from "IDE";
+import React, { useState } from "react";
+import { IDEToolbar, ToolbarSettingsPopover } from "IDE";
 import { JSFunctionRun } from "./components/JSFunctionRun";
 import type { JSActionDropdownOption } from "./types";
 import type { SaveActionNameParams } from "PluginActionEditor";
@@ -8,6 +8,7 @@ import type { JSAction, JSCollection } from "entities/JSCollection";
 import type { DropdownOnSelect } from "@appsmith/ads-old";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+import { createMessage, JS_EDITOR_SETTINGS } from "ee/constants/messages";
 import { JSHeader } from "./JSHeader";
 import { JSFunctionSettings } from "./components/JSFunctionSettings";
 import type { JSFunctionSettingsProps } from "./components/old/JSFunctionSettings";
@@ -48,6 +49,8 @@ export const JSEditorToolbar = (props: Props) => {
     FEATURE_FLAG.release_actions_redesign_enabled,
   );
 
+  const [isOpen, setIsOpen] = useState(false);
+
   // If the action redesign is not enabled, render the JSHeader component
   if (!isActionRedesignEnabled) {
     return <JSHeader {...props} />;
@@ -71,11 +74,18 @@ export const JSEditorToolbar = (props: Props) => {
           />
         </div>
         {props.showSettings ? (
-          <JSFunctionSettings
-            actions={props.jsActions}
-            disabled={!props.changePermitted}
-            onUpdateSettings={props.onUpdateSettings}
-          />
+          <ToolbarSettingsPopover
+            dataTestId={"t--js-editor-SETTINGS"}
+            handleOpenChange={setIsOpen}
+            isOpen={isOpen}
+            title={createMessage(JS_EDITOR_SETTINGS.TITLE)}
+          >
+            <JSFunctionSettings
+              actions={props.jsActions}
+              disabled={!props.changePermitted}
+              onUpdateSettings={props.onUpdateSettings}
+            />
+          </ToolbarSettingsPopover>
         ) : null}
 
         {props.hideContextMenuOnEditor ? null : props.contextMenu}
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionItem.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionItem.tsx
new file mode 100644
index 000000000000..4b2913086726
--- /dev/null
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionItem.tsx
@@ -0,0 +1,22 @@
+import React, { useCallback } from "react";
+import { MenuItem } from "@appsmith/ads";
+import type { JSActionDropdownOption } from "../types";
+import * as Styled from "./styles";
+
+export const JSFunctionItem = ({
+  onSelect,
+  option,
+}: {
+  option: JSActionDropdownOption;
+  onSelect: (option: JSActionDropdownOption) => void;
+}) => {
+  const onFunctionSelect = useCallback(() => {
+    onSelect(option);
+  }, [onSelect, option]);
+
+  return (
+    <MenuItem onSelect={onFunctionSelect} size="sm">
+      <Styled.MenuTitle>{option.label}</Styled.MenuTitle>
+    </MenuItem>
+  );
+};
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.tsx
index 6f5f1c14c963..f4b9ff413a75 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.tsx
@@ -8,13 +8,13 @@ import {
   Flex,
   Menu,
   MenuContent,
-  MenuItem,
   MenuTrigger,
   Tooltip,
 } from "@appsmith/ads";
 import type { JSActionDropdownOption } from "../types";
 import { RUN_BUTTON_DEFAULTS, testLocators } from "../constants";
 import { createMessage, NO_JS_FUNCTION_TO_RUN } from "ee/constants/messages";
+import { JSFunctionItem } from "./JSFunctionItem";
 
 interface Props {
   disabled: boolean;
@@ -33,16 +33,21 @@ interface Props {
  *
  */
 export const JSFunctionRun = (props: Props) => {
+  const { onSelect } = props;
+
   const isActionRedesignEnabled = useFeatureFlag(
     FEATURE_FLAG.release_actions_redesign_enabled,
   );
 
   // Callback function to handle function selection from the dropdown menu
-  const onFunctionSelect = useCallback((option: JSActionDropdownOption) => {
-    if (props.onSelect) {
-      props.onSelect(option.value);
-    }
-  }, []);
+  const onFunctionSelect = useCallback(
+    (option: JSActionDropdownOption) => {
+      if (onSelect) {
+        onSelect(option.value);
+      }
+    },
+    [onSelect],
+  );
 
   if (!isActionRedesignEnabled) {
     return <OldJSFunctionRun {...props} />;
@@ -58,20 +63,18 @@ export const JSFunctionRun = (props: Props) => {
             isDisabled={props.disabled}
             kind="tertiary"
             size="sm"
-            startIcon=""
+            startIcon="js-function"
           >
             {props.selected.label}
           </Button>
         </MenuTrigger>
         <MenuContent align="end">
           {props.options.map((option) => (
-            <MenuItem
+            <JSFunctionItem
               key={option.label}
-              onSelect={() => onFunctionSelect(option)}
-              size="sm"
-            >
-              {option.label}
-            </MenuItem>
+              onSelect={onFunctionSelect}
+              option={option}
+            />
           ))}
         </MenuContent>
       </Menu>
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 f5a54149d5b2..3662a47e06c4 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
@@ -1,6 +1,6 @@
 import React from "react";
 import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "test/testUtils";
+import { render, screen } from "test/testUtils";
 import { JSFunctionSettings } from "./JSFunctionSettings";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { JSObjectFactory } from "test/factories/Actions/JSObject";
@@ -31,8 +31,6 @@ describe("JSFunctionSettings", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button"));
-
     expect(screen.getByLabelText(actions[0].name)).toBeDisabled();
   });
 
@@ -47,8 +45,6 @@ describe("JSFunctionSettings", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button"));
-
     expect(screen.getAllByRole("switch")).toHaveLength(actions.length);
   });
 
@@ -74,8 +70,6 @@ describe("JSFunctionSettings", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button"));
-
     const switchElement1 = screen.getByLabelText(updatedJSActions[0].name);
     const switchElement2 = screen.getByLabelText(updatedJSActions[1].name);
 
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 da28d4a826c4..6251e8b43a1e 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx
@@ -8,7 +8,6 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { createMessage, JS_EDITOR_SETTINGS } from "ee/constants/messages";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
-import { ToolbarSettingsPopover } from "IDE";
 
 interface Props {
   disabled: boolean;
@@ -73,8 +72,6 @@ export const JSFunctionSettings = (props: Props) => {
     FEATURE_FLAG.release_actions_redesign_enabled,
   );
 
-  const [isOpen, setIsOpen] = useState(false);
-
   // If the feature flag is disabled, render the old version of the component
   if (!isActionRedesignEnabled) {
     return (
@@ -88,25 +85,18 @@ export const JSFunctionSettings = (props: Props) => {
 
   // Render the new version of the component
   return (
-    <ToolbarSettingsPopover
-      dataTestId={"t--js-editor-SETTINGS"}
-      handleOpenChange={setIsOpen}
-      isOpen={isOpen}
-      title={createMessage(JS_EDITOR_SETTINGS.TITLE)}
-    >
-      <Flex flexDirection="column" gap="spaces-4" w="100%">
-        <Text kind="heading-xs">
-          {createMessage(JS_EDITOR_SETTINGS.ON_LOAD_TITLE)}
-        </Text>
-        {props.actions.map((action) => (
-          <FunctionSettingRow
-            action={action}
-            disabled={props.disabled}
-            key={action.id}
-            onUpdateSettings={props.onUpdateSettings}
-          />
-        ))}
-      </Flex>
-    </ToolbarSettingsPopover>
+    <Flex flexDirection="column" gap="spaces-4" w="100%">
+      <Text kind="heading-xs">
+        {createMessage(JS_EDITOR_SETTINGS.ON_LOAD_TITLE)}
+      </Text>
+      {props.actions.map((action) => (
+        <FunctionSettingRow
+          action={action}
+          disabled={props.disabled}
+          key={action.id}
+          onUpdateSettings={props.onUpdateSettings}
+        />
+      ))}
+    </Flex>
   );
 };
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/styles.ts b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/styles.ts
new file mode 100644
index 000000000000..2671337911d3
--- /dev/null
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/styles.ts
@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import { Text } from "@appsmith/ads";
+
+export const MenuTitle = styled(Text)`
+  --button-font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 30ch;
+`;