diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx
index 7b664e119607..d47fd7f0616f 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/index.tsx
@@ -4,7 +4,7 @@ import styles from "./styles.module.css";
 
 interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  isStandalone?: boolean;
+  withoutPadding?: boolean;
   isFullWidth?: boolean;
 }
 
@@ -12,7 +12,7 @@ const Section: React.FC<SectionProps> = ({
   children,
   className,
   isFullWidth = false,
-  isStandalone = false,
+  withoutPadding = false,
   ...props
 }) => {
   const classNames = clsx(styles.section, className);
@@ -21,7 +21,7 @@ const Section: React.FC<SectionProps> = ({
     <div
       className={classNames}
       data-fullwidth={isFullWidth.toString()}
-      data-standalone={isStandalone.toString()}
+      data-withoutPadding={withoutPadding.toString()}
       {...props}
     >
       {children}
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css
index fb03da7ffbd3..ac73ba3c3bc3 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Section/styles.module.css
@@ -6,11 +6,22 @@
   max-width: 800px;
   justify-content: center;
 
-  &[data-standalone="false"] {
+  &[data-withoutPadding="true"] {
+    padding: 0;
+  }
+
+  /* We do not want padding above the first section */
+  &[data-withoutPadding="false"]:first-child {
+    padding-bottom: var(--ads-v2-spaces-6);
+  }
+
+  /* All other sections expect first will have padding top and bottom */
+  &[data-withoutPadding="false"]:not(:first-child) {
     padding-block: var(--ads-v2-spaces-6);
   }
 
-  &[data-standalone="false"]:not(:last-child) {
+  /* We will also render a border below sections expect for the last section */
+  &[data-withoutPadding="false"]:not(:last-child) {
     border-bottom: 1px solid var(--ads-v2-color-border);
   }
 
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx
index de373520ece2..cee26fa60750 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData.tsx
@@ -28,7 +28,6 @@ import { Select, Option } from "@appsmith/ads";
 const PostBodyContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 12px 0px 0px;
   background-color: var(--ads-v2-color-bg);
   height: 100%;
   gap: var(--ads-v2-spaces-4);
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 a9ae550c0ec1..802a5294572c 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx
@@ -29,7 +29,13 @@ const CommonEditorForm = (props: Props) => {
   } = useGetFormActionValues();
 
   return (
-    <Flex flexDirection="column" gap="spaces-3" w="100%">
+    <Flex
+      flex="1"
+      flexDirection="column"
+      gap="spaces-3"
+      overflow="hidden"
+      w="100%"
+    >
       <InfoFields
         actionName={action.name}
         changePermitted={props.isChangePermitted}
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields.tsx
index 9df885b2c51d..460605ddc063 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/InfoFields.tsx
@@ -3,13 +3,8 @@ import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorC
 import RequestDropdownField from "components/editorComponents/form/fields/RequestDropdownField";
 import { replayHighlightClass } from "globalStyles/portals";
 import EmbeddedDatasourcePathField from "./components/EmbeddedDatasourcePathField";
-import styled from "styled-components";
 import { Flex } from "@appsmith/ads";
-
-const DatasourceWrapper = styled.div`
-  margin-left: 8px;
-  width: 100%;
-`;
+import * as Styled from "./styles";
 
 export function InfoFields(props: {
   changePermitted: boolean;
@@ -20,8 +15,8 @@ export function InfoFields(props: {
   theme: EditorTheme.LIGHT;
 }) {
   return (
-    <Flex w="100%">
-      <div>
+    <Flex gap="spaces-4" w="100%">
+      <Styled.RequestMethodSelectContainer>
         <RequestDropdownField
           className={`t--apiFormHttpMethod ${replayHighlightClass}`}
           data-location-id={btoa("actionConfiguration.httpMethod")}
@@ -29,12 +24,11 @@ export function InfoFields(props: {
           name="actionConfiguration.httpMethod"
           options={props.options}
           placeholder="Method"
-          width={"110px"}
         >
           <div />
         </RequestDropdownField>
-      </div>
-      <DatasourceWrapper className="t--dataSourceField">
+      </Styled.RequestMethodSelectContainer>
+      <Styled.DatasourcePathFieldContainer className="t--dataSourceField">
         <EmbeddedDatasourcePathField
           actionName={props.actionName}
           codeEditorVisibleOverflow
@@ -44,7 +38,7 @@ export function InfoFields(props: {
           pluginId={props.pluginId}
           theme={props.theme}
         />
-      </DatasourceWrapper>
+      </Styled.DatasourcePathFieldContainer>
     </Flex>
   );
 }
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx
index f3e0adb90657..62b22a18b6c8 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx
@@ -22,13 +22,9 @@ const SettingsWrapper = styled.div`
     padding: 0;
   }
 `;
-const TabsListWrapper = styled.div`
-  padding: 0 var(--ads-v2-spaces-7);
-`;
 const StyledTabPanel = styled(TabPanel)`
   height: calc(100% - 50px);
   overflow: auto;
-  padding: 0 var(--ads-v2-spaces-7);
 `;
 
 export function RequestTabs(props: {
@@ -61,31 +57,37 @@ export function RequestTabs(props: {
   );
 
   return (
-    <Tabs className="h-full" onValueChange={onValueChange} value={value}>
-      <TabsListWrapper>
-        <TabsList>
-          {Object.values(API_EDITOR_TABS)
-            .filter((tab) => {
-              return !(!props.showSettings && 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>
-      </TabsListWrapper>
+    <Tabs
+      onValueChange={onValueChange}
+      style={{
+        height: "calc(100% - 36px)",
+        overflow: "hidden",
+        maxHeight: "unset",
+      }}
+      value={value}
+    >
+      <TabsList>
+        {Object.values(API_EDITOR_TABS)
+          .filter((tab) => {
+            return !(!props.showSettings && 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>
       <StyledTabPanel value={API_EDITOR_TABS.HEADERS}>
         <DatasourceConfig
           attributeName="header"
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/DatasourceConfig.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/DatasourceConfig.tsx
index 549112e7f4d0..0b338d669a7e 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/DatasourceConfig.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/DatasourceConfig.tsx
@@ -93,10 +93,7 @@ const FlexContainer = styled.div`
 const KeyValueStackContainer = styled.div`
   padding: 0;
 `;
-const KeyValueFlexContainer = styled.div`
-  padding: ${(props) => props.theme.spaces[4]}px
-    ${(props) => props.theme.spaces[14]}px 0 0;
-`;
+const KeyValueFlexContainer = styled.div``;
 const FormRowWithLabel = styled(FormRow)`
   flex-wrap: wrap;
 
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 136c51b0cce5..87615cbf7f2f 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
@@ -92,6 +92,7 @@ const DatasourceContainer = styled.div`
   position: relative;
   align-items: center;
   height: 36px;
+  gap: var(--ads-v2-spaces-4);
   .t--datasource-editor {
     background-color: var(--ads-v2-color-bg);
     .cm-s-duotone-light.CodeMirror {
@@ -101,10 +102,6 @@ const DatasourceContainer = styled.div`
       z-index: ${Indices.Layer5};
     }
   }
-
-  .t--store-as-datasource {
-    margin-left: 10px;
-  }
 `;
 
 const hintContainerStyles: React.CSSProperties = {
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts
new file mode 100644
index 000000000000..a60145281e9e
--- /dev/null
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const RequestMethodSelectContainer = styled.div`
+  width: 100px;
+  .ads-v2-select > .rc-select-selector {
+    min-width: 100px;
+  }
+`;
+
+export const DatasourcePathFieldContainer = styled.div`
+  width: 100%;
+`;
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx
index c66aa4048582..aaabc25d70d5 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData.tsx
@@ -15,7 +15,7 @@ import FormLabel from "components/editorComponents/FormLabel";
 const PostBodyContainer = styled.div`
   &&&& .CodeMirror {
     height: auto;
-    min-height: 250px;
+    min-height: 150px;
   }
 `;
 
@@ -43,7 +43,7 @@ function PostBodyData(props: Props) {
 
   return (
     <PostBodyContainer>
-      <Section isFullWidth>
+      <Section isFullWidth withoutPadding>
         <Zone layout="single_column">
           <div className="t--graphql-query-editor">
             <StyledFormLabel>Query</StyledFormLabel>
diff --git a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
index 8e5e514dc38a..c30513169b5d 100644
--- a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
+++ b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
@@ -33,7 +33,7 @@ const KeyValueStackContainer = styled.div<CustomStack>`
 // `;
 const FormRowWithLabel = styled(FormRow)`
   flex-wrap: wrap;
-  margin-bottom: ${(props) => props.theme.spaces[2] - 1}px;
+  margin-bottom: var(--ads-v2-spaces-3);
   ${FormLabel} {
     width: 100%;
   }
@@ -52,7 +52,7 @@ const Flex = styled.div<{ size: number }>`
   ${(props) =>
     props.size === 3
       ? `
-    margin-left: 5px;
+    margin-left: var(--ads-v2-spaces-3);
   `
       : null};
 `;
@@ -81,7 +81,7 @@ const DynamicTextFieldWithDropdownWrapper = styled.div`
 
 const DynamicDropdownFieldWrapper = styled.div`
   position: relative;
-  margin-left: 5px;
+  margin-left: var(--ads-v2-spaces-3);
   border-color: var(--ads-v2-color-border);
   color: var(--ads-v2-color-fg);
 
diff --git a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx
index 10e04d269f3a..a024ab6b386f 100644
--- a/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx
+++ b/app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx
@@ -101,6 +101,7 @@ const TabbedViewContainer = styled.div`
   overflow: auto;
   position: relative;
   height: 100%;
+  padding: 0 var(--ads-v2-spaces-7);
 `;
 
 const Wrapper = styled.div`
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx
index 9b6f13239406..b7ab3ad48447 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx
@@ -57,7 +57,7 @@ export const JSEditorForm = (props: Props) => {
   }
 
   return (
-    <Flex flex="1" overflow="scroll">
+    <Flex flex="1" overflowY="scroll">
       <LazyCodeEditor
         AIAssisted
         blockCompletions={props.blockCompletions}