diff --git a/app/client/cypress/limited-tests.txt b/app/client/cypress/limited-tests.txt
index aa00835ffb0e..d6a75d10297c 100644
--- a/app/client/cypress/limited-tests.txt
+++ b/app/client/cypress/limited-tests.txt
@@ -1,5 +1,6 @@
 # To run only limited tests - give the spec names in below format:
-cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js
+cypress/e2e/Regression/ServerSide/ApiTests/API_Edit_spec.js
+cypress/e2e/Regression/ClientSide/VisualTests/JSEditorIndent_spec.js
 # For running all specs - uncomment below:
 #cypress/e2e/**/**/*
 
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx
index f69ad963999f..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="auto" p="spaces-4" 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/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx
index 0568618920df..95f511872f85 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx
@@ -1,19 +1,12 @@
 import React from "react";
-import { Tab, TabsList } from "@appsmith/ads";
+import { Flex } from "@appsmith/ads";
 import { type Action } from "entities/Action";
 import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
-import { API_EDITOR_TABS } from "PluginActionEditor/constants/CommonApiConstants";
-import { API_EDITOR_TAB_TITLES, createMessage } from "ee/constants/messages";
 
 import useGetFormActionValues from "./hooks/useGetFormActionValues";
-import { DatasourceConfig } from "./components/DatasourceConfig";
 import { HintMessages } from "./HintMessages";
 import { InfoFields } from "./InfoFields";
-import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
-import ApiAuthentication from "./components/ApiAuthentication";
-import { useSelectedFormTab } from "./hooks/useSelectedFormTab";
-import { getHeadersCount, getParamsCount } from "./utils";
-import * as Styled from "./styles";
+import { RequestTabs } from "./RequestTabs";
 
 interface Props {
   httpMethodOptions: { value: string }[];
@@ -26,13 +19,7 @@ interface Props {
 }
 
 const CommonEditorForm = (props: Props) => {
-  const {
-    action,
-    bodyUIComponent,
-    formName,
-    isChangePermitted,
-    paginationUiComponent,
-  } = props;
+  const { action } = props;
   const hintMessages = action.messages || [];
   const theme = EditorTheme.LIGHT;
   const {
@@ -43,93 +30,39 @@ const CommonEditorForm = (props: Props) => {
     datasourceParams,
   } = useGetFormActionValues();
 
-  const [currentTab, setCurrentTab] = useSelectedFormTab();
-  const headersCount = getHeadersCount(
-    actionHeaders,
-    datasourceHeaders,
-    autoGeneratedHeaders,
-  );
-  const paramsCount = getParamsCount(actionParams, datasourceHeaders);
-
   return (
-    <Styled.Tabs
+    <Flex
       data-testid={props.dataTestId}
-      onValueChange={setCurrentTab}
-      value={currentTab}
+      flex="1"
+      flexDirection="column"
+      gap="spaces-3"
+      overflow="hidden"
+      w="100%"
     >
-      <Styled.FormHeader>
-        <InfoFields
-          actionName={action.name}
-          changePermitted={props.isChangePermitted}
-          formName={props.formName}
-          options={props.httpMethodOptions}
-          pluginId={action.pluginId}
-          theme={theme}
-        />
-        <HintMessages hintMessages={hintMessages} />
-        <TabsList>
-          {Object.values(API_EDITOR_TABS)
-            .filter((tab) => {
-              return tab !== API_EDITOR_TABS.SETTINGS;
-            })
-            .map((tab) => (
-              <Tab
-                data-testid={`t--api-editor-${tab}`}
-                key={tab}
-                notificationCount={
-                  tab == "HEADERS"
-                    ? headersCount
-                    : tab == "PARAMS"
-                      ? paramsCount
-                      : undefined
-                }
-                value={tab}
-              >
-                {createMessage(API_EDITOR_TAB_TITLES[tab])}
-              </Tab>
-            ))}
-        </TabsList>
-      </Styled.FormHeader>
-
-      <Styled.TabPanel value={API_EDITOR_TABS.HEADERS}>
-        <DatasourceConfig
-          attributeName="header"
-          autogeneratedHeaders={autoGeneratedHeaders}
-          data={datasourceHeaders}
-        />
-        <KeyValueFieldArray
-          actionConfig={actionHeaders}
-          dataTreePath={`${action.name}.config.headers`}
-          hideHeader
-          label="Headers"
-          name="actionConfiguration.headers"
-          placeholder="Value"
-          pushFields={isChangePermitted}
-          theme={theme}
-        />
-      </Styled.TabPanel>
-      <Styled.TabPanel value={API_EDITOR_TABS.PARAMS}>
-        <DatasourceConfig attributeName={"param"} data={datasourceParams} />
-        <KeyValueFieldArray
-          actionConfig={actionParams}
-          dataTreePath={`${action.name}.config.queryParameters`}
-          hideHeader
-          label="Params"
-          name="actionConfiguration.queryParameters"
-          pushFields={isChangePermitted}
-          theme={theme}
-        />
-      </Styled.TabPanel>
-      <Styled.TabPanel className="h-full" value={API_EDITOR_TABS.BODY}>
-        {bodyUIComponent}
-      </Styled.TabPanel>
-      <Styled.TabPanel value={API_EDITOR_TABS.PAGINATION}>
-        {paginationUiComponent}
-      </Styled.TabPanel>
-      <Styled.TabPanel value={API_EDITOR_TABS.AUTHENTICATION}>
-        <ApiAuthentication formName={formName} />
-      </Styled.TabPanel>
-    </Styled.Tabs>
+      <InfoFields
+        actionName={action.name}
+        changePermitted={props.isChangePermitted}
+        formName={props.formName}
+        options={props.httpMethodOptions}
+        pluginId={action.pluginId}
+        theme={theme}
+      />
+      <HintMessages hintMessages={hintMessages} />
+      <RequestTabs
+        actionConfigurationHeaders={actionHeaders}
+        actionConfigurationParams={actionParams}
+        actionName={action.name}
+        autogeneratedHeaders={autoGeneratedHeaders}
+        bodyUIComponent={props.bodyUIComponent}
+        datasourceHeaders={datasourceHeaders}
+        datasourceParams={datasourceParams}
+        formName={props.formName}
+        paginationUiComponent={props.paginationUiComponent}
+        pushFields={props.isChangePermitted}
+        showSettings={false}
+        theme={theme}
+      />
+    </Flex>
   );
 };
 
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx
index 89d6ada7e90d..455b36dad46b 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx
@@ -155,7 +155,7 @@ const StyledTooltip = styled.span<{ width?: number }>`
   position: absolute;
   z-index: 100000;
   max-width: 300px;
-  top: 125%;
+  bottom: 125%;
   left: calc(-10px + ${(props) => (props.width ? props.width / 2 : 0)}px);
   margin-left: -60px;
 
@@ -172,7 +172,7 @@ const StyledTooltip = styled.span<{ width?: number }>`
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
-    border-color: transparent transparent var(--ads-v2-color-bg-emphasis-max)
+    border-color: var(--ads-v2-color-bg-emphasis-max) transparent transparent
       transparent;
   }
 
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts
index 3c72ed1e1bf2..a60145281e9e 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts
@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { Tabs as AdsTabs, TabPanel as AdsTabPanel } from "@appsmith/ads";
 
 export const RequestMethodSelectContainer = styled.div`
   width: 100px;
@@ -11,21 +10,3 @@ export const RequestMethodSelectContainer = styled.div`
 export const DatasourcePathFieldContainer = styled.div`
   width: 100%;
 `;
-
-export const FormHeader = styled.div`
-  position: sticky;
-  top: calc(-1 * var(--ads-v2-spaces-4));
-  padding-top: var(--ads-v2-spaces-4);
-  margin-top: calc(-1 * var(--ads-v2-spaces-4));
-  z-index: var(--ads-v2-z-index-1);
-  background-color: var(--ads-color-background);
-  height: 100px;
-`;
-
-export const Tabs = styled(AdsTabs)`
-  height: max-content;
-`;
-
-export const TabPanel = styled(AdsTabPanel)`
-  margin: 0 auto;
-`;
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx
index c8fb86c43aa9..69b7a4d0ed27 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx
@@ -23,6 +23,7 @@ const UQIEditorForm = () => {
       alignItems="center"
       data-testid="t--uqi-editor-form"
       flexDirection="column"
+      overflowY="scroll"
       w="100%"
     >
       <FormRender